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

pull/1/head
yflory 8 years ago
parent a0340f1419
commit d8cc2903cc

@ -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…
Cancel
Save