Save dialog

deps/shui/src/logseq/shui/core.cljs

@@ -2,6 +2,7 @@
   (:require 
     [logseq.shui.button.v2 :as shui.button.v2]
     [logseq.shui.context :as shui.context]
+    [logseq.shui.dialog.v1 :as shui.dialog.v1]
     [logseq.shui.icon.v2 :as shui.icon.v2]
     [logseq.shui.list-item.v1 :as shui.list-item.v1]
     [logseq.shui.table.v2 :as shui.table.v2]))
@@ -22,5 +23,9 @@
 (def list-item shui.list-item.v1/root)
 (def list-item-v1 shui.list-item.v1/root)
 
+;; dialog 
+(def dialog shui.dialog.v1/root)
+(def dialog-v1 shui.dialog.v1/root)
+
 ;; context
 (def make-context shui.context/make-context)

deps/shui/src/logseq/shui/dialog/v1.cljs

@@ -0,0 +1,68 @@
+(ns logseq.shui.dialog.v1
+  (:require
+    [rum.core :as rum]
+    [clojure.string :as string]
+    [logseq.shui.icon.v2 :as icon]
+    [logseq.shui.button.v2 :as button]))
+
+(defn open-dialog! [state position]
+  (js/console.log "open-dialog!")
+  (when-let [el (some-> state ::dialog-ref deref)]
+    (if (= position :modal)
+      (.showModal ^js el)
+      (.show ^js el))
+    (reset! (::open state) true)))
+
+(defn close-dialog! [state]
+  (js/console.log "close-dialog!")
+  (when-let [el (some-> state ::dialog-ref deref)]
+    (.close ^js el)
+    (reset! (::open state) false)))
+
+(defn toggle-dialog! [state position]
+  (js/console.log "toggle-dialog!")
+  (if @(::open state)
+    (close-dialog! state)
+    (open-dialog! state position)))
+
+(rum/defc dialog < rum/reactive
+  [state props context]
+  [:dialog {:ref #(when (and % (::dialog-ref state) (not= % (::dialog-ref state)))
+                    (js/console.log "set dialog ref" %)
+                    (reset! (::dialog-ref state) %))
+            :class "text-xs bg-gray-03 right-full top-full text-white absolute left-0 w-64 p-0 rounded-lg shadow-lg overflow-hidden -border border-gray-06 py-2"
+            :style {:transform "translate3d(calc(-100% + 32px), 4px, 0) "}
+            :open @(::open state)}
+   (for [[index group] (map-indexed vector (:groups props))]
+    [:div {:key index}
+     group])])
+     ; (for [[index list-item] (map-indexed vector group)]
+     ;  [:div {:key index} 
+     ;   list])])])
+   ; [:div.bg-gray-05
+   ;  [:h1 "This is a dialog"]]])
+   ; [:div.absolute.top-full.right-0.bg-gray-05
+   ;  [:h1 "This is a dialog"]]])
+  
+
+(rum/defcs root < rum/reactive 
+  (rum/local true ::open)
+  (rum/local nil ::dialog-ref)
+  [state
+   {:keys [open position trigger] :as props
+    :or {position :top-right}} 
+   {:keys [] :as context}]
+  ; (rum/use-effect! 
+  ;   (fn [] 
+  ;     (when (and @(::dialog-ref state) 
+  ;                (not= @(::open state) open))
+  ;       (if open 
+  ;         (open-dialog! state position)
+  ;         (close-dialog! state))))
+  ;   [@(::dialog-ref state) open])
+  (if trigger 
+    (trigger {:open-dialog! #(open-dialog! state position)
+              :close-dialog! #(close-dialog! state)
+              :toggle-dialog! #(toggle-dialog! state position)
+              :dialog (partial dialog state props context)})
+    (dialog state props context)))

deps/shui/src/logseq/shui/list_item/v1.cljs

@@ -96,7 +96,7 @@
           [:span text-string])))))
 
 ;; result-item
