use fontello for every checkbox on config screens + split configuration.tpl file

git-svn-id: http://piwigo.org/svn/trunk@29539 68402e56-0260-453c-a942-63ccdbb3a9ee

1 files changed, 232 insertions, 0 deletions

diff --git a/admin/themes/default/template/configuration_sizes.tpl b/admin/themes/default/template/configuration_sizes.tpl
new file mode 100644
index 000000000..ff03d377a
--- /dev/null
+++ b/admin/themes/default/template/configuration_sizes.tpl
@@ -0,0 +1,232 @@
+{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
+
+{footer_script}
+(function(){
+  var labelMaxWidth = "{'Maximum width'|translate}",
+      labelWidth = "{'Width'|translate}",
+      labelMaxHeight = "{'Maximum height'|translate}",
+      labelHeight = "{'Height'|translate}";
+
+  function toggleResizeFields(size) {
+    var checkbox = jQuery("[name=original_resize]");
+    var needToggle = jQuery("#sizeEdit-original");
+
+    if (jQuery(checkbox).is(':checked')) {
+      needToggle.show();
+    }
+    else {
+      needToggle.hide();
+    }
+  }
+
+  toggleResizeFields("original");
+  jQuery("[name=original_resize]").click(function () {
+    toggleResizeFields("original");
+  });
+
+  jQuery("a[id^='sizeEditOpen-']").click(function(){
+    var sizeName = jQuery(this).attr("id").split("-")[1];
+    jQuery("#sizeEdit-"+sizeName).toggle();
+    jQuery(this).hide();
+		return false;
+  });
+
+  jQuery(".cropToggle").click(function() {
+    var labelBoxWidth = jQuery(this).parents('table.sizeEditForm').find('td.sizeEditWidth');
+    var labelBoxHeight = jQuery(this).parents('table.sizeEditForm').find('td.sizeEditHeight');
+
+    if (jQuery(this).is(':checked')) {
+      jQuery(labelBoxWidth).html(labelWidth);
+      jQuery(labelBoxHeight).html(labelHeight);
+    }
+    else {
+      jQuery(labelBoxWidth).html(labelMaxWidth);
+      jQuery(labelBoxHeight).html(labelMaxHeight);
+    }
+  });
+
+  jQuery("#showDetails").click(function() {
+    jQuery(".sizeDetails").show();
+    jQuery(this).css("visibility", "hidden");
+		return false;
+  });
+}());
+{/footer_script}
+
+{html_style}
+.sizeEnable { width:50px; }
+.sizeEnable .mustEnable { display:inline-block; width:13px; margin:0 3px; }
+.sizeEditForm { margin:0 0 10px 20px; }
+.sizeEdit { display:none; }
+#sizesConf table { margin:0; }
+.showDetails { padding:0; }
+.sizeDetails { display:none;margin-left:10px; }
+.sizeEditOpen { margin-left:10px; }
+{/html_style}
+
+<h2>{'Piwigo configuration'|translate} {$TABSHEET_TITLE}</h2>
+
+<form method="post" action="{$F_ACTION}" class="properties">
+
+<div id="configContent">
+
+  <fieldset id="sizesConf">
+    <legend>{'Original Size'|translate}</legend>
+  {if $is_gd}
+    <div>
+      {'Resize after upload disabled due to the use of GD as graphic library'|translate}
+      <input type="checkbox" name="original_resize"disabled="disabled" style="visibility: hidden">
+      <input type="hidden" name="original_resize_maxwidth" value="{$sizes.original_resize_maxwidth}">
+      <input type="hidden" name="original_resize_maxheight" value="{$sizes.original_resize_maxheight}">
+      <input type="hidden" name="original_resize_quality" value="{$sizes.original_resize_quality}">
+    </div>
+  {else}
+    <div>
+      <label class="font-checkbox">
+        <span class="icon-check"></span>
+        <input type="checkbox" name="original_resize" {if ($sizes.original_resize)}checked="checked"{/if}>
+        {'Resize after upload'|translate}
+      </label>
+    </div>
+
+    <table id="sizeEdit-original">
+      <tr>
+        <th>{'Maximum width'|translate}</th>
+        <td>
+          <input type="text" name="original_resize_maxwidth" value="{$sizes.original_resize_maxwidth}" size="4" maxlength="4"{if isset($ferrors.original_resize_maxwidth)} class="dError"{/if}> {'pixels'|translate}
+          {if isset($ferrors.original_resize_maxwidth)}<span class="dErrorDesc" title="{$ferrors.original_resize_maxwidth}">!</span>{/if}
+        </td>
+      </tr>
+      <tr>
+        <th>{'Maximum height'|translate}</th>
+        <td>
+          <input type="text" name="original_resize_maxheight" value="{$sizes.original_resize_maxheight}" size="4" maxlength="4"{if isset($ferrors.original_resize_maxheight)} class="dError"{/if}> {'pixels'|translate}
+          {if isset($ferrors.original_resize_maxheight)}<span class="dErrorDesc" title="{$ferrors.original_resize_maxheight}">!</span>{/if}
+        </td>
+      </tr>
+      <tr>
+        <th>{'Image Quality'|translate}</th>
+        <td>
+          <input type="text" name="original_resize_quality" value="{$sizes.original_resize_quality}" size="3" maxlength="3"{if isset($ferrors.original_resize_quality)} class="dError"{/if}> %
+          {if isset($ferrors.original_resize_quality)}<span class="dErrorDesc" title="{$ferrors.original_resize_quality}">!</span>{/if}
+        </td>
+      </tr>
+    </table>
+  {/if}
+  </fieldset>
+
+  <fieldset id="multiSizesConf">
+    <legend>{'Multiple Size'|translate}</legend>
+
+    <div class="showDetails">
+      <a href="#" id="showDetails"{if isset($ferrors)} style="display:none"{/if}>{'show details'|translate}</a>
+    </div>
+
+    <table style="margin:0">
+    {foreach from=$derivatives item=d key=type}
+      <tr>
+        <td>
+          <label>
+            {if $d.must_enable}
+            <span class="sizeEnable">
+              <span class="mustEnable">&#x2714;</span>
+            </span>
+            {else}
+            <span class="sizeEnable font-checkbox">
+              <span class="icon-check"></span>
+              <input type="checkbox" name="d[{$type}][enabled]" {if $d.enabled}checked="checked"{/if}>
+            </span>
+            {/if}
+            {$type|translate}
+          </label>
+        </td>
+
+        <td>
+          <span class="sizeDetails"{if isset($ferrors)} style="display:inline"{/if}>{$d.w} x {$d.h} {'pixels'|translate}{if $d.crop}, {'Crop'|translate|lower}{/if}</span>
+        </td>
+
+        <td>
+          <span class="sizeDetails"{if isset($ferrors) and !isset($ferrors.$type)} style="display:inline"{/if}>
+            <a href="#" id="sizeEditOpen-{$type}" class="sizeEditOpen">{'edit'|translate}</a>
+          </span>
+        </td>
+      </tr>
+
+      <tr id="sizeEdit-{$type}" class="sizeEdit" {if isset($ferrors.$type)} style="display:block"{/if}>
+        <td colspan="3">
+          <table class="sizeEditForm">
+          {if !$d.must_square}
+            <tr>
+              <td colspan="2">
+                <label class="font-checkbox">
+                <span class="icon-check"></span>
+                <input type="checkbox" class="cropToggle" name="d[{$type}][crop]" {if $d.crop}checked="checked"{/if}>
+                  {'Crop'|translate}
+                </label>
+              </td>
+            </tr>
+          {/if}
+            <tr>
+              <td class="sizeEditWidth">{if $d.must_square or $d.crop}{'Width'|translate}{else}{'Maximum width'|translate}{/if}</td>
+              <td>
+                <input type="text" name="d[{$type}][w]" maxlength="4" size="4" value="{$d.w}"{if isset($ferrors.$type.w)} class="dError"{/if}> {'pixels'|translate}
+                {if isset($ferrors.$type.w)}<span class="dErrorDesc" title="{$ferrors.$type.w}">!</span>{/if}
+              </td>
+            </tr>
+          {if !$d.must_square}
+            <tr>
+              <td class="sizeEditHeight">{if $d.crop}{'Height'|translate}{else}{'Maximum height'|translate}{/if}</td>
+              <td>
+                <input type="text" name="d[{$type}][h]" maxlength="4" size="4"  value="{$d.h}"{if isset($ferrors.$type.h)} class="dError"{/if}> {'pixels'|translate}
+                {if isset($ferrors.$type.h)}<span class="dErrorDesc" title="{$ferrors.$type.h}">!</span>{/if}
+              </td>
+            </tr>
+          {/if}
+            <tr>
+              <td>{'Sharpen'|translate}</td>
+              <td>
+                <input type="text" name="d[{$type}][sharpen]" maxlength="4" size="4"  value="{$d.sharpen}"{if isset($ferrors.$type.sharpen)} class="dError"{/if}> %
+                {if isset($ferrors.$type.sharpen)}<span class="dErrorDesc" title="{$ferrors.$type.sharpen}">!</span>{/if}
+              </td>
+            </tr>
+          </table> {* #sizeEdit *}
+        </td>
+      </tr>
+    {/foreach}
+    </table>
+
+    <p style="margin:10px 0 0 0;{if isset($ferrors)} display:block;{/if}" class="sizeDetails">
+      {'Image Quality'|translate}
+      <input type="text" name="resize_quality" value="{$resize_quality}" size="3" maxlength="3"{if isset($ferrors.resize_quality)} class="dError"{/if}> %
+      {if isset($ferrors.resize_quality)}<span class="dErrorDesc" title="{$ferrors.resize_quality}">!</span>{/if}
+    </p>
+    <p style="margin:10px 0 0 0;{if isset($ferrors)} display:block;{/if}" class="sizeDetails">
+      <a href="{$F_ACTION}&action=restore_settings" onclick="return confirm('{'Are you sure?'|translate|@escape:javascript}');">{'Reset to default values'|translate}</a>
+    </p>
+
+  {if !empty($custom_derivatives)}
+    <fieldset class="sizeDetails">
+      <legend>{'custom'|translate}</legend>
+
+      <table style="margin:0">
+      {foreach from=$custom_derivatives item=time key=custom}
+        <tr><td>
+          <label class="font-checkbox">
+            <span class="icon-check"></span>
+            <input type="checkbox" name="delete_custom_derivative_{$custom}"> {'Delete'|translate} {$custom} ({'Last hit'|translate}: {$time})
+          </label>
+        </td></tr>
+      {/foreach}
+      </table>
+    </fieldset>
+  {/if}
+
+  </fieldset>
+
+</div> <!-- configContent -->
+
+<p class="formButtons">
+  <input type="submit" name="submit" value="{'Save Settings'|translate}">
+</p>
+
+</form>
\ No newline at end of file