Changeset 20403


Ignore:
Timestamp:
Jan 26, 2013, 2:02:17 AM (11 years ago)
Author:
mistic100
Message:

show that buttons can be disabled

Location:
extensions/SocialButtons/template
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • extensions/SocialButtons/template/admin.tpl

    r20374 r20403  
    22
    33{html_style}{literal}
    4 img.grayscale {
     4.socialbutt.disabled thead img {
    55  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale"); /* Firefox 10+ */
    66  filter: gray; /* IE6-9 */
    … …  
    1111{footer_script}{literal}
    1212jQuery("input.enable").change(function() {
    13   $parent = $(this).closest("table");
     13  $parent = $(this).closest("div.socialbutt");
    1414  if (!$(this).is(":checked")) {
    1515    $parent.find("thead label").attr("title", "{/literal}{'Enable'|@translate|escape:javascript}{literal}");
    16     $parent.find("thead img").addClass('grayscale');
    17     $parent.find("tbody").hide();
     16    $parent.addClass('disabled');
     17    $parent.removeClass('enabled');
    1818  }
    1919  else {
    2020    $parent.find("thead label").attr("title", "{/literal}{'Disable'|@translate|escape:javascript}{literal}");
    21     $parent.find("thead img").removeClass('grayscale');
    22     $parent.find("tbody").show();
     21    $parent.addClass('enabled');
     22    $parent.removeClass('disabled');
    2323  }
    2424});
    … …  
    5151
    5252
    53 <div class="socialbutt"> {* <!-- twitter --> *}
     53<div class="socialbutt {if not $twitter.enabled}disabled{else}enabled{/if}"> {* <!-- twitter --> *}
    5454<table>
    5555  <thead>
    5656    <tr><td colspan="2">
    5757      <label title="{if $twitter.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
    58         <img {if not $twitter.enabled}class="grayscale"{/if} src="{$SOCIALBUTT_PATH}template/images/twitter_logo.png"/>
     58        <img src="{$SOCIALBUTT_PATH}template/images/twitter_logo.png"/>
    5959        <input class="enable" style="display:none;" type="checkbox" name="twitter[enabled]" {if $twitter.enabled}checked="checked"{/if}/>
    6060      </label>
    6161    </td></tr>
    6262  </thead>
    63   <tbody {if not $twitter.enabled}style="display:none;"{/if}>
     63  <tbody>
    6464    <tr class="property">
    6565      <td>
    … …  
    7070    <tr class="button">
    7171      <td><label>
    72         20px
    7372        <img src="{$SOCIALBUTT_PATH}template/images/twitter_small.png"/>
    7473        <input type="radio" name="twitter[size]" value="small" {if $twitter.size=='small'}checked="checked"{/if}/>
    … …  
    7776        <input type="radio" name="twitter[size]" value="large" {if $twitter.size=='large'}checked="checked"{/if}/>
    7877        <img src="{$SOCIALBUTT_PATH}template/images/twitter_large.png"/>
    79         28px
    8078      </label></td>
    8179    </tr>
    … …  
    10199</div> {* <!-- twitter --> *}
    102100
    103 <div class="socialbutt"> {* <!-- google --> *}
     101<div class="socialbutt {if not $google.enabled}disabled{else}enabled{/if}"> {* <!-- google --> *}
    104102<table>
    105103  <thead>
    106104    <tr><td colspan="2">
    107105      <label title="{if $google.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
    108         <img {if not $google.enabled}class="grayscale"{/if} src="{$SOCIALBUTT_PATH}template/images/google_logo.png"/>
     106        <img src="{$SOCIALBUTT_PATH}template/images/google_logo.png"/>
    109107        <input class="enable" style="display:none;" type="checkbox" name="google[enabled]" {if $google.enabled}checked="checked"{/if}/>
    110108      </label>
    111109    </td></tr>
    112110  </thead>
    113   <tbody {if not $google.enabled}style="display:none;"{/if}>
     111  <tbody>
    114112    <tr class="property">
    115113      <td>
    … …  
    120118    <tr class="button">
    121119      <td><label>
    122         15px
    123120        <img src="{$SOCIALBUTT_PATH}template/images/google_small.png"/>
    124121        <input type="radio" name="google[size]" value="small" {if $google.size=='small'}checked="checked"{/if}/>
    … …  
    127124        <input type="radio" name="google[size]" value="medium" {if $google.size=='medium'}checked="checked"{/if}/>
    128125        <img src="{$SOCIALBUTT_PATH}template/images/google_medium.png"/>
    129         20px
    130       </label></td>
    131     </tr>
    132     <tr class="button">
    133       <td><label>
    134         24px
     126      </label></td>
     127    </tr>
     128    <tr class="button">
     129      <td><label>
    135130        <img src="{$SOCIALBUTT_PATH}template/images/google_standard.png"/>
    136131        <input type="radio" name="google[size]" value="standard" {if $google.size=='standard'}checked="checked"{/if}/>
    … …  
    139134        <input type="radio" name="google[size]" value="tall" {if $google.size=='tall'}checked="checked"{/if}/>
    140135        <img src="{$SOCIALBUTT_PATH}template/images/google_tall.png"/>
    141         60px
    142136      </label></td>
    143137    </tr>
    … …  
    158152<br>
    159153
    160 <div class="socialbutt"> {* <!-- pinterest --> *}
     154<div class="socialbutt {if not $pinterest.enabled}disabled{else}enabled{/if}"> {* <!-- pinterest --> *}
    161155<table>
    162156  <thead>
    163157    <tr><td colspan="2">
    164158      <label title="{if $pinterest.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
    165         <img {if not $pinterest.enabled}class="grayscale"{/if} src="{$SOCIALBUTT_PATH}template/images/pinterest_logo.png"/>
     159        <img src="{$SOCIALBUTT_PATH}template/images/pinterest_logo.png"/>
    166160        <input class="enable" style="display:none;" type="checkbox" name="pinterest[enabled]" {if $pinterest.enabled}checked="checked"{/if}/>
    167161      </label>
    168162    </td></tr>
    169163  </thead>
    170   <tbody {if not $pinterest.enabled}style="display:none;"{/if}>
     164  <tbody>
    171165    <tr class="property">
    172166      <td>
    … …  
    191185</div> {* <!-- pinterest --> *}
    192186
    193 <div class="socialbutt"> {* <!-- facebook --> *}
     187<div class="socialbutt {if not $facebook.enabled}disabled{else}enabled{/if}"> {* <!-- facebook --> *}
    194188<table>
    195189  <thead>
    196190    <tr><td colspan="2">
    197191      <label title="{if $facebook.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
    198         <img {if not $facebook.enabled}class="grayscale"{/if} src="{$SOCIALBUTT_PATH}template/images/facebook_logo.png"/>
     192        <img src="{$SOCIALBUTT_PATH}template/images/facebook_logo.png"/>
    199193        <input class="enable" style="display:none;" type="checkbox" name="facebook[enabled]" {if $facebook.enabled}checked="checked"{/if}/>
    200194      </label>
    201195    </td></tr>
    202196  </thead>
    203   <tbody {if not $facebook.enabled}style="display:none;"{/if}>
     197  <tbody>
    204198    <tr class="property">
    205199      <td>
    … …  
    235229<br>
    236230
    237 <div class="socialbutt"> {* <!-- tumblr --> *}
     231<div class="socialbutt {if not $tumblr.enabled}disabled{else}enabled{/if}"> {* <!-- tumblr --> *}
    238232<table>
    239233  <thead>
    240234    <tr><td colspan="2">
    241235      <label title="{if $tumblr.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
    242         <img {if not $tumblr.enabled}class="grayscale"{/if} src="{$SOCIALBUTT_PATH}template/images/tumblr_logo.png"/>
     236        <img src="{$SOCIALBUTT_PATH}template/images/tumblr_logo.png"/>
    243237        <input class="enable" style="display:none;" type="checkbox" name="tumblr[enabled]" {if $tumblr.enabled}checked="checked"{/if}/>
    244238      </label>
    245239    </td></tr>
    246240  </thead>
    247   <tbody {if not $tumblr.enabled}style="display:none;"{/if}>
     241  <tbody>
    248242    <tr class="property">
    249243      <td>

  • extensions/SocialButtons/template/style.css

    r20358 r20403  
    11.socialbutt {
    22  display:inline-block;
     3  position:relative;
    34  vertical-align:top;
    4   margin:10px;
     5  margin:8px;
    56  width:500px;
    6   border:10px solid #f9f9f9;
     7  border:8px solid #f9f9f9;
    78  border-radius:10px;
    89  box-shadow:0 0 5px rgba(0,0,0,0.2);
    … …  
    1112  border-spacing: 0px;
    1213  width:100%;
     14}
     15
     16.socialbutt.disabled table tbody {
     17  display:none;
    1318}
    1419
    … …  
    2631.socialbutt thead td {
    2732  border-top:none;
     33}
     34.socialbutt thead label {
     35  display:block;
     36  width:100%;
    2837}
    2938.socialbutt tr td:last-child {
    … …  
    94103  border-color: #3399DD #3399DD #2288CC;
    95104}
     105
     106.socialbutt thead label:before {
     107  position:absolute;
     108  top:15px;
     109  left:10px;
     110  font-size:22px;
     111  color:#000;
     112}
     113.socialbutt.disabled thead label:before {
     114  content:"\2610";
     115}
     116.socialbutt.enabled thead label:before {
     117  content:"\2611";
     118}
Note: See TracChangeset for help on using the changeset viewer.