cleanup help

2020-06-07 10:43:07 -04:00 · 2020-06-07 10:43:07 -04:00 · 52eca70376
commit 52eca70376
parent 10bd1c94d2
6 changed files with 171 additions and 115 deletions
--- a/src/kiri/init.js
+++ b/src/kiri/init.js
@ -1167,12 +1167,12 @@
            extOffsetY:       UC.newInput(LANG.dv_exoy_s, {title:LANG.dv_exoy_l, convert:UC.toFloat, modes:FDM, expert:true}),
            extSelect:        UC.newText(LANG.dv_exts_s, {title:LANG.dv_exts_l, modes:FDM, size:14, height:3, modes:FDM, expert:true, area:gcode}),
            extrudeAbs:       UC.newBoolean(LANG.dv_xtab_s, onBooleanClick, {title:LANG.dv_xtab_l, modes:FDM}),
-            extActions:       UC.newTableRow([[
-                UI.extPrev = UC.newButton("<"),
-                UI.extAdd = UC.newButton("+"),
-                UI.extDel = UC.newButton("-"),
-                UI.extNext = UC.newButton(">")
-            ]], {modes:FDM, expert:true}),
+            extActions:       UC.newRow([
+                UI.extPrev = UC.newButton(undefined, undefined, {icon:'<i class="fas fa-less-than"></i>'}),
+                UI.extAdd = UC.newButton(undefined, undefined, {icon:'<i class="fas fa-plus"></i>'}),
+                UI.extDel = UC.newButton(undefined, undefined, {icon:'<i class="fas fa-minus"></i>'}),
+                UI.extNext = UC.newButton(undefined, undefined, {icon:'<i class="fas fa-greater-than"></i>'})
+            ], {modes:FDM, expert:true, class:"ext-buttons"}),

            gcode:            UC.newGroup(LANG.dv_gr_gco, $('device'), {group:"dgco", inline:true, modes:GCODE}),
            gcodeFan:         UC.newInput(LANG.dv_fanp_s, {title:LANG.dv_fanp_l, modes:FDM, size:"40%", text:true}),
--- a/src/kiri/main.js
+++ b/src/kiri/main.js
@ -1807,14 +1807,13 @@
        }
        ajax(local, function(html) {
            UI.help.innerHTML = html;
-            $('kiri-version').innerHTML = `<i>${LANG.version} ${KIRI.version}</i>`;
+            $('kiri-version').innerHTML = `${LANG.version} ${KIRI.version}`;
            showModal('help');
        });
        API.event.emit('help.show', local);
    }

    function showLocal() {
-//        $('local-close').onclick = hideModal;
        showModal('local');
        fetch("/api/grid_local")
            .then(r => r.json())
@ -1901,7 +1900,7 @@
    }

    function setExpert(bool) {
-        UC.setExpert(UI.expert.checked = control.expert = bool);
+        UC.setExpert(UI.expert.checked = bool);
    }

    function getMode() {
--- a/src/kiri/ui.js
+++ b/src/kiri/ui.js
@ -267,6 +267,7 @@
        return div;
    }

+    let lastTxt = null;
    let lastPop = null;
    let savePop = null;

@ -289,7 +290,6 @@
        let opt = options || {},
            row = newDiv(options),
            btn = DOC.createElement("button"),
-            box = DOC.createElement("div"),
            pop = DOC.createElement("div"),
            txt = DOC.createElement("textarea"),
            area = opt.area;
@ -298,7 +298,6 @@
        txt.setAttribute("spellcheck", "false");
        txt.setAttribute("style", "resize: none");

