[extensions-web: 28/30] fsui: Start turning the FSUI into two different combo boxes

[Jasper St. Pierre <jstpierre src gnome org>]

commit 5087055088e25756f5e8cc3c64da541dfa41c087
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Mon Jan 23 15:28:32 2012 -0500

    fsui: Start turning the FSUI into two different combo boxes

 sweettooth/static/css/sweettooth.css |   38 +++++++++++++++++-----------
 sweettooth/static/js/fsui.js         |   45 +++++++++++++++-------------------
 2 files changed, 43 insertions(+), 40 deletions(-)
---
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index c5a616d..3107990 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -157,13 +157,17 @@ hr.bottom_shadow {
 /* Filtering and Sorting UI */
 /* ==================================================================== */
 
-a.fsui-link {
+div.fsui {
     float: right;
-    border-radius: 4px;
     font-size: 0.8em;
     line-height: 2.2em;
-    margin-top: -2.2em;
-    padding: 0 1em;
+    position: relative;
+    top: -2.2em;
+}
+
+.fsui-dropdown-link {
+    border-radius: 4px;
+    padding: 0.2em 1em;
     cursor: pointer;
 
     text-decoration: none;
@@ -176,13 +180,23 @@ a.fsui-link {
     transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
-.fsui-link.selected {
+.fsui-dropdown-link-arrow {
+    position: relative;
+    margin-left: .25em;
+    top: -.25em;
+}
+
+.fsui-dropdown-link:hover {
+    background-color: #f4f4f4;
+}
+
+.fsui-dropdown-link.selected {
     background-color: #fff;
     text-decoration: none;
     color: #222;
 }
 
-.fsui {
+.fsui-dropdown {
     background-color: #fff;
     position: absolute;
     right: 4px;
@@ -195,13 +209,7 @@ a.fsui-link {
     z-index: 999;
 }
 
-.fsui h4 {
-    margin: 0;
-    margin-top: 1em;
-    text-align: center;
-}
-
-.fsui-selection-link {
+.fsui-dropdown-item {
     text-decoration: none;
     color: #444;
     list-style-position: inside;
@@ -212,12 +220,12 @@ a.fsui-link {
     padding-left: 2em;
 }
 
-.fsui-selection-link.selected {
+.fsui-dropdown-item.selected {
     list-style-type: disc;
     padding-left: 1em;
 }
 
-.fsui-selection-link:hover {
+.fsui-dropdown-item:hover {
     background-color: #e5e5e0;
 }
 
diff --git a/sweettooth/static/js/fsui.js b/sweettooth/static/js/fsui.js
index 3908746..66b5f42 100644
--- a/sweettooth/static/js/fsui.js
+++ b/sweettooth/static/js/fsui.js
@@ -5,14 +5,6 @@
 
 require(['jquery', 'hashparamutils', 'modal'], function($, hashparamutils, modal) {
 
-    function makeLink(name, value, text) {
-        return $('<li>', {'class': 'fsui-selection-link'}).
-            text(text).
-            click(function() {
-                hashparamutils.setHashParam(name, value);
-            });
-    }
-
     var sortCriteria = {
         'name': "Name",
         'recent': "Recent",
@@ -27,7 +19,7 @@ require(['jquery', 'hashparamutils', 'modal'], function($, hashparamutils, modal
 
             function closeUI() {
                 if ($link.hasClass('selected')) {
-                    $('.fsui').fadeOut('fast', function() {
+                    $('.fsui-dropdown').fadeOut('fast', function() {
                         $(this).detach();
                     });
                     $link.removeClass('selected');
@@ -36,40 +28,43 @@ require(['jquery', 'hashparamutils', 'modal'], function($, hashparamutils, modal
                 return false;
             }
 
-            var $link = $('<a>', {'class': 'fsui-link'}).
-                text("Filtering and Sorting").
+            var hp = hashparamutils.getHashParams();
+            if (hp.sort === undefined || !sortCriteria.hasOwnProperty(hp.sort))
+                hp.sort = 'name';
+
+            var $fsui = $('<div>', {'class': 'fsui'}).appendTo($elem);
+
+            $fsui.append('<span>Sort by</span>');
+
+            var $link = $('<a>', {'class': 'fsui-dropdown-link'}).
+                append($('<span>').text(sortCriteria[hp.sort])).
+                append($('<span>', {'class': 'fsui-dropdown-link-arrow'}).text('\u2304')).
                 click(function() {
                     $(this).addClass('selected');
-                    var pos = $elem.offset();
-                    var $fsui = $('<div>', {'class': 'fsui'}).
+                    var $dropdown = $('<div>', {'class': 'fsui-dropdown'}).
                         appendTo($elem).
                         hide().
                         fadeIn('fast');
-                    modal.activateModal($fsui, closeUI);
+                    modal.activateModal($dropdown, closeUI);
 
-                    var $sortUI = $('<div>', {'class': 'fsui-sort-ui'}).
-                        appendTo($fsui).
-                        append('<h4>Sort by</h4>');
+                    var $sortUI = $('<div>').appendTo($dropdown);
 
                     var $sortUL = $('<ul>').appendTo($sortUI);
                     var sortLinks = {};
                     $.each(sortCriteria, function(key) {
-                        sortLinks[key] = makeLink('sort', key, this).
+                        sortLinks[key] = $('<li>', {'class': 'fsui-dropdown-item'}).
+                            text(this).
                             appendTo($sortUL).
                             click(function() {
+                                hashparamutils.setHashParam('sort', key);
                                 closeUI();
                             });
                     });
 
-                    var hp = hashparamutils.getHashParams();
-                    if (hp.sort === undefined)
-                        hp.sort = 'name';
-
-                    if (sortLinks.hasOwnProperty(hp.sort))
-                        sortLinks[hp.sort].addClass('selected');
+                    sortLinks[hp.sort].addClass('selected');
 
                     return false;
-                }).appendTo($elem);
+                }).appendTo($fsui);
         });
     };
 });