From 8c77c5c5b1ce11c586c85b2f0b48c88cc7d7bc9d Mon Sep 17 00:00:00 2001 From: rolux Date: Mon, 31 Oct 2011 13:20:42 +0000 Subject: [PATCH] in map and calendar view, move sort select and order button to clips panel --- static/js/pandora/navigationView.js | 66 +++-------------------------- static/js/pandora/orderButton.js | 6 +-- static/js/pandora/sortSelect.js | 9 ++-- static/js/pandora/toolbar.js | 11 +++++ 4 files changed, 25 insertions(+), 67 deletions(-) diff --git a/static/js/pandora/navigationView.js b/static/js/pandora/navigationView.js index 448b0579..92b30914 100644 --- a/static/js/pandora/navigationView.js +++ b/static/js/pandora/navigationView.js @@ -15,55 +15,13 @@ pandora.ui.navigationView = function(type, videoRatio) { $element = Ox.Element(), - $itemIcon = type == 'map' ? $('') - .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 = $('
') - .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 = ''; diff --git a/static/js/pandora/orderButton.js b/static/js/pandora/orderButton.js index a963aab6..e4f14c0e 100644 --- a/static/js/pandora/orderButton.js +++ b/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', - margin: '4px 0 0 4px' + float: isNavigationView ? 'right' : 'left', + margin: isNavigationView ? '4px 4px 0 0' : '4px 0 0 4px' }) .bindEvent({ click: function(data) { diff --git a/static/js/pandora/sortSelect.js b/static/js/pandora/sortSelect.js index b73010db..9015611d 100644 --- a/static/js/pandora/sortSelect.js +++ b/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', - margin: '4px 0 0 4px' + float: isNavigationView ? 'right' : 'left', + margin: isNavigationView ? '4px 4px 0 0' : '4px 0 0 4px' }) .bindEvent({ change: function(data) { diff --git a/static/js/pandora/toolbar.js b/static/js/pandora/toolbar.js index 01bd7ab7..823aaeb0 100644 --- a/static/js/pandora/toolbar.js +++ b/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()