-        box.appendChild(pop);
        btn.appendChild(DOC.createTextNode("edit"));

        btn.onclick = function(ev) {
@ -311,7 +310,6 @@
                if (fc) area.removeChild(fc);
                area.appendChild(txt);
                // first time, button click / show
-                btn.parentNode.appendChild(box);
                btn.parentNode.onclick = btn.onclick;
                txt.scrollTop = 0;
                txt.scrollLeft = 0;
@ -327,9 +325,14 @@
                let showing = pop === lastPop;
                hidePop();
                if (!showing) {
+                    if (lastTxt) {
+                        lastTxt.classList.remove('txt-sel');
+                    }
+                    row.classList.add('txt-sel');
                    savePop = inputAction;
                    pop.style.display = "flex";
                    lastPop = pop;
+                    lastTxt = row;
                    txt.focus();
                } else {
                    inputAction();
@ -510,24 +513,27 @@
    }

    function newButton(label, action, options) {
-        let b = DOC.createElement('button'),
-            t = DOC.createTextNode(label);
+        let opt = options || {},
+            b = DOC.createElement('button');

        b.onclick = function() {
            hidePoppers();
            if (action) action();
        };

-        if (options) {
-            if (options.class) b.classList.add(options.class);
-            if (options.icon) {
-                let d = DOC.createElement('div');
-                d.innerHTML = options.icon;
-                b.appendChild(d);
-            }
+        if (opt.class) {
+            opt.class.split(' ').forEach(ce => {
+                b.classList.add(ce);
+            });
+        }
+        if (opt.icon) {
+            let d = DOC.createElement('div');
+            d.innerHTML = opt.icon;
+            b.appendChild(d);
+        }
+        if (label) {
+            b.appendChild(DOC.createTextNode(label));
        }
-
-        b.appendChild(t);

        addModeControls(b, options);
        addId(b, options);
@ -560,6 +566,11 @@
        let row = addCollapsableElement((options && options.noadd) ? null : addTo);
        if (children) children.forEach(function (c) { row.appendChild(c) });
        addModeControls(row, options);
+        if (options && options.class) {
+            options.class.split(' ').forEach(ce => {
+                row.classList.add(ce);
+            });
+        }
        return row;
    }

--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@ -1,8 +1,9 @@
 :root {
    --fg-gray: #495057;
    --bg-gray: rgba(0,0,0,0.25);
+    --gradbar: linear-gradient(to right, #ddd, #666, #ddd);
 }
-a:hover, a:visited {
+a, a:hover, a:visited {
    border: none;
    color: inherit;
    text-decoration: none;
@ -240,7 +241,7 @@ th, tr, td {

 #mid-sep {
    height: 1px;
-    background-image: linear-gradient(to right, #ddd, #666, #ddd);
+    background-image: var(--gradbar);
 }

 #lt-top {
@ -270,7 +271,6 @@ th, tr, td {
    left: 100%;
    z-index: 10;
 }
-
 .pop-lcol > div {
    flex-direction: column;
    align-items: center;
@ -282,7 +282,6 @@ th, tr, td {
    width: 60px;
    color: var(--fg-gray);
 }
-
 .pop-lcol > div:hover {
    background-color: #eee;
    border: 1px solid #aaa;
@ -300,26 +299,36 @@ th, tr, td {
    left: -5px;
    background-color: rgba(255,255,255,0.75);
 }
-
 .lt-menu svg {
    font-size: 40px;
    text-align: center;
 }
-
 .lt-menu label {
    font-size: smaller;
 }
-
 .lt-menu:hover {
    background-color: #eee;
    border: 1px solid #aaa;
    color: #000;
 }
-
 .lt-menu:hover .pop-lcol {
    display: flex;
 }

+.ext-buttons button {
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    flex-grow: 1;
+    margin-top: 3px;
+}
+.txt-sel {
+    background-color: #eee;
+}
+.txt-sel button {
+    background-color: #ccc;
+}
+
 #end {
    text-align: center;
    font-size: smaller;
@ -379,7 +388,7 @@ th, tr, td {
    padding: 10px;
    min-height: 20px;
    font-size: smaller;
-    font-family: monospace;
+    xfont-family: monospace;
    background-color: rgba(255,255,255,0.75);
 }

@ -402,6 +411,53 @@ th, tr, td {
    background-color: var(--bg-gray);
 }

+#help p {
+    margin: 2px;
+}
+#help a {
+    font-weight: bold;
+    text-decoration: underline;
+}
+#help #kiri-version {
+    font-weight: bold;
+}
+#help .header {
+    background-image: var(--gradbar);
+    white-space: nowrap;
+    text-align: center;
+    justify-content: center;
+    border-radius: 5px;
+    padding: 1px 0 2px 0;
+    margin-bottom: 5px;
+    font-family: monospace;
+    color: white;
+}
+#help .title {
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    font-size: larger;
+    font-weight: bold;
+    padding: 10px;
+}
+#help .content {
+    white-space: nowrap;
+    flex-direction: column;
+    font-family: monospace;
+    margin: 3px 0 8px 0;
+}
+#help .footer {
+    font-family: monospace;
+    align-items: center;
+    white-space: nowrap;
+    flex-direction: column;
+    padding: 8px 0 3px 0;
+    border-top: 1px dashed black;
+}
+#help th, #help td {
+    font-family: monospace;
+}
+
 .dev-type {
    font-family: 'Russo One', sans-serif;
    flex-direction: column;
@ -423,9 +479,10 @@ th, tr, td {
    width: 33%;
 }
 .t-group {
-    background-image: linear-gradient(to right, #ddd, #666, #ddd);
+    background-image: var(--gradbar);
    white-space: nowrap;
    text-align: center;
+    justify-content: center;
    border-radius: 2px;
    padding: 1px 0 2px 0;
    margin: 5px 0 5px 0;
--- a/web/kiri/lang/en-help.html
+++ b/web/kiri/lang/en-help.html
@ -1,110 +1,99 @@
-<div id="help-body" class="row">
+<div id="help" class="row">

    <div id="help-left" class="col">
-        <p><center><b>Kiri:Moto</b></center></p>
+        <div class="title">Kiri:Moto</div>

-        <div class="grouphead">About</div>
+        <div class="header">About</div>

        <div class="content">
-        <a href="#" title="Kiri-e is the Japanese art of papercutting"><b>Kiri:Moto</b></a>
-        is an <a href="https://github.com/GridSpace/grid-apps" target="_github">open-source</a> slicer for
-        <br>
-        Laser cutting, 3D printing, CNC milling
+            <p><a href="#" title="Kiri-e is the Japanese art of papercutting"><b>Kiri:Moto</b></a> is an <a href="https://github.com/GridSpace/grid-apps" target="_github">open-source</a> slicer for</p>
+            <p>Laser cutting, 3D printing, CNC milling</p>
        </div>

-        <div class="grouphead">File Loading</div>
+        <div class="header">File Loading</div>

        <div class="content">
-        Drag and drop a <a href="https://en.wikipedia.org/wiki/STL_(file_format)" target="_stl">file</a> onto the grid
-        <br>
-        or import from your computer
+            <p>Drag and drop a <a href="https://en.wikipedia.org/wiki/STL_(file_format)" target="_stl">file</a> onto the grid</p>
+            <p>or import from your computer</p>
        </div>

-        <div class="grouphead">Workflow</div>
+        <div class="header">Integrations</div>

        <div class="content">
-        Select operating <u>mode</u><br>
-        Select target <u>device</u><br>
-        <u>Slice</u>, <u>Preview</u>, then <u>Export</u> GCode
+            <p>Kiri:Moto is also available through</p>
+            <p><a target="_onshape" href="https://appstore.onshape.com/apps/CAM/EAAEWYIOMQKBENEMYW2N7MF253CT4WYL6SUJGEY=/description"><b>Onshape</b></a> and
+            <a target="_thingiverse" href="http://www.thingiverse.com/apps/kirimoto/"><b>Thingiverse</b></a> as apps</p>
        </div>

-        <div class="grouphead">Integrations</div>
+        <div class="header">Resources</div>

        <div class="content">
-        Kiri:Moto is also available through<br>
-        <a target="_onshape" href="https://appstore.onshape.com/apps/CAM/EAAEWYIOMQKBENEMYW2N7MF253CT4WYL6SUJGEY=/description">Onshape</a> and
-        <a target="_thingiverse" href="http://www.thingiverse.com/apps/kirimoto/">Thingiverse</a> as apps
+            <p>Watch a <a target="_tutor" href="https://www.youtube.com/playlist?list=PLRoVgyRoWZpumQIKWm7oldx3bjDivqP24">tutorial</a> on YouTube</p>
+            <p>Follow <a target="_tw" href="https://twitter.com/grid_space_3d">Grid.Space</a> on Twitter</p>
+            <p>Join the <a target="_fb" href="https://www.facebook.com/groups/kirimoto">user group</a> on Facebook</p>
+            <p>Visit the <a target="_help" href="https://wiki.grid.space/wiki/Kiri:Moto">Wiki</a> on Github</p>
        </div>

-        <div class="grouphead">Resources</div>
-
-        <div class="content">
-        Watch <a target="_tutor" href="https://www.youtube.com/playlist?list=PLRoVgyRoWZpumQIKWm7oldx3bjDivqP24">a tutorial</a> on YouTube
-        <br>
-        Follow <a target="_tw" href="https://twitter.com/grid_space_3d">Grid.Space</a> on Twitter
-        <br>
-        Join the <a target="_fb" href="https://www.facebook.com/groups/kirimoto">user group</a> on Facebook
-        <br>
-        Visit the <a target="_help" href="https://wiki.grid.space/wiki/Kiri:Moto">Wiki</a> on Github
+        <div class="grow"></div>
+        <div class="footer">
+            <div id="kiri-version"></div>
+            <div>Please report bugs</div>
        </div>
-
-        <div class="help-post"><p id="kiri-version"></p></div>
    </div>

    <div id="help-right" class="col">
-        <p><center><b>Keyboard & Mouse Controls</b></center>
-        <p>
+        <div class="title">Keyboard & Mouse Controls</div>
+
        <div class="row">
-        <table>
-            <tr><th colspan=2 class="grouphead">Mode</th></tr>
-            <tr><td><label>a</label></td><td>Arrange</td></tr>
-            <tr><td><label>s</label></td><td>Slice</td></tr>
-            <tr><td><label>p</label></td><td>Preview</td></tr>
-            <tr><td><label>x</label></td><td>Export</td></tr>
-            <tr><td></td></tr>
-            <tr><th colspan=2 class="grouphead">View</th></tr>
-            <tr><td><label>h</label></td><td>Home</td></tr>
-            <tr><td><label>t</label></td><td>Top</td></tr>
-            <tr><td><label>l</label></td><td>Left</td></tr>
-            <tr><td><label>r</label></td><td>Right</td></tr>
-            <tr><td><label>b</label></td><td>Back</td></tr>
-            <tr><td><label>z</label></td><td>Reset</td></tr>
-            <tr><td><label>v</label></td><td>Layer</td></tr>
-            <tr><td></td></tr>
-            <tr><td><label>shift</label> wheel</td><td>Change Layer</td></tr>
-            <tr><td><label>meta</label> drag</td><td>Pan</td></tr>
-            <tr><td>right-drag</td><td>Pan</td></tr>
-            <tr><td>left-drag</td><td>Rotate</td></tr>
-            <tr><td>mouse-wheel</td><td>Zoom</td></tr>
-            <tr><td>middle-drag</td><td>Zoom</td></tr>
-        </table>
-        <table>
-            <tr><th colspan=2 class="grouphead">Config</th></tr>
-            <tr><td><label>?</label></td><td>This Help Window</td></tr>
-            <tr><td><label>e</label></td><td>Device Selection</td></tr>
-            <tr><td><label>o</label></td><td>CAM Tool Selection</td></tr>
-            <tr><td><label>c</label></td><td>Grid Local Devices</td></tr>
-            <tr><td></td></tr>
-            <tr><th colspan=2 class="grouphead">Object</th></tr>
-            <tr><td><label>d</label></td><td>Duplicate</td></tr>
-            <tr><td><label>m</label></td><td>Mirror</td></tr>
-            <tr><td><label>w</label></td><td>Wireframe</td></tr>
-            <tr><td><label>delete</label></td><td>Delete</td></tr>
-            <tr><td></td></tr>
-            <tr><td><label>arrow</label></td><td>Rotate 90&deg;</td></tr>
-            <tr><td><label>shift-arrow</label></td><td>Rotate 5&deg;</td></tr>
-            <tr><td><label>option-arrow</label></td><td>Move 5mm</td></tr>
-            <tr><td></td></tr>
-            <tr><td><label>ctrl-click</label></td><td>Align face to bed</td></tr>
-            <tr><td><label>meta-click</label></td><td>of selected object</td></tr>
-        </table>
+            <table>
+                <tr><td colspan=2 class="header">Mode</td></tr>
+                <tr><td><label>a</label></td><td>Arrange</td></tr>
+                <tr><td><label>s</label></td><td>Slice</td></tr>
+                <tr><td><label>p</label></td><td>Preview</td></tr>
+                <tr><td><label>x</label></td><td>Export</td></tr>
+                <tr><td></td></tr>
+                <tr><td colspan=2 class="header">View</td></tr>
+                <tr><td><label>h</label></td><td>Home</td></tr>
+                <tr><td><label>t</label></td><td>Top</td></tr>
+                <tr><td><label>l</label></td><td>Left</td></tr>
+                <tr><td><label>r</label></td><td>Right</td></tr>
+                <tr><td><label>b</label></td><td>Back</td></tr>
+                <tr><td><label>z</label></td><td>Reset</td></tr>
+                <tr><td><label>v</label></td><td>Layer</td></tr>
+                <tr><td></td></tr>
+                <tr><td><label>shift</label> wheel</td><td>Change Layer</td></tr>
+                <tr><td><label>meta</label> drag</td><td>Pan</td></tr>
+                <tr><td>right-drag</td><td>Pan</td></tr>
+                <tr><td>left-drag</td><td>Rotate</td></tr>
+                <tr><td>mouse-wheel</td><td>Zoom</td></tr>
+                <tr><td>middle-drag</td><td>Zoom</td></tr>
+            </table>
+            <table>
+                <tr><td colspan=2 class="header">Config</td></tr>
+                <tr><td><label>?</label></td><td>This Help Window</td></tr>
+                <tr><td><label>e</label></td><td>Device Selection</td></tr>
+                <tr><td><label>o</label></td><td>CAM Tool Selection</td></tr>
+                <tr><td><label>c</label></td><td>Grid Local Devices</td></tr>
+                <tr><td></td></tr>
+                <tr><td colspan=2 class="header">Object</td></tr>
+                <tr><td><label>d</label></td><td>Duplicate</td></tr>
+                <tr><td><label>m</label></td><td>Mirror</td></tr>
+                <tr><td><label>w</label></td><td>Wireframe</td></tr>
+                <tr><td><label>delete</label></td><td>Delete</td></tr>
+                <tr><td></td></tr>
+                <tr><td><label>arrow</label></td><td>Rotate 90&deg;</td></tr>
+                <tr><td><label>shift-arrow</label></td><td>Rotate 5&deg;</td></tr>
+                <tr><td><label>option-arrow</label></td><td>Move 5mm</td></tr>
+                <tr><td></td></tr>
+                <tr><td><label>ctrl-click</label></td><td>Align face to bed</td></tr>
+                <tr><td><label>meta-click</label></td><td>of selected object</td></tr>
+            </table>
        </div>

-        <div class="help-post">
-            <p><b>Kiri:Moto is entirely open source</b>!</p>
-            <p>Please contribute to the project with code,<br>
-            ideas, or localizations for your preferred language.</p>
-            <p><b>&lt;ESC&gt; key closes any dialog in Kiri</b></p>
+        <div class="grow"></div>
+        <div class="footer">
+            <div><b>Kiri:Moto is entirely open source</b>!</div>
+            <div>Contributions welcome</div>
        </div>
    </div>

--- a/web/kiri/lang/en.js
+++ b/web/kiri/lang/en.js
@ -112,7 +112,7 @@ kiri.lang['en-us'] = {
    ws_cler:        "Clear",

    // OPTIONS
-    op_menu:        "options",
+    op_menu:        "preferences",
    op_xprt_s:      "expert",
    op_xprt_l:      "enable expert options",
    op_dark_s:      "dark mode",