v2.60

KyleBing · Sep 16, 2022 · efb1bf2 · efb1bf2
1 parent a8e97be
commit efb1bf2
Show file tree

Hide file tree

Showing 10 changed files with 175 additions and 139 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # CHANGELOG
 
+### v2.60 `2022-09-16`
+- 重新布局
+
 ### v2.59 `2022-09-02`
 - 精简项目体积：字体大小，英文词库只载入小部分
 

diff --git a/index.html b/index.html
@@ -31,7 +31,6 @@
             <div class="btn" id="countSymbolZh">0</div>
          </div>
 
-
          <div class="btn-group">
             <div class="btn" onclick="editor.trimReturn()">去除换行</div>
             <div class="btn" onclick="editor.trimSpace()">去除空格</div>
@@ -47,7 +46,6 @@
             <div class="btn" onclick="editor.hide()">取消</div>
             <div class="btn" onclick="editor.done(engine)">确定</div>
          </div>
-
       </div>
    </div>
 </div>
@@ -56,49 +54,44 @@
 
    <!--侧边信息栏-->
    <div class="side-menu hidden-sm">
-
       <div class="tool-bar jc-space-between">
-         <div class="btn-group">
-            <div class="btn no-action number">
-               <span class="count-current bold current number" title="本段已打字数"></span> / <span class="count-total number total" title="本段总字数"></span>
-            </div>
-            <div id="totalChapter" class="btn no-action number">
-               <span class="chapter-current bold current number" title="当前段数"></span> /
-               <span class="chapter-total number total" title="总段数"></span>
-            </div>
-         </div>
-
-         <div class="btn-group">
-            <div class="btn" onclick="engine.prevChapter()" title="上一段：⌘ + U 或 F1">《</div>
-            <div class="btn" onclick="engine.nextChapter()" title="下一段：⌘ + J 或 F2">》</div>
-         </div>
-      </div>
-
-      <!--time-->
-      <div class="time-info info-panel">
-         <div class="time number">
-            <div class="minute">00</div>:<div class="second">00</div>
+         <div class="btn-group toolbar-info">
+            <div class="btn" onclick="engine.shuffleCurrent()" title="打乱当前段：⌘ + K 或 F4">打乱</div>
+            <div class="btn" onclick="engine.reset()" title="重打：⌘ + Y 或 F3">重打</div>
+            <div class="btn" onclick="engine.pause()" title="离开编辑区">暂停</div>
+            <div class="btn" onclick="engine.resume()" title="激活编辑区">继续</div>
          </div>
       </div>
 
       <!--speed-->
       <div class="speed-info info-panel">
+         <!--speed-->
          <div class="speed">--</div>
-         <div class="count pt-2">
-            <div class="count-item">
-               <p class="count-key-backspace">--</p>
-               <p class="small">回删</p>
+         <!--statistic-->
+         <div class="statistic">
+            <div class="statistic-item">
+               <p class="title count-key-backspace">--</p>
+               <p class="desc small">回删</p>
             </div>
-            <div class="count-item">
-               <p class="count-key-length">--</p>
-               <p class="small">码长</p>
+            <div class="statistic-item">
+               <p class="title count-key-length">--</p>
+               <p class="desc small">码长</p>
             </div>
-            <div class="count-item">
-               <p class="count-key-rate">--</p>
-               <p class="small">击键</p>
+            <div class="statistic-item">
+               <p class="title count-key-rate">--</p>
+               <p class="desc small">击键</p>
             </div>
          </div>
       </div>
+
+      <!--TIMER-->
+      <div class="time-info info-panel">
+         <div class="time number">
+            <div class="minute">00</div>:<div class="second">00</div>
+         </div>
+      </div>
+
+      <!--OPTIONS SETUP-->
       <div class="info-panel">
          <div class="switch-item">
             <div class="label">暗黑模式</div>
@@ -144,7 +137,7 @@
          </div>
       </div>
 
-      <!--keys-->
+      <!--HELP INFO : KEYS-->
       <div class="key-info info-panel">
          <div class="key-info-item word-all">
             <div>全部按键</div>
@@ -196,18 +189,19 @@
          </div>
       </div>
 
-      <!--info-->
+      <!--ABOUT INFO-->
       <div class="info-panel">
          <div class="logo">
             <img src="img/logo-inline.png" alt="">
             <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typepad" >GitHub</a>)</h1>
          </div>
          <div class="copyright">
             <a target="_blank" href="https://kylebing.cn" class="link">KyleBing</a>
-            <p>v2.59</p>
-            <p>2022/09/02</p>
+            <p>v2.60</p>
+            <p>2022/09/16</p>
          </div>
       </div>
+
       <div class="info-panel">
          <div class="key-info-item">
             <div class="binding-key"><kbd>⌘</kbd>+<kbd>J</kbd></div>
@@ -249,30 +243,38 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
          </div>
       </div>
 
-      <!--keymap-->
+      <!--KEYMAP-->
       <div class="info-panel">
          <p>光标离开输入区自动暂停，进入输入状态自动恢复计时。</p>
          <p>快捷键只在编辑区内生效</p>
       </div>
 
