Browse Source

enhance(mobile): set header button && text opacity to 1

Tienson Qin 3 months ago
parent
commit
cf3f4f16d2
2 changed files with 28 additions and 34 deletions
  1. 3 9
      src/main/mobile/components/app.css
  2. 25 25
      src/main/mobile/components/header.cljs

+ 3 - 9
src/main/mobile/components/app.css

@@ -18,8 +18,6 @@ html.is-native-android {
   --silk-topbar-inner-padding-top: 10px;
   --silk-topbar-inner-height: 40px;
   --silk-topbar-inner-padding-bottom: 6px;
-
-  .app-silk-topbar {}
 }
 
 #mobile-editor-toolbar {
@@ -386,11 +384,7 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
     @apply flex items-center gap-2 px-2;
 
     .ui__button {
-      @apply opacity-70 px-1;
-
-      &:active {
-        @apply opacity-80;
-      }
+      @apply px-1;
     }
   }
 
@@ -400,7 +394,7 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
 
   .title {
     @apply font-semibold overflow-hidden text-ellipsis whitespace-nowrap col-span-4
-    block text-center text-lg pl-1 opacity-90 tracking-wide;
+    block text-center text-lg pl-1 tracking-wide;
   }
 }
 
@@ -522,4 +516,4 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
       display: flex !important;
     }
   }
-}
+}

+ 25 - 25
src/main/mobile/components/header.cljs

@@ -40,7 +40,6 @@
      (shui/button
       {:variant :text
        :size :sm
-       :class "ml-1 text-base"
        :on-click (fn []
                    (let [buttons (concat
                                   (->>
@@ -52,33 +51,33 @@
                                            "+ Add new graph"]
                                     :role "add-new-graph"}])]
                      (ui-component/open-popup! "Switch graph"
-                       {:modal-props {:class "graph-switcher"}
-                        :buttons buttons
-                        :on-action (fn [e]
-                                     (when-let [role (:role e)]
-                                       (if (= "add-new-graph" role)
-                                         (state/pub-event! [:graph/new-db-graph])
-                                         (when (string/starts-with? role "logseq_db_")
-                                           (state/pub-event! [:graph/switch role]))))
-                                     (ui-component/close-popup!))
-                        :type :action-sheet})))}
-       [:span.flex.items-center.gap-2.pt-1
-        [:strong.overflow-hidden.text-ellipsis.block.font-medium
-         {:style {:max-width "40vw"}}
-         short-repo-name]])]))
+                                               {:modal-props {:class "graph-switcher"}
+                                                :buttons buttons
+                                                :on-action (fn [e]
+                                                             (when-let [role (:role e)]
+                                                               (if (= "add-new-graph" role)
+                                                                 (state/pub-event! [:graph/new-db-graph])
+                                                                 (when (string/starts-with? role "logseq_db_")
+                                                                   (state/pub-event! [:graph/switch role]))))
+                                                             (ui-component/close-popup!))
+                                                :type :action-sheet})))}
+      [:span.flex.items-center.pt-1
+       [:span.overflow-hidden.text-ellipsis.block.text-base
+        {:style {:max-width "40vw"}}
+        short-repo-name]])]))
 
 (rum/defc journal-calendar-btn
   []
   (shui/button
-    {:variant :text
-     :size :sm
-     :on-click (fn []
-                 (let [apply-date! (fn [date]
-                                     (let [page-name (date/journal-name (gdate/Date. (js/Date. date)))]
-                                       (if-let [journal (db/get-page page-name)]
-                                         (mobile-state/open-block-modal! journal)
-                                         (-> (page-handler/<create! page-name {:redirect? false})
-                                           (p/then #(mobile-state/open-block-modal! (db/get-page page-name)))))))]
+   {:variant :text
+    :size :sm
+    :on-click (fn []
+                (let [apply-date! (fn [date]
+                                    (let [page-name (date/journal-name (gdate/Date. (js/Date. date)))]
+                                      (if-let [journal (db/get-page page-name)]
+                                        (mobile-state/open-block-modal! journal)
+                                        (-> (page-handler/<create! page-name {:redirect? false})
+                                            (p/then #(mobile-state/open-block-modal! (db/get-page page-name)))))))]
                   (-> (.showDatePicker mobile-util/ui-local)
                       (p/then (fn [^js e] (some-> e (.-value) (apply-date!)))))))}
    [:span.mt-1
@@ -109,7 +108,8 @@
       :title (app-graphs-select)
       :right-render [:div.flex.items-center.gap-1
                      (journal-calendar-btn)
-                     (rtc-indicator-btn)])
+                     (rtc-indicator-btn)]
+      :center-title? true)
 
      (= tab "settings")
      (assoc