mirror of https://github.com/logseq/logseq
enhance(ux): WIP interaction for the dropdown property editor
parent
ac2417a9fb
commit
9d62813fbc
|
@ -434,7 +434,8 @@
|
||||||
:on-click (fn [^js e]
|
:on-click (fn [^js e]
|
||||||
(when-not disabled?
|
(when-not disabled?
|
||||||
(shui/popup-show! (.-target e) content-fn
|
(shui/popup-show! (.-target e) content-fn
|
||||||
{:content-props {:class "ls-icon-picker"
|
{:id :ls-icon-picker
|
||||||
|
:content-props {:class "ls-icon-picker"
|
||||||
:onEscapeKeyDown #(.preventDefault %)}})))}
|
:onEscapeKeyDown #(.preventDefault %)}})))}
|
||||||
(if has-icon?
|
(if has-icon?
|
||||||
[:span {:style {:color (or (:color icon-value) "inherit")}}
|
[:span {:style {:color (or (:color icon-value) "inherit")}}
|
||||||
|
|
|
@ -667,7 +667,8 @@
|
||||||
(shui/popup-show! (.-target e)
|
(shui/popup-show! (.-target e)
|
||||||
(fn [{:keys [id]}]
|
(fn [{:keys [id]}]
|
||||||
(property-v2/dropdown-editor id property))
|
(property-v2/dropdown-editor id property))
|
||||||
{:content-props {:class "ls-property-dropdown-editor"}
|
{:content-props
|
||||||
|
{:class "ls-property-dropdown-editor as-root"}
|
||||||
:align "start"
|
:align "start"
|
||||||
:as-dropdown? true}))
|
:as-dropdown? true}))
|
||||||
:on-click (fn [^js e]
|
:on-click (fn [^js e]
|
||||||
|
|
|
@ -332,4 +332,32 @@ a.control-link {
|
||||||
@apply relative top-[1px];
|
@apply relative top-[1px];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ls-property-name-edit-pane {
|
||||||
|
@apply px-2 pt-2 pb-1;
|
||||||
|
|
||||||
|
> .input-wrap {
|
||||||
|
@apply gap-1.5;
|
||||||
|
|
||||||
|
> .ui__button:first-child {
|
||||||
|
@apply border;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
@apply flex items-center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .ui__input:last-child {
|
||||||
|
@apply !h-[29px];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ls-property-choices-sub-pane {
|
||||||
|
@apply px-2 pt-2 pb-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ls-property-ui-position-sub-pane {
|
||||||
|
@apply w-[240px] p-0;
|
||||||
}
|
}
|
|
@ -1,43 +1,107 @@
|
||||||
(ns frontend.components.property-v2
|
(ns frontend.components.property-v2
|
||||||
(:require [frontend.components.icon :as icon-component]
|
(:require [frontend.components.icon :as icon-component]
|
||||||
|
[frontend.handler.db-based.property :as db-property-handler]
|
||||||
|
[frontend.db :as db]
|
||||||
[frontend.util :as util]
|
[frontend.util :as util]
|
||||||
[logseq.shui.ui :as shui]
|
[logseq.shui.ui :as shui]
|
||||||
|
[logseq.shui.popup.core :as popup-core]
|
||||||
[promesa.core :as p]
|
[promesa.core :as p]
|
||||||
[goog.dom :as gdom]
|
[goog.dom :as gdom]
|
||||||
[rum.core :as rum]))
|
[rum.core :as rum]))
|
||||||
|
|
||||||
(rum/defc dropdown-editor-menuitem
|
(rum/defc name-edit-pane
|
||||||
[{:keys [icon title desc submenu-content item-props disabled? toggle-checked? on-toggle-checked-change]}]
|
[property]
|
||||||
|
(let [title (:block/title property)
|
||||||
|
icon (:logseq.property/icon property)
|
||||||
|
*input-ref (rum/use-ref nil)]
|
||||||
|
|
||||||
(let [toggle? (boolean? toggle-checked?)
|
(rum/use-effect!
|
||||||
id (str "dem-" icon)
|
(fn []
|
||||||
|
(js/console.log "==>>>> name editor SET-UP!", property)
|
||||||
|
#(js/console.log "==>>>> name editor BYE!"))
|
||||||
|
[])
|
||||||
|
|
||||||
|
[:div.ls-property-name-edit-pane
|
||||||
|
[:div.flex.items-center.input-wrap
|
||||||
|
(icon-component/icon-picker icon {:on-chosen (fn [_e icon]
|
||||||
|
(db-property-handler/upsert-property!
|
||||||
|
(:db/ident property)
|
||||||
|
(:block/schema property)
|
||||||
|
{:properties {:logseq.property/icon icon}}))})
|
||||||
|
(shui/input {:ref *input-ref :size "sm" :default-value title})]
|
||||||
|
[:div.pt-2 (shui/textarea {:placeholder "description"})]
|
||||||
|
[:div.pt-2.flex.justify-end
|
||||||
|
(shui/button {:size "sm" :disabled true
|
||||||
|
:variant :secondary} "Save")]]))
|
||||||
|
|
||||||
|
(defn restore-root-highlight-item!
|
||||||
|
[id]
|
||||||
|
(js/setTimeout
|
||||||
|
#(some-> (gdom/getElement id) (.focus)) 32))
|
||||||
|
|
||||||
|
(rum/defc dropdown-editor-menuitem
|
||||||
|
[{:keys [id icon title desc submenu-content item-props sub-content-props disabled? toggle-checked? on-toggle-checked-change]}]
|
||||||
|
|
||||||
|
(let [[sub-open? set-sub-open!] (rum/use-state false)
|
||||||
|
toggle? (boolean? toggle-checked?)
|
||||||
|
id1 (str "d1-" (or id icon))
|
||||||
|
id2 (str "d2-" id1)
|
||||||
|
or-close-menu-sub! (fn []
|
||||||
|
(when-not (popup-core/get-popup :ls-icon-picker)
|
||||||
|
(set-sub-open! false)
|
||||||
|
(restore-root-highlight-item! id1)))
|
||||||
wrap-menuitem (if submenu-content
|
wrap-menuitem (if submenu-content
|
||||||
#(shui/dropdown-menu-sub
|
#(shui/dropdown-menu-sub
|
||||||
(shui/dropdown-menu-sub-trigger (merge {} item-props) %)
|
{:open sub-open?
|
||||||
(shui/dropdown-menu-sub-content
|
:on-open-change (fn [v] (if v (set-sub-open! true) (or-close-menu-sub!)))}
|
||||||
(if (fn? submenu-content)
|
(shui/dropdown-menu-sub-trigger (merge {:id id1} item-props) %)
|
||||||
(submenu-content) submenu-content)))
|
(shui/dropdown-menu-portal
|
||||||
|
(shui/dropdown-menu-sub-content
|
||||||
|
(merge {:hideWhenDetached true
|
||||||
|
:onEscapeKeyDown or-close-menu-sub!} sub-content-props)
|
||||||
|
(if (fn? submenu-content)
|
||||||
|
(submenu-content {:set-sub-open! set-sub-open! :id id1}) submenu-content))))
|
||||||
#(shui/dropdown-menu-item
|
#(shui/dropdown-menu-item
|
||||||
(merge {:on-select (fn []
|
(merge {:on-select (fn []
|
||||||
(when toggle?
|
(when toggle?
|
||||||
(some-> (gdom/getElement id) (.click))))}
|
(some-> (gdom/getElement id2) (.click))))
|
||||||
|
:id id1}
|
||||||
item-props) %))]
|
item-props) %))]
|
||||||
(wrap-menuitem
|
(wrap-menuitem
|
||||||
[:div.inner-wrap
|
[:div.inner-wrap
|
||||||
{:class (util/classnames [{:disabled disabled?}])}
|
{:class (util/classnames [{:disabled disabled?}])}
|
||||||
[:strong
|
[:strong
|
||||||
(shui/tabler-icon (name icon))
|
(some-> icon (name) (shui/tabler-icon))
|
||||||
[:span title]]
|
[:span title]]
|
||||||
(if (fn? desc) (desc)
|
(if (fn? desc) (desc)
|
||||||
(if (boolean? toggle-checked?)
|
(if (boolean? toggle-checked?)
|
||||||
[:span.scale-90.flex.items-center
|
[:span.scale-90.flex.items-center
|
||||||
(shui/switch {:id id :size "sm" :default-checked toggle-checked?
|
(shui/switch {:id id2 :size "sm" :default-checked toggle-checked?
|
||||||
:disabled disabled? :on-click #(util/stop-propagation %)
|
:disabled disabled? :on-click #(util/stop-propagation %)
|
||||||
:on-checked-change (or on-toggle-checked-change identity)})]
|
:on-checked-change (or on-toggle-checked-change identity)})]
|
||||||
[:small [:span desc]
|
[:small [:span desc]
|
||||||
(when disabled? (shui/tabler-icon "forbid-2" {:size 15}))]))])))
|
(when disabled? (shui/tabler-icon "forbid-2" {:size 15}))]))])))
|
||||||
|
|
||||||
(rum/defc dropdown-editor
|
(rum/defc choices-sub-pane
|
||||||
|
[_property]
|
||||||
|
|
||||||
|
[:div.ls-property-choices-sub-pane
|
||||||
|
(dropdown-editor-menuitem {})])
|
||||||
|
|
||||||
|
(rum/defc ui-position-sub-pane
|
||||||
|
[_property {:keys [id set-sub-open!]}]
|
||||||
|
(let [handle-select! (fn [^js e]
|
||||||
|
(shui/toast! (.-innerText (.-target e)))
|
||||||
|
(set-sub-open! false)
|
||||||
|
(restore-root-highlight-item! id))
|
||||||
|
item-props {:on-select handle-select!}]
|
||||||
|
[:div.ls-property-dropdown-editor.ls-property-ui-position-sub-pane
|
||||||
|
(dropdown-editor-menuitem {:icon :layout-distribute-horizontal :title "Block properties" :item-props item-props})
|
||||||
|
(dropdown-editor-menuitem {:icon :layout-align-right :title "Beginning of the block" :item-props item-props})
|
||||||
|
(dropdown-editor-menuitem {:icon :layout-align-left :title "End of the block" :item-props item-props})
|
||||||
|
(dropdown-editor-menuitem {:icon :layout-align-top :title "Below of the block" :item-props item-props})]))
|
||||||
|
|
||||||
|
(rum/defc dropdown-editor-impl
|
||||||
"popup-id: dropdown popup id
|
"popup-id: dropdown popup id
|
||||||
property: block entity"
|
property: block entity"
|
||||||
[popup-id property]
|
[popup-id property]
|
||||||
|
@ -46,16 +110,17 @@
|
||||||
icon (when icon (icon-component/icon icon {:size 15}))]
|
icon (when icon (icon-component/icon icon {:size 15}))]
|
||||||
[:<>
|
[:<>
|
||||||
(dropdown-editor-menuitem {:icon :edit :title "Property name" :desc [:span.flex.items-center.gap-1 icon title]
|
(dropdown-editor-menuitem {:icon :edit :title "Property name" :desc [:span.flex.items-center.gap-1 icon title]
|
||||||
:submenu-content (fn [] [:p.p-3 [:strong "edit name pane???"]])})
|
:submenu-content (fn [] (name-edit-pane property))})
|
||||||
(dropdown-editor-menuitem {:icon :hash :title "Schema type" :desc "Date" :disabled? true})
|
(dropdown-editor-menuitem {:icon :hash :title "Schema type" :desc "Date" :disabled? true})
|
||||||
(dropdown-editor-menuitem {:icon :list :title "Available choices" :desc "4 choices"
|
(dropdown-editor-menuitem {:icon :list :title "Available choices" :desc "4 choices"
|
||||||
:submenu-content (fn [] [:p.p-3 [:strong "choices pane???"]])})
|
:submenu-content (fn [] (choices-sub-pane property))})
|
||||||
(dropdown-editor-menuitem {:icon :checks :title "Multiple values" :toggle-checked? true :disabled? true
|
(dropdown-editor-menuitem {:icon :checks :title "Multiple values" :toggle-checked? true :disabled? true
|
||||||
:on-toggle-checked-change (fn [v] (shui/toast! (str title ": " v)))})
|
:on-toggle-checked-change (fn [v] (shui/toast! (str title ": " v)))})
|
||||||
|
|
||||||
(shui/dropdown-menu-separator)
|
(shui/dropdown-menu-separator)
|
||||||
(dropdown-editor-menuitem {:icon :float-left :title "UI position" :desc "beginning of the block"
|
(dropdown-editor-menuitem {:icon :float-left :title "UI position" :desc "beginning of the block"
|
||||||
:submenu-content (fn [] [:p.p-3 [:strong "position???"]])})
|
:item-props {:class "ui__position-trigger-item"}
|
||||||
|
:submenu-content (fn [ops] (ui-position-sub-pane property ops))})
|
||||||
(dropdown-editor-menuitem {:icon :eye-off :title "Hide by default" :toggle-checked? false
|
(dropdown-editor-menuitem {:icon :eye-off :title "Hide by default" :toggle-checked? false
|
||||||
:on-toggle-checked-change (fn [v] (shui/toast! (str title ": " v)))})
|
:on-toggle-checked-change (fn [v] (shui/toast! (str title ": " v)))})
|
||||||
|
|
||||||
|
@ -67,3 +132,8 @@
|
||||||
(util/stop e)
|
(util/stop e)
|
||||||
(-> (shui/dialog-confirm! "remove?")
|
(-> (shui/dialog-confirm! "remove?")
|
||||||
(p/then (fn [] (shui/popup-hide! popup-id)))))}})]))
|
(p/then (fn [] (shui/popup-hide! popup-id)))))}})]))
|
||||||
|
|
||||||
|
(rum/defc dropdown-editor < rum/reactive
|
||||||
|
[popup-id property]
|
||||||
|
(let [property1 (db/sub-block (:db/id property))]
|
||||||
|
(dropdown-editor-impl popup-id property1)))
|
||||||
|
|
Loading…
Reference in New Issue