ui: optimize side tools show logic

XPoet · Sep 6, 2023 · 7323de5 · 7323de5
1 parent 8c004a4
commit 7323de5
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 24 deletions.
diff --git a/layout/_partial/side-tools.ejs b/layout/_partial/side-tools.ejs
@@ -1,5 +1,5 @@
-<div class="side-tools-container">
-    <ul class="side-tools-list">
+<div class="side-tools-container border-box side-tools-show-handle">
+    <ul class="side-tools-list side-tools-show-handle border-box">
         <li class="tools-item tool-font-adjust-plus flex-center">
             <i class="fas fa-search-plus"></i>
         </li>
@@ -35,7 +35,7 @@
         </li>
     </ul>
 
-    <ul class="exposed-tools-list">
+    <ul class="exposed-tools-list border-box">
         <% if (is_post() && page?.toc !== false && theme?.toc?.enable === true) { %>
             <li class="tools-item toggle-show-toc-tablet flex-center">
                 <i class="fas fa-list"></i>

diff --git a/source/css/layout/_partial/side-tools.styl b/source/css/layout/_partial/side-tools.styl
@@ -2,14 +2,22 @@ $tools-item-width = 2.2rem
 $tools-item-font-size = 1.1rem
 $tools-item-border-radius = 0.2rem
 
+.side-tools-show-handle {
+  transform translateX(100%)
+  opacity 0
+  transition-t("transform, opacity", "0, 0", "0.26, 0.26", "linear, linear")
+
+  &.show {
+    transform translateX(0)
+    opacity 1
+  }
+}
 
 .side-tools-container {
-  position relative
-
   .tools-item {
     width $tools-item-width
     height $tools-item-width
-    margin-bottom 0.2rem
+    margin-bottom 0.22rem
     color var(--text-color-3)
     font-size $tools-item-font-size
     background var(--background-color-1)
@@ -66,20 +74,7 @@ $tools-item-border-radius = 0.2rem
   }
 
 
-  .side-tools-list {
-    transform translateX(100%)
-    opacity 0
-    transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
-
-    &.show {
-      transform translateX(0)
-      opacity 1
-    }
-  }
-
-
   .exposed-tools-list {
-
     if (hexo-config('style') && hexo-config('style.scroll') && hexo-config('style.scroll.percent') == true) {
       .tool-scroll-to-top {
         display none
@@ -88,8 +83,17 @@ $tools-item-border-radius = 0.2rem
           display flex
         }
 
-        &:hover {
+        &.show-arrow-up {
+          .percent {
+            display none
+          }
 
+          .arrow-up {
+            display flex
+          }
+        }
+
+        &:hover {
           .percent {
             display none
           }

diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
@@ -156,9 +156,20 @@ $post-tools-offset = 'calc((100vw - %s / 2) - 5rem)' % $content-max-width
 
   .side-tools {
     position fixed
-    right 0
-    bottom 5%
+    right 0.8rem
+    bottom 1.6rem
     box-sizing border-box
+
+    +keep-tablet() {
+      right 0
+    }
+
+    &:hover {
+      .side-tools-container {
+        transform translateX(0)
+        opacity 1
+      }
+    }
   }
 
 

diff --git a/source/js/header-shrink.js b/source/js/header-shrink.js
@@ -33,10 +33,20 @@ KEEP.initHeaderShrink = () => {
       }
     },
 
+    sideToolsBarShowHandle() {
+      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
+      const sideToolsDom = document.querySelector('.side-tools .side-tools-container')
+      if (scrollTop > this.headerHeight / 2) {
+        sideToolsDom.classList.add('show')
+      } else {
+        sideToolsDom.classList.remove('show')
+      }
+    },
+
     toggleHeaderDrawerShow() {
       const domList = [document.querySelector('.window-mask'), document.querySelector('.menu-bar')]
 
-      if (KEEP.theme_config.pjax.enable === true) {
+      if (KEEP.theme_config?.pjax?.enable === true) {
         domList.push(
           ...document.querySelectorAll('.header-drawer .drawer-menu-list .drawer-menu-item')
         )

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -54,6 +54,11 @@ KEEP.initUtils = () => {
         } else {
           this.back2TopBtn.classList.add('show')
           percentDom.innerHTML = percent.toFixed(0)
+          if (percent > 99) {
+            this.back2TopBtn.classList.add('show-arrow-up')
+          } else {
+            this.back2TopBtn.classList.remove('show-arrow-up')
+          }
         }
       }
 
@@ -84,12 +89,15 @@ KEEP.initUtils = () => {
         this.styleHandleWhenScroll()
 
         // TOC scroll handle
-        if (KEEP.theme_config.toc.enable === true && KEEP.utils.hasOwnProperty('activeNav')) {
+        if (KEEP.theme_config?.toc?.enable === true && KEEP.utils.hasOwnProperty('activeNav')) {
           KEEP.utils.activeNav()
         }
 
         // header shrink
         KEEP.utils.headerShrink.headerShrink()
+
+        // side tools bar show handle
+        KEEP.utils.headerShrink.sideToolsBarShowHandle()
       })
     },