diff --git a/src/components/tools/lively-container.html b/src/components/tools/lively-container.html index 081ad6cf6..2d3b74e19 100644 --- a/src/components/tools/lively-container.html +++ b/src/components/tools/lively-container.html @@ -108,15 +108,6 @@ border-radius: 2px; } - #delete { - color: #b33630; - } - - #delete:hover { - background: linear-gradient(#dc5f59, #b33630); - color: white; - } - div.fill { display: flex; flex-direction: row; @@ -275,8 +266,6 @@ - + diff --git a/src/components/tools/lively-container.js b/src/components/tools/lively-container.js index 3273db8f1..2dc9ebe7e 100644 --- a/src/components/tools/lively-container.js +++ b/src/components/tools/lively-container.js @@ -511,7 +511,6 @@ export default class Container extends Morph { } }).then(() => { this.dispatchEvent(new CustomEvent("path-changed", {url: this.getURL()})); - this.updateFavInfo(); }) .catch(function(err){ console.log("Error: ", err); @@ -996,8 +995,13 @@ export default class Container extends Morph { evt.stopPropagation(); evt.preventDefault(); this.createNewEntry(evt) + } else if (evt.key === 'ContextMenu' && evt.ctrlKey) { + // #KeyboardShortcut Ctrl-ContextMenu open the actions/options menu + evt.stopPropagation(); + evt.preventDefault(); + this.onActionsMenu(evt) } else { - // lively.notify(evt.key, evt.code) + lively.notify(evt.key, evt.code) } } @@ -1127,11 +1131,6 @@ export default class Container extends Morph { } } - async onFavorite() { - await Favorites.toggle(this.getPath()); - this.updateFavInfo() - } - async onBeautify() { const ending = this.getPath()::fileEnding(); @@ -1191,11 +1190,6 @@ export default class Container extends Morph { editor.setText(beautifulText, true); } - onDelete() { - var url = this.getURL() +""; - this.deleteFile(url) - } - async onApply() { var url = this.getBaseURL(); var filename = url.replace(/.*\//,"") @@ -1518,9 +1512,6 @@ export default class Container extends Morph { const basePath = urlString.replace(/[^/]*$/,"") this.newDirectory(basePath, 'folder', '/') } - - - onVersions() { this.get("#editor").toggleVersions(); @@ -1534,6 +1525,117 @@ export default class Container extends Morph { }); } + async onActionsMenu(evt) { + const baseURL = this.getBaseURL(); + const basePath = baseURL.replace(/[^/]*$/,"") + + // 'edit' or 'show' + const mode = this.getAttribute('mode') + const isHTML = this.getURL().pathname.endsWith('.html') + + function enabledIcon(enabled) { + return enabled ? + '' : + '' + } + + function favedIcon(faved) { + return faved ? + '' : + '' + } + + const menuItems = []; + + if (mode === "edit") { + menuItems.push(["versions", (evt, item) => { + this.onVersions(evt) + }, '', ]); + } + + if (mode === "edit" || mode === 'show') { + menuItems.push(["save file", (evt, item) => { + this.onSave(evt) + }, 'CTRL+S', ]); + } + if (mode === "edit") { + menuItems.push(["save and view file", (evt, item) => { + this.onAccept(evt) + }, 'CTRL+SHIFT+S', ]); + } + + menuItems.push('---'); + + if (mode === "edit" || mode === 'show') { + menuItems.push(['fav this file', async (evt, item) => { + evt.stopPropagation(); + evt.preventDefault(); + + await Favorites.toggle(baseURL); + const faved = await Favorites.has(baseURL); + item.querySelector(".icon").innerHTML = favedIcon(faved); + },"", favedIcon(await Favorites.has(baseURL))]); + } + + if (mode === "edit") { + menuItems.push(["beautify the code", (evt, item) => { + this.onBeautify(evt) + }, '', ]); + } + if (mode === "edit" && isHTML) { + menuItems.push(["open in iframe", (evt, item) => { + this.onIframe(evt) + }, '', ]); + } + if (mode === "edit") { + menuItems.push(["open in test runner", (evt, item) => { + this.onSpawnTestRunner(evt) + }, '', ]); + } + if (mode === "edit") { + menuItems.push(["browse dependencies", (evt, item) => { + this.onDependencies(evt) + }, '', ]); + } + if (mode === "edit") { + menuItems.push(["sync changes", (evt, item) => { + this.onSync(evt) + }, '', ]); + } + if (mode === "edit" || mode === 'show') { + menuItems.push(["create new file", (evt, item) => { + this.onNewfile(evt) + }, '', ]); + } + if (mode === "edit" || mode === 'show') { + menuItems.push(["create new directory", (evt, item) => { + this.onNewdirectory(evt) + }, '', ]); + } + if (mode === "edit" || mode === 'show') { + menuItems.push(["fullscreen", (evt, item) => { + this.onFullscreen(evt) + }, '', ]); + } + + if (mode === "edit") { + menuItems.push(...[ + '---', + ["delete file", (evt, item) => { + var url = this.getURL() +""; + this.deleteFile(url) + }, '', ] + ]); + } + + const menu = new ContextMenu(this, menuItems, { + onEscape: () => this.focus() + }) + const menuElement = await menu.openIn(document.body, evt, this) + lively.centerIn(menuElement, this) + + menuElement.selectFirstItem() + } async onTextChanged() { if (!this.getURL().pathname.match(/\.((js)|(ts))$/)) { diff --git a/src/components/widgets/lively-menu.html b/src/components/widgets/lively-menu.html index 95314dc4d..c67c3f987 100644 --- a/src/components/widgets/lively-menu.html +++ b/src/components/widgets/lively-menu.html @@ -25,14 +25,14 @@ } .container { - width: 250px; - padding: 5px; - // border-radius: 5px; - // background-color: rgb(238, 238, 238); - background-color: white; - border: 0.7px solid gray; - margin: 0; - padding: 0px; + width: 250px; + padding: 5px; + // border-radius: 5px; + // background-color: rgb(238, 238, 238); + background-color: white; + border: 0.7px solid gray; + margin: 0; + padding: 0px; } ul { margin: 0; @@ -50,10 +50,18 @@ list-style-type: none; color: #1a1a1a; } + ul li:has(.danger) { + color: #b33630; + } ul li.current { background-color: #778899; color: white; } + ul li.current:has(.danger) { + background: linear-gradient(#dc5f59, #b33630); + color: white; + } + span.submenuindicator { font-size: 9px; color: darkgray; diff --git a/src/components/widgets/lively-menu.js b/src/components/widgets/lively-menu.js index 25e004053..dfb704042 100644 --- a/src/components/widgets/lively-menu.js +++ b/src/components/widgets/lively-menu.js @@ -214,8 +214,8 @@ export default class LivelyMenu extends Morph { return this.items.filter(item => !this.matchFilter(item)); } - onSpaceDown(evt) { - lively.warn('should toggle binary Preferences'); + onSpaceUp(evt) { + this.onEnterUp(evt) } onUpDown(evt) {