From 29de339fa1c3a71f84091c4ccfcc5436c7ad1cb5 Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Mon, 20 May 2024 15:31:55 +0800 Subject: [PATCH] enhance: don't show date picker for one value Also, set hint background color when hovering property value --- deps/db/src/logseq/db/sqlite/common_db.cljs | 2 +- src/main/frontend/components/block.cljs | 1 + src/main/frontend/components/property.cljs | 12 +- .../frontend/components/property/value.cljs | 161 ++++++++++-------- 4 files changed, 98 insertions(+), 78 deletions(-) diff --git a/deps/db/src/logseq/db/sqlite/common_db.cljs b/deps/db/src/logseq/db/sqlite/common_db.cljs index 997a05f3d..24ef2beb6 100644 --- a/deps/db/src/logseq/db/sqlite/common_db.cljs +++ b/deps/db/src/logseq/db/sqlite/common_db.cljs @@ -235,7 +235,7 @@ idents (mapcat (fn [id] (when-let [e (d/entity db id)] (d/datoms db :eavt (:db/id e)))) - [:logseq.kv/db-type :logseq.kv/graph-uuid]) + [:logseq.kv/db-type :logseq.kv/graph-uuid :logseq.property/empty-placeholder]) favorites (when db-graph? (get-favorites db)) latest-journals (get-latest-journals db 3) all-files (get-all-files db) diff --git a/src/main/frontend/components/block.cljs b/src/main/frontend/components/block.cljs index e337da2b5..ef807cc18 100644 --- a/src/main/frontend/components/block.cljs +++ b/src/main/frontend/components/block.cljs @@ -570,6 +570,7 @@ :on-drag-start (fn [e] (editor-handler/block->data-transfer! page-name e true)) :on-mouse-over #(reset! *hover? true) :on-mouse-leave #(reset! *hover? false) + :on-click (fn [e] (util/stop e)) :on-pointer-down (fn [e] (if breadcrumb? (.preventDefault e) diff --git a/src/main/frontend/components/property.cljs b/src/main/frontend/components/property.cljs index 05521b71d..4f607c5d9 100644 --- a/src/main/frontend/components/property.cljs +++ b/src/main/frontend/components/property.cljs @@ -479,7 +479,8 @@ (when (and *show-new-property-config? (not property)) (reset! *show-new-property-config? true)) (when property - (let [add-class-property? (and (contains? (:block/type entity) "class") class-schema?)] + (let [add-class-property? (and (contains? (:block/type entity) "class") class-schema?) + type (get-in property [:block/schema :type])] (p/do! (pv/exit-edit-property) (cond @@ -487,9 +488,14 @@ (pv/long title))) initial-day (some-> value' (.getTime) (js/Date.)) initial-month (when value' - (js/Date. (.getFullYear value') (.getMonth value')))] + (js/Date. (.getFullYear value') (.getMonth value'))) + content-fn + (fn [{:keys [id]}] + (let [select-handler! + (fn [^js d] + ;; force local to UTC + (when d + (let [gd (goog.date.Date. (.getFullYear d) (.getMonth d) (.getDate d))] + (let [journal (date/js-date->journal-title gd)] + (p/do! + (shui/popup-hide! id) + (when-not (db/get-case-page journal) + (page-handler/ + {:mode "single" + :initial-focus true + :selected initial-day + :class-names {:months ""} + :on-day-key-down (fn [^js d _ ^js e] + (when (= "Enter" (.-key e)) + (select-handler! d))) + :on-select select-handler!} + initial-month + (assoc :default-month initial-month)))))] (rum/use-effect! (fn [] (when editing? @@ -141,45 +169,27 @@ (.focus)))) []) [:div.flex.flex-1.flex-row.gap-1.items-center.flex-wrap - (when page + (cond-> {} + (not multiple-values?) + ;; FIXME: min-h-6 not works + (assoc :class "jtrigger min-h-[24px]" + :ref *trigger-ref + :on-click (fn [e] + (when-not config/publishing? + (shui/popup-show! (.-target e) content-fn + {:align "start" :auto-focus? true}))))) + (if page (when-let [page-cp (state/get-component :block/page-cp)] (rum/with-key (page-cp {:disable-preview? true :hide-close-button? true} page) - (:db/id page)))) - - (let [content-fn - (fn [{:keys [id]}] - (let [select-handler! - (fn [^js d] - ;; force local to UTC - (when d - (let [gd (goog.date.Date. (.getFullYear d) (.getMonth d) (.getDate d))] - (let [journal (date/js-date->journal-title gd)] - (p/do! - (shui/popup-hide! id) - (when-not (db/get-case-page journal) - (page-handler/ - {:mode "single" - :initial-focus true - :selected initial-day - :class-names {:months ""} - :on-day-key-down (fn [^js d _ ^js e] - (when (= "Enter" (.-key e)) - (select-handler! d))) - :on-select select-handler!} - initial-month - (assoc :default-month initial-month)))))] + (:db/id page))) + (when-not multiple-values? + (property-empty-btn-value))) + (when multiple-values? (shui/button - {:class (str "jtrigger h-6" (when-not value " empty-btn") - (when-not multiple-values? " justify-start flex-1")) + {:class (str "jtrigger h-6" (when-not value " empty-btn")) :ref *trigger-ref :variant :text :size :sm @@ -190,9 +200,7 @@ (util/stop e) (shui/popup-show! (.-target e) content-fn {:align "start" :auto-focus? true}))))} - (if (and (nil? value) (not multiple-values?)) - "Empty" - (ui/icon (if multiple-values? "calendar-plus" "calendar") {:size 16}))))])) + (ui/icon "calendar-plus" {:size 16})))])) (rum/defc property-value-date-picker @@ -725,7 +733,7 @@ :else (inline-text {} :markdown (macro-util/expand-value-if-macro (str value) (state/get-macros)))))])) -(rum/defcs property-scalar-value < rum/reactive db-mixins/query +(rum/defcs property-scalar-value < rum/reactive db-mixins/query rum/static [state block property value {:keys [container-id editor-id editing? editor-box editor-args on-chosen] :as opts}] @@ -770,7 +778,7 @@ (property-editing block property value schema editor-box editor-args editor-id) (property-value-inner block property value opts))]))))) -(rum/defc multiple-values +(rum/defc multiple-values < rum/static [block property v {:keys [on-chosen dropdown? editing? block-cp editor-box] :or {dropdown? true} :as opts} schema] @@ -836,39 +844,44 @@ (values-cp toggle-fn)]) (select-cp {:content-props nil})))))) -(rum/defc property-value < rum/reactive - [block property v opts] - (ui/catch-error - (ui/block-error "Something wrong" {}) - (let [dom-id (str "ls-property-" (:db/id block) "-" (:db/id property)) - editor-id (str dom-id "-editor") - schema (:block/schema property) - type (some-> schema (get :type :default)) - multiple-values? (db-property/many? property) - empty-value? (= :logseq.property/empty-placeholder v) - editor-args {:block property - :parent-block block - :format :markdown} - v (cond - (and multiple-values? (or (set? v) (and (coll? v) (empty? v)) (nil? v))) - v - multiple-values? - #{v} - (set? v) - (first v) - :else - v)] - [:div.property-value-inner.w-full - {:data-type type - :class (when empty-value? "empty-value")} - (cond - multiple-values? - (multiple-values block property v opts schema) +(rum/defcs property-value < rum/reactive + (rum/local false ::hover?) + [state block property v opts] + (let [*hover? (::hover? state)] + (ui/catch-error + (ui/block-error "Something wrong" {}) + (let [dom-id (str "ls-property-" (:db/id block) "-" (:db/id property)) + editor-id (str dom-id "-editor") + schema (:block/schema property) + type (some-> schema (get :type :default)) + multiple-values? (db-property/many? property) + empty-value? (= :logseq.property/empty-placeholder v) + editor-args {:block property + :parent-block block + :format :markdown} + v (cond + (and multiple-values? (or (set? v) (and (coll? v) (empty? v)) (nil? v))) + v + multiple-values? + #{v} + (set? v) + (first v) + :else + v)] + [:div.property-value-inner.w-full + {:data-type type + :class (str (when empty-value? "empty-value") + (when @*hover? " ls-hover-property-value bg-gray-02")) + :on-mouse-over #(reset! *hover? true) + :on-mouse-out #(reset! *hover? false)} + (cond + multiple-values? + (multiple-values block property v opts schema) - :else - (property-scalar-value block property v - (merge - opts - {:editor-args editor-args - :editor-id editor-id - :dom-id dom-id})))]))) + :else + (property-scalar-value block property v + (merge + opts + {:editor-args editor-args + :editor-id editor-id + :dom-id dom-id})))]))))