Skip to content

Commit

Permalink
container buttons to action list work in progress
Browse files Browse the repository at this point in the history 
SQUASHED: AUTO-COMMIT-src-components-tools-lively-container.html,AUTO-COMMIT-src-components-tools-lively-container.js,AUTO-COMMIT-src-components-widgets-lively-menu.html,AUTO-COMMIT-src-components-widgets-lively-menu.js,
  • Loading branch information
@onsetsu
onsetsu committed Sep 3, 2024
1 parent 69f5554 commit 2399bc2
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 36 deletions.
13 changes: 2 additions & 11 deletions src/components/tools/lively-container.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -275,8 +266,6 @@
<i class="fa fa-sitemap" aria-hidden="true"></i></button>
<button class="optional edit" id="sync" title="sync changes">
<i class="fa fa-refresh" aria-hidden="true"></i></button>
<button class="optional edit" id="delete" title="delete file">
<i class="fa fa-trash" aria-hidden="true"></i></button>
<button class="optional browse edit" id="newfile" title="create new file">
<i class="fa fa-file-o" aria-hidden="true"></i></button>
<button class="optional browse edit" id="newdirectory" title="create new directory">
Expand All @@ -295,6 +284,8 @@
<i class="fa fa-arrows-alt" aria-hidden="true"></i></button>
<button class="browse edit" id="toggleOptions" title="more options">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i></button>
<button class="browse edit" id="actionsMenu" title="more actions/options">
<i class="fa fa-bars" aria-hidden="true"></i></button>
<button class="" id="close" title="close">
<i class="fa fa-close" aria-hidden="true"></i></button>
</div>
Expand Down
132 changes: 117 additions & 15 deletions src/components/tools/lively-container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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)
}
}

Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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(/.*\//,"")
Expand Down Expand Up @@ -1518,9 +1512,6 @@ export default class Container extends Morph {
const basePath = urlString.replace(/[^/]*$/,"")
this.newDirectory(basePath, 'folder', '/')
}




onVersions() {
this.get("#editor").toggleVersions();
Expand All @@ -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 ?
'<i class="fa fa-check-square-o" aria-hidden="true"></i>' :
'<i class="fa fa-square-o" aria-hidden="true"></i>'
}

function favedIcon(faved) {
return faved ?
'<i class="fa fa-star" aria-hidden="true"></i>' :
'<i class="fa fa-star-o" aria-hidden="true"></i>'
}

const menuItems = [];

if (mode === "edit") {
menuItems.push(["versions", (evt, item) => {
this.onVersions(evt)
}, '', <i class="fa fa-code-fork" aria-hidden="true"></i>]);
}

if (mode === "edit" || mode === 'show') {
menuItems.push(["save file", (evt, item) => {
this.onSave(evt)
}, 'CTRL+S', <i class="fa fa-floppy-o" aria-hidden="true"></i>]);
}
if (mode === "edit") {
menuItems.push(["save and view file", (evt, item) => {
this.onAccept(evt)
}, 'CTRL+SHIFT+S', <i class="fa fa-check-circle" aria-hidden="true"></i>]);
}

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)
}, '', <i class="fa fa-paint-brush"></i>]);
}
if (mode === "edit" && isHTML) {
menuItems.push(["open in iframe", (evt, item) => {
this.onIframe(evt)
}, '', <i class="fa fa-html5" aria-hidden="true"></i>]);
}
if (mode === "edit") {
menuItems.push(["open in test runner", (evt, item) => {
this.onSpawnTestRunner(evt)
}, '', <i class="fa fa-list" aria-hidden="true"></i>]);
}
if (mode === "edit") {
menuItems.push(["browse dependencies", (evt, item) => {
this.onDependencies(evt)
}, '', <i class="fa fa-sitemap" aria-hidden="true"></i>]);
}
if (mode === "edit") {
menuItems.push(["sync changes", (evt, item) => {
this.onSync(evt)
}, '', <i class="fa fa-refresh" aria-hidden="true"></i>]);
}
if (mode === "edit" || mode === 'show') {
menuItems.push(["create new file", (evt, item) => {
this.onNewfile(evt)
}, '', <i class="fa fa-file-o" aria-hidden="true"></i>]);
}
if (mode === "edit" || mode === 'show') {
menuItems.push(["create new directory", (evt, item) => {
this.onNewdirectory(evt)
}, '', <i class="fa fa-folder-o" aria-hidden="true"></i>]);
}
if (mode === "edit" || mode === 'show') {
menuItems.push(["fullscreen", (evt, item) => {
this.onFullscreen(evt)
}, '', <i class="fa fa-arrows-alt" aria-hidden="true"></i>]);
}

if (mode === "edit") {
menuItems.push(...[
'---',
["delete file", (evt, item) => {
var url = this.getURL() +"";
this.deleteFile(url)
}, '', <i class="fa fa-trash danger" aria-hidden="true" ></i>]
]);
}

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))$/)) {
Expand Down
24 changes: 16 additions & 8 deletions src/components/widgets/lively-menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/components/widgets/lively-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down

0 comments on commit 2399bc2

Please sign in to comment.