-      <!--notice-->
+      <!--HELP INFO: NOTICE-->
       <div class="info-panel">
          <p>最优体验: 鼠须管输入法，谷歌浏览器、Safari 浏览器，其它平台或浏览器可能会有出入，欢迎反馈至
             <a target="_blank" href="https://github.com/KyleBing/typepad">GitHub</a></p>
          <p>mac 用户推荐用 <a target="_blank" href="https://rime.im/">鼠须管输入法</a>，86版五笔现成的配置方案可以这里找到
             <a target="_blank" href="https://github.com/KyleBing/rime-wubi86-jidian">极点码表方案</a></p>
       </div>
+
    </div>
 
    <!--内容区-->
    <div class="type-pad">
       <!--工具栏-->
       <div class="tool-bar">
          <div class="btn-group">
-            <div class="btn" onclick="engine.shuffleCurrent()" title="打乱当前段：⌘ + K 或 F4">打乱</div>
-            <div class="btn" onclick="engine.reset()" title="重打：⌘ + Y 或 F3">重打</div>
-            <div class="btn" onclick="engine.pause()" title="离开编辑区">暂停</div>
-            <div class="btn" onclick="engine.resume()" title="激活编辑区">继续</div>
+            <div class="btn no-action number">
+               <span class="count-current bold current number" title="本段已打字数"></span> / <span class="count-total number total" title="本段总字数"></span>
+            </div>
+            <div id="totalChapter" class="btn no-action number">
+               <span class="chapter-current bold current number" title="当前段数"></span> /
+               <span class="chapter-total number total" title="总段数"></span>
+            </div>
+         </div>
+         <div class="btn-group">
+            <div class="btn" onclick="engine.prevChapter()" title="上一段：⌘ + U 或 F1">《</div>
+            <div class="btn" onclick="engine.nextChapter()" title="下一段：⌘ + J 或 F2">》</div>
          </div>
          <div class="btn-group hidden" id="panelRepeatController">
             <div id="repeatMonitor" class="btn no-action number" onclick="engine.reset()" title="⌘ + K">

diff --git a/scss/mixin/_button.scss b/scss/mixin/_button.scss
@@ -2,7 +2,7 @@ $padding-top: 3px;
 $padding-lr: 6px;
 $padding-lr-radio: 8px;
 $height-btn: 20px;
-$radius-btn: 3px;
+$radius-btn: 5px;
 $radius-switch: 15px;
 
 $fz-btn: 13px;

diff --git a/scss/mixin/_info.scss b/scss/mixin/_info.scss
@@ -8,6 +8,14 @@
   justify-content: flex-start;
 }
 
+.toolbar-info{
+  width: 100%;
+  &>* {
+    text-align: center;
+    flex-grow: 1;
+  }
+}
+
 .info-panel{
   margin-bottom: $gap-block;
   padding: 15px;
@@ -44,7 +52,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 3rem;
+    font-size: 2.2rem;
     .minute{
       @extend .number
     }
@@ -55,20 +63,26 @@
 }
 
 .speed-info{
+  height: 150px;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
   .speed{
+    width: 100%;
     color: $text-main;
     font-family: Impact, sans-serif;
     padding: 10px 0;
     text-align: center;
     font-size: 2rem;
     border-bottom: 1px dashed $color-border;
   }
-  .count{
+  .statistic{
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.2rem;
-
+    padding: 15px 0;
     &-item{
       text-align: center;
       width: 40px;
@@ -94,15 +108,18 @@
           content: none;
         }
       }
-      p{
-        &:first-child{
-          font-family: Impact, sans-serif;
-          font-weight: bold;
-        }
-        &:last-child{
-          color: $text-comment;
-          font-size: $fz-info - 2;
-        }
+      .title {
+        font-family: Impact, sans-serif;
+        font-weight: bold;
+      }
+      .desc {
+        position: absolute;
+        top: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        margin-top: 3px;
+        color: $text-comment;
+        font-size: $fz-info - 2;
       }
     }
   }

diff --git a/scss/mixin/_normalize.scss b/scss/mixin/_normalize.scss
@@ -1,3 +0,0 @@
-.jc-space-between{
-  justify-content: space-between;
-}

diff --git a/scss/mixin/_option.scss b/scss/mixin/_option.scss
@@ -10,7 +10,8 @@
 }
 
 .current{
-  min-width: 12px;
+  text-align: right;
+  min-width: 20px;
   display: inline-block;
   color: $red;
-}
+}
diff --git a/scss/mixin/_variables.scss b/scss/mixin/_variables.scss
@@ -16,7 +16,7 @@ $color-text     : #333;
 $color-subtitle : #666;
 
 $color-border:  #dddddd;
-$color-border-clearly:  #bbb;
+$color-border-clearly:  #ccc;
 
 $bg-body      : #EBEBEB;
 
@@ -43,6 +43,6 @@ $fz-typing-english : 1.8rem;
 $fz-copyright      : 10px;
 $fz-translation    : 12px;
 
-$gap-block         : 15px;
-$radius-main       : 8px; // 全局 radius
+$gap-block         : 12px;
+$radius-main       : 7px; // 全局 radius