Browse Source

enhance(ui): polish indent/outdent swipe icons

charlie 3 years ago
parent
commit
3145cba42d
2 changed files with 10 additions and 20 deletions
  1. 4 4
      src/main/frontend/components/block.cljs
  2. 6 16
      src/main/frontend/components/block.css

+ 4 - 4
src/main/frontend/components/block.cljs

@@ -2346,17 +2346,17 @@
   [:div.block-left-menu.flex.bg-base-2.rounded-r-md.mr-1
    [:div.commands-button.w-0.rounded-r-md
     {:id (str "block-left-menu-" uuid)}
-    [:div.indent (ui/icon "indent-increase" {:style {:fontSize 16}})]]])
+    [:div.indent (ui/icon "indent-increase" {:size 18})]]])
 
 (rum/defc block-right-menu < rum/reactive
   [_config {:block/keys [uuid] :as _block} edit?]
   [:div.block-right-menu.flex.bg-base-2.rounded-md.ml-1
-   [:div.commands-button.w-0.flex.flew-col.rounded-md
+   [:div.commands-button.w-0.rounded-md
     {:id (str "block-right-menu-" uuid)
      :style {:max-width (if edit? 40 80)}}
-    [:div.outdent (ui/icon "indent-decrease" {:style {:fontSize 16}})]
+    [:div.outdent (ui/icon "indent-decrease" {:size 18})]
     (when-not edit?
-      [:div.more (ui/icon "dots-circle-horizontal" {:style {:fontSize 16}})])]])
+      [:div.more (ui/icon "dots-circle-horizontal" {:size 18})])]])
 
 (rum/defcs block-content-or-editor < rum/reactive
   (rum/local true ::hide-block-refs?)

+ 6 - 16
src/main/frontend/components/block.css

@@ -192,13 +192,10 @@
   background: linear-gradient(90deg, var(--ls-primary-background-color) 0%, var(--ls-secondary-background-color) 100%);
 
   .commands-button {
-    overflow: hidden;
-    max-width: 40px;
-    text-align: center;
-    margin: auto 0;
+    @apply overflow-hidden flex max-w-[40px];
 
     .indent {
-      opacity: 30%;
+      @apply flex items-center w-full justify-center opacity-30;
     }
   }
 }
@@ -208,18 +205,11 @@
   /* background: linear-gradient(-90deg, var(--ls-primary-background-color) 0%, var(--ls-secondary-background-color) 100%); */
 
   .commands-button {
-    overflow: hidden;
-    text-align: center;
-    margin: auto 0;
+    @apply overflow-hidden flex flex-nowrap;
 
-    .outdent {
-      margin: 0 12px;
-      opacity: 30%;
-    }
-
-    .more {
-      margin: 0 12px;
-      opacity: 30%;
+    .outdent, .more {
+      @apply flex items-center justify-center
+      overflow-hidden opacity-30 m-0 w-[40px];
     }
   }
 }