optimize view menu, svg fonts

src/kiri/init.js

@@ -2812,6 +2812,10 @@ gapp.register("kiri.init", [], (root, exports) => {
         $('view-arrange').onclick = api.platform.layout;
         $('view-top').onclick = space.view.top;
         $('view-home').onclick = space.view.home;
+        $('view-front').onclick = space.view.front;
+        $('view-back').onclick = space.view.back;
+        $('view-left').onclick = space.view.left;
+        $('view-right').onclick = space.view.right;
         $('view-clear').onclick = api.platform.clear;
         $('mode-fdm').onclick = () => { api.mode.set('FDM'); api.space.set_focus() };
         $('mode-sla').onclick = () => { api.mode.set('SLA'); api.space.set_focus() };

web/kiri/index.css

@@ -57,6 +57,14 @@ a, a:hover, a:visited {
     border-left: 1px solid transparent;
     border-right: 1px solid transparent;
 }
+.top-menu hr {
+    width: calc(100% - 3px);
+    margin: 0;
+    border: 0;
+    padding: 0;
+    height: 0.5px;
+    background-color: var(--menu-border);
+}
 .top-menu label {
     color: #444;
 }
@@ -108,21 +116,17 @@ a, a:hover, a:visited {
 .top-menu-drop {
     position: absolute;
     display: none;
-    /* border: 1px solid #555; */
     top: 100%;
     left: -1px;
     right: -1px;
-    /* min-width: 100%; */
-    /* min-width: 500px; */
-    /* min-height: 100%; */
     flex-direction: column;
     font-family: sans-serif;
 }
 .top-menu-drop svg {
-    font-size: smaller;
+    width: 15px;
 }
 #top .content {
-    gap: 4px;
+    gap: 2px;
     display: flex;
     align-items: center;
     flex-direction: column;

web/kiri/index.html

@@ -41,7 +41,10 @@
                 <label>start</label>
                 <div class="top-menu-drop top-menu-left">
                     <div class="content">
-
+                        <div id="view-arrange">
+                            <label lk="arrange">arrange</label>
+                            <span><i class="fas fa-shapes"></i></span>
+                        </div>
                         <div id="act-slice">
                             <label id="label-slice" title="generate layer slices" lk="slice">preview</label>
                             <span><i class="fas fa-bars"></i></span>
@@ -58,7 +61,6 @@
                             <label id="label-export" title="generate gcode" lk="export">export</label>
                             <span><i class="fas fa-file-download"></i></span>
                         </div>
-    
                     </div>
                 </div>
             </span>
@@ -167,18 +169,32 @@
                 <label>view</label>
                 <div class="top-menu-drop top-menu-right">
                     <div class="content">
-                        <div id="view-arrange">
-                            <label lk="arrange">arrange</label>
-                            <span><i class="fas fa-shapes"></i></span>
-                        </div>
                         <div id="view-home">
                             <label lk="home">home</label>
                             <span><i class="fas fa-home"></i></span>
                         </div>
+                        <hr>
                         <div id="view-top">
                             <label lk="top">top</label>
                             <span><i class="fas fa-square"></i></span>
                         </div>
+                        <div id="view-front">
+                            <label lk="front">top</label>
+                            <span><i class="fas fa-square"></i></span>
+                        </div>
+                        <div id="view-back">
+                            <label lk="back">top</label>
+                            <span><i class="fas fa-square"></i></span>
+                        </div>
+                        <div id="view-left">
+                            <label lk="left">top</label>
+                            <span><i class="fas fa-square"></i></span>
+                        </div>
+                        <div id="view-right">
+                            <label lk="right">top</label>
+                            <span><i class="fas fa-square"></i></span>
+                        </div>
+                        <hr>
                         <div id="app-xpnd">
                             <label lk="fullscreen">fullscreen</label>
                             <span><i class="fas fa-maximize"></i></span>

web/kiri/lang/en.js

@@ -6,6 +6,7 @@ self.kiri.lang['en-us'] = {
     animate:        "animate",      // CAM animate button
     arrange:        "arrange",      // layout workspace objects
     axis:           "axis",         // left object scale pop menu
+    back:           "back",
     clear:          "clear",        // clear workspace (remove all objects)
     copy:           "copy",
     delete:         "delete",
@@ -17,6 +18,7 @@ self.kiri.lang['en-us'] = {
     export:         "export",
     files:          "files",
     filter:         "filter",
+    front:          "front",
     fullscreen:     "fullscreen",
     help:           "help",
     ghost:          "ghost",        // left render pop menu (wireframe)
@@ -24,6 +26,7 @@ self.kiri.lang['en-us'] = {
     home:           "home",
     import:         "import",
     language:       "language",
+    left:           "left",
     machine:        "machine",      // device or machine
     mesh:           "mesh",         // mesh editing
     metric:         "metric",
@@ -36,6 +39,7 @@ self.kiri.lang['en-us'] = {
     recent:         "recent",
     render:         "render",       // left render pop menu
     reset:          "reset",
+    right:          "right",
     rotate:         "rotate",       // left rotate pop menu
     save:           "save",
     scale:          "scale",        // left object scale pop menu