feature 2550 - replace Sort order label and select on index page with a css sprite icon

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

themes/clear/theme.css

@@ -14,12 +14,12 @@ H2, #menubar DT, #imageHeaderBar, #imageToolBar A:hover {
 	background-color: #d3d3d3;
 }
 
-#menubar DL, .content, #imageToolBar, #derivativeSwitchLink, #derivativeSwitchBox, .header_notes {
+#menubar DL, .content, #imageToolBar, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox, .header_notes {
   background-color: #eeeeee;
 }
 
 /* borders */
-#menubar DL, .content, #imageToolBar, #derivativeSwitchLink, #derivativeSwitchBox {
+#menubar DL, .content, #imageToolBar, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox {
   border: 1px solid #d3d3d3;
 }
 

themes/dark/theme.css

@@ -16,7 +16,7 @@ BODY, H3, #imageToolBar A:hover {
 	background-color: #2f2f2f;
 }
 
-#menubar DL, .content, #imageToolBar, #imageHeaderBar, #derivativeSwitchLink, #derivativeSwitchBox, .header_notes {
+#menubar DL, .content, #imageToolBar, #imageHeaderBar, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox, .header_notes {
 	background-color: #505050;
 }
 
@@ -34,7 +34,7 @@ H2, #menubar DT {
 }
 
 /* borders */
-#menubar DL, .content, #derivativeSwitchLink, #derivativeSwitchBox{
+#menubar DL, .content, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox{
 	border: 1px solid #000;
 }
 

themes/default/iconset.css

@@ -36,6 +36,7 @@
 
 .pwg-icon-close {background-position: 0 -52px}
 .pwg-icon-category-edit {background-position: -26px -52px}
+.pwg-icon-sort {background-position: -52px -52px}
 .pwg-icon-category-view-normal {background-position: -156px -52px}
 .pwg-icon-category-view-flat {background-position: -182px -52px}
 

themes/default/template/index.tpl

@@ -4,13 +4,36 @@
 <div class="titrePage">
 	<ul class="categoryActions">
 {if !empty($image_orders)}
-		<li>{'Sort order'|@translate}: {strip}
+		<li>{strip}<a href="javascript:toggleSortOrderBox()" id="sortOrderLink" title="{'Sort order'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
-		<select onchange="document.location = this.options[this.selectedIndex].value;">
+			<span class="pwg-icon pwg-icon-sort">&nbsp;</span><span class="pwg-button-text">{'Sort order'|@translate}</span>
-			{foreach from=$image_orders item=image_order}
+		</a>
-			<option value="{$image_order.URL}"{if $image_order.SELECTED} selected="selected"{/if}>{$image_order.DISPLAY}</option>
+		<div id="sortOrderBox" style="display:none; text-align:left" onclick="toggleSortOrderBox()">
+			{'Sort order'|@translate}:
+			{foreach from=$image_orders item=image_order}<br>
+			{if $image_order.SELECTED}
+			<span>{$image_order.DISPLAY}</span>
+			{else}
+			<a href="{$image_order.URL}" rel="nofollow">{$image_order.DISPLAY}</a>
+			{/if}
 			{/foreach}
-		</select>
+		</div>
-{/strip}</li>
+		{footer_script}{literal}
+function toggleSortOrderBox()
+{
+	var elt = document.getElementById("sortOrderBox"),
+		ePos = document.getElementById("sortOrderLink");
+	if (elt.style.display==="none")
+	{
+		elt.style.position = "absolute";
+		elt.style.left = (ePos.offsetLeft) + "px";
+		elt.style.top = (ePos.offsetTop + ePos.offsetHeight) + "px";
+		elt.style.display="";
+	}
+	else
+		elt.style.display="none";
+}
+		{/literal}{/footer_script}
+		{/strip}</li>
 {/if}
 {if isset($favorite)}
 		<li><a href="{$favorite.U_FAVORITE}" title="{'delete all photos from your favorites'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">

themes/default/theme.css

@@ -345,8 +345,8 @@ TD.calDayHead {
 	top: 100px;
 }
 
-#derivativeSwitchBox {
+#derivativeSwitchBox, #sortOrderBox {
-	padding: 0.5em;
+	padding: 0.5em 1em;
 	border-radius: 4px;
 	z-index: 100;
 }