From a51599df405d1538def70448e9c3d8dfd0340690 Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Mon, 14 Aug 2023 14:54:27 +0800 Subject: [PATCH] fix: align blocks and text --- src/main/frontend/components/property.cljs | 20 +-- src/main/frontend/components/property.css | 4 - .../frontend/components/property/value.cljs | 148 +++++++++--------- 3 files changed, 87 insertions(+), 85 deletions(-) diff --git a/src/main/frontend/components/property.cljs b/src/main/frontend/components/property.cljs index 05c317fcfe..d9adca13a0 100644 --- a/src/main/frontend/components/property.cljs +++ b/src/main/frontend/components/property.cljs @@ -173,7 +173,7 @@ (let [property (get-property-from-db @*property-key)] [:div.ls-property-add.grid.grid-cols-4.gap-1.flex.flex-row.items-center [:div.col-span-1 @*property-key] - [:div.col-span-3.flex.flex-row + [:div.col-span-3.flex.flex-row.pl-6 (when (and property (not class-schema?)) (pv/property-scalar-value entity property @*property-value (assoc opts :editing? true)))]]) @@ -339,12 +339,14 @@ (for [[k v] properties] (when (uuid? k) (when-let [property (db/sub-block (:db/id (db/entity [:block/uuid k])))] - [:div.property-pair - [:div.property-key.col-span-1 - (property-key block property (select-keys opts [:class-schema?]))] - (if (:class-schema? opts) - [:div.property-description.col-span-3.font-light - (get-in property [:block/schema :description])] - [:div.property-value.col-span-3.inline-grid - (pv/property-value block property v opts)])])))) + (let [block? (= :block (get-in property [:block/schema :type]))] + [:div.property-pair + [:div.property-key.col-span-1 + (property-key block property (select-keys opts [:class-schema?]))] + (if (:class-schema? opts) + [:div.property-description.col-span-3.font-light + (get-in property [:block/schema :description])] + [:div.property-value.col-span-3.inline-grid.pl-6 (when block? + {:style {:margin-left -20}}) + (pv/property-value block property v opts)])]))))) (new-property block edit-input-id properties new-property? opts)]))) diff --git a/src/main/frontend/components/property.css b/src/main/frontend/components/property.css index c40918bd4a..dd1378e485 100644 --- a/src/main/frontend/components/property.css +++ b/src/main/frontend/components/property.css @@ -83,10 +83,6 @@ .block-main-container .ls-properties-area { margin-top: 0.25em; - - .property-pair { - gap: 0; - } } input.simple-input { diff --git a/src/main/frontend/components/property/value.cljs b/src/main/frontend/components/property/value.cljs index 5008d17c64..441f82845f 100644 --- a/src/main/frontend/components/property/value.cljs +++ b/src/main/frontend/components/property/value.cljs @@ -158,15 +158,15 @@ new-value :old-value value))) - (exit-edit-property) + (when-not backspace? (exit-edit-property)) (cond - (and backspace? (= new-value "") (not @*add-new-item?)) ; delete item + (and backspace? (= new-value "") *add-new-item? (not @*add-new-item?)) ; delete item (do (move-cursor true opts) (property-handler/delete-property-value! repo block (:block/uuid property) value)) - (and backspace? (= new-value "") @*add-new-item?) + (and backspace? (= new-value "") *add-new-item? @*add-new-item?) (do (move-cursor true opts) (reset! *add-new-item? false)) @@ -263,6 +263,15 @@ (property-handler/delete-property-value! repo block (:block/uuid property) value)))))}) (rum/defc property-scalar-value < rum/reactive db-mixins/query + {:init (fn [state] + (let [[block property value opts] (:rum/args state) + type (:type (:block/schema property))] + (when (and (= type :block) + (not (uuid? value)) + (empty? (get-in block [:block/properties (:block/uuid property)]))) + ;; create a block to be ready for input + (create-new-block! block property opts)) + state))} [block property value {:keys [inline-text page-cp block-cp editor-id dom-id row? editor-box editor-args @@ -278,82 +287,77 @@ select-opts {:on-chosen (fn [] (when *configure-show? (reset! *configure-show? false)) (when *add-new-item? (reset! *add-new-item? false)))}] - (if (and (= type :block) - (not (uuid? value)) - (empty? (get-in block [:block/properties (:block/uuid property)]))) - ;; create a block to be ready for input - (create-new-block! block property opts) - (case type - :date - (date-picker block property value) + (case type + :date + (date-picker block property value) - :checkbox - (let [add-property! (fn [] - (add-property! block (:block/original-name property) (boolean (not value))))] - (ui/checkbox {:tabIndex "0" - :checked value - :on-change (fn [_e] (add-property!)) - :on-key-down (fn [e] - (when (= (util/ekey e) "Enter") - (add-property!)))})) + :checkbox + (let [add-property! (fn [] + (add-property! block (:block/original-name property) (boolean (not value))))] + (ui/checkbox {:tabIndex "0" + :checked value + :on-change (fn [_e] (add-property!)) + :on-key-down (fn [e] + (when (= (util/ekey e) "Enter") + (add-property!)))})) ;; :others - (if editing? - [:div.flex.flex-1 - (case type - (list :number :url) - [:div.h-6 (select block property select-opts)] + (if editing? + [:div.flex.flex-1 + (case type + (list :number :url) + [:div.h-6 (select block property select-opts)] - :page - [:div.h-6 (select-page block property select-opts)] + :page + [:div.h-6 (select-page block property select-opts)] - :block - nil + :block + nil - (let [config {:editor-opts (new-text-editor-opts repo block property value type editor-id *add-new-item? opts)}] - [:div - (editor-box editor-args editor-id (cond-> config - multiple-values? - (assoc :property-value value)))]))] - (let [class (str (when-not row? "flex flex-1 ") - (when multiple-values? "property-value-content"))] - [:div {:id (or dom-id (random-uuid)) - :class class - :style {:min-height 24} - :on-click (fn [] - (let [page-or-block? (contains? #{:page :block} type)] - (when (or (not page-or-block?) - (and (string/blank? value) page-or-block?)) - (set-editing! property editor-id dom-id value))))} - (let [type (if (and (= type :default) (uuid? value)) - (if-let [e (db/entity [:block/uuid value])] - (if (:block/name e) :page :block) - type) - type)] - (if (string/blank? value) - [:div.opacity-50.text-sm "Input something"] - (case type - :page - (when-let [page (db/entity [:block/uuid value])] - (page-cp {} page)) + (let [config {:editor-opts (new-text-editor-opts repo block property value type editor-id *add-new-item? opts)}] + [:div + (editor-box editor-args editor-id (cond-> config + multiple-values? + (assoc :property-value value)))]))] + (let [class (str (when-not row? "flex flex-1 ") + (when multiple-values? "property-value-content"))] + [:div {:id (or dom-id (random-uuid)) + :class class + :style {:min-height 24} + :on-click (fn [] + (let [page-or-block? (contains? #{:page :block} type)] + (when (or (not page-or-block?) + (and (string/blank? value) page-or-block?)) + (set-editing! property editor-id dom-id value))))} + (let [type (if (and (= type :default) (uuid? value)) + (if-let [e (db/entity [:block/uuid value])] + (if (:block/name e) :page :block) + type) + type)] + (if (string/blank? value) + [:div.opacity-50.text-sm "Input something"] + (case type + :page + (when-let [page (db/entity [:block/uuid value])] + (page-cp {} page)) - :block - (if-let [item-block (db/entity [:block/uuid value])] - (let [editor-opts (new-block-editor-opts repo block property value *add-new-item? opts)] - [:div.property-block-container.w-full - (block-cp [item-block] {:id (str value) - :editor-box editor-box - :editor-opts editor-opts - :in-property? true})]) - (do - (if multiple-values? - (property-handler/delete-property-value! repo block (:block/uuid property) value) - (property-handler/remove-block-property! repo - (:block/uuid block) - (:block/uuid property))) - (exit-edit-property) - nil)) + :block + (if-let [item-block (db/entity [:block/uuid value])] + (let [editor-opts (new-block-editor-opts repo block property value *add-new-item? opts)] + [:div.property-block-container.w-full + (block-cp [item-block] {:id (str value) + :editor-box editor-box + :editor-opts editor-opts + :in-property? true})]) + (do + (if multiple-values? + (property-handler/delete-property-value! repo block (:block/uuid property) value) + (property-handler/remove-block-property! repo + (:block/uuid block) + (:block/uuid property))) + (exit-edit-property) + nil)) - (inline-text {} :markdown (str value)))))])))))) + (inline-text {} :markdown (str value)))))]))))) (rum/defcs multiple-value-item < (rum/local false ::show-close?) [state entity property item {:keys [editor-id row? *add-new-item?]