Display context menu actions in the toolbar when an element is selected

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;
+}

www/drive/file.less

@@ -465,6 +465,13 @@ span {
             }
         }
     }
+    #contextButtonsContainer {
+        float: right;
+        margin: 5px;
+        button {
+            vertical-align: top;
+        }
+    }
 }
 
 

www/drive/inner.html

@@ -19,39 +19,39 @@
         </div>
         <div id="treeContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
             <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
-                <li><a tabindex="-1" href="#" class="open dropdown-item" data-localization="fc_open">Open</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-folder-open" class="open dropdown-item" data-localization="fc_open">Open</a></li>
-                <li><a tabindex="-1" href="#" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-eye" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
-                <li><a tabindex="-1" href="#" class="rename editable dropdown-item" data-localization="fc_rename">Rename</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-pencil" class="rename editable dropdown-item" data-localization="fc_rename">Rename</a></li>
-                <li><a tabindex="-1" href="#" class="delete editable dropdown-item" data-localization="fc_delete">Delete</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-trash" class="delete editable dropdown-item" data-localization="fc_delete">Delete</a></li>
-                <li><a tabindex="-1" href="#" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-folder" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
             </ul>
         </div>
         <div id="contentContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
             <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
-                <li><a tabindex="-1" href="#" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-folder" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
-                <li><a tabindex="-1" href="#" class="newdoc own editable dropdown-item" data-type="pad" data-localization="button_newpad">New pad</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-file-word-o" class="newdoc own editable dropdown-item" data-type="pad" data-localization="button_newpad">New pad</a></li>
-                <li><a tabindex="-1" href="#" class="newdoc own editable dropdown-item" data-type="code" data-localization="button_newcode">New code</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-file-code-o" class="newdoc own editable dropdown-item" data-type="code" data-localization="button_newcode">New code</a></li>
-                <li><a tabindex="-1" href="#" class="newdoc own editable dropdown-item" data-type="slide" data-localization="button_newslide">New slide</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-file-powerpoint-o" class="newdoc own editable dropdown-item" data-type="slide" data-localization="button_newslide">New slide</a></li>
-                <li><a tabindex="-1" href="#" class="newdoc own editable dropdown-item" data-type="poll" data-localization="button_newpoll">New poll</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-calendar" class="newdoc own editable dropdown-item" data-type="poll" data-localization="button_newpoll">New poll</a></li>
             </ul>
         </div>
         <div id="defaultContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
             <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
-                <li><a tabindex="-1" href="#" class="open dropdown-item" data-localization="fc_open">Open</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-folder-open" class="open dropdown-item" data-localization="fc_open">Open</a></li>
-                <li><a tabindex="-1" href="#" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-eye" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
-                <li><a tabindex="-1" href="#" class="delete dropdown-item" data-localization="fc_delete">Delete</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-trash" class="delete dropdown-item" data-localization="fc_delete">Delete</a></li>
             </ul>
         </div>
         <div id="trashTreeContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
             <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
-                <li><a tabindex="-1" href="#" class="empty editable dropdown-item" data-localization="fc_empty">Empty the trash</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-trash-o" class="empty editable dropdown-item" data-localization="fc_empty">Empty the trash</a></li>
             </ul>
         </div>
         <div id="trashContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
             <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
-                <li><a tabindex="-1" href="#" class="remove editable dropdown-item" data-localization="fc_remove">Delete permanently</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-eraser" class="remove editable dropdown-item" data-localization="fc_remove">Delete permanently</a></li>
-                <li><a tabindex="-1" href="#" class="restore editable dropdown-item" data-localization="fc_restore">Restore</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-repeat" class="restore editable dropdown-item" data-localization="fc_restore">Restore</a></li>
-                <li><a tabindex="-1" href="#" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li>
+                <li><a tabindex="-1" href="#" data-icon="fa-database" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li>
             </ul>
         </div>
     </div>

www/drive/main.js

