Adjust console font resize interface for easier access, and make min-…

…allowed font size to 8
nirui · Dec 15, 2019 · 0c8db2d · 0c8db2d
1 parent dff3857
commit 0c8db2d
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 44 deletions.
diff --git a/ui/common.css b/ui/common.css
@@ -285,12 +285,18 @@ body {
   box-shadow: 1px 1px 0 2px #0003;
 }
 
-.icon.icon-keyboardkey2 {
-  background: #fff;
-  color: #999;
+.icon.icon-iconed-bottom1 {
   padding: 4px 6px;
   display: inline-block;
   border-radius: 3px;
+  text-align: center;
+}
+.icon.icon-iconed-bottom1 > i {
+  font-style: normal;
+  display: block;
+  margin: 3px;
+  font-size: 2em;
+  font-weight: normal;
 }
 
 /* Windows */

diff --git a/ui/widgets/screen_console.css b/ui/widgets/screen_console.css
@@ -57,6 +57,28 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group.console-toolbar-group-left {
+  border-right: 1px solid #0001;
+  margin-right: -1px;
+  float: left;
+}
+
+#home-content
+  > .screen
+  > .screen-screen
+  > .screen-console
+  > .console-toolbar
+  > .console-toolbar-group.console-toolbar-group-main {
+  border-left: 1px solid #0001;
+  overflow: auto;
+}
+
+#home-content
+  > .screen
+  > .screen-screen
+  > .screen-console
+  > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item {
   padding: 15px;
   float: left;
@@ -67,6 +89,7 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item
   .tb-title {
   font-size: 0.7em;
@@ -81,6 +104,7 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item
   .tb-item {
   display: block;
@@ -96,6 +120,7 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item
   .tb-item:active {
   background: #fff3;
@@ -106,6 +131,7 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item
   .tb-item
   > .tb-key-icon {
@@ -119,6 +145,20 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group
+  > .console-toolbar-item
+  .tb-item
+  > .tb-key-icon.tb-key-resize-icon {
+  display: block;
+  padding: 5px;
+}
+
+#home-content
+  > .screen
+  > .screen-screen
+  > .screen-console
+  > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item
   .tb-item
   > .tb-key-icon:first-child {
@@ -130,6 +170,7 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item
   .tb-item
   > .tb-key-icon:last-child {
@@ -141,6 +182,7 @@
   > .screen-screen
   > .screen-console
   > .console-toolbar
+  > .console-toolbar-group
   > .console-toolbar-item
   .tb-item:active
   .tb-key-icon {

diff --git a/ui/widgets/screen_console.vue b/ui/widgets/screen_console.vue
@@ -47,40 +47,54 @@
     >
       <h2 style="display:none;">Tool bar</h2>
 
-      <div class="console-toolbar-item">
-        <h3 class="tb-title">Text size</h3>
-
-        <ul class="hlst lst-nostyle">
-          <li>
-            <a class="tb-item" href="javascript:;" @click="fontSizeUp">
-              <span class="tb-key-icon icon icon-keyboardkey2">Increase +</span>
-            </a>
-          </li>
-          <li>
-            <a class="tb-item" href="javascript:;" @click="fontSizeDown">
-              <span class="tb-key-icon icon icon-keyboardkey2">Decrease -</span>
-            </a>
-          </li>
-        </ul>
+      <div class="console-toolbar-group console-toolbar-group-left">
+        <div class="console-toolbar-item">
+          <h3 class="tb-title">Text size</h3>
+
+          <ul class="lst-nostyle">
+            <li>
+              <a class="tb-item" href="javascript:;" @click="fontSizeUp">
+                <span
+                  class="tb-key-icon tb-key-resize-icon icon icon-keyboardkey1 icon-iconed-bottom1"
+                >
+                  <i>+</i>
+                  Increase
+                </span>
+              </a>
+            </li>
+            <li>
+              <a class="tb-item" href="javascript:;" @click="fontSizeDown">
+                <span
+                  class="tb-key-icon tb-key-resize-icon icon icon-keyboardkey1 icon-iconed-bottom1"
+                >
+                  <i>-</i>
+                  Decrease
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
       </div>
 
-      <div
-        v-for="(keyType, keyTypeIdx) in screenKeys"
-        :key="keyTypeIdx"
-        class="console-toolbar-item"
-      >
-        <h3 class="tb-title">{{ keyType.title }}</h3>
-
-        <ul class="hlst lst-nostyle">
-          <li v-for="(key, keyIdx) in keyType.keys" :key="keyIdx">
-            <a
-              class="tb-item"
-              href="javascript:;"
-              @click="sendSpecialKey(key[1])"
-              v-html="$options.filters.specialKeyHTML(key[0])"
-            ></a>
-          </li>
-        </ul>
+      <div class="console-toolbar-group console-toolbar-group-main">
+        <div
+          v-for="(keyType, keyTypeIdx) in screenKeys"
+          :key="keyTypeIdx"
+          class="console-toolbar-item"
+        >
+          <h3 class="tb-title">{{ keyType.title }}</h3>
+
+          <ul class="hlst lst-nostyle">
+            <li v-for="(key, keyIdx) in keyType.keys" :key="keyIdx">
+              <a
+                class="tb-item"
+                href="javascript:;"
+                @click="sendSpecialKey(key[1])"
+                v-html="$options.filters.specialKeyHTML(key[0])"
+              ></a>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
@@ -107,7 +121,7 @@ const termTypeFaceLoadError =
   termFallbackTypeFace +
   '" instead until the remote font is loaded';
 const termDefaultFontSize = 16;
-const termMinFontSize = 14;
+const termMinFontSize = 8;
 const termMaxFontSize = 36;
 
 class Term {
@@ -223,14 +237,6 @@ class Term {
     });
   }
 
-  setFont(value) {
-    if (this.closed) {
-      return;
-    }
-
-    this.term.setOption("fontFamily", value);
-  }
-
   init(root, callbacks) {
     if (this.closed) {
       return;
@@ -322,6 +328,15 @@ class Term {
     }
   }
 
+  setFont(value) {
+    if (this.closed) {
+      return;
+    }
+
+    this.term.setOption("fontFamily", value);
+    this.refit();
+  }
+
   fontSizeUp() {
     if (this.closed) {
       return;