sortSelect + orderButton -> selectElement

static/js/pandora/clipsView.js

@@ -18,10 +18,7 @@ pandora.ui.clipsView = function(videoRatio) {
                 {
                     element: Ox.Bar({size: 24})
                         .append(
-                            pandora.$ui.sortSelect = pandora.ui.sortSelect()
+                            pandora.$ui.sortElement = pandora.ui.sortElement()
-                        )
-                        .append(
-                            pandora.$ui.orderButton = pandora.ui.orderButton()
                         )
                         .append(
                             Ox.Input({

static/js/pandora/navigationView.js

@@ -19,10 +19,7 @@ pandora.ui.navigationView = function(type, videoRatio) {
 
         $toolbar = Ox.Bar({size: 24})
             .append(
-                pandora.$ui.orderButton = pandora.ui.orderButton(true)
+                pandora.$ui.sortElement = pandora.ui.sortElement(true)
-            )
-            .append(
-                pandora.$ui.sortSelect = pandora.ui.sortSelect(true)
             ),
 
         $list = pandora.ui.clipList(videoRatio)

static/js/pandora/sortElement.js

@@ -0,0 +1,87 @@
+// vim: et:ts=4:sw=4:sts=4:ft=javascript
+
+'use strict';
+
+pandora.user.ui.sortElement = function(isNavigationView) {
+
+    var isClipView = pandora.isClipView(),
+        items = (
+            isClipView ? pandora.site.clipKeys.map(function(key) {
+                return Ox.extend(Ox.clone(key), {
+                    title: 'Sort by ' + (!pandora.user.ui.item ? 'Clip ' : '') + key.title
+                });
+            }) : []
+        ).concat(
+            !pandora.user.ui.item ? pandora.site.sortKeys.map(function(key) {
+                return Ox.extend(Ox.clone(key), {
+                    title: 'Sort by ' + key.title
+                });
+            }) : []
+        ),
+        sortKey = !pandora.user.ui.item ? 'listSort' : 'itemSort',
+
+        $sortSelect = Ox.Select({
+                items: items,
+                value: pandora.user.ui[sortKey][0].key,
+                width: isNavigationView ? 120 + Ox.UI.SCROLLBAR_SIZE : 160
+            })
+            .bindEvent({
+                change: function(data) {
+                    var key = data.value;
+                    pandora.UI.set(sortKey, [{
+                        key: key,
+                        operator: pandora.getSortOperator(key)
+                    }]);
+                },
+                pandora_listsort: updateSelect,
+                pandora_itemsort: updateSelect
+            }),
+
+        $orderButton = OxButton({
+                overlap: 'left'
+                title: getTitle(),
+                tooltip: getTooltip(),
+                type: 'image'
+            })
+            .bindEvent({
+                click: function() {
+                    pandora.UI.set(sortKey, [{
+                        key: pandora.user.ui[sortKey][0].key,
+                        operator: pandora.user.ui[sortKey][0].operator == '+' ? '-' : '+'
+                    }]);
+                    updateButton();
+                },
+                pandora_listsort: updateButton,
+                pandora_itemsort: updateButton
+            }),
+
+        that = Ox.FormElementGroup({
+                elements: [$sortSelect, $orderButton]
+            })
+            .css({
+                float: isNavigationView ? 'right' : 'left',
+                margin: isNavigationView ? '4px 4px 0 0' : '4px 0 0 4px'
+            });
+
+    function getButtonTitle() {
+        return pandora.user.ui[sortKey][0].operator == '+' ? 'up' : 'down';
+    }
+
+    function getButtonTooltip() {
+        return pandora.user.ui[sortKey][0].operator == '+' ? 'Ascending' : 'Descending';
+    }
+
+    function updateButton() {
+        $orderButton.options({
+            title: getTitle(),
+            tooltip: getTooltip()
+        });
+    }
+
+    function updateSelect(data) {
+        $sortSelect.value(data.value[0].key);
+    }
+
+    return that;
+    
+};

static/js/pandora/toolbar.js

@@ -18,9 +18,7 @@ pandora.ui.toolbar = function() {
         pandora.$ui.viewSelect = pandora.ui.viewSelect()
     );
     !ui.item && !isNavigationView && that.append(
-        pandora.$ui.sortSelect = pandora.ui.sortSelect()
+        pandora.$ui.sortElement = pandora.ui.sortElement()
-    ).append(
-        pandora.$ui.orderButton = pandora.ui.orderButton()
     );
     that.append(
         !ui.item
@@ -58,16 +56,14 @@ pandora.ui.toolbar = function() {
                 wasNavigationView = ['map', 'calendar'].indexOf(data.previousValue) > -1;
                 if (isNavigationView != wasNavigationView) {
                     if (isNavigationView) {
-                        pandora.$ui.sortSelect.remove();
+                        pandora.$ui.sortElement.remove();
-                        pandora.$ui.orderButton.remove();
                     } else {
-                        pandora.$ui.sortSelect = pandora.ui.sortSelect().insertAfter(pandora.$ui.viewSelect);
+                        pandora.$ui.sortElement = pandora.ui.sortElement().insertAfter(pandora.$ui.viewSelect);
-                        pandora.$ui.orderButton = pandora.ui.orderButton().insertAfter(pandora.$ui.sortSelect);
                     }
                     pandora.$ui.listTitle.css({left: getListTitleLeft() + 'px'});
                 } else if ((data.value == 'clip') != (data.previousValue == 'clip')) {
-                    pandora.$ui.sortSelect.replaceWith(
+                    pandora.$ui.sortElement.replaceWith(
-                        pandora.$ui.sortSelect = pandora.ui.sortSelect()
+                        pandora.$ui.sortElement = pandora.ui.sortElement()
                     );
                 }
             }
@@ -81,8 +77,8 @@ pandora.ui.toolbar = function() {
         ) + '</b>';
     }
     function getListTitleLeft() {
-        return 320 - (
+        return 332 - (
-            ['map', 'calendar'].indexOf(pandora.user.ui.listView) > -1 ? 168 : 0
+            ['map', 'calendar'].indexOf(pandora.user.ui.listView) > -1 ? 180 : 0
         );
     }
     that.updateListName = function(listId) {