diff --git a/src/main/frontend/components/block.cljs b/src/main/frontend/components/block.cljs index 7bc269d1e..3fe8a010a 100644 --- a/src/main/frontend/components/block.cljs +++ b/src/main/frontend/components/block.cljs @@ -2923,17 +2923,19 @@ (let [block (merge block (block/parse-title-and-body uuid (:block/format block) pre-block? content)) hide-block-refs-count? (and (:embed? config) (= (:block/uuid block) (:embed-id config)))] - (block-content-or-editor config block edit-input-id block-id edit? hide-block-refs-count? selected?)) - (when (and (config/db-based-graph? repo) (not collapsed?)) - (db-properties-cp config - block - edit-input-id - {:selected? selected? - :in-block-container? true}))]) + (block-content-or-editor config block edit-input-id block-id edit? hide-block-refs-count? selected?))]) (when @*show-right-menu? (block-right-menu config block edit?))] + (when (and (config/db-based-graph? repo) (not collapsed?)) + [:div {:style {:padding-left 29}} + (db-properties-cp config + block + edit-input-id + {:selected? selected? + :in-block-container? true})]) + (when-not (:hide-children? config) (let [children (db/sort-by-left (:block/_parent block) block) config' (-> (update config :level inc) diff --git a/src/main/frontend/components/editor.cljs b/src/main/frontend/components/editor.cljs index 54ffbcf5f..bb7354428 100644 --- a/src/main/frontend/components/editor.cljs +++ b/src/main/frontend/components/editor.cljs @@ -182,7 +182,7 @@ [:div (when (and db? tag?) [:div.flex.flex-row.items-center.px-4.py-1.text-sm.opacity-70.gap-2 - "Create page:" + "Turn this block into a page:" (ui/toggle create-page? (fn [_e] (swap! (:editor/create-page? @state/state) not)) diff --git a/src/main/frontend/components/page.cljs b/src/main/frontend/components/page.cljs index 315fc975f..0a1eef564 100644 --- a/src/main/frontend/components/page.cljs +++ b/src/main/frontend/components/page.cljs @@ -438,60 +438,81 @@ (js/console.error "No selected option found to navigate to"))))}))) (rum/defcs configure < rum/reactive - [state page {:keys [journal?] :as opts}] - (let [page-id (:db/id page) - page (when page-id (db/sub-block page-id)) - type (:block/type page) - properties-opts (merge {:selected? false - :page-configure? true} - opts) - class? (= type "class")] - (when page - [:div.property-configure.grid.gap-2.p-1 - (when-not journal? - [:div.grid.grid-cols-4.gap-1 - [:div.col-span-1 "Is it a class?"] - [:div.col-span-3 - (ui/checkbox {:checked class? - :disabled config/publishing? - :on-change (fn [] - (if class? - (db/transact! [[:db/retract (:db/id page) :block/type]]) - (db/transact! [{:db/id (:db/id page) - :block/type "class"}])))})]]) - - (when class? - [:div.grid.grid-cols-4.gap-1.items-center.class-parent - [:div.col-span-1 "Parent class:"] - (if config/publishing? + [state page {:keys [journal? *configure-show? show-properties?] :as opts + :or {show-properties? true}}] + (when (rum/react *configure-show?) + (let [page-id (:db/id page) + page (when page-id (db/sub-block page-id)) + type (:block/type page) + properties-opts (merge {:selected? false + :page-configure? true} + opts) + class? (= type "class")] + (when page + [:div.property-configure.grid.gap-2 + (when-not journal? + [:div.grid.grid-cols-4.gap-1 + [:div.col-span-1 "Is it a class?"] [:div.col-span-3 - (if-let [parent-class (some-> (:db/id (:block/namespace page)) - db/entity - :block/original-name)] - [:a {:on-click #(route-handler/redirect-to-page! parent-class)} - parent-class] - "None")] - [:div.col-span-3 - (let [namespace (some-> (:db/id (:block/namespace page)) - db/entity - :block/uuid)] - [:div.w-60 - (class-select page namespace (fn [value] - (if (seq value) - (db/transact! - [{:db/id (:db/id page) - :block/namespace [:block/uuid (uuid value)]}]) - (db/transact! - [[:db.fn/retractAttribute (:db/id page) :block/namespace]]))))])])]) + (ui/checkbox {:checked class? + :disabled config/publishing? + :on-change (fn [] + (if class? + (db/transact! [[:db/retract (:db/id page) :block/type]]) + (db/transact! [{:db/id (:db/id page) + :block/type "class"}])))})]]) - (let [edit-input-id (str "edit-block-" (:block/uuid page))] + (when class? + [:div.grid.grid-cols-4.gap-1.items-center.class-parent + [:div.col-span-1 "Parent class:"] + (if config/publishing? + [:div.col-span-3 + (if-let [parent-class (some-> (:db/id (:block/namespace page)) + db/entity + :block/original-name)] + [:a {:on-click #(route-handler/redirect-to-page! parent-class)} + parent-class] + "None")] + [:div.col-span-3 + (let [namespace (some-> (:db/id (:block/namespace page)) + db/entity + :block/uuid)] + [:div.w-60 + (class-select page namespace (fn [value] + (if (seq value) + (db/transact! + [{:db/id (:db/id page) + :block/namespace [:block/uuid (uuid value)]}]) + (db/transact! + [[:db.fn/retractAttribute (:db/id page) :block/namespace]]))))])])]) + + (when-not show-properties? + (let [edit-input-id (str "edit-block-" (:block/uuid page))] + [:div + [:div.text-sm.opacity-70.font-medium.mb-2 "Properties:"] + (component-block/db-properties-cp + {:editor-box editor/box} + page + edit-input-id + (assoc properties-opts :class-schema? class?))]))])))) + +(rum/defc page-properties < rum/reactive + [page *configure-show?] + (let [type (:block/type page) + class? (= type "class") + configure? (rum/react *configure-show?) + opts {:selected? false + :page-configure? configure? + :class-schema? class?}] + [:div {:style {:padding 2}} + (let [edit-input-id (str "edit-block-" (:block/uuid page) "-schema") + properties-cp (component-block/db-properties-cp {:editor-box editor/box} + page edit-input-id opts)] + (if (and configure? class?) [:div [:div.text-sm.opacity-70.font-medium.mb-2 "Properties:"] - (component-block/db-properties-cp - {:editor-box editor/box} - page - edit-input-id - (assoc properties-opts :class-schema? class?))])]))) + properties-cp] + properties-cp))])) (defn- get-path-page-name [state page-name] @@ -546,7 +567,14 @@ *all-collapsed? (::all-collapsed? state) *current-block-page (::current-page state) block-or-whiteboard? (or block? whiteboard?) - home? (= :home (state/get-current-route))] + home? (= :home (state/get-current-route)) + show-properties? (and + (config/db-based-graph? repo) + (not block?) + (not whiteboard?) + (or (seq (:block/properties page)) + (seq (:block/alias page)) + (seq (:block/tags page))))] [:div.flex-1.page.relative (merge (if (seq (:block/tags page)) (let [page-names (model/get-page-names-by-ids (map :db/id (:block/tags page)))] @@ -581,9 +609,10 @@ (plugins/hook-ui-slot :page-head-actions-slotted nil) (plugins/hook-ui-items :pagebar)]))]) - (when (and @*configure-show? db-based? (not built-in-property?)) + (when (and db-based? (not built-in-property?)) (configure page {:*configure-show? *configure-show? - :journal? journal?})) + :journal? journal? + :show-properties? show-properties?})) [:div (when (and block? (not sidebar?) (not whiteboard?)) @@ -592,21 +621,8 @@ [:div.mb-4 (component-block/breadcrumb config repo block-id {:level-limit 3})])) - (when (and - (config/db-based-graph? repo) - (not block?) - (not whiteboard?) - (not @*configure-show?) - (or (seq (:block/properties page)) - (seq (:block/alias page)) - (seq (:block/tags page)))) - [:div.p-2 - (let [edit-input-id (str "edit-block-" (:block/uuid page) "-schema")] - (component-block/db-properties-cp - {:editor-box editor/box} - page - edit-input-id - {:selected? false}))]) + (when show-properties? + (page-properties page *configure-show?)) ;; blocks (let [_ (and block? page (reset! *current-block-page (:block/name (:block/page page)))) diff --git a/src/main/frontend/components/property.cljs b/src/main/frontend/components/property.cljs index 2ad87c999..b461ce597 100644 --- a/src/main/frontend/components/property.cljs +++ b/src/main/frontend/components/property.cljs @@ -247,8 +247,8 @@ (remove exclude-properties))] (if @*property-key (when-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.ls-property-add.grid.grid-cols-5.gap-1.flex.flex-row.items-center + [:div.col-span-2 @*property-key] [:div.col-span-3.flex.flex-row (when (not class-schema?) (if @*show-new-property-config? @@ -332,9 +332,8 @@ (when-let [id (:id icon)] (when (= :emoji (:type icon)) [:em-emoji {:id id}])) - ;; default property icon - (ui/icon "point" {:size 16 - :class "opacity-50"}))]) + [:span.bullet-container.cursor + [:span.bullet]])]) (fn [{:keys [toggle-fn]}] (ui/emoji-picker {:auto-focus true @@ -356,12 +355,12 @@ [:div.ml-1 (:block/original-name property)]]) (fn [{:keys [toggle-fn]}] [:a.property-k - {:data-propertyid (:block/uuid property) - :data-blockid (:block/uuid block) - :data-class-schema (boolean class-schema?) - :title (str "Configure property: " (:block/original-name property)) - :on-click toggle-fn} - [:div.ml-1 (:block/original-name property)]])) + {:data-propertyid (:block/uuid property) + :data-blockid (:block/uuid block) + :data-class-schema (boolean class-schema?) + :title (str "Configure property: " (:block/original-name property)) + :on-click toggle-fn} + [:div.ml-1 (:block/original-name property)]])) (fn [{:keys [toggle-fn]}] [:div.p-8 (property-config repo property {:toggle-fn toggle-fn})]) @@ -403,21 +402,22 @@ (for [[k v] properties] (when (uuid? k) (when-let [property (db/sub-block (:db/id (db/entity [:block/uuid k])))] - (let [block? (and (contains? #{:default :template} (get-in property [:block/schema :type] :default)) + (let [type (get-in property [:block/schema :type] :default) + block? (and (contains? #{:default :template} type) (uuid? v) (db/entity [:block/uuid v]))] [:div {:class (if block? "flex flex-1 flex-col gap-1" "property-pair items-center")} [:div.property-key - {:class (if (:class-schema? opts) "col-span-2" "col-span-1")} + {:class "col-span-2"} (property-key block property (select-keys opts [:class-schema?]))] (if (:class-schema? opts) [:div.property-description.text-sm.opacity-70 - {:class (if (:class-schema? opts) "col-span-2" "col-span-3")} + {:class "col-span-3"} (get-in property [:block/schema :description])] [:div.property-value {:class (if block? - "col-span-4 ml-8 pl-1" + "block-property-value" "col-span-3 inline-grid")} (pv/property-value block property v opts)])])))))) diff --git a/src/main/frontend/components/property.css b/src/main/frontend/components/property.css index 69dea4452..8853372f9 100644 --- a/src/main/frontend/components/property.css +++ b/src/main/frontend/components/property.css @@ -1,5 +1,6 @@ .property-configure { min-width: 32rem; + padding: 2px; .form-input, .form-select { line-height: 1rem; @@ -16,16 +17,26 @@ /* background: var(--ls-secondary-background-color); */ /* } */ -.ls-block .ls-properties-area { - padding-left: 0.3rem; +.ls-block .ls-properties-area, .block-property-value { + padding-left: 22px; + border-left: 1px solid; + border-left-color: var(--ls-guideline-color, #ddd); +} + +.block-property-value { + margin-left: 7px; +} + +.ls-block .block-property-value, .property-template .block-property-value { + padding-left: 0; } .ls-properties-area { @apply grid gap-1; .property-pair { - @apply grid grid-cols-4 gap-1; - grid-template-columns: repeat(auto-fit, 160px); + @apply grid grid-cols-5 gap-1; + grid-template-columns: repeat(auto-fit, 120px); } .add-button-link { @@ -76,10 +87,6 @@ margin: 0; } - .property-block-container { - margin-left: -1.5em; - } - .property-key a { color: var(--ls-primary-text-color); } diff --git a/src/main/frontend/components/property/value.cljs b/src/main/frontend/components/property/value.cljs index eeacb1781..d8858decc 100644 --- a/src/main/frontend/components/property/value.cljs +++ b/src/main/frontend/components/property/value.cljs @@ -311,7 +311,7 @@ entity (db/sub-block (:db/id e)) properties-cp (:properties-cp opts)] (when (and entity properties-cp) - [:div.property-block-container.w-full + [:div.property-block-container.w-full.property-template (properties-cp config entity (:editor-id config) (merge opts {:in-block-container? true}))]))) (rum/defc property-scalar-value < rum/reactive db-mixins/query