diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less index 1aec980d0..623e2b88b 100644 --- a/customize.dist/src/less2/include/drive.less +++ b/customize.dist/src/less2/include/drive.less @@ -805,6 +805,19 @@ } + .cp-toolbar-bottom { + .cp-toolbar-bottom-right { + .fa-history { order: 50; } + .fa-list, .fa-th-large { order: 25; } + #cp-app-drive-toolbar-context-mobile, #cp-app-drive-toolbar-contextbuttons { order: 0; } + #cp-app-drive-toolbar-contextbuttons { + height: @variables_bar-height; + display: flex; + align-items: center; + } + } + } + /* Toolbar */ #cp-app-drive-toolbar { diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index 2729c6fb0..ca0827d3a 100644 --- a/www/common/drive-ui.js +++ b/www/common/drive-ui.js @@ -134,7 +134,6 @@ define([ var $separator = $('
', {"class": "dropdown-divider"}); var LS_VIEWMODE = "app-drive-viewMode"; - var LS_SEARCHCURSOR = "app-drive-searchCursor"; var FOLDER_CONTENT_ID = "cp-app-drive-content-folder"; var config = {}; @@ -252,15 +251,6 @@ define([ localStore.put(LS_VIEWMODE, mode); }; - var setSearchCursor = function () { - var $input = $('#cp-app-drive-tree-search-input'); - APP.store[LS_SEARCHCURSOR] = $input[0].selectionStart; - localStore.put(LS_SEARCHCURSOR, $input[0].selectionStart); - }; - var getSearchCursor = function () { - return APP.store[LS_SEARCHCURSOR] || 0; - }; - // Handle disconnect/reconnect var setEditable = function (state, isHistory) { if (APP.closed || !APP.$content || !$.contains(document.documentElement, APP.$content[0])) { return; } @@ -556,6 +546,7 @@ define([ APP.origin = priv.origin; APP.hideDuplicateOwned = Util.find(priv, ['settings', 'drive', 'hideDuplicate']); APP.closed = false; + APP.toolbar = driveConfig.toolbar; var $readOnly = $(h('div#cp-app-drive-edition-state.cp-app-drive-content-info-box', Messages.readonly)); @@ -582,7 +573,7 @@ define([ var $tree = APP.$tree = $("#cp-app-drive-tree"); var $content = APP.$content = $("#cp-app-drive-content"); var $appContainer = $(".cp-app-drive-container"); - var $driveToolbar = $("#cp-app-drive-toolbar"); + var $driveToolbar = APP.toolbar.$bottom; var $contextMenu = createContextMenu().appendTo($appContainer); var $contentContextMenu = $("#cp-app-drive-context-content"); @@ -2237,8 +2228,12 @@ define([ window.addEventListener("resize", collapseDrivePath); var treeResizeObserver = new MutationObserver(collapseDrivePath); treeResizeObserver.observe($("#cp-app-drive-tree")[0], {"attributes": true}); + + // XXX + /* var toolbarButtonAdditionObserver = new MutationObserver(collapseDrivePath); $(function () { toolbarButtonAdditionObserver.observe($("#cp-app-drive-toolbar")[0], {"childList": true, "subtree": true}); }); + */ // Create the title block with the "parent folder" button @@ -2367,16 +2362,16 @@ define([ var $gridButton = $gridIcon.clone(); $listButton.click(function () { - $gridButton.removeClass('cp-app-drive-toolbar-active'); - $listButton.addClass('cp-app-drive-toolbar-active'); + $gridButton.show(); + $listButton.hide(); setViewMode('list'); $('#' + FOLDER_CONTENT_ID).removeClass('cp-app-drive-content-grid'); $('#' + FOLDER_CONTENT_ID).addClass('cp-app-drive-content-list'); Feedback.send('DRIVE_LIST_MODE'); }); $gridButton.click(function () { - $listButton.removeClass('cp-app-drive-toolbar-active'); - $gridButton.addClass('cp-app-drive-toolbar-active'); + $listButton.show(); + $gridButton.hide(); setViewMode('grid'); $('#' + FOLDER_CONTENT_ID).addClass('cp-app-drive-content-grid'); $('#' + FOLDER_CONTENT_ID).removeClass('cp-app-drive-content-list'); @@ -2384,9 +2379,9 @@ define([ }); if (getViewMode() === 'list') { - $listButton.addClass('cp-app-drive-toolbar-active'); + $listButton.hide(); } else { - $gridButton.addClass('cp-app-drive-toolbar-active'); + $gridButton.hide(); } $listButton.attr('title', Messages.fm_viewListButton); $gridButton.attr('title', Messages.fm_viewGridButton); @@ -3002,20 +2997,16 @@ define([ // Drive content toolbar var createToolbar = function () { - var $toolbar = $driveToolbar; - $toolbar.html(''); - $('
', {'class': 'cp-app-drive-toolbar-leftside'}).appendTo($toolbar); - $('
', {'class': 'cp-app-drive-path cp-unselectable'}).appendTo($toolbar); - $('
', {'class': 'cp-app-drive-toolbar-filler'}).appendTo($toolbar); - var $rightside = $('
', {'class': 'cp-app-drive-toolbar-rightside'}) - .appendTo($toolbar); + var $toolbar = APP.toolbar.$bottom; + APP.toolbar.$bottomL.html(''); + APP.toolbar.$bottomR.html(''); if (APP.histConfig && (APP.loggedIn || !APP.newSharedFolder)) { // ANON_SHARED_FOLDER var $hist = common.createButton('history', true, {histConfig: APP.histConfig}); - $rightside.append($hist); + APP.toolbar.$bottomR.append($hist); } if (APP.$burnThisDrive) { - $rightside.append(APP.$burnThisDrive); + APP.toolbar.$bottomR.append(APP.$burnThisDrive); } return $toolbar; }; @@ -3144,13 +3135,8 @@ define([ }; APP.Search = {}; - var isCharacterKey = function (e) { - return e.which === "undefined" /* IE */ || - (e.which > 0 && e.which !== 13 && e.which !== 27 && !e.ctrlKey && !e.altKey); - }; var displaySearch = function ($list, value) { var search = APP.Search; - var isInSearch = currentPath[0] === SEARCH; var $div = $('
', {'id': 'cp-app-drive-search', 'class': 'cp-unselectable'}); $searchIcon.clone().appendTo($div); @@ -3164,19 +3150,21 @@ define([ if (search.to) { window.clearTimeout(search.to); } if ($input.val().trim() === "") { search.cursor = 0; - displayDirectory([SEARCH]); + APP.displayDirectory([SEARCH]); return; } if (e.which === 13) { var newLocation = [SEARCH, $input.val()]; search.cursor = $input[0].selectionStart; - if (!manager.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); } + if (!manager.comparePath(newLocation, currentPath.slice())) { + APP.displayDirectory(newLocation); + } return; } if (e.which === 27) { $input.val(''); search.cursor = 0; - displayDirectory([SEARCH]); + APP.displayDirectory([SEARCH]); return; } if ($input.val()) { @@ -3189,7 +3177,9 @@ define([ search.to = window.setTimeout(function () { var newLocation = [SEARCH, $input.val()]; search.cursor = $input[0].selectionStart; - if (!manager.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); } + if (!manager.comparePath(newLocation, currentPath.slice())) { + APP.displayDirectory(newLocation); + } }, 500); }).on('click mousedown mouseup', function (e) { e.stopPropagation(); @@ -3202,7 +3192,7 @@ define([ cancel.addEventListener('click', function () { $input.val(''); search.cursor = 0; - displayDirectory([SEARCH]); + APP.displayDirectory([SEARCH]); }); $div.append(cancel); @@ -3514,10 +3504,10 @@ define([ if (mode) { $dirContent.addClass(getViewModeClass()); } - createViewModeButton($toolbar.find('.cp-app-drive-toolbar-rightside')); + createViewModeButton(APP.toolbar.$bottomR); } if (inTrash) { - createEmptyTrashButton($toolbar.find('.cp-app-drive-toolbar-rightside')); + createEmptyTrashButton(APP.toolbar.$bottomR); } var $list = $('
    ').appendTo($dirContent); @@ -3536,27 +3526,27 @@ define([ // NewButton can be undefined if we're in read only mode if (!readOnlyFolder) { - createNewButton(isInRoot, $toolbar.find('.cp-app-drive-toolbar-leftside')); + createNewButton(isInRoot, APP.toolbar.$bottomL); } if (sfId) { - createShareButton(sfId, $toolbar.find('.cp-app-drive-toolbar-leftside')); + createShareButton(sfId, APP.toolbar.$bottomL); } - createTitle($toolbar.find('.cp-app-drive-path'), path); + createTitle($toolbar.find('.cp-app-drive-path'), path); // XXX if (APP.mobile()) { var $context = $('