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)


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

9 files changed, 67 insertions, 29 deletions

diff --git a/include/derivative_std_params.inc.php b/include/derivative_std_params.inc.php
index 54122aa94..c04daaf1f 100644
--- a/include/derivative_std_params.inc.php
+++ b/include/derivative_std_params.inc.php
@@ -21,6 +21,8 @@
 
 define('IMG_SQUARE', 'square');
 define('IMG_THUMB', 'thumb');
+define('IMG_XXSMALL', '2small');
+define('IMG_XSMALL', 'xsmall');
 define('IMG_SMALL', 'small');
 define('IMG_MEDIUM', 'medium');
 define('IMG_LARGE', 'large');
@@ -41,7 +43,9 @@ final class WatermarkParams
 
 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();
   private static $undefined_type_map = array();
@@ -162,11 +166,13 @@ final class ImageStdParams
     self::$watermark = new WatermarkParams();
     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) );
   }
 
   static function apply_global($params)
diff --git a/language/en_UK/common.lang.php b/language/en_UK/common.lang.php
index 6695038d9..a432ecda7 100644
--- a/language/en_UK/common.lang.php
+++ b/language/en_UK/common.lang.php
@@ -369,14 +369,16 @@ $lang['Your favorites'] = "Your favorites";
 $lang['Your Gallery Customization'] = "Your gallery customization";
 $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';
 $lang['Password: %s'] = 'Password: %s';
diff --git a/language/fr_FR/common.lang.php b/language/fr_FR/common.lang.php
index 1cc1f1ec8..a4a87f122 100644
--- a/language/fr_FR/common.lang.php
+++ b/language/fr_FR/common.lang.php
@@ -374,13 +374,15 @@ $lang['Password: %s'] = 'Mot de passe : %s';
 $lang['Username: %s'] = 'Nom d\'utilisateur : %s';
 $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';
 $lang['View in'] = 'Affichage';
diff --git a/themes/Sylvia/theme.css b/themes/Sylvia/theme.css
index 9093cd475..b2baf4dd5 100644
--- a/themes/Sylvia/theme.css
+++ b/themes/Sylvia/theme.css
@@ -463,3 +463,13 @@ A:hover .pwg-icon {
   color:white;
   background-color:#666;
 }
+
+#derivativeSwitchBox, #sortOrderBox {
+    background-color: #222222;
+    border: 1px solid #FF3363;
+    border-radius: 0 15px 0 15px;
+}
+
+.switchBoxTitle {
+  border-color:#666;
+}
diff --git a/themes/default/template/header.tpl b/themes/default/template/header.tpl
index 444b3fc2d..c26d696e7 100644
--- a/themes/default/template/header.tpl
+++ b/themes/default/template/header.tpl
@@ -49,6 +49,8 @@
 <script type="text/javascript" src="{$ROOT_URL}themes/default/js/pngfix.js"></script>
 <![endif]-->
 
+{combine_script id="jquery"}
+
 {if not empty($head_elements)}
 	{foreach from=$head_elements item=elt}{$elt}
 	{/foreach}
diff --git a/themes/default/template/index.tpl b/themes/default/template/index.tpl
index 2502e42b1..35697d778 100644
--- a/themes/default/template/index.tpl
+++ b/themes/default/template/index.tpl
@@ -8,10 +8,10 @@
 			<span class="pwg-icon pwg-icon-sort">&nbsp;</span><span class="pwg-button-text">{'Sort order'|@translate}</span>
 		</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>
 			{/if}
@@ -39,10 +39,10 @@ function toggleSortOrderBox() {
 			<span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span>
 		</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>
 			{/if}
diff --git a/themes/default/template/picture.tpl b/themes/default/template/picture.tpl
index e0472ca51..b95948b1e 100644
--- a/themes/default/template/picture.tpl
+++ b/themes/default/template/picture.tpl
@@ -29,6 +29,8 @@ function changeImgSrc(url,typeSave,typeMap)
 		theImg.src = url;
 		theImg.useMap = "#map"+typeMap;
 	}
+  jQuery('.derivativeChecked').hide();
+  jQuery('#derivativeChecked'+typeSave).show();
 	document.cookie = 'picture_deriv='+typeSave+';path={/literal}{$COOKIE_PATH}{literal}';
 }
 
@@ -50,8 +52,9 @@ function toggleDerivativeSwitchBox()
 {strip}<a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()" title="{'Photo sizes'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
 <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)}
 <a href="javascript:phpWGOpenWindow('{$U_ORIGINAL}','xxx','scrollbars=yes,toolbar=no,status=no,resizable=yes')" rel="nofollow">{'Original'|@translate}</a>
diff --git a/themes/default/theme.css b/themes/default/theme.css
index 2049d04af..23fcf420c 100644
--- a/themes/default/theme.css
+++ b/themes/default/theme.css
@@ -341,9 +341,16 @@ TD.calDayHead {
 #imageToolBar .pwg-button {width:42px;}
 
 #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;
 }
 
 #theImage {
diff --git a/themes/elegant/theme.css b/themes/elegant/theme.css
index 037de807d..7e70c0f5b 100644
--- a/themes/elegant/theme.css
+++ b/themes/elegant/theme.css
@@ -106,10 +106,16 @@ INPUT.rateButtonSelected /* <= why IE doesn't inherit this ? */ {
 }
 
 /* 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 {
 	border: 1px solid gray;
 }