diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index e7e577a13b..956ae529ab 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -1812,7 +1812,7 @@ body#entity-list-body { } .context-menu li { list-style-type: none; - padding: 0 5px 0 5px; + padding: 4px 18px 4px 18px; margin: 0; white-space: nowrap; } @@ -1820,8 +1820,9 @@ body#entity-list-body { background-color: #e3e3e3; } .context-menu li.separator { - border-top: 1px solid #000000; + border-top: 1px solid #333333; margin: 5px 5px; + padding: 0 0; } .context-menu li.disabled { color: #333333; diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js index 67187e6a3e..749f750ecb 100644 --- a/scripts/system/html/js/entityList.js +++ b/scripts/system/html/js/entityList.js @@ -70,7 +70,10 @@ var selectedEntities = []; var entityList = null; // The ListView -var entityListContextMenu = new EntityListContextMenu(); +/** + * @type EntityListContextMenu + */ +var entityListContextMenu = null; var currentSortColumn = 'type'; var currentSortOrder = ASCENDING_SORT; @@ -187,21 +190,24 @@ function loaded() { entityList = new ListView(elEntityTableBody, elEntityTableScroll, elEntityTableHeaderRow, createRow, updateRow, clearRow, WINDOW_NONVARIABLE_HEIGHT); - entityListContextMenu.initialize(); + entityListContextMenu = new EntityListContextMenu(); function startRenamingEntity(entityID) { - if (!entitiesByID[entityID] || !entitiesByID[entityID].elRow) { + let entity = entitiesByID[entityID]; + if (!entity || entity.locked || !entity.elRow) { return; } - let elCell = entitiesByID[entityID].elRow.childNodes[COLUMN_INDEX.NAME]; + let elCell = entity.elRow.childNodes[COLUMN_INDEX.NAME]; let elRenameInput = document.createElement("input"); elRenameInput.setAttribute('class', 'rename-entity'); - elRenameInput.value = entitiesByID[entityID].name; - elRenameInput.onclick = function(event) { + elRenameInput.value = entity.name; + let ignoreClicks = function(event) { event.stopPropagation(); }; + elRenameInput.onclick = ignoreClicks; + elRenameInput.ondblclick = ignoreClicks; elRenameInput.onkeyup = function(keyEvent) { if (keyEvent.key === "Enter") { elRenameInput.blur(); @@ -215,7 +221,7 @@ function loaded() { entityID: entityID, name: value })); - entitiesByID[entityID].name = value; + entity.name = value; elCell.innerText = value; }; @@ -260,13 +266,20 @@ function loaded() { refreshFooter(); } - entityListContextMenu.open(clickEvent, entityID); + + let enabledContextMenuItems = []; + if (entitiesByID[entityID] && !entitiesByID[entityID].locked) { + enabledContextMenuItems.push('Rename'); + enabledContextMenuItems.push('Delete'); + } + + entityListContextMenu.open(clickEvent, entityID, enabledContextMenuItems); } function onRowClicked(clickEvent) { let entityID = this.dataset.entityID; let selection = [entityID]; - + if (clickEvent.ctrlKey) { let selectedIndex = selectedEntities.indexOf(entityID); if (selectedIndex >= 0) { @@ -759,7 +772,7 @@ function loaded() { }, false); // close context menu when switching focus to another window - $(window).blur(function(){ + $(window).blur(function() { entityListContextMenu.close.call(entityListContextMenu); }); } diff --git a/scripts/system/html/js/entityListContextMenu.js b/scripts/system/html/js/entityListContextMenu.js index 59ae2f1f73..62fe951ebe 100644 --- a/scripts/system/html/js/entityListContextMenu.js +++ b/scripts/system/html/js/entityListContextMenu.js @@ -19,6 +19,8 @@ const CONTEXT_MENU_CLASS = "context-menu"; function EntityListContextMenu() { this._elContextMenu = null; this._callback = null; + this._listItems = []; + this._initialize(); } EntityListContextMenu.prototype = { @@ -38,6 +40,11 @@ EntityListContextMenu.prototype = { */ _selectedEntityID: null, + /** + * @private + */ + _listItems: null, + /** * Close the context menu */ @@ -55,10 +62,17 @@ EntityListContextMenu.prototype = { * Open the context menu * @param clickEvent * @param selectedEntityID + * @param enabledOptions */ - open: function(clickEvent, selectedEntityID) { + open: function(clickEvent, selectedEntityID, enabledOptions) { this._selectedEntityID = selectedEntityID; - // If the right-clicked item has a context menu open it. + + this._listItems.forEach(function(listItem) { + let enabled = enabledOptions.includes(listItem.label); + listItem.enabled = enabled; + listItem.element.setAttribute('class', enabled ? '' : 'disabled'); + }); + this._elContextMenu.style.display = "block"; this._elContextMenu.style.left = Math.min(clickEvent.pageX, document.body.offsetWidth - this._elContextMenu.offsetWidth).toString() + "px"; @@ -85,15 +99,21 @@ EntityListContextMenu.prototype = { let elListItem = document.createElement("li"); elListItem.innerText = itemLabel; - if (isEnabled === undefined || isEnabled) { - elListItem.addEventListener("click", function () { - if (this._callback) { - this._callback.call(this, itemLabel, this._selectedEntityID); - } - }.bind(this), false); - } else { - elListItem.setAttribute('class', 'disabled'); - } + let listItem = { + label: itemLabel, + element: elListItem, + enabled: false + }; + + elListItem.addEventListener("click", function () { + if (listItem.enabled && this._callback) { + this._callback.call(this, itemLabel, this._selectedEntityID); + } + }.bind(this), false); + + elListItem.setAttribute('class', 'disabled'); + + this._listItems.push(listItem); this._elContextMenu.appendChild(elListItem); }, @@ -109,8 +129,9 @@ EntityListContextMenu.prototype = { /** * Initialize the context menu. + * @private */ - initialize: function() { + _initialize: function() { this._elContextMenu = document.createElement("ul"); this._elContextMenu.setAttribute("class", CONTEXT_MENU_CLASS); document.body.appendChild(this._elContextMenu);