in map and calendar view, move sort select and order button to clips panel

static/js/pandora/navigationView.js

@@ -15,55 +15,13 @@ pandora.ui.navigationView = function(type, videoRatio) {
 
         $element = Ox.Element(),
 
-        $itemIcon = type == 'map' ? $('<img>')
-            .addClass('OxFlag')
-            .attr({
-                src: Ox.getImageByGeoname('icon', 16, '')
-            })
-            .css({float: 'left', margin: '2px'}) : '',
-
-        $itemLabel = Ox.Label({
-                textAlign: 'center',
-                title: '',
-                width: 0 // 76 + Ox.UI.SCROLLBAR_SIZE
-            })
-            .css({
-                position: 'absolute',
-                left: 4 + !!ui.item * 20 + (type == 'map') * 20 + 'px',
-                top: '4px',
-                right: '24px',
-                width: 'auto'
-            })
-            .bindEvent({
-                singleclick: function() {
-                    $element[type == 'map' ? 'panToPlace' : 'panToEvent']();
-                },
-                doubleclick: function() {
-                    $element[type == 'map' ? 'zoomToPlace' : 'zoomToEvent']();
-                }
-            }),
-
-        $itemButton = Ox.Button({
-                title: 'close',
-                type: 'image'
-            })
-            .css({float: 'right', margin: '2px'})
-            .bindEvent({
-                click: function() {
-                    $element.options({selected: null});
-                    updateStatusbar(0);
-                }
-            }),
-
-        $item = $('<div>')
-            .css({padding: '2px'})
-            .append(ui.item ? pandora.$ui.sortMenu = pandora.ui.sortMenu() : '')
-            .append($itemIcon)
-            .append($itemLabel)
-            .append($itemButton),
-
         $toolbar = Ox.Bar({size: 24})
-            .append($item),
+            .append(
+                pandora.$ui.navigationViewOrderButton = pandora.ui.orderButton(true)
+            )
+            .append(
+                pandora.$ui.navigationViewSortSelect = pandora.ui.sortSelect(true)
+            ),
 
         $list = pandora.ui.clipList(videoRatio)
             .bindEvent({
@@ -224,12 +182,10 @@ pandora.ui.navigationView = function(type, videoRatio) {
 
     }
 
-    updateToolbar();
     updateStatusbar();
 
     function selectItem(data) {
         var id = data.id || '';
-        updateToolbar(id ? data : null);
         if (id && id[0] != '_') {
             $status.html('loading...');
             $list.options({
@@ -271,16 +227,6 @@ pandora.ui.navigationView = function(type, videoRatio) {
         );
     }
 
-    function updateToolbar(item) {
-        type == 'map' && $itemIcon.attr({
-            src: Ox.getImageByGeoname('icon', 16, item ? item.geoname : '')
-        });
-        $itemLabel.options({
-            title: item ? item.name : 'No ' + itemName
-        });
-        $itemButton.options({disabled: !item});
-    }
-
     if (type == 'map') {
         pandora.user.ui.mapFind = '';
         pandora.user.ui.mapSelection = '';

static/js/pandora/orderButton.js

@@ -1,6 +1,6 @@
 // vim: et:ts=4:sw=4:sts=4:ft=javascript
 
-pandora.ui.orderButton = function() {
+pandora.ui.orderButton = function(isNavigationView) {
     var sortKey = !pandora.user.ui.item ? 'listSort' : 'itemSort',
         that = Ox.Button({
             id: 'orderButton',
@@ -9,8 +9,8 @@ pandora.ui.orderButton = function() {
             type: 'image'
         })
         .css({
-            float: 'left',
+            float: isNavigationView ? 'right' : 'left',
-            margin: '4px 0 0 4px'
+            margin: isNavigationView ? '4px 4px 0 0' : '4px 0 0 4px'
         })
         .bindEvent({
             click: function(data) {

static/js/pandora/sortSelect.js

@@ -1,5 +1,6 @@
 // vim: et:ts=4:sw=4:sts=4:ft=javascript
-pandora.ui.sortSelect = function() {
+
+pandora.ui.sortSelect = function(isNavigationView) {
     var isClipView = pandora.isClipView(),
         items = [],
         sortKey = !pandora.user.ui.item ? 'listSort' : 'itemSort',
@@ -27,11 +28,11 @@ pandora.ui.sortSelect = function() {
     that = Ox.Select({
         id: 'sortSelect',
         items: items,
-        width: 144
+        width: isNavigationView ? 128 : 144
     })
     .css({
-        float: 'left',
+        float: isNavigationView ? 'right' : 'left',
-        margin: '4px 0 0 4px'
+        margin: isNavigationView ? '4px 4px 0 0' : '4px 0 0 4px'
     })
     .bindEvent({
         change: function(data) {

static/js/pandora/toolbar.js

@@ -2,6 +2,8 @@
 
 pandora.ui.toolbar = function() {
     var ui = pandora.user.ui,
+        isNavigationView = !ui.item
+            && ['map', 'calendar'].indexOf(ui.listView) > -1,
         that = Ox.Bar({
             size: 24
         }).css({
@@ -18,6 +20,10 @@ pandora.ui.toolbar = function() {
     ).append(
         pandora.$ui.orderButton = pandora.ui.orderButton()
     );
+    if (isNavigationView) {
+        pandora.$ui.sortSelect.hide();
+        pandora.$ui.orderButton.hide();
+    }
     ui.item && that.append(
         pandora.$ui.itemTitle = Ox.Label({
             textAlign: 'center'
@@ -36,6 +42,11 @@ pandora.ui.toolbar = function() {
     );
     that.bindEvent({
         pandora_listview: function(data) {
+            var isNavigationView = ['map', 'calendar'].indexOf(data.value) > -1,
+                wasNavigationView = ['map', 'calendar'].indexOf(data.previousValue) > -1;
+            if (isNavigationView != wasNavigationView) {
+                pandora.$ui.sortSelect[isNavigationView ? 'hide' : 'show']();
+            }
             if (pandora.isClipView() != pandora.isClipView(data.previousValue)) {
                 pandora.$ui.sortSelect.replaceWith(
                     pandora.$ui.sortSelect = pandora.ui.sortSelect()