Changeset 12873

Timestamp:

Jan 11, 2012, 6:03:04 AM (13 years ago)

Author:

rvelices

Message:

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

Location:

trunk/themes

Files:

• clear/theme.css (modified) (1 diff)
• dark/theme.css (modified) (2 diffs)
• default/iconset.css (modified) (1 diff)
• default/s26/outline_005e89.png (modified) (previous)
• default/s26/outline_808060.png (modified) (previous)
• default/s26/outline_808080.png (modified) (previous)
• default/s26/outline_ff3363.png (modified) (previous)
• default/s26/outline_ff7700.png (modified) (previous)
• default/s26/outline_ffff80.png (modified) (previous)
• default/s26/outline_ffffff.png (modified) (previous)
• default/template/index.tpl (modified) (1 diff)
• default/theme.css (modified) (1 diff)

trunk/themes/clear/theme.css

@@ -15 +15 @@
 }
 
-#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;
 }

trunk/themes/dark/theme.css

@@ -17 +17 @@
 }
 
-#menubar DL, .content, #imageToolBar, #imageHeaderBar, #derivativeSwitchLink, #derivativeSwitchBox, .header_notes {
+#menubar DL, .content, #imageToolBar, #imageHeaderBar, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox, .header_notes {
         background-color: #505050;
 }
@@ -35 +35 @@
 
 /* borders */
-#menubar DL, .content, #derivativeSwitchLink, #derivativeSwitchBox{
+#menubar DL, .content, #derivativeSwitchLink, #derivativeSwitchBox, #sortOrderBox{
         border: 1px solid #000;
 }

trunk/themes/default/iconset.css

@@ -37 +37 @@
 .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}

trunk/themes/default/template/index.tpl

@@ -5 +5 @@
         <ul class="categoryActions">
 {if !empty($image_orders)}
-                <li>{'Sort order'|@translate}: {strip}
-                <select onchange="document.location = this.options[this.selectedIndex].value;">
-                        {foreach from=$image_orders item=image_order}
-                        <option value="{$image_order.URL}"{if $image_order.SELECTED} selected="selected"{/if}>{$image_order.DISPLAY}</option>
+                <li>{strip}<a href="javascript:toggleSortOrderBox()" id="sortOrderLink" title="{'Sort order'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+                        <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()">
+                        {'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>
-{/strip}</li>
+                </div>
+                {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)}

trunk/themes/default/theme.css

@@ -346 +346 @@
 }
 
-#derivativeSwitchBox {
-        padding: 0.5em;
+#derivativeSwitchBox, #sortOrderBox {
+        padding: 0.5em 1em;
         border-radius: 4px;
         z-index: 100;