diff --git a/release.md b/release.md index 5c62017b..a2a79c53 100644 --- a/release.md +++ b/release.md @@ -30,6 +30,6 @@ * `C` add preferences for normal length and color * `-` add preferences for face selection and matching -* `-` svg and image import conversion (share code with Kiri:Moto) -* `-` add version chooser -* `-` welcome help menu +* `-` add svg and image import conversion (share code with Kiri:Moto) +* `C` add version chooser +* `-` add welcome menu diff --git a/src/kiri/main.js b/src/kiri/main.js index 55a1d765..cfdd9abb 100644 --- a/src/kiri/main.js +++ b/src/kiri/main.js @@ -105,7 +105,7 @@ gapp.register("kiri.main", [], (root, exports) => { on(t,l) { return EVENT.on(t,l) }, emit(t,m,o) { return EVENT.publish(t,m,o) }, bind(t,m,o) { return EVENT.bind(t,m,o) }, - alerts() { api.alerts.update() }, + alerts(clr) { api.alerts.update(clr) }, import: loadFile, settings: triggerSettingsEvent }, diff --git a/src/main/mesh.js b/src/main/mesh.js index 8c4b813a..c0a0b782 100644 --- a/src/main/mesh.js +++ b/src/main/mesh.js @@ -19,6 +19,7 @@ const { broker } = gapp; const { moto } = root; const { space } = moto; +const version = '1.0.0'; const call = broker.send; const dbindex = [ "admin", "space" ]; @@ -144,6 +145,9 @@ function restore_space() { }).finally(() => { // hide loading curtain $d('curtain','none'); + if (api.prefs.map.info.welcome !== false) { + api.welcome(version); + } }); } @@ -273,7 +277,7 @@ function space_init(data) { return; } if (evt.key === '?') { - return api.help(); + return api.welcome(version); } let { shiftKey, metaKey, ctrlKey, code } = evt; switch (code) { @@ -532,7 +536,6 @@ function set_normals_length(length) { } function set_normals_color(color) { -console.log({color}); let { prefs } = mesh.api; let { map } = prefs; if (map.space.dark) { diff --git a/src/mesh/build.js b/src/mesh/build.js index 7144baf3..c9e19911 100644 --- a/src/mesh/build.js +++ b/src/mesh/build.js @@ -176,6 +176,37 @@ const log = api.log = { // bind endpoint for worker to log in the ui gapp.broker.subscribe("mesh.log", log.emit); +// welcome dialog +api.welcome = function(version = "unknown") { + const { prefs } = api; + const { map } = prefs; + modal.show('About Mesh:Tool', h.div({ class:"welcome" }, [ + h.a({ + target: "docs", + _: "Guide & Documentation", + href: "https://docs.grid.space/projects/mesh-tool" + }), + h.a({ + target: "docs", + _: "Grid.Space", + href: "https://grid.space/" + }), + h.div(`Version: ${version}`), + h.hr({ width: "100%" }), + h.div({ class: "choice" }, [ + h.input({ + type: "checkbox", + [ map.info.welcome !== false ? 'checked' : 'unchecked' ] : 1, + onchange: (ev) => { + map.info.welcome = ev.target.checked; + prefs.save(); + } + }), + h.div("show at startup") + ]), + ])); +}; + // bind settings endpoint to api api.settings = function() { const { util } = mesh; diff --git a/src/moto/webui.js b/src/moto/webui.js index 393825a5..1095fe86 100644 --- a/src/moto/webui.js +++ b/src/moto/webui.js @@ -119,7 +119,7 @@ gapp.overlay(root, { }); // add common element types -["a", "i", "div", "span", "label", "input", "button", "svg"].forEach(type => { +["a", "i", "hr", "div", "span", "label", "input", "button", "svg"].forEach(type => { h[type] = (attr, innr) => { return h.el(type, attr, innr); } diff --git a/web/mesh/index.css b/web/mesh/index.css index bdbc8064..797b4df0 100644 --- a/web/mesh/index.css +++ b/web/mesh/index.css @@ -27,6 +27,12 @@ body, div { margin: 0; } +input { + background-color: #eee; + border-radius: 3px; + border: 1px solid black; +} + #app { position: fixed; overflow: hidden; @@ -230,7 +236,7 @@ button:hover { #modal_frame { border-radius: 4px !important; - background-color: rgba(255,255,255,0.9) !important; + background-color: #fff !important; flex-direction: column; padding: 0 !important; /* override common below */ z-index: 51; @@ -264,6 +270,30 @@ button:hover { color: black; } +/** welcome dialog **/ + +.welcome { + flex-direction: column; + align-items: center; + padding: 5px; + gap: 5px; + font-size: smaller; +} + +.welcome a { + color: #038; + border-radius: 3px; + padding: 0 10px 0 10px; +} + +.welcome a:hover { + background-color: #ddd; +} + +.welcome .choice { + gap: 5px +} + /** settings dialog **/ .settings {