@@ -281,6 +281,8 @@ define([
 
         // Replace a file/folder name by an input to change its value
         var displayRenameInput = function ($element, path) {
+            // 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.");
@@ -331,6 +333,29 @@ define([
                     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,6 +364,7 @@ define([
                 $li = $tree.find('.element.active').closest('li');
             }
             var $button = $driveToolbar.find('#contextButton');
+            if ($button.length) { // mobile
                 if ($li.length !== 1
                     || !$._data($li[0], 'events').contextmenu
                     || $._data($li[0], 'events').contextmenu.length === 0) {
@@ -354,6 +380,38 @@ define([
                         background: ''
                     });
                 }, 500);
+                return;
+            }
+            // 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 = $('<button>', {'class': 'element'});
+                if ($(el).attr('data-icon')) {
+                    $a.addClass('fa').addClass($(el).attr('data-icon'));
+                    $a.attr('title', $(el).text());
+                } else {
+                    $a.text($(el).text());
+                }
+                $(el).data('path', path);
+                $(el).data('element', $element);
+                $container.append($a);
+                $a.click(function() { $(el).click(); });
+            });
         };
 
         // Add the "selected" class to the "li" corresponding to the clicked element
@@ -384,15 +442,21 @@ define([
             module.hideMenu();
             e.stopPropagation();
 
-            var path = $(e.target).closest('li').data('path');
+            var $element = $(e.target).closest('li');
+            if (!$element.length) {
+                logError("Unable to locate the .element tag", e.target);
+                $menu.hide();
+                log(Messages.fm_contextMenuError);
+                return false;
+            }
+
+            var path = $element.data('path');
             if (!path) { return false; }
 
-            if (!APP.editable) {
+            var toHide = filterContextMenu($menu, $element);
-                $menu.find('a.editable').parent('li').hide();
+            toHide.forEach(function ($a) {
-            }
+                $a.parent('li').hide();
-            if (!isOwnDrive()) {
+            });
-                $menu.find('a.own').parent('li').hide();
-            }
 
             $menu.css({
                 display: "block",
@@ -406,45 +470,27 @@ define([
                 return true;
             }
 
-            // $element should be the <li class="element">
-            var $element = $(e.target).closest('li');
             onElementClick(undefined, $element);
-            if (!$element.length) {
+
-                logError("Unable to locate the .element tag", e.target);
-                $menu.hide();
-                log(Messages.fm_contextMenuError);
-                return false;
-            }
             $menu.find('a').data('path', path);
             $menu.find('a').data('element', $element);
             return false;
         };
 
         var openDirectoryContextMenu = function (e) {
-            var $element = $(e.target).closest('li');
             $contextMenu.find('li').show();
-            if ($element.is('.file-element')) {
-                $contextMenu.find('a.newfolder').parent('li').hide();
-            } else {
-                $contextMenu.find('a.open_ro').parent('li').hide();
-            }
             openContextMenu(e, $contextMenu);
             return false;
         };
 
         var openDefaultContextMenu = function (e) {
-            var $element = $(e.target).closest('li');
             $defaultContextMenu.find('li').show();
-            if ($element.is('.file-element')) {
-                $defaultContextMenu.find('a.newfolder').parent('li').hide();
-            } else {
-                $defaultContextMenu.find('a.open_ro').parent('li').hide();
-            }
             openContextMenu(e, $defaultContextMenu);
             return false;
         };
 
         var openTrashTreeContextMenu = function (e) {
+            $trashTreeContextMenu.find('li').show();
             openContextMenu(e, $trashTreeContextMenu);
             return false;
         };
@@ -453,10 +499,6 @@ define([
             var path = $(e.target).closest('li').data('path');
             if (!path) { return; }
             $trashContextMenu.find('li').show();
-            if (path.length > 4) {
-                $trashContextMenu.find('a.restore').parent('li').hide();
-                $trashContextMenu.find('a.properties').parent('li').hide();
-            }
             openContextMenu(e, $trashContextMenu);
             return false;
         };
@@ -752,8 +794,10 @@ define([
             });
             if (!isTrash) {
                 $element.contextmenu(openDirectoryContextMenu);
+                $element.data('context', $contextMenu);
             } else {
                 $element.contextmenu(openTrashContextMenu);
+                $element.data('context', $trashContextMenu);
             }
             var isNewFolder = module.newFolder && filesOp.comparePath(newPath, module.newFolder);
             if (isNewFolder) {
@@ -1202,6 +1246,7 @@ define([
                     onElementClick(e, $element, path);
                 });
                 $element.contextmenu(openDefaultContextMenu);
+                $element.data('context', $defaultContextMenu);
                 if (draggable) {
                     addDragAndDropHandlers($element, path, false, false);
                 }
@@ -1231,6 +1276,7 @@ define([
                     onElementClick(e, $element);
                 });
                 $element.contextmenu(openDefaultContextMenu);
+                $element.data('context', $defaultContextMenu); // TODO: hide the "delete" link in that context menu
                 $container.append($element);
             });
         };
@@ -1352,6 +1398,9 @@ define([
                     });
                     $li.contextmenu();
                 });
+            } else {
+                var $contextButtons = $('<span>', {'id' : 'contextButtonsContainer'});
+                $contextButtons.appendTo($toolbar.find('.rightside'));
             }
             updateContextButton();