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) {