Skip to content

Commit

Permalink
redesigned button list in container to context menu
Browse files Browse the repository at this point in the history 
SQUASHED: AUTO-COMMIT-demos-stefan-review.md,AUTO-COMMIT-src-components-tools-lively-container.html,AUTO-COMMIT-src-components-tools-lively-container.js,
  • Loading branch information
@onsetsu
onsetsu committed Sep 3, 2024
1 parent 2399bc2 commit 69e039a
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 100 deletions.
48 changes: 2 additions & 46 deletions src/components/tools/lively-container.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,18 +144,7 @@
table.directory .thumbnail{
height: 100px;
}
#eval {

height: 20px;
margin: 6px 1px 0px 4px;
}

#evaltext {
font-size: 13px;
line-height: 15px;
margin: 6px 2px 0px 4px;
}


#fullscreenInline {
font-size: 10pt;
position:absolute;
Expand Down Expand Up @@ -243,48 +232,15 @@

<input type="text" id="container-path" value="">

<div class="optional edit" id="eval">
<input type="checkbox" id="live" title="auto apply code or template on save" checked/>
<label for="live">eval</label>
<input type="checkbox" id="deep" title="deep dependency update" checked/>
<label for="deep">deep</label>
</div>

<button class="optional edit browse" id="favorite" title="fav this file">
<i class="fa fa-star-o"></i></button>
<button class="optional edit" id="beautify" title="beautify the code">
<i class="fa fa-paint-brush"></i></button>
<button class="edit" id="apply" title="apply code or template">
<i class="fa fa-gears" aria-hidden="true"></i></button>
<button class="optional edit" id="iframe" title="open html in an iframe">
<i class="fa fa-html5" aria-hidden="true"></i></button>
<button class="optional edit" id="spawnTestRunner" title="spawn test runner">
<i class="fa fa-check-square-o" aria-hidden="true"></i></button>
<button class="edit" id="browse" title="open new browser for url">
<i class="fa fa-external-link" aria-hidden="true"></i></button>
<button class="optional edit" id="dependencies" title="browse dependencies">
<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 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">
<i class="fa fa-folder-o" aria-hidden="true"></i></button>
<button class="optional edit" id="versions" title="versions">
<i class="fa fa-code-fork" aria-hidden="true"></i></button>
<button class="optional browse edit" id="save" title="save file CTRL+S">
<i class="fa fa-floppy-o" aria-hidden="true"></i></button>
<button class="optional edit" id="accept" title="accept changes CTRL+SHIFT+S">
<i class="fa fa-check-circle" aria-hidden="true"></i></button>
<button class="edit" id="cancel" title="return to view without changes">
<i class="fa fa-ban" aria-hidden="true"></i></button>
<button class="browse" id="edit" title="edit file">
<i class="fa fa-pencil" aria-hidden="true"></i></button>
<button class="optional browse edit" id="fullscreen" title="fullscreen">
<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">
<button class="browse edit" id="actionsMenu" title="more actions/options (Ctrl-ContextMenu)">
<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>
Expand Down
139 changes: 85 additions & 54 deletions src/components/tools/lively-container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -739,7 +739,7 @@ export default class Container extends Morph {
}

