Ignore:
Timestamp:
01/26/13 02:02:17 (7 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.