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

Revision 24757, 13.0 KB checked in by mistic100, 6 years ago (diff)

add light mode: no script loaded
tests in migration task
add an id to the div on picture page

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      <label for="light_mode">{'Light mode'|@translate}</label>
80    </td>
81    <td>
82      <input type="checkbox" id="light_mode" name="light" {if $light}checked="checked"{/if}/>
83      <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>
84    </td>
85  </tr>
86</table>
87</div>
88
89<br>
90
91
92<div class="socialbutt {if not $twitter.enabled}disabled{else}enabled{/if}"> {* <!-- twitter --> *}
93<table>
94  <thead>
95    <tr><td colspan="2">
96      <label title="{if $twitter.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
97        <img src="{$SOCIALBUTT_PATH}template/images/twitter_logo.png"/>
98        <input class="enable" style="display:none;" type="checkbox" name="twitter[enabled]" {if $twitter.enabled}checked="checked"{/if}/>
99      </label>
100    </td></tr>
101  </thead>
102  <tbody>
103    <tr class="property">
104      <td>
105        {'Button type'|@translate}
106      </td>
107      <td></td>
108    </tr>
109    <tr class="button">
110      <td><label>
111        <img src="{$SOCIALBUTT_PATH}template/images/twitter_small.png"/>
112        <input type="radio" name="twitter[size]" value="small" {if $twitter.size=='small'}checked="checked"{/if}/>
113      </label></td>
114      <td><label>
115        <input type="radio" name="twitter[size]" value="large" {if $twitter.size=='large'}checked="checked"{/if}/>
116        <img src="{$SOCIALBUTT_PATH}template/images/twitter_large.png"/>
117      </label></td>
118    </tr>
119    <tr class="property not-light">
120      <td>
121        {'Annotation'|@translate}
122      </td>
123      <td>
124        <label><input type="radio" name="twitter[count]" value="none" {if $twitter.count=='none'}checked="checked"{/if}/> {'None'|@translate}</label><br>
125        <label><input type="radio" name="twitter[count]" value="bubble" {if $twitter.count=='bubble'}checked="checked"{/if}/> {'Bubble'|@translate}</label><br>
126      </td>
127    </tr>
128    <tr class="property">
129      <td>
130        <label for="twitter_via">{'Via'|@translate}</label>
131      </td>
132      <td>
133        @ <input type="text" id="twitter_via" name="twitter[via]" value="{$twitter.via}"/>
134      </td>
135    </tr>
136  </tbody>
137</table>
138</div> {* <!-- twitter --> *}
139
140<div class="socialbutt {if not $google.enabled}disabled{else}enabled{/if}"> {* <!-- google --> *}
141<table>
142  <thead>
143    <tr><td colspan="2">
144      <label title="{if $google.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
145        <img src="{$SOCIALBUTT_PATH}template/images/google_logo.png"/>
146        <input class="enable" style="display:none;" type="checkbox" name="google[enabled]" {if $google.enabled}checked="checked"{/if}/>
147      </label>
148    </td></tr>
149  </thead>
150  <tbody>
151    <tr class="property">
152      <td>
153        {'Button type'|@translate}
154      </td>
155      <td></td>
156    </tr>
157    <tr class="button">
158      <td><label>
159        <img src="{$SOCIALBUTT_PATH}template/images/google_small.png"/>
160        <input type="radio" name="google[size]" value="small" {if $google.size=='small'}checked="checked"{/if}/>
161      </label></td>
162      <td><label>
163        <input type="radio" name="google[size]" value="medium" {if $google.size=='medium'}checked="checked"{/if}/>
164        <img src="{$SOCIALBUTT_PATH}template/images/google_medium.png"/>
165      </label></td>
166    </tr>
167    <tr class="button">
168      <td><label>
169        <img src="{$SOCIALBUTT_PATH}template/images/google_standard.png"/>
170        <input type="radio" name="google[size]" value="standard" {if $google.size=='standard'}checked="checked"{/if}/>
171      </label></td>
172      <td><label>
173        <input type="radio" name="google[size]" value="tall" {if $google.size=='tall'}checked="checked"{/if}/>
174        <img src="{$SOCIALBUTT_PATH}template/images/google_tall.png"/>
175      </label></td>
176    </tr>
177    <tr class="property not-light">
178      <td>
179        {'Annotation'|@translate}
180      </td>
181      <td>
182        <label><input type="radio" name="google[annotation]" value="none" {if $google.annotation=='none'}checked="checked"{/if}/> {'None'|@translate}</label><br>
183        <label><input type="radio" name="google[annotation]" value="bubble" {if $google.annotation=='bubble'}checked="checked"{/if}/> {'Bubble'|@translate}</label><br>
184        <label><input type="radio" name="google[annotation]" value="inline" {if $google.annotation=='inline'}checked="checked"{/if}/> {'Inline text'|@translate}</label>
185      </td>
186    </tr>
187  </tbody>
188</table>
189</div> {* <!-- google --> *}
190
191<br>
192
193<div class="socialbutt {if not $pinterest.enabled}disabled{else}enabled{/if}"> {* <!-- pinterest --> *}
194<table>
195  <thead>
196    <tr><td colspan="2">
197      <label title="{if $pinterest.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
198        <img src="{$SOCIALBUTT_PATH}template/images/pinterest_logo.png"/>
199        <input class="enable" style="display:none;" type="checkbox" name="pinterest[enabled]" {if $pinterest.enabled}checked="checked"{/if}/>
200      </label>
201    </td></tr>
202  </thead>
203  <tbody>
204    <tr class="property">
205      <td>
206        {'Shared picture size'|@translate}
207      </td>
208      <td>
209        {html_options name="pinterest[img_size]" values=$img_sizes output=$img_sizes|translate selected=$pinterest.img_size}
210      </td>
211    </tr>
212    <tr class="property not-light">
213      <td>
214        {'Annotation'|@translate}
215      </td>
216      <td>
217        <label><input type="radio" name="pinterest[layout]" value="none" {if $pinterest.layout=='none'}checked="checked"{/if}/> {'None'|@translate}</label><br>
218        <label><input type="radio" name="pinterest[layout]" value="horizontal" {if $pinterest.layout=='horizontal'}checked="checked"{/if}/> {'Right bubble'|@translate}</label><br>
219        <label><input type="radio" name="pinterest[layout]" value="vertical" {if $pinterest.layout=='vertical'}checked="checked"{/if}/> {'Top bubble'|@translate}</label>
220      </td>
221    </tr>
222  </tbody>
223</table>
224</div> {* <!-- pinterest --> *}
225
226<div class="socialbutt {if not $facebook.enabled}disabled{else}enabled{/if}"> {* <!-- facebook --> *}
227<table>
228  <thead>
229    <tr><td colspan="2">
230      <label title="{if $facebook.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
231        <img src="{$SOCIALBUTT_PATH}template/images/facebook_logo.png"/>
232        <input class="enable" style="display:none;" type="checkbox" name="facebook[enabled]" {if $facebook.enabled}checked="checked"{/if}/>
233      </label>
234    </td></tr>
235  </thead>
236  <tbody>
237    <tr class="property">
238      <td>
239        {'Button type'|@translate}
240      </td>
241      <td></td>
242    </tr>
243    <tr class="button">
244      <td><label>
245        <img src="{$SOCIALBUTT_PATH}template/images/facebook_light.png"/>
246        <input type="radio" name="facebook[color]" value="light" {if $facebook.color=='light'}checked="checked"{/if}/>
247      </label></td>
248      <td><label>
249        <input type="radio" name="facebook[color]" value="dark" {if $facebook.color=='dark'}checked="checked"{/if}/>
250        <img src="{$SOCIALBUTT_PATH}template/images/facebook_dark.png"/>
251      </label></td>
252    </tr>
253    <tr class="property not-light">
254      <td>
255        {'Annotation'|@translate}
256      </td>
257      <td>
258        <!-- <label><input type="radio" name="facebook[layout]" value="none" {if $facebook.layout=='none'}checked="checked"{/if}/> {'None'|@translate}</label><br> -->
259        <label><input type="radio" name="facebook[layout]" value="button_count" {if $facebook.layout=='button_count'}checked="checked"{/if}/> {'Right bubble'|@translate}</label><br>
260        <label><input type="radio" name="facebook[layout]" value="box_count" {if $facebook.layout=='box_count'}checked="checked"{/if}/> {'Top bubble'|@translate}</label><br>
261        <label><input type="radio" name="facebook[layout]" value="standard" {if $facebook.layout=='standard'}checked="checked"{/if}/> {'Inline text'|@translate}</label>
262      </td>
263    </tr>
264  </tbody>
265</table>
266</div> {* <!-- facebook --> *}
267
268<br>
269
270<div class="socialbutt {if not $tumblr.enabled}disabled{else}enabled{/if}"> {* <!-- tumblr --> *}
271<table>
272  <thead>
273    <tr><td colspan="2">
274      <label title="{if $tumblr.enabled}{'Disable'|@translate}{else}{'Enable'|@translate}{/if}">
275        <img src="{$SOCIALBUTT_PATH}template/images/tumblr_logo.png"/>
276        <input class="enable" style="display:none;" type="checkbox" name="tumblr[enabled]" {if $tumblr.enabled}checked="checked"{/if}/>
277      </label>
278    </td></tr>
279  </thead>
280  <tbody>
281    <tr class="property">
282      <td>
283        {'Button type'|@translate}
284      </td>
285      <td></td>
286    </tr>
287    <tr class="button">
288      <td><label>
289        <img src="http://platform.tumblr.com/v1/share_1.png"/>
290        <input type="radio" name="tumblr[type]" value="share_1" {if $tumblr.type=='share_1'}checked="checked"{/if}/>
291      </label></td>
292      <td><label>
293        <input type="radio" name="tumblr[type]" value="share_1T" {if $tumblr.type=='share_1T'}checked="checked"{/if}/>
294        <img src="http://platform.tumblr.com/v1/share_1T.png"/>
295      </label></td>
296    </tr>
297    <tr class="button">
298      <td><label>
299        <img src="http://platform.tumblr.com/v1/share_2.png"/>
300        <input type="radio" name="tumblr[type]" value="share_2" {if $tumblr.type=='share_2'}checked="checked"{/if}/>
301      </label></td>
302      <td><label>
303        <input type="radio" name="tumblr[type]" value="share_2T" {if $tumblr.type=='share_2T'}checked="checked"{/if}/>
304        <img src="http://platform.tumblr.com/v1/share_2T.png"/>
305      </label></td>
306    </tr>
307    <tr class="button">
308      <td><label>
309        <img src="http://platform.tumblr.com/v1/share_3.png"/>
310        <input type="radio" name="tumblr[type]" value="share_3" {if $tumblr.type=='share_3'}checked="checked"{/if}/>
311      </label></td>
312      <td><label>
313        <input type="radio" name="tumblr[type]" value="share_3T" {if $tumblr.type=='share_3T'}checked="checked"{/if}/>
314        <img src="http://platform.tumblr.com/v1/share_3T.png"/>
315      </label></td>
316    </tr>
317    <tr class="button">
318      <td><label>
319        <img src="http://platform.tumblr.com/v1/share_4.png"/>
320        <input type="radio" name="tumblr[type]" value="share_4" {if $tumblr.type=='share_4'}checked="checked"{/if}/>
321      </label></td>
322      <td><label>
323        <input type="radio" name="tumblr[type]" value="share_4T" {if $tumblr.type=='share_4T'}checked="checked"{/if}/>
324        <img src="http://platform.tumblr.com/v1/share_4T.png"/>
325      </label></td>
326    </tr>
327    <tr class="property">
328      <td>
329        {'Shared picture size'|@translate}
330      </td>
331      <td>
332        {html_options name="tumblr[img_size]" values=$img_sizes output=$img_sizes|translate selected=$tumblr.img_size}
333      </td>
334    </tr>
335  </tbody>
336</table>
337</div> {* <!-- tumblr --> *}
338
339<br>
340
341<div class="submit">
342  <input type="submit" value="{'Save Settings'|@translate}" name="submit"/>
343</div>
344
345</form>
Note: See TracBrowser for help on using the repository browser.