enhance: display properties in outliner mode

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)

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))

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]]))))])])])
-
-       (let [edit-input-id (str "edit-block-" (:block/uuid page))]
+             (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?
+              [: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))))

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)])]))))))
 

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);
     }

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