Display context menu actions in the toolbar when an element is selected
This commit is contained in:
yflory
parent
a0340f1419
commit
d8cc2903cc
4 changed files with 171 additions and 108 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -465,6 +465,13 @@ span {
|
|||
}
|
||||
}
|
||||
}
|
||||
#contextButtonsContainer {
|
||||
float: right;
|
||||
margin: 5px;
|
||||
button {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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="#" 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="#" 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-open" class="open dropdown-item" data-localization="fc_open">Open</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="#" data-icon="fa-pencil" class="rename editable dropdown-item" data-localization="fc_rename">Rename</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="#" 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="#" 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="#" 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-folder" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</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="#" 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="#" 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="#" 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="#" 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-folder-open" class="open dropdown-item" data-localization="fc_open">Open</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="#" 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="#" 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-eraser" class="remove editable dropdown-item" data-localization="fc_remove">Delete permanently</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="#" data-icon="fa-database" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
$menu.find('a.editable').parent('li').hide();
|
||||
}
|
||||
if (!isOwnDrive()) {
|
||||
$menu.find('a.own').parent('li').hide();
|
||||
}
|
||||
var toHide = filterContextMenu($menu, $element);
|
||||
toHide.forEach(function ($a) {
|
||||
$a.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();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue