From d8cc2903cc01b1e767ae2a2dbff49db07a8ffa19 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 23 Feb 2017 17:25:25 +0100 Subject: [PATCH] Display context menu actions in the toolbar when an element is selected --- www/drive/file.css | 7 ++ www/drive/file.less | 7 ++ www/drive/inner.html | 34 +++---- www/drive/main.js | 231 ++++++++++++++++++++++++++----------------- 4 files changed, 171 insertions(+), 108 deletions(-) diff --git a/www/drive/file.css b/www/drive/file.css index bc9755009..51739a13c 100644 --- a/www/drive/file.css +++ b/www/drive/file.css @@ -406,3 +406,10 @@ span.fa-folder-open { background: #fff; border: 1px solid #888; } +#driveToolbar #contextButtonsContainer { + float: right; + margin: 5px; +} +#driveToolbar #contextButtonsContainer button { + vertical-align: top; +} diff --git a/www/drive/file.less b/www/drive/file.less index f2f3a5ea6..29dbca40c 100644 --- a/www/drive/file.less +++ b/www/drive/file.less @@ -465,6 +465,13 @@ span { } } } + #contextButtonsContainer { + float: right; + margin: 5px; + button { + vertical-align: top; + } + } } diff --git a/www/drive/inner.html b/www/drive/inner.html index 9f337f5ff..93b06e211 100644 --- a/www/drive/inner.html +++ b/www/drive/inner.html @@ -19,39 +19,39 @@ diff --git a/www/drive/main.js b/www/drive/main.js index 8bb9d1852..4c5e667bc 100644 --- a/www/drive/main.js +++ b/www/drive/main.js @@ -281,56 +281,81 @@ define([ // Replace a file/folder name by an input to change its value var displayRenameInput = function ($element, path) { - if (!APP.editable) { return; } - if (!path || path.length < 2) { - logError("Renaming a top level element (root, trash or filesData) is forbidden."); - return; - } - removeInput(); - removeSelected(); - var $name = $element.find('.name'); - if (!$name.length) { - $name = $element.find('.element'); - } - $name.hide(); - var name = path[path.length - 1]; - var $input = $('', { - placeholder: name, - value: name - }); - $input.on('keyup', function (e) { - if (e.which === 13) { - removeInput(); - filesOp.renameElement(path, $input.val(), function () { - refresh(); - }); + // NOTE: setTimeout(f, 0) otherwise the "rename" button in the toolbar is not working + window.setTimeout(function () { + if (!APP.editable) { return; } + if (!path || path.length < 2) { + logError("Renaming a top level element (root, trash or filesData) is forbidden."); + return; } - }); - //$element.parent().append($input); - $name.after($input); - $input.focus(); - $input.select(); - // We don't want to open the file/folder when clicking on the input - $input.on('click dblclick', function (e) { + removeInput(); removeSelected(); - e.stopPropagation(); - }); - // Remove the browser ability to drag text from the input to avoid - // triggering our drag/drop event handlers - $input.on('dragstart dragleave drag drop', function (e) { - e.preventDefault(); - e.stopPropagation(); - }); - // Make the parent element non-draggable when selecting text in the field - // since it would remove the input - $input.on('mousedown', function (e) { - e.stopPropagation(); - $input.parents('li').attr("draggable", false); - }); - $input.on('mouseup', function (e) { - e.stopPropagation(); - $input.parents('li').attr("draggable", true); - }); + var $name = $element.find('.name'); + if (!$name.length) { + $name = $element.find('.element'); + } + $name.hide(); + var name = path[path.length - 1]; + var $input = $('', { + placeholder: name, + value: name + }); + $input.on('keyup', function (e) { + if (e.which === 13) { + removeInput(); + filesOp.renameElement(path, $input.val(), function () { + refresh(); + }); + } + }); + //$element.parent().append($input); + $name.after($input); + $input.focus(); + $input.select(); + // We don't want to open the file/folder when clicking on the input + $input.on('click dblclick', function (e) { + removeSelected(); + e.stopPropagation(); + }); + // Remove the browser ability to drag text from the input to avoid + // triggering our drag/drop event handlers + $input.on('dragstart dragleave drag drop', function (e) { + e.preventDefault(); + e.stopPropagation(); + }); + // Make the parent element non-draggable when selecting text in the field + // since it would remove the input + $input.on('mousedown', function (e) { + e.stopPropagation(); + $input.parents('li').attr("draggable", false); + }); + $input.on('mouseup', function (e) { + e.stopPropagation(); + $input.parents('li').attr("draggable", true); + }); + },0); + }; + + var filterContextMenu = function ($menu, $element) { + var path = $element.data('path'); + + var hide = []; + if (!APP.editable) { + hide.push($menu.find('a.editable')); + } + if (!isOwnDrive()) { + hide.push($menu.find('a.own')); + } + if ($element.is('.file-element')) { + hide.push($menu.find('a.newfolder')); + } else { + hide.push($menu.find('a.open_ro')); + } + if (path && path.length > 4) { + hide.push($menu.find('a.restore')); + hide.push($menu.find('a.properties')); + } + return hide; }; var updateContextButton = function () { @@ -339,21 +364,54 @@ define([ $li = $tree.find('.element.active').closest('li'); } var $button = $driveToolbar.find('#contextButton'); - if ($li.length !== 1 - || !$._data($li[0], 'events').contextmenu - || $._data($li[0], 'events').contextmenu.length === 0) { - $button.hide(); + if ($button.length) { // mobile + if ($li.length !== 1 + || !$._data($li[0], 'events').contextmenu + || $._data($li[0], 'events').contextmenu.length === 0) { + $button.hide(); + return; + } + $button.show(); + $button.css({ + background: '#000' + }); + window.setTimeout(function () { + $button.css({ + background: '' + }); + }, 500); return; } - $button.show(); - $button.css({ - background: '#000' + // Non mobile + var $container = $driveToolbar.find('#contextButtonsContainer'); + if (!$container.length) { return; } + $container.html(''); + var $element = $li; + var $menu = $element.data('context'); + var path = $element.data('path'); + if (!$menu || !path) { return; } + var actions = []; + var $actions = $menu.find('a'); + var toHide = filterContextMenu($menu, $element); + $actions = $actions.filter(function (i, el) { + for (var j = 0; j < toHide.length; j++) { + if ($(el).is(toHide[j])) { return false; }; + } + return true; + }); + $actions.each(function (i, el) { + var $a = $('