source: extensions/SocialButtons/template/admin.tpl @ 24871

Revision 24788, 14.6 KB checked in by mistic100, 7 years ago (diff)

improve facebook light link and clean code & conf

Line 
1{combine_css path=$SOCIALBUTT_PATH|@cat:"template/style.css"}
2
3{html_style}{literal}
4.socialbutt.disabled thead img {
5  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
6  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+ */
7  filter: gray; /* IE6-9 */
8}
9{/literal}
10{if $light}
11.not-light {ldelim} display:none; }
12{/if}
13{/html_style}
14
15{footer_script}{literal}
16jQuery("input.enable").change(function() {
17  $parent = $(this).closest("div.socialbutt");
18  if (!$(this).is(":checked")) {
19    $parent.find("thead label").attr("title", "{/literal}{'Enable'|@translate|escape:javascript}{literal}");
20    $parent.addClass('disabled');
21    $parent.removeClass('enabled');
22  }
23  else {
24    $parent.find("thead label").attr("title", "{/literal}{'Disable'|@translate|escape:javascript}{literal}");
25    $parent.addClass('enabled');
26    $parent.removeClass('disabled');
27  }
28});
29
30jQuery("input#light_mode").on('change', function() {
31  if ($(this).is(":checked")) {
32    $('.not-light').hide();
33  }
34  else {
35    $('.not-light').show();
36  }
37});
38
39jQuery(".showInfo").tipTip({
40  delay: 0,
41  fadeIn: 200,
42  fadeOut: 200,
43  maxWidth: '300px',
44  defaultPosition: 'bottom'
45});
46{/literal}{/footer_script}
47
48
49<div class="titrePage">
50        <h2>Social Buttons</h2>
51</div>
52
53
54<form method="post" action="" class="properties" style="text-align:center;">
55
56<div class="socialbutt">
57<table>
58  <tr class="property">
59    <td>
60      {'Button position on picture page'|@translate}
61    </td>
62    <td>
63      <label><input type="radio" name="position" value="top" {if $position=='top'}checked="checked"{/if}/> {'Top'|@translate}</label>
64      <label><input type="radio" name="position" value="bottom" {if $position=='bottom'}checked="checked"{/if}/> {'Bottom'|@translate}</label>
65      <label><input type="radio" name="position" value="toolbar" {if $position=='toolbar'}checked="checked"{/if}/> {'Toolbar'|@translate}</label>
66    </td>
67  </tr>
68  <tr class="property">
69    <td>
70      {'Display buttons'|@translate}
71    </td>
72    <td>
73      <label><input type="radio" name="on_index" value="true" {if $on_index}checked="checked"{/if}/> {'on photo and album'|@translate}</label><br>
74      <label><input type="radio" name="on_index" value="false" {if not $on_index}checked="checked"{/if}/> {'only on photo'|@translate}</label>
75    </td>
76  </tr>
77  <tr class="property">
78    <td>
79      {'Shared picture size'|@translate}
80    </td>
81    <td>
82      {html_options name="img_size" values=$img_sizes output=$img_sizes|translate selected=$img_size}
83    </td>
84  </tr>
85  <tr class="property">
86    <td>
87      <label for="light_mode">{'Light mode'|@translate}</label>
88    </td>
89    <td>
90      <input type="checkbox" id="light_mode" name="light" {if $light}checked="checked"{/if}/>
91      <a class="showInfo" title="{'When light mode is activated no external script is loaded, it <b>speeds up the load of the page and disables user tracking</b> but also disables annotations and in-page popups.'|@translate}">i</a>
92    </td>
93  </tr>
94</table>
95</div>
96
97<br>
98
99
100<div class="socialbutt {if not $twitter.enabled}disabled{else}enabled{/if}"> {* <!-- twitter --> *}
101<table>
102  <thead>
103    <tr><td colspan="2">
104      <label title="{if $twitter.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
105        <img src="{$SOCIALBUTT_PATH}template/images/twitter_logo.png"/>
106        <input class="enable" style="display:none;" type="checkbox" name="twitter[enabled]" {if $twitter.enabled}checked="checked"{/if}/>
107      </label>
108    </td></tr>
109  </thead>
110  <tbody>
111    <tr class="property">
112      <td>
113        {'Button type'|@translate}
114      </td>
115      <td></td>
116    </tr>
117    <tr class="button">
118      <td><label>
119        <img src="{$SOCIALBUTT_PATH}template/images/twitter_small.png"/>
120        <input type="radio" name="twitter[size]" value="small" {if $twitter.size=='small'}checked="checked"{/if}/>
121      </label></td>
122      <td><label>
123        <input type="radio" name="twitter[size]" value="large" {if $twitter.size=='large'}checked="checked"{/if}/>
124        <img src="{$SOCIALBUTT_PATH}template/images/twitter_large.png"/>
125      </label></td>
126    </tr>
127    <tr class="property not-light">
128      <td>
129        {'Annotation'|@translate}
130      </td>
131      <td>
132        <label><input type="radio" name="twitter[count]" value="none" {if $twitter.count=='none'}checked="checked"{/if}/> {'None'|@translate}</label><br>
133        <label><input type="radio" name="twitter[count]" value="bubble" {if $twitter.count=='bubble'}checked="checked"{/if}/> {'Bubble'|@translate}</label><br>
134      </td>
135    </tr>
136    <tr class="property">
137      <td>
138        <label for="twitter_via">{'Via'|@translate}</label>
139      </td>
140      <td>
141        @ <input type="text" id="twitter_via" name="twitter[via]" value="{$twitter.via}"/>
142      </td>
143    </tr>
144  </tbody>
145</table>
146</div> {* <!-- twitter --> *}
147
148<div class="socialbutt {if not $google.enabled}disabled{else}enabled{/if}"> {* <!-- google --> *}
149<table>
150  <thead>
151    <tr><td colspan="2">
152      <label title="{if $google.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
153        <img src="{$SOCIALBUTT_PATH}template/images/google_logo.png"/>
154        <input class="enable" style="display:none;" type="checkbox" name="google[enabled]" {if $google.enabled}checked="checked"{/if}/>
155      </label>
156    </td></tr>
157  </thead>
158  <tbody>
159    <tr class="property">
160      <td>
161        {'Button type'|@translate}
162      </td>
163      <td></td>
164    </tr>
165    <tr class="button">
166      <td><label>
167        <img src="{$SOCIALBUTT_PATH}template/images/google_small.png"/>
168        <input type="radio" name="google[size]" value="small" {if $google.size=='small'}checked="checked"{/if}/>
169      </label></td>
170      <td><label>
171        <input type="radio" name="google[size]" value="medium" {if $google.size=='medium'}checked="checked"{/if}/>
172        <img src="{$SOCIALBUTT_PATH}template/images/google_medium.png"/>
173      </label></td>
174    </tr>
175    <tr class="button">
176      <td><label>
177        <img src="{$SOCIALBUTT_PATH}template/images/google_standard.png"/>
178        <input type="radio" name="google[size]" value="standard" {if $google.size=='standard'}checked="checked"{/if}/>
179      </label></td>
180      <td><label>
181        <input type="radio" name="google[size]" value="tall" {if $google.size=='tall'}checked="checked"{/if}/>
182        <img src="{$SOCIALBUTT_PATH}template/images/google_tall.png"/>
183      </label></td>
184    </tr>
185    <tr class="property not-light">
186      <td>
187        {'Annotation'|@translate}
188      </td>
189      <td>
190        <label><input type="radio" name="google[annotation]" value="none" {if $google.annotation=='none'}checked="checked"{/if}/> {'None'|@translate}</label><br>
191        <label><input type="radio" name="google[annotation]" value="bubble" {if $google.annotation=='bubble'}checked="checked"{/if}/> {'Bubble'|@translate}</label><br>
192        <label><input type="radio" name="google[annotation]" value="inline" {if $google.annotation=='inline'}checked="checked"{/if}/> {'Inline text'|@translate}</label>
193      </td>
194    </tr>
195  </tbody>
196</table>
197</div> {* <!-- google --> *}
198
199<br>
200
201<div class="socialbutt {if not $facebook.enabled}disabled{else}enabled{/if}"> {* <!-- facebook --> *}
202<table>
203  <thead>
204    <tr><td colspan="2">
205      <label title="{if $facebook.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
206        <img src="{$SOCIALBUTT_PATH}template/images/facebook_logo.png"/>
207        <input class="enable" style="display:none;" type="checkbox" name="facebook[enabled]" {if $facebook.enabled}checked="checked"{/if}/>
208      </label>
209    </td></tr>
210  </thead>
211  <tbody>
212    <tr class="property">
213      <td>
214        {'Button type'|@translate}
215      </td>
216      <td></td>
217    </tr>
218    <tr class="button">
219      <td><label>
220        <img src="{$SOCIALBUTT_PATH}template/images/facebook_light.png"/>
221        <input type="radio" name="facebook[color]" value="light" {if $facebook.color=='light'}checked="checked"{/if}/>
222      </label></td>
223      <td><label>
224        <input type="radio" name="facebook[color]" value="dark" {if $facebook.color=='dark'}checked="checked"{/if}/>
225        <img src="{$SOCIALBUTT_PATH}template/images/facebook_dark.png"/>
226      </label></td>
227    </tr>
228    <tr class="property not-light">
229      <td>
230        {'Annotation'|@translate}
231      </td>
232      <td>
233        <!-- <label><input type="radio" name="facebook[layout]" value="none" {if $facebook.layout=='none'}checked="checked"{/if}/> {'None'|@translate}</label><br> -->
234        <label><input type="radio" name="facebook[layout]" value="button_count" {if $facebook.layout=='button_count'}checked="checked"{/if}/> {'Right bubble'|@translate}</label><br>
235        <label><input type="radio" name="facebook[layout]" value="box_count" {if $facebook.layout=='box_count'}checked="checked"{/if}/> {'Top bubble'|@translate}</label><br>
236        <label><input type="radio" name="facebook[layout]" value="standard" {if $facebook.layout=='standard'}checked="checked"{/if}/> {'Inline text'|@translate}</label>
237      </td>
238    </tr>
239  </tbody>
240</table>
241</div> {* <!-- facebook --> *}
242
243<div class="socialbutt {if not $reddit.enabled}disabled{else}enabled{/if}"> {* <!-- reddit --> *}
244<table>
245  <thead>
246    <tr><td colspan="2">
247      <label title="{if $reddit.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
248        <img src="{$SOCIALBUTT_PATH}template/images/reddit_logo.png"/>
249        <input class="enable" style="display:none;" type="checkbox" name="reddit[enabled]" {if $reddit.enabled}checked="checked"{/if}/>
250      </label>
251    </td></tr>
252  </thead>
253  <tbody>
254    <tr class="property">
255      <td>
256        {'Button type'|@translate}
257      </td>
258      <td></td>
259    </tr>
260    <tr class="button">
261      <td><label>
262        <img src="http://fr.reddit.com/static/spreddit7.gif"/>
263        <input type="radio" name="reddit[type]" value="spreddit7" {if $reddit.type=='spreddit7'}checked="checked"{/if}/>
264      </label></td>
265      <td><label>
266        <input type="radio" name="reddit[type]" value="spreddit6" {if $reddit.type=='spreddit6'}checked="checked"{/if}/>
267        <img src="http://fr.reddit.com/static/spreddit6.gif"/>
268      </label></td>
269    </tr>
270    <tr class="button">
271      <td><label>
272        <img src="http://fr.reddit.com/static/spreddit1.gif"/>
273        <input type="radio" name="reddit[type]" value="spreddit1" {if $reddit.type=='spreddit1'}checked="checked"{/if}/>
274      </label></td>
275      <td><label>
276        <input type="radio" name="reddit[type]" value="interactive" {if $reddit.type=='interactive'}checked="checked"{/if}/>
277        <img src="{$SOCIALBUTT_PATH}template/images/reddit_interactive.png"/>
278      </label></td>
279    </tr>
280    <tr class="property">
281      <td>
282        <label for="reddit_community">{'Community'|@translate}</label>
283      </td>
284      <td>
285        <input type="text" id="reddit_community" name="reddit[community]" value="{$reddit.community}"/>
286      </td>
287    </tr>
288  </tbody>
289</table>
290</div> {* <!-- reddit --> *}
291
292<br>
293
294<div class="socialbutt {if not $tumblr.enabled}disabled{else}enabled{/if}"> {* <!-- tumblr --> *}
295<table>
296  <thead>
297    <tr><td colspan="2">
298      <label title="{if $tumblr.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
299        <img src="{$SOCIALBUTT_PATH}template/images/tumblr_logo.png"/>
300        <input class="enable" style="display:none;" type="checkbox" name="tumblr[enabled]" {if $tumblr.enabled}checked="checked"{/if}/>
301      </label>
302    </td></tr>
303  </thead>
304  <tbody>
305    <tr class="property">
306      <td>
307        {'Button type'|@translate}
308      </td>
309      <td></td>
310    </tr>
311    <tr class="button">
312      <td><label>
313        <img src="http://platform.tumblr.com/v1/share_1.png"/>
314        <input type="radio" name="tumblr[type]" value="share_1" {if $tumblr.type=='share_1'}checked="checked"{/if}/>
315      </label></td>
316      <td><label>
317        <input type="radio" name="tumblr[type]" value="share_1T" {if $tumblr.type=='share_1T'}checked="checked"{/if}/>
318        <img src="http://platform.tumblr.com/v1/share_1T.png"/>
319      </label></td>
320    </tr>
321    <tr class="button">
322      <td><label>
323        <img src="http://platform.tumblr.com/v1/share_2.png"/>
324        <input type="radio" name="tumblr[type]" value="share_2" {if $tumblr.type=='share_2'}checked="checked"{/if}/>
325      </label></td>
326      <td><label>
327        <input type="radio" name="tumblr[type]" value="share_2T" {if $tumblr.type=='share_2T'}checked="checked"{/if}/>
328        <img src="http://platform.tumblr.com/v1/share_2T.png"/>
329      </label></td>
330    </tr>
331    <tr class="button">
332      <td><label>
333        <img src="http://platform.tumblr.com/v1/share_3.png"/>
334        <input type="radio" name="tumblr[type]" value="share_3" {if $tumblr.type=='share_3'}checked="checked"{/if}/>
335      </label></td>
336      <td><label>
337        <input type="radio" name="tumblr[type]" value="share_3T" {if $tumblr.type=='share_3T'}checked="checked"{/if}/>
338        <img src="http://platform.tumblr.com/v1/share_3T.png"/>
339      </label></td>
340    </tr>
341    <tr class="button">
342      <td><label>
343        <img src="http://platform.tumblr.com/v1/share_4.png"/>
344        <input type="radio" name="tumblr[type]" value="share_4" {if $tumblr.type=='share_4'}checked="checked"{/if}/>
345      </label></td>
346      <td><label>
347        <input type="radio" name="tumblr[type]" value="share_4T" {if $tumblr.type=='share_4T'}checked="checked"{/if}/>
348        <img src="http://platform.tumblr.com/v1/share_4T.png"/>
349      </label></td>
350    </tr>
351  </tbody>
352</table>
353</div> {* <!-- tumblr --> *}
354
355<div class="socialbutt {if not $pinterest.enabled}disabled{else}enabled{/if}"> {* <!-- pinterest --> *}
356<table>
357  <thead>
358    <tr><td colspan="2">
359      <label title="{if $pinterest.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
360        <img src="{$SOCIALBUTT_PATH}template/images/pinterest_logo.png"/>
361        <input class="enable" style="display:none;" type="checkbox" name="pinterest[enabled]" {if $pinterest.enabled}checked="checked"{/if}/>
362      </label>
363    </td></tr>
364  </thead>
365  <tbody>
366    <tr class="property not-light">
367      <td>
368        {'Annotation'|@translate}
369      </td>
370      <td>
371        <label><input type="radio" name="pinterest[layout]" value="none" {if $pinterest.layout=='none'}checked="checked"{/if}/> {'None'|@translate}</label><br>
372        <label><input type="radio" name="pinterest[layout]" value="horizontal" {if $pinterest.layout=='horizontal'}checked="checked"{/if}/> {'Right bubble'|@translate}</label><br>
373        <label><input type="radio" name="pinterest[layout]" value="vertical" {if $pinterest.layout=='vertical'}checked="checked"{/if}/> {'Top bubble'|@translate}</label>
374      </td>
375    </tr>
376  </tbody>
377</table>
378</div> {* <!-- pinterest --> *}
379
380<br>
381
382<div class="submit">
383  <input type="submit" value="{'Save Settings'|@translate}" name="submit"/>
384</div>
385
386</form>
Note: See TracBrowser for help on using the repository browser.