Changeset 13683 for trunk

Timestamp:

Mar 23, 2012, 10:58:12 PM (12 years ago)

Author:

plg

Message:

feature 2598: add sizes XXS and XS

new label for sizes

On picture.php, the current size is "checked" and javascript refreshed when switched (with jQuery)

jQuery loaded by default on header.tpl (already loaded by thumbnails.tpl)

Location:

trunk

Files:

• include/derivative_std_params.inc.php (modified) (3 diffs)
• language/en_UK/common.lang.php (modified) (1 diff)
• language/fr_FR/common.lang.php (modified) (1 diff)
• themes/Sylvia/theme.css (modified) (1 diff)
• themes/default/template/header.tpl (modified) (1 diff)
• themes/default/template/index.tpl (modified) (2 diffs)
• themes/default/template/picture.tpl (modified) (2 diffs)
• themes/default/theme.css (modified) (1 diff)
• themes/elegant/theme.css (modified) (1 diff)

trunk/include/derivative_std_params.inc.php

@@ -22 +22 @@
 define('IMG_SQUARE', 'square');
 define('IMG_THUMB', 'thumb');
+define('IMG_XXSMALL', '2small');
+define('IMG_XSMALL', 'xsmall');
 define('IMG_SMALL', 'small');
 define('IMG_MEDIUM', 'medium');
@@ -42 +44 @@
 final class ImageStdParams
 {
-  private static $all_types = array(IMG_SQUARE,IMG_THUMB,IMG_SMALL,IMG_MEDIUM,IMG_LARGE,IMG_XLARGE,IMG_XXLARGE);
+  private static $all_types = array(
+    IMG_SQUARE,IMG_THUMB,IMG_XXSMALL,IMG_XSMALL,IMG_SMALL,IMG_MEDIUM,IMG_LARGE,IMG_XLARGE,IMG_XXLARGE
+    );
   private static $all_type_map = array();
   private static $type_map = array();
@@ -163 +167 @@
     self::$type_map[IMG_SQUARE] = new DerivativeParams( SizingParams::square(120,120) );
     self::$type_map[IMG_THUMB] = new DerivativeParams( SizingParams::classic(144,144) );
-    self::$type_map[IMG_SMALL] = new DerivativeParams( SizingParams::classic(240,240) );
-    self::$type_map[IMG_MEDIUM] = new DerivativeParams( SizingParams::classic(432,432) );
-    self::$type_map[IMG_LARGE] = new DerivativeParams( SizingParams::classic(648,576) );
-    self::$type_map[IMG_XLARGE] = new DerivativeParams( SizingParams::classic(864,648) );
-    self::$type_map[IMG_XXLARGE] = new DerivativeParams( SizingParams::classic(1200,900) );
+    self::$type_map[IMG_XXSMALL] = new DerivativeParams( SizingParams::classic(240,240) );
+    self::$type_map[IMG_XSMALL] = new DerivativeParams( SizingParams::classic(432,324) );
+    self::$type_map[IMG_SMALL] = new DerivativeParams( SizingParams::classic(576,432) );
+    self::$type_map[IMG_MEDIUM] = new DerivativeParams( SizingParams::classic(792,594) );
+    self::$type_map[IMG_LARGE] = new DerivativeParams( SizingParams::classic(1008,756) );
+    self::$type_map[IMG_XLARGE] = new DerivativeParams( SizingParams::classic(1224,918) );
+    self::$type_map[IMG_XXLARGE] = new DerivativeParams( SizingParams::classic(1656,1242) );
   }
 

trunk/language/en_UK/common.lang.php

@@ -370 +370 @@
 $lang['Your username has been successfully changed to : %s'] = 'Your username has been successfully changed to : %s';
 $lang['Your password has been reset'] = 'Your password has been reset';
-$lang['square'] = "Square";
-$lang['thumb'] = "Thumb";
-$lang['small'] = "Small";
-$lang['medium'] = "Medium";
-$lang['large'] = "Large";
-$lang['xlarge'] = "XLarge";
-$lang['xxlarge'] = "XXLarge";
-$lang['Original'] = "Original";
+$lang['square'] = 'Square';
+$lang['thumb'] = 'Thumbnail';
+$lang['2small'] = 'XXS - tiny';
+$lang['xsmall'] = 'XS - extra small';
+$lang['small'] = 'S - small';
+$lang['medium'] = 'M - medium';
+$lang['large'] = 'L - large';
+$lang['xlarge'] = 'XL - extra large';
+$lang['xxlarge'] = 'XXL - huge';
+$lang['Original'] = 'Original';
 $lang['Thank you for registering at %s!'] = 'Thank you for registering at %s!';
 $lang['Here are your connection settings'] = 'Here are your connection settings';

trunk/language/fr_FR/common.lang.php

@@ -375 +375 @@
 $lang['If you think you\'ve received this email in error, please contact us at %s'] = 'Si vous pensez avoir reçu cet email par erreur, veuillez nous contacter %s';
 $lang['Photo sizes'] = 'Tailles de photo';
-$lang['square'] = "Carré";
-$lang['thumb'] = "Miniature";
-$lang['small'] = "Petit";
-$lang['medium'] = "Moyen";
-$lang['large'] = "Large";
-$lang['xlarge'] = "XLarge";
-$lang['xxlarge'] = "XXLarge";
+$lang['square'] = 'Carré';
+$lang['thumb'] = 'Miniature';
+$lang['2small'] = 'XXS - minuscule';
+$lang['xsmall'] = 'XS - très petit';
+$lang['small'] = 'S - petit';
+$lang['medium'] = 'M - moyen';
+$lang['large'] = 'L - grand';
+$lang['xlarge'] = 'XL - très grand';
+$lang['xxlarge'] = 'XXL - énorme';
 $lang['Show latest comments first'] = 'Montrer les commentaires les plus récents en premier';
 $lang['Show oldest comments first'] = 'Montrer les commentaires les plus anciens en premier';

trunk/themes/Sylvia/theme.css

@@ -464 +464 @@
   background-color:#666;
 }
+
+#derivativeSwitchBox, #sortOrderBox {
+    background-color: #222222;
+    border: 1px solid #FF3363;
+    border-radius: 0 15px 0 15px;
+}
+
+.switchBoxTitle {
+  border-color:#666;
+}

trunk/themes/default/template/header.tpl

@@ -50 +50 @@
 <![endif]-->
 
+{combine_script id="jquery"}
+
 {if not empty($head_elements)}
         {foreach from=$head_elements item=elt}{$elt}

trunk/themes/default/template/index.tpl

@@ -9 +9 @@
                 </a>
                 <div id="sortOrderBox" style="display:none; text-align:left" onclick="toggleSortOrderBox()" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||toggleSortOrderBox()">
-                        {'Sort order'|@translate}<hr>
+                        <div class="switchBoxTitle">{'Sort order'|@translate}</div>
                         {foreach from=$image_orders item=image_order name=loop}{if !$smarty.foreach.loop.first}<br>{/if}
                         {if $image_order.SELECTED}
-                        <span>{$image_order.DISPLAY}</span>
+                        <span>&#x2714; {$image_order.DISPLAY}</span>
                         {else}
                         <a href="{$image_order.URL}" rel="nofollow">{$image_order.DISPLAY}</a>
@@ -40 +40 @@
                 </a>
                 <div id="derivativeSwitchBox" style="display:none; text-align:left" onclick="toggleImageDerivativesBox()" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||toggleImageDerivativesBox()">
-                        {'Photo sizes'|@translate}<hr>
+                        <div class="switchBoxTitle">{'Photo sizes'|@translate}</div>
                         {foreach from=$image_derivatives item=image_derivative name=loop}{if !$smarty.foreach.loop.first}<br>{/if}
                         {if $image_derivative.SELECTED}
-                        <span>{$image_derivative.DISPLAY}</span>
+                        <span>&#x2714; {$image_derivative.DISPLAY}</span>
                         {else}
                         <a href="{$image_derivative.URL}" rel="nofollow">{$image_derivative.DISPLAY}</a>

trunk/themes/default/template/picture.tpl

@@ -30 +30 @@
                 theImg.useMap = "#map"+typeMap;
         }
+  jQuery('.derivativeChecked').hide();
+  jQuery('#derivativeChecked'+typeSave).show();
         document.cookie = 'picture_deriv='+typeSave+';path={/literal}{$COOKIE_PATH}{literal}';
 }
@@ -51 +53 @@
 <span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span></a>
 <div id="derivativeSwitchBox" onclick="toggleDerivativeSwitchBox()" style="display:none">
+<div class="switchBoxTitle">{'Photo sizes'|@translate}</div>
 {foreach from=$current.unique_derivatives item=derivative key=derivative_type}
-<a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}','{$derivative_type}','{$derivative->get_type()}')">{$derivative->get_type()|@translate} ({$derivative->get_size_hr()})</a><br>
+<span class="derivativeChecked" id="derivativeChecked{$derivative->get_type()}" {if $derivative->get_type() ne $current.selected_derivative->get_type()}style="display:none"{/if}>&#x2714;</span> <a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}','{$derivative_type}','{$derivative->get_type()}')">{$derivative->get_type()|@translate}<span class="derivativeSizeDetails"> ({$derivative->get_size_hr()})</span></a><br>
 {/foreach}
 {if isset($U_ORIGINAL)}

trunk/themes/default/theme.css

@@ -342 +342 @@
 
 #derivativeSwitchBox, #sortOrderBox {
-        padding: 0.5em 1em;
+        padding: 0.5em 10px;
         border-radius: 4px;
         z-index: 100;
+  text-align:left;
+}
+
+.switchBoxTitle {
+  border-bottom:1px solid #000;
+  padding-bottom:5px;
+  margin-bottom:5px;
 }
 

trunk/themes/elegant/theme.css

@@ -107 +107 @@
 
 /* borders */
-#derivativeSwitchBox, #sortOrderBox{
-        border: 1px solid #000;
+#derivativeSwitchBox, #sortOrderBox {
+        border: 2px solid #444;
 }
+
+.switchBoxTitle {
+  border-bottom:2px solid #444;
+}
+
+.derivativeSizeDetails {display:none}
 
 FIELDSET, INPUT, SELECT, TEXTAREA {