Skip to content

Commit

Permalink
Save dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@bendyorke
bendyorke committed Oct 16, 2023
1 parent 2d659e8 commit 9d61549
Show file tree
Hide file tree
Showing 6 changed files with 284 additions and 79 deletions.
5 changes: 5 additions & 0 deletions deps/shui/src/logseq/shui/core.cljs
View file
Expand Up @@ -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]))
Expand All @@ -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)
68 changes: 68 additions & 0 deletions deps/shui/src/logseq/shui/dialog/v1.cljs
View file
@@ -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)))
17 changes: 10 additions & 7 deletions deps/shui/src/logseq/shui/list_item/v1.cljs
View file
Expand Up @@ -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)]
Expand All @@ -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
Expand All @@ -124,15 +127,15 @@
: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
(when title
[: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)
Expand All @@ -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)])])])
2 changes: 1 addition & 1 deletion src/main/frontend/components/cmdk.cljs
View file
Expand Up @@ -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)))
Expand Down
189 changes: 131 additions & 58 deletions src/main/frontend/components/header.cljs
View file
Expand Up @@ -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]
Expand Down Expand Up @@ -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")}
Expand Down

0 comments on commit 9d61549

Please sign in to comment.