isDeepEvaling() {
return this.get("#deep").checked && this.sourceContent && !this.sourceContent.match(/\"disable deepeval\"/)
return this.isDeepDependencyUpdateEnabled() && this.sourceContent && !this.sourceContent.match(/\"disable deepeval\"/)
}

async loadModule(url) {
Expand Down Expand Up @@ -964,6 +964,33 @@ export default class Container extends Morph {
lively.notify("created " + fileName);
this.followPath(fileName);
}

/*MD ## Live Programming Config MD*/

isDeepDependencyUpdateEnabled() {
return !this.hasAttribute('disable-deep-update')
}

setDeepDependencyUpdateEnabled(enabled) {
if (enabled) {
this.removeAttribute("disable-deep-update");
} else {
this.setAttribute("disable-deep-update", "true");
}
}

isLiveEvalEnabled() {
return !this.hasAttribute('disable-live-eval')
}

setLiveEvalEnabled(enabled) {
if (enabled) {
this.removeAttribute("disable-live-eval");
} else {
this.setAttribute("disable-live-eval", "true");
}
}

/*MD ## Events MD*/

onKeyDown(evt) {
Expand Down Expand Up @@ -1001,7 +1028,7 @@ export default class Container extends Morph {
evt.preventDefault();
this.onActionsMenu(evt)
} else {
lively.notify(evt.key, evt.code)
// lively.notify(evt.key, evt.code)
}
}

Expand Down Expand Up @@ -1123,14 +1150,6 @@ export default class Container extends Morph {
this.parentElement.remove()
}

async onToggleOptions() {
if (this.classList.contains('show-options')) {
this.classList.remove('show-options');
} else {
this.classList.add('show-options');
}
}

async onBeautify() {
const ending = this.getPath()::fileEnding();

Expand Down Expand Up @@ -1470,7 +1489,7 @@ export default class Container extends Morph {
await this.reloadModule(url); // use our own mechanism...
} else if (this.getURL().pathname.match(testRegexp)) {
await this.loadTestModule(url);
} else if (this.get("#live").checked) {
} else if (this.isLiveEvalEnabled()) {
// lively.notify("load module " + moduleName)
await this.loadModule("" + url)
console.log("START DEP TEST RUN");
Expand Down Expand Up @@ -1531,6 +1550,8 @@ export default class Container extends Morph {

// 'edit' or 'show'
const mode = this.getAttribute('mode')
const editMode = mode === "edit";
const showMode = mode === "show";
const isHTML = this.getURL().pathname.endsWith('.html')

function enabledIcon(enabled) {
Expand All @@ -1547,80 +1568,102 @@ export default class Container extends Morph {

const menuItems = [];

if (mode === "edit") {
if (editMode) {
menuItems.push(...[
['eval eval', async (evt, item) => {
evt.stopPropagation();
evt.preventDefault();

const newState = !this.isLiveEvalEnabled()
this.setLiveEvalEnabled(newState)
item.querySelector(".icon").innerHTML = enabledIcon(newState);
},"apply code/template on save", enabledIcon(this.isLiveEvalEnabled())],
['deep update', async (evt, item) => {
evt.stopPropagation();
evt.preventDefault();

const newState = !this.isDeepDependencyUpdateEnabled()
this.setDeepDependencyUpdateEnabled(newState)
item.querySelector(".icon").innerHTML = enabledIcon(newState);
},"deep dependency update", enabledIcon(this.isDeepDependencyUpdateEnabled())],
'---',
]);

}

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

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

menuItems.push('---');

if (mode === "edit" || mode === 'show') {
menuItems.push(['fav this file', async (evt, item) => {
if (editMode || showMode) {
menuItems.push(['fav 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))]);
},"add file to favorites list", favedIcon(await Favorites.has(baseURL))]);
}

if (mode === "edit") {
menuItems.push(["beautify the code", (evt, item) => {
if (editMode) {
menuItems.push(["beautify code", (evt, item) => {
this.onBeautify(evt)
}, '', <i class="fa fa-paint-brush"></i>]);
}, 'auto-formatting', <i class="fa fa-paint-brush"></i>]);
}
if (mode === "edit" && isHTML) {
if (editMode && isHTML) {
menuItems.push(["open in iframe", (evt, item) => {
this.onIframe(evt)
}, '', <i class="fa fa-html5" aria-hidden="true"></i>]);
}
if (mode === "edit") {
if (editMode) {
menuItems.push(["open in test runner", (evt, item) => {
this.onSpawnTestRunner(evt)
}, '', <i class="fa fa-list" aria-hidden="true"></i>]);
}
if (mode === "edit") {
if (editMode) {
menuItems.push(["browse dependencies", (evt, item) => {
this.onDependencies(evt)
}, '', <i class="fa fa-sitemap" aria-hidden="true"></i>]);
}
if (mode === "edit") {
if (editMode) {
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>]);
}, 'open sync tool', <i class="fa fa-github" aria-hidden="true"></i>]);
}
if (mode === "edit" || mode === 'show') {

if (editMode || showMode) {
menuItems.push(["fullscreen", (evt, item) => {
this.onFullscreen(evt)
}, '', <i class="fa fa-arrows-alt" aria-hidden="true"></i>]);
}

if (mode === "edit") {
if (editMode || showMode) {
menuItems.push(...[
'---',
["create new file", (evt, item) => {
this.onNewfile(evt)
}, '', <i class="fa fa-file-o" aria-hidden="true"></i>],
["create new directory", (evt, item) => {
this.onNewdirectory(evt)
}, '', <i class="fa fa-folder-o" aria-hidden="true"></i>]
]);
}
if (editMode) {
menuItems.push(...[
["delete file", (evt, item) => {
var url = this.getURL() +"";
this.deleteFile(url)
Expand All @@ -1632,7 +1675,8 @@ export default class Container extends Morph {
onEscape: () => this.focus()
})
const menuElement = await menu.openIn(document.body, evt, this)
lively.centerIn(menuElement, this)
const pos = lively.getClientPositionAt(this.get('#actionsMenu'), 'bl')
lively.setClientPositionAt(menuElement, pos, 'tr')

menuElement.selectFirstItem()
}
Expand Down Expand Up @@ -2439,19 +2483,6 @@ export default class Container extends Morph {
}
}

// #private
async updateFavInfo() {
const starIcon = this.get('#favorite').querySelector('i');

if (await Favorites.has(this.getPath())) {
starIcon.classList.add('fa-star');
starIcon.classList.remove('fa-star-o');
} else {
starIcon.classList.add('fa-star-o');
starIcon.classList.remove('fa-star');
}
}

observeHTMLChanges() {
if (this.mutationObserver) this.mutationObserver.disconnect()
this.mutationObserver = new MutationObserver((mutations, observer) => {
Expand Down

0 comments on commit 69e039a

Please sign in to comment.