mirror of https://github.com/logseq/logseq
Save dialog
parent
2d659e8058
commit
9d6154937a
|
@ -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)
|
||||
|
|
|
@ -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)))
|
|
@ -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)])])])
|
||||
|
|
|
@ -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)))
|
||||
|
|
|
@ -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")})
|
||||
[:<>
|
||||
(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 :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 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 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 (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 :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-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 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?))
|
||||
{})))
|
||||
(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")}
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue