From 9d6154937ae1b7e8bcf606e20f357f9827904c84 Mon Sep 17 00:00:00 2001 From: Ben Yorke Date: Mon, 16 Oct 2023 20:39:04 +0200 Subject: [PATCH] Save dialog --- deps/shui/src/logseq/shui/core.cljs | 5 + deps/shui/src/logseq/shui/dialog/v1.cljs | 68 +++++++ deps/shui/src/logseq/shui/list_item/v1.cljs | 17 +- src/main/frontend/components/cmdk.cljs | 2 +- src/main/frontend/components/header.cljs | 189 ++++++++++++++------ tailwind.config.js | 82 +++++++-- 6 files changed, 284 insertions(+), 79 deletions(-) create mode 100644 deps/shui/src/logseq/shui/dialog/v1.cljs diff --git a/deps/shui/src/logseq/shui/core.cljs b/deps/shui/src/logseq/shui/core.cljs index 0094ae49f55..c69df928d2e 100644 --- a/deps/shui/src/logseq/shui/core.cljs +++ b/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) diff --git a/deps/shui/src/logseq/shui/dialog/v1.cljs b/deps/shui/src/logseq/shui/dialog/v1.cljs new file mode 100644 index 00000000000..67700bebecb --- /dev/null +++ b/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))) diff --git a/deps/shui/src/logseq/shui/list_item/v1.cljs b/deps/shui/src/logseq/shui/list_item/v1.cljs index b12641adf39..800fce70acd 100644 --- a/deps/shui/src/logseq/shui/list_item/v1.cljs +++ b/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" - highlighted (str " bg-gray-03-alpha dark:bg-gray-04-alpha") - (not highlighted) (str " bg-gray-02")) + :class (cond-> "flex flex-col grayscale" + highlighted (str " !grayscale-0 !opacity-100 bg-gray-03-alpha dark:bg-gray-04-alpha") + 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)])])]) diff --git a/src/main/frontend/components/cmdk.cljs b/src/main/frontend/components/cmdk.cljs index e071c915b8c..2b335915ded 100644 --- a/src/main/frontend/components/cmdk.cljs +++ b/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))) diff --git a/src/main/frontend/components/header.cljs b/src/main/frontend/components/header.cljs index bb20b689226..ef131f47771 100644 --- a/src/main/frontend/components/header.cljs +++ b/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]}] - [: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? - {:title (t :plugins) - :options {:on-click #(plugin-handler/goto-plugins-dashboard!)} - :icon (ui/icon "apps")}) - - (when config/lsp-enabled? - {:title (t :themes) - :options {:on-click #(plugins/open-select-theme!)} - :icon (ui/icon "palette")}) - - (when current-repo - {:title (t :export-graph) - :options {:on-click #(state/set-modal! export/export)} - :icon (ui/icon "database-export")}) - - (when (and current-repo (state/enable-editing?)) - {:title (t :import) - :options {:href (rfe/href :import)} - :icon (ui/icon "file-upload")}) - - (when-not config/publishing? - {:title [:div.flex-row.flex.justify-between.items-center - [:span (t :join-community)]] - :options {:href "https://discuss.logseq.com" - :title (t :discourse-title) - :target "_blank"} - :icon (ui/icon "brand-discord")}) - - (when-not config/publishing? - {:title [:div.flex-row.flex.justify-between.items-center - [:span (t :help/bug)]] - :options {:href (rfe/href :bug-report)} - :icon (ui/icon "bug")}) - - (when config/publishing? - {:title (t :toggle-theme) - :options {:on-click #(state/toggle-theme!)} - :icon (ui/icon "bulb")}) - - (when (and (state/sub :auth/id-token) (user-handler/logged-in?)) - {:title (t :logout-user (user-handler/email)) - :options {:on-click #(user-handler/logout)} - :icon (ui/icon "logout")})] - (concat page-menu-and-hr) - (remove nil?)) - {}))) + [:<> + (shui/dialog-v1 {:trigger (fn [{:keys [toggle-dialog! dialog]}] + [:div.relative + [:button.button.icon.toolbar-dots-btn + {:on-click toggle-dialog! + :title (t :header/more)} + (ui/icon "dots" {:size ui/icon-size})] + (dialog)]) + :groups [[:<> [:div.pl-3.pb-1.text-xxs.font-semibold.text-gray-11-alpha {:class "pt-0.5"} "General"] + (shui/list-item-v1 {:text (t :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? + {:title (t :plugins) + :options {:on-click #(plugin-handler/goto-plugins-dashboard!)} + :icon (ui/icon "apps")}) + + (when config/lsp-enabled? + {:title (t :themes) + :options {:on-click #(plugins/open-select-theme!)} + :icon (ui/icon "palette")}) + + (when current-repo + {:title (t :export-graph) + :options {:on-click #(state/set-modal! export/export)} + :icon (ui/icon "database-export")}) + + (when (and current-repo (state/enable-editing?)) + {:title (t :import) + :options {:href (rfe/href :import)} + :icon (ui/icon "file-upload")}) + + (when-not config/publishing? + {:title [:div.flex-row.flex.justify-between.items-center + [:span (t :join-community)]] + :options {:href "https://discuss.logseq.com" + :title (t :discourse-title) + :target "_blank"} + :icon (ui/icon "brand-discord")}) + + (when-not config/publishing? + {:title [:div.flex-row.flex.justify-between.items-center + [:span (t :help/bug)]] + :options {:href (rfe/href :bug-report)} + :icon (ui/icon "bug")}) + + (when config/publishing? + {:title (t :toggle-theme) + :options {:on-click #(state/toggle-theme!)} + :icon (ui/icon "bulb")}) + + (when (and (state/sub :auth/id-token) (user-handler/logged-in?)) + {:title (t :logout-user (user-handler/email)) + :options {:on-click #(user-handler/logout)} + :icon (ui/icon "logout")})] + (concat page-menu-and-hr) + (remove nil?)) + {})])) (rum/defc back-and-forward < {:key-fn #(identity "nav-history-buttons")} diff --git a/tailwind.config.js b/tailwind.config.js index 04c098fe76a..70602ced428 100644 --- a/tailwind.config.js +++ b/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: { - ...lx, - }, - borderColor: { - ...lx, - }, - outlineColor: { - ...lx, - }, - textColor: { - ...lx, - }, + // backgroundColor: { + // ...lx, + // }, + // borderColor: { + // ...lx, + // }, + // outlineColor: { + // ...lx, + // }, + // textColor: { + // ...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,