add mesh drop menu like kiri. add slicer / mesh editor menu items in each app. works in electron
This commit is contained in:
Stewart Allen
parent
1927f892c0
commit
c00e4995e6
8 changed files with 131 additions and 47 deletions
|
|
@ -45,14 +45,17 @@ function createWindow() {
|
|||
|
||||
// default normal url navigation or page opens to happen outside Electron
|
||||
mainWindow.webContents.setWindowOpenHandler((details) => {
|
||||
// console.log('EXTERNAL');
|
||||
// console.log('EXTERNAL', details);
|
||||
shell.openExternal(details.url);
|
||||
return { action: 'deny' }
|
||||
});
|
||||
|
||||
// prevent "other" urls from opening inside Electron (alerts are problematic)
|
||||
mainWindow.webContents.on('will-navigate', (event, url) => {
|
||||
// console.log('DIVERT');
|
||||
// console.log('DIVERT', url);
|
||||
if (url.endsWith('/mesh') || url.endsWith('/kiri')) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
shell.openExternal(url);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1580,6 +1580,7 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
},
|
||||
acct: {
|
||||
help: $('app-help'),
|
||||
mesh: $('app-mesh'),
|
||||
export: $('app-export')
|
||||
},
|
||||
dev: {
|
||||
|
|
@ -2694,6 +2695,7 @@ gapp.register("kiri.init", [], (root, exports) => {
|
|||
$('set-tools').onclick = (ev) => { ev.stopPropagation(); showTools() };
|
||||
$('set-prefs').onclick = (ev) => { ev.stopPropagation(); api.modal.show('prefs') };
|
||||
ui.acct.help.onclick = (ev) => { ev.stopPropagation(); api.help.show() };
|
||||
ui.acct.mesh.onclick = (ev) => { ev.stopPropagation(); WIN.location = "/mesh" };
|
||||
ui.acct.export.onclick = (ev) => { ev.stopPropagation(); profileExport() };
|
||||
ui.acct.export.title = LANG.acct_xpo;
|
||||
$('file-recent').onclick = () => { api.modal.show('files') };
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@ gapp.main("main.mesh", [], (root) => {
|
|||
|
||||
const { Quaternion } = THREE;
|
||||
const { broker } = gapp;
|
||||
const { moto } = root;
|
||||
const { mesh, moto } = root;
|
||||
const { space } = moto;
|
||||
|
||||
const version = '1.4.3';
|
||||
const version = mesh.version = '1.4.3';
|
||||
const call = broker.send;
|
||||
const dbindex = [ "admin", "space" ];
|
||||
|
||||
|
|
|
|||
|
|
@ -992,6 +992,14 @@ const api = exports({
|
|||
window.location = "/choose?back";
|
||||
},
|
||||
|
||||
donate() {
|
||||
window.open("https://www.paypal.com/paypalme/gridspace3d");
|
||||
},
|
||||
|
||||
kirimoto() {
|
||||
window.location = "/kiri";
|
||||
},
|
||||
|
||||
clear() {
|
||||
for (let group of group.list()) {
|
||||
group.remove(group);
|
||||
|
|
|
|||
|
|
@ -293,9 +293,19 @@ function ui_build() {
|
|||
const eye_open = FontAwesome.icon({ prefix: "fas", iconName: "eye" }).html[0];
|
||||
const eye_closed = FontAwesome.icon({ prefix: "fas", iconName: "eye-slash" }).html[0];
|
||||
|
||||
// set app version
|
||||
$h('app-name', "Mesh:Tool");
|
||||
$h('app-vers', 'beta' /* gapp.version */);
|
||||
// app name and drop menu
|
||||
h.bind($('app-info'), [
|
||||
h.div({ id: "app-name", _: "Mesh:Tool" }),
|
||||
h.div({ id: "app-menu" }, [
|
||||
h.div({ _: "help", onclick: api.help }),
|
||||
h.hr(),
|
||||
// h.div({ _: "version", onclick: api.version }),
|
||||
h.div({ _: "donate", onclick: api.donate }),
|
||||
h.div({ _: "slicer", onclick: api.kirimoto }),
|
||||
h.hr(),
|
||||
h.div({ id: "app-vers", _: mesh.version }),
|
||||
])
|
||||
]);
|
||||
|
||||
// add a help button
|
||||
h.bind($('top-right'), [
|
||||
|
|
|
|||
|
|
@ -67,6 +67,9 @@
|
|||
<div id="app-help">
|
||||
<label lk="help">help</label>
|
||||
</div>
|
||||
<div>
|
||||
<label id="app-mesh">mesh edit</label>
|
||||
</div>
|
||||
<hr width="100%">
|
||||
<div>
|
||||
<label id="app-info">version</label>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
:root {
|
||||
--fg-gray: #495057;
|
||||
--bg-gray: rgba(0,0,0,0.25);
|
||||
--bg-top: rgba(255,255,255,0.55);
|
||||
--bg-smoke: rgba(0,0,0,0.25);
|
||||
--dark-bg-smoke: rgba(255,255,255,0.25);
|
||||
--hover-menu: white;
|
||||
--dark-hover-menu: #888;
|
||||
--gradbar: linear-gradient(to right, #ddd, #666, #ddd);
|
||||
--holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1));
|
||||
--holdbar-sf: linear-gradient(to top, rgba(200,200,200,0.1), rgba(255,255,255,1), rgba(200,200,200,0.1)) !important;
|
||||
--highlight: rgba(126,153,183,0.4);
|
||||
--main-color: rgba(126,153,183,1);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -13,6 +13,43 @@
|
|||
src: url('/moto/russo-one.ttf');
|
||||
}
|
||||
|
||||
/** dark overrides */
|
||||
|
||||
.dark #logger, .dark #modal_frame, .dark #actions > div, .dark #grouplist > div, .dark #actions .pop {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
.dark #actions > div {
|
||||
background-color: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
.dark #top-right > div {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.dark #top-right > div:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dark #app-info:hover {
|
||||
background-color: var(--dark-hover-menu);
|
||||
}
|
||||
|
||||
.dark #app-info:hover {
|
||||
background-color: var(--dark-bg-smoke);
|
||||
}
|
||||
|
||||
.dark #app-menu {
|
||||
background-color: var(--dark-hover-menu);
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.dark #app-menu > div:hover {
|
||||
background-color: var(--dark-bg-smoke);
|
||||
}
|
||||
|
||||
/** defaults */
|
||||
|
||||
a, a:hover, a:visited {
|
||||
border: none;
|
||||
color: inherit;
|
||||
|
|
@ -27,6 +64,16 @@ body, div {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 0.5px;
|
||||
max-height: 0.5px;
|
||||
border-top: 0.5px solid rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: #eee;
|
||||
border-radius: 3px;
|
||||
|
|
@ -47,33 +94,57 @@ input {
|
|||
}
|
||||
|
||||
#app-info {
|
||||
z-index: 50;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#app-name {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#app-info:hover {
|
||||
border-left: 1px solid rgba(0,0,0,0.5);
|
||||
border-right: 1px solid rgba(0,0,0,0.5);
|
||||
background-color: var(--bg-smoke);
|
||||
}
|
||||
|
||||
#app-info:hover #app-menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#app-menu {
|
||||
display: none;
|
||||
font-size: smaller;
|
||||
position: absolute;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
background-color: var(--hover-menu);
|
||||
white-space: nowrap;
|
||||
border: 1px solid rgba(0,0,0,0.5);
|
||||
border-top: 1px dashed !important;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
padding: 3px;
|
||||
width: calc(100% - 6px);
|
||||
top: 100%;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
#app-menu > div {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#app-info:hover #app-vers {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#app-vers {
|
||||
display: none;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
font-size: smaller;
|
||||
font-family: monospace;
|
||||
transform: translate(5px,-50%);
|
||||
color: var(--fg-gray);
|
||||
margin: 0;
|
||||
padding: 2px 3px 2px 3px;
|
||||
border: 1px solid rgba(0,0,0,0.25);
|
||||
border-radius: 3px;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
#app-menu > div:hover {
|
||||
background-color: var(--bg-smoke);
|
||||
}
|
||||
|
||||
#app-body {
|
||||
|
|
@ -111,11 +182,10 @@ input {
|
|||
}
|
||||
|
||||
#top {
|
||||
z-index: 2;
|
||||
padding: 3px 0 3px 0;
|
||||
z-index: 50;
|
||||
flex-direction: row;
|
||||
font-family: 'Russo One', sans-serif;
|
||||
background-color: rgba(255,255,255,0.55);
|
||||
background-color: var(--bg-top);
|
||||
}
|
||||
|
||||
#top-sep {
|
||||
|
|
@ -124,6 +194,10 @@ input {
|
|||
background-image: var(--gradbar);
|
||||
}
|
||||
|
||||
#top > div {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
|
@ -191,14 +265,6 @@ button:hover {
|
|||
color: black;
|
||||
}
|
||||
|
||||
.dark #top-right > div {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.dark #top-right > div:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/** specific modal dialogs */
|
||||
|
||||
.export {
|
||||
|
|
@ -270,7 +336,7 @@ button:hover {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
z-index: 50 !important;
|
||||
z-index: 500 !important;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
|
@ -283,7 +349,7 @@ button:hover {
|
|||
background-color: #fff !important;
|
||||
flex-direction: column;
|
||||
padding: 0 !important; /* override common below */
|
||||
z-index: 51;
|
||||
/* z-index: 51; */
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -410,14 +476,6 @@ button:hover {
|
|||
|
||||
/** common look & feel */
|
||||
|
||||
.dark #logger, .dark #modal_frame, .dark #actions > div, .dark #grouplist > div, .dark #actions .pop {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
.dark #actions > div {
|
||||
background-color: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
#logger, #modal_frame, #actions > div, #grouplist > div {
|
||||
border: 1px solid gray;
|
||||
border-radius: 3px;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<div id="container"></div>
|
||||
<div id="top">
|
||||
<div id="top-left"></div>
|
||||
<div id="app-info"><div id="app-name"></div><div id="app-vers">version</div></div>
|
||||
<div id="app-info"></div>
|
||||
<div id="top-right"></div>
|
||||
</div>
|
||||
<div id="top-sep"></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue