From 705576557f204f992f2dcf1ed8089ceb9c79bfcc Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Wed, 21 Jun 2023 20:49:19 +0800 Subject: [PATCH] fix: property ux --- src/main/frontend/commands.cljs | 6 +- src/main/frontend/components/property.cljs | 75 ++++++++++++---------- src/main/frontend/db/model.cljs | 3 +- src/main/frontend/handler/property.cljs | 9 ++- src/main/frontend/state.cljs | 2 +- 5 files changed, 54 insertions(+), 41 deletions(-) diff --git a/src/main/frontend/commands.cljs b/src/main/frontend/commands.cljs index 8bdb7749a3..bc7d7f04d1 100644 --- a/src/main/frontend/commands.cljs +++ b/src/main/frontend/commands.cljs @@ -298,7 +298,8 @@ ["Embed Twitter tweet" [[:editor/input "{{tweet }}" {:last-pattern command-trigger :backward-pos 2}]]] - ["Add new property" property-handler/editing-new-property!]] + ["Add new property" [[:editor/clear-current-slash] + [:editor/new-property]]]] @*extend-slash-commands ;; Allow user to modify or extend, should specify how to extend. @@ -701,6 +702,9 @@ (defmethod handle-step :editor/exit [[_]] (state/clear-edit!)) +(defmethod handle-step :editor/new-property [[_]] + (property-handler/editing-new-property!)) + (defmethod handle-step :default [[type & _args]] (prn "No handler for step: " type)) diff --git a/src/main/frontend/components/property.cljs b/src/main/frontend/components/property.cljs index 00cf61b7ca..96c359a013 100644 --- a/src/main/frontend/components/property.cljs +++ b/src/main/frontend/components/property.cljs @@ -9,6 +9,7 @@ [frontend.state :as state] [goog.dom :as gdom] [frontend.search :as search] + [frontend.mixins :as mixins] ;; [frontend.components.search.highlight :as highlight] [frontend.components.svg :as svg] [frontend.modules.shortcut.core :as shortcut] @@ -46,24 +47,48 @@ :property-schema (edn/read-string @*property-schema)}))} "Save"]])) -(rum/defcs properties-area < - rum/reactive - (rum/local nil ::properties) +(rum/defcs new-property < rum/reactive (rum/local nil ::property-key) (rum/local nil ::property-value) - {:will-mount (fn [state] - (reset! (::properties state) (second (:rum/args state))) - state)} - [state block _properties edit-input-id] - (let [new-property? (state/sub edit-input-id :path-in-sub-atom :ui/new-property) - *properties (::properties state) + (mixins/event-mixin + (fn [state] + (mixins/hide-when-esc-or-outside + state + :on-hide (fn [] + (property-handler/set-editing-new-property! nil)) + :node (js/document.getElementById "edit-new-property")))) + [state repo block edit-input-id properties] + (let [new-property? (= edit-input-id (state/sub :ui/new-property-input-id)) *property-key (::property-key state) - *property-value (::property-value state) - repo (state/get-current-repo)] + *property-value (::property-value state)] + (cond + new-property? + [:div#edit-new-property + [:input.block-properties {:on-change #(reset! *property-key (util/evalue %))}] + [:input.block-properties {:on-change #(reset! *property-value (util/evalue %))}] + [:a {:on-click (fn [] + (when (and @*property-key @*property-value) + (property-handler/add-property! repo block @*property-key @*property-value)) + (reset! *property-key nil) + (reset! *property-value nil) + (property-handler/set-editing-new-property! nil))} + "Save"]] + + (seq properties) + [:a {:title "Add another value" + :on-click (fn [] + (property-handler/set-editing-new-property! edit-input-id) + (reset! *property-key nil) + (reset! *property-value nil))} + (ui/icon "circle-plus")]))) + +(rum/defc properties-area < rum/static + [block properties edit-input-id] + (let [repo (state/get-current-repo)] [:div.ls-properties-area.pl-6 - (when (seq @*properties) + (when (seq properties) [:div - (for [[prop-uuid-or-built-in-prop v] @*properties] + (for [[prop-uuid-or-built-in-prop v] properties] (if (and (string? prop-uuid-or-built-in-prop) (util/uuid-string? prop-uuid-or-built-in-prop)) (when-let [property-class (db/pull [:block/uuid (uuid prop-uuid-or-built-in-prop)])] @@ -74,30 +99,10 @@ [:span v] [:a.ml-8 {:on-click (fn [] - (property-handler/remove-property! repo block prop-uuid-or-built-in-prop) - (reset! *properties (:block/properties (db/pull [:block/uuid (:block/uuid block)]))))} + (property-handler/remove-property! repo block prop-uuid-or-built-in-prop))} "DEL"]]) ;; builtin [:div [:a.mr-2 (str prop-uuid-or-built-in-prop)] [:span v]]))]) - (cond - new-property? - [:div - [:input.block-properties {:on-change #(reset! *property-key (util/evalue %))}] - [:input.block-properties {:on-change #(reset! *property-value (util/evalue %))}] - [:a {:on-click (fn [] - (when (and @*property-key @*property-value) - (property-handler/add-property! repo block @*property-key @*property-value) - (reset! *properties (:block/properties (db/pull [:block/uuid (:block/uuid block)])))) - (reset! *property-key nil) - (reset! *property-value nil))} - "Save"]] - - (seq @*properties) - [:a {:title "Add another value" - :on-click (fn [] - (state/set-state! edit-input-id true :path-in-sub-atom :ui/new-property) - (reset! *property-key nil) - (reset! *property-value nil))} - (ui/icon "circle-plus")])])) + (new-property repo block edit-input-id properties)])) diff --git a/src/main/frontend/db/model.cljs b/src/main/frontend/db/model.cljs index c55338a5cd..14ac52fec9 100644 --- a/src/main/frontend/db/model.cljs +++ b/src/main/frontend/db/model.cljs @@ -425,7 +425,8 @@ independent of format as format specific heading characters are stripped" {:query-fn (fn [_] (let [e (db-utils/entity id) children (map :db/id (sort-by-left (:block/_parent e) e))] - [e {:children children + [e {:properties (:block/properties e) + :children children :collapsed? (:block/collapsed? e)}]))} nil) react diff --git a/src/main/frontend/handler/property.cljs b/src/main/frontend/handler/property.cljs index 7a5d47b524..48173e20f5 100644 --- a/src/main/frontend/handler/property.cljs +++ b/src/main/frontend/handler/property.cljs @@ -154,8 +154,11 @@ (state/clear-editor-action!) (state/clear-edit!)))))) +(defn- set-editing-new-property! + [value] + (state/set-state! :ui/new-property-input-id value)) + (defn editing-new-property! [] - (when-let [edit-input-id (state/get-edit-input-id)] - (state/set-state! edit-input-id true :path-in-sub-atom :ui/new-property) - (state/clear-edit!))) + (set-editing-new-property! (state/get-edit-input-id)) + (state/clear-edit!)) diff --git a/src/main/frontend/state.cljs b/src/main/frontend/state.cljs index 8dfe9f0481..201cdd7ff0 100644 --- a/src/main/frontend/state.cljs +++ b/src/main/frontend/state.cljs @@ -102,7 +102,7 @@ false true) :ui/scrolling? (atom false) - :ui/new-property (atom {}) + :ui/new-property-input-id nil :document/mode? document-mode? :config {}