-(rum/defc root [{:keys [icon icon-theme query text info shortcut value-label value title highlighted on-highlight on-highlight-dep header on-click] :as _props} 
+(rum/defc root [{:keys [icon icon-theme query text info shortcut value-label value title highlighted on-highlight on-highlight-dep header on-click hoverable compact] :as _props :or {hoverable true}} 
                 {:keys [app-config] :as context}]
   (let [ref (rum/create-ref)
         highlight-query (partial highlight-query* app-config query)]
@@ -107,9 +107,12 @@
       [highlighted on-highlight-dep])
     [:div {:style {:opacity (if highlighted 1 0.8)
                    :mix-blend-mode (if highlighted :normal :luminosity)}
-           :class (cond-> "flex flex-col px-6 gap-1 py-4" 
+           :class (cond-> "flex flex-col grayscale" 
-                    highlighted (str " bg-gray-03-alpha dark:bg-gray-04-alpha")
+                    highlighted (str " !grayscale-0 !opacity-100 bg-gray-03-alpha dark:bg-gray-04-alpha")
-                    (not highlighted) (str " bg-gray-02"))
+                    hoverable (str " !rounded-lg transition-all duration-50 ease-in !opacity-75 hover:!opacity-100 hover:grayscale-0 hover:cursor-pointer hover:bg-gradient-to-r hover:from-gray-03-alpha hover:to-gray-01-alpha")
+                    (not compact) (str  " py-4 px-6 gap-1")
+                    compact (str " py-1.5 px-3.5 gap-0.5")
+                    (not highlighted) (str " "))
            :ref ref
            :on-click (when on-click on-click)}
      ;; header
@@ -124,7 +127,7 @@
                 :box-shadow (when (#{:color :gradient} icon-theme) "inset 0 0 0 1px rgba(255,255,255,0.3) ")}
         :class (cond-> "w-5 h-5 rounded flex items-center justify-center" 
                  (= icon-theme :color) (str " bg-accent-10 dark:bg-accent-09 text-white") 
-                 (= icon-theme :gray) (str " bg-gray-10 dark:bg-gray-09 text-white"))} 
+                 (= icon-theme :gray) (str " bg-gray-05 dark:bg-gray-05 text-white"))} 
        (icon/root icon {:size "14"
                         :class ""})]
       [:div.flex.flex-1.flex-col
@@ -132,7 +135,7 @@
          [:div.text-sm.pb-2.font-bold.text-gray-11 (highlight-query title)])
        [:div {:class "text-sm font-medium text-gray-12"} (highlight-query text)
         (when info 
-          [:span.text-gray-11 " — " (highlight-query info)])]]
+          [:span.text-xs.text-gray-11 " — " (highlight-query info)])]]
       (when (or value-label value)
         [:div {:class "text-xs"}
          (when (and value-label value)
@@ -153,7 +156,7 @@
                                    (apply str))]]
                (button/root {:theme :gray 
                              :interactive false 
-                             :text (to-string text)
+                             :text (string/upper-case (to-string text))
                              :tiled true}
                             context))])])]]))
         ; [:span {:style} (str key)])])])

src/main/frontend/components/cmdk.cljs

@@ -604,7 +604,7 @@
                    (reset! (::keyup-handler state) nil)
                    state)}
   {:did-mount (fn [state] 
-                (search-db/make-blocks-indice-non-blocking! (state/get-current-repo))
+                ; (search-db/make-blocks-indice-non-blocking! (state/get-current-repo))
                 ; (when-let [ref @(::scroll-container-ref state)]
                 ;   (js/console.log "scrolling")
                 ;   (js/setTimeout #(set! (.-scrollTop ref) FILTER-ROW-HEIGHT)))

src/main/frontend/components/header.cljs

@@ -16,9 +16,11 @@
             [frontend.handler.user :as user-handler]
             [frontend.handler.web.nfs :as nfs]
             [frontend.mobile.util :as mobile-util]
+            [frontend.shui :refer [make-shui-context]]
             [frontend.state :as state]
             [frontend.ui :as ui]
             [frontend.util :as util]
+            [logseq.shui.core :as shui]
             [frontend.version :refer [version]]
             [reitit.frontend.easy :as rfe]
             [rum.core :as rum]
@@ -82,64 +84,135 @@
   (let [page-menu (page-menu/page-menu nil)
         page-menu-and-hr (when (seq page-menu)
                            (concat page-menu [{:hr true}]))]
-    (ui/dropdown-with-links
+    [:<>
-     (fn [{:keys [toggle-fn]}]
+     (shui/dialog-v1 {:trigger (fn [{:keys [toggle-dialog! dialog]}] 
-       [:button.button.icon.toolbar-dots-btn
+                                 [:div.relative
-        {:on-click toggle-fn
+                                  [:button.button.icon.toolbar-dots-btn
-         :title (t :header/more)}
+                                   {:on-click toggle-dialog!
-        (ui/icon "dots" {:size ui/icon-size})])
+                                    :title (t :header/more)}
-     (->>
+                                   (ui/icon "dots" {:size ui/icon-size})]
-      [(when (state/enable-editing?)
+                                  (dialog)])
-         {:title (t :settings)
+                      :groups [[:<> [:div.pl-3.pb-1.text-xxs.font-semibold.text-gray-11-alpha {:class "pt-0.5"} "General"]
-          :options {:on-click state/open-settings!}
+                                    (shui/list-item-v1 {:text (t :settings) 
-          :icon (ui/icon "settings")})
+                                                        :compact true
+                                                        :icon "settings" 
+                                                        :icon-theme :gray
+                                                        ; :info "Open settings"
+                                                        :shortcut "cmd+s"
+                                                        :on-click state/open-settings!}
+                                                       (make-shui-context nil nil))
+                                    (shui/list-item-v1 {:text (t :plugins) 
+                                                        :compact true
+                                                        :icon "apps" 
+                                                        :icon-theme :gray
+                                                        :shortcut "g a"
+                                                        :on-click #(plugin-handler/goto-plugins-dashboard!)}
+                                                       (make-shui-context nil nil))
+                                    (shui/list-item-v1 {:text (t :themes) 
+                                                        :compact true
+                                                        :icon "palette" 
+                                                        :icon-theme :gray
+                                                        :shortcut "g p"
+                                                        :on-click #(plugins/open-select-theme!)}
+                                                       (make-shui-context nil nil))]
+                               [:<> [:div.pl-3.pb-1.pt-2.text-xxs.font-semibold.text-gray-11-alpha "Publishing"]
+                                    (shui/list-item-v1 {:text "Publishing settings"
+                                                        :compact true
+                                                        :icon-theme :gray 
+                                                        :icon "bulb"}
+                                                       (make-shui-context nil nil))
+                                    (shui/list-item-v1 {:text "Copy page URL"
+                                                        :compact true
+                                                        :icon-theme :gray 
+                                                        :icon "bulb"}
+                                                       (make-shui-context nil nil))
+                                    (shui/list-item-v1 {:text "Publish"
+                                                        :compact true
+                                                        :header "Last published: 2 days ago"
+                                                        :icon-theme :gray 
+                                                        :icon "bulb"}
+                                                       (make-shui-context nil nil))]
+                               [:<> [:div.pl-3.pb-1.pt-2.text-xxs.font-semibold.text-gray-11-alpha "Graph management"]
+                                    (shui/list-item-v1 {:text (t :export-graph) 
+                                                        :compact true
+                                                        :icon "database-export" 
+                                                        :icon-theme :color
+                                                        :on-click #(state/set-modal! export/export)}
+                                                       (make-shui-context nil nil))
+                                    (shui/list-item-v1 {:text (t :import) 
+                                                        :compact true
+                                                        :icon "file-upload" 
+                                                        :icon-theme :color
+                                                        :on-click #(js/alert "set href")}
+                                                       (make-shui-context nil nil))]
+                               [:<> [:div.pl-3.pb-1.pt-2.text-xxs.font-semibold.text-gray-11-alpha "Account"]
+                                    (shui/list-item-v1 {:text "Logout"
+                                                        :compact true
+                                                        :icon "logout" 
+                                                        ; :shortcut "shift+cmd+x"
+                                                        :icon-theme :gradient
+                                                        :value "ben@logseq.com"
+                                                        :on-click #(user-handler/logout)}
+                                                       (make-shui-context nil nil))]]}
+       (make-shui-context nil nil))
+     (ui/dropdown-with-links
+      (fn [{:keys [toggle-fn]}]
+        [:button.button.icon.toolbar-dots-btn
+         {:on-click toggle-fn
+          :title (t :header/more)}
+         (ui/icon "dots" {:size ui/icon-size})])
+      (->>
+       [(when (state/enable-editing?)
+          {:title (t :settings)
+           :options {:on-click state/open-settings!}
+           :icon (ui/icon "settings")})
 
-       (when config/lsp-enabled?
+        (when config/lsp-enabled?
-         {:title (t :plugins)
+          {:title (t :plugins)
-          :options {:on-click #(plugin-handler/goto-plugins-dashboard!)}
+           :options {:on-click #(plugin-handler/goto-plugins-dashboard!)}
-          :icon (ui/icon "apps")})
+           :icon (ui/icon "apps")})
 
-       (when config/lsp-enabled?
+        (when config/lsp-enabled?
-         {:title (t :themes)
+          {:title (t :themes)
-          :options {:on-click #(plugins/open-select-theme!)}
+           :options {:on-click #(plugins/open-select-theme!)}
-          :icon (ui/icon "palette")})
+           :icon (ui/icon "palette")})
 
-       (when current-repo
+        (when current-repo
-         {:title (t :export-graph)
+          {:title (t :export-graph)
-          :options {:on-click #(state/set-modal! export/export)}
+           :options {:on-click #(state/set-modal! export/export)}
-          :icon (ui/icon "database-export")})
+           :icon (ui/icon "database-export")})
 
-       (when (and current-repo (state/enable-editing?))
+        (when (and current-repo (state/enable-editing?))
-         {:title (t :import)
+          {:title (t :import)
-          :options {:href (rfe/href :import)}
+           :options {:href (rfe/href :import)}
-          :icon (ui/icon "file-upload")})
+           :icon (ui/icon "file-upload")})
 
-       (when-not config/publishing? 
+        (when-not config/publishing? 
-         {:title [:div.flex-row.flex.justify-between.items-center
+          {:title [:div.flex-row.flex.justify-between.items-center
-                  [:span (t :join-community)]]
+                   [:span (t :join-community)]]
-          :options {:href "https://discuss.logseq.com"
+           :options {:href "https://discuss.logseq.com"
-                    :title (t :discourse-title)
+                     :title (t :discourse-title)
-                    :target "_blank"}
+                     :target "_blank"}
-          :icon (ui/icon "brand-discord")})
+           :icon (ui/icon "brand-discord")})
 
-       (when-not config/publishing?
+        (when-not config/publishing?
-         {:title [:div.flex-row.flex.justify-between.items-center
+          {:title [:div.flex-row.flex.justify-between.items-center
-                  [:span (t :help/bug)]]
+                   [:span (t :help/bug)]]
-          :options {:href (rfe/href :bug-report)}
+           :options {:href (rfe/href :bug-report)}
-          :icon (ui/icon "bug")})
+           :icon (ui/icon "bug")})
 
-       (when config/publishing?
+        (when config/publishing?
-         {:title (t :toggle-theme)
+          {:title (t :toggle-theme)
-          :options {:on-click #(state/toggle-theme!)}
+           :options {:on-click #(state/toggle-theme!)}
-          :icon (ui/icon "bulb")})
+           :icon (ui/icon "bulb")})
 
-       (when (and (state/sub :auth/id-token) (user-handler/logged-in?))
+        (when (and (state/sub :auth/id-token) (user-handler/logged-in?))
-         {:title (t :logout-user (user-handler/email))
+          {:title (t :logout-user (user-handler/email))
-          :options {:on-click #(user-handler/logout)}
+           :options {:on-click #(user-handler/logout)}
-          :icon  (ui/icon "logout")})]
+           :icon  (ui/icon "logout")})]
-      (concat page-menu-and-hr)
+       (concat page-menu-and-hr)
-      (remove nil?))
+       (remove nil?))
-     {})))
+      {})]))
 
 (rum/defc back-and-forward
   < {:key-fn #(identity "nav-history-buttons")}

tailwind.config.js

@@ -52,6 +52,61 @@ const lx = {
   'gray-12-alpha': 'var(--lx-gray-12-alpha)',
 }
 
+const accent = {
+  '01': 'var(--lx-accent-01)',
+  '02': 'var(--lx-accent-02)',
+  '03': 'var(--lx-accent-03)',
+  '04': 'var(--lx-accent-04)',
+  '05': 'var(--lx-accent-05)',
+  '06': 'var(--lx-accent-06)',
+  '07': 'var(--lx-accent-07)',
+  '08': 'var(--lx-accent-08)',
+  '09': 'var(--lx-accent-09)',
+  '10': 'var(--lx-accent-10)',
+  '11': 'var(--lx-accent-11)',
+  '12': 'var(--lx-accent-12)',
+  '01-alpha': 'var(--lx-accent-01-alpha)',
+  '02-alpha': 'var(--lx-accent-02-alpha)',
+  '03-alpha': 'var(--lx-accent-03-alpha)',
+  '04-alpha': 'var(--lx-accent-04-alpha)',
+  '05-alpha': 'var(--lx-accent-05-alpha)',
+  '06-alpha': 'var(--lx-accent-06-alpha)',
+  '07-alpha': 'var(--lx-accent-07-alpha)',
+  '08-alpha': 'var(--lx-accent-08-alpha)',
+  '09-alpha': 'var(--lx-accent-09-alpha)',
+  '10-alpha': 'var(--lx-accent-10-alpha)',
+  '11-alpha': 'var(--lx-accent-11-alpha)',
+  '12-alpha': 'var(--lx-accent-12-alpha)',
+}
+
+const gray = {
+  ...colors.gray, 
+  '01': 'var(--lx-gray-01)',
+  '02': 'var(--lx-gray-02)',
+  '03': 'var(--lx-gray-03)',
+  '04': 'var(--lx-gray-04)',
+  '05': 'var(--lx-gray-05)',
+  '06': 'var(--lx-gray-06)',
+  '07': 'var(--lx-gray-07)',
+  '08': 'var(--lx-gray-08)',
+  '09': 'var(--lx-gray-09)',
+  '10': 'var(--lx-gray-10)',
+  '11': 'var(--lx-gray-11)',
+  '12': 'var(--lx-gray-12)',
+  '01-alpha': 'var(--lx-gray-01-alpha)',
+  '02-alpha': 'var(--lx-gray-02-alpha)',
+  '03-alpha': 'var(--lx-gray-03-alpha)',
+  '04-alpha': 'var(--lx-gray-04-alpha)',
+  '05-alpha': 'var(--lx-gray-05-alpha)',
+  '06-alpha': 'var(--lx-gray-06-alpha)',
+  '07-alpha': 'var(--lx-gray-07-alpha)',
+  '08-alpha': 'var(--lx-gray-08-alpha)',
+  '09-alpha': 'var(--lx-gray-09-alpha)',
+  '10-alpha': 'var(--lx-gray-10-alpha)',
+  '11-alpha': 'var(--lx-gray-11-alpha)',
+  '12-alpha': 'var(--lx-gray-12-alpha)',
+}
+
 function exposeColorsToCssVars ({ addBase, theme }) {
   function extractColorVars (colorObj, colorGroup = '') {
     return Object.keys(colorObj).reduce((vars, colorKey) => {
@@ -145,18 +200,18 @@ module.exports = {
   ],
   theme: {
     extend: {
-      backgroundColor: {
+      // backgroundColor: {
-        ...lx,
+      //   ...lx,
-      },
+      // },
-      borderColor: {
+      // borderColor: {
-        ...lx,
+      //   ...lx,
-      },
+      // },
-      outlineColor: {
+      // outlineColor: {
-        ...lx,
+      //   ...lx,
-      },
+      // },
-      textColor: {
+      // textColor: {
-        ...lx,
+      //   ...lx,
-      },
+      // },
       backgroundImage: {
         'gradient-conic': 'conic-gradient(var(--tw-gradient-stops))',
         'gradient-conic-bounce': 'conic-gradient(var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to), var(--tw-gradient-via), var(--tw-gradient-from))',
@@ -186,7 +241,8 @@ module.exports = {
     },
     colors: {
       // Tailwind colors
-      gray: colors.gray,
+      gray: gray,
+      accent: accent,
       red: colors.red,
       green: colors.green,
       blue: colors.blue,