feat: collapse/expand block values

deps/db/src/logseq/db/schema.cljs

@@ -25,6 +25,8 @@
    :block/left   {:db/valueType :db.type/ref
                   :db/index true}
    :block/collapsed? {:db/index true}
+   :block/collapsed-properties {:db/valueType :db.type/ref
+                                :db/cardinality :db.cardinality/many}
 
    ;; :markdown, :org
    :block/format {}

src/main/frontend/components/page.cljs

@@ -438,10 +438,9 @@
                       (js/console.error "No selected option found to navigate to"))))})))
 
 (rum/defcs configure < rum/reactive
-  [state page {:keys [journal? *configure-show? show-properties?] :as opts
+  [state page {:keys [journal? show-properties?] :as opts
                :or {show-properties? true}}]
-  (when (rum/react *configure-show?)
-    (let [page-id (:db/id page)
+  (let [page-id (:db/id page)
           page (when page-id (db/sub-block page-id))
           type (:block/type page)
           properties-opts (merge {:selected? false
@@ -494,7 +493,7 @@
                {:editor-box editor/box}
                page
                edit-input-id
-               (assoc properties-opts :class-schema? class?))]))]))))
+               (assoc properties-opts :class-schema? class?))]))])))
 
 (rum/defc page-properties < rum/reactive
   [page *configure-show?]
@@ -504,7 +503,7 @@
         opts {:selected? false
               :page-configure? configure?
               :class-schema? class?}]
-    [:div {:style {:padding 2}}
+    [:div.ls-page-properties.mb-4 {: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)]
@@ -609,9 +608,9 @@
                   (plugins/hook-ui-slot :page-head-actions-slotted nil)
                   (plugins/hook-ui-items :pagebar)]))])
 
-          (when (and db-based? (not built-in-property?))
-            (configure page {:*configure-show? *configure-show?
-                             :journal? journal?
+          (when (and db-based? (not built-in-property?)
+                     @*configure-show?)
+            (configure page {:journal? journal?
                              :show-properties? show-properties?}))
 
           [:div

src/main/frontend/components/property.cljs

@@ -294,7 +294,7 @@
       :node (js/document.getElementById "edit-new-property")
       :outside? false)))
   [state block edit-input-id properties new-property? opts]
-  [:div.py-1
+  [:div.ls-new-property.py-1
    (let [*property-key (::property-key state)
          *property-value (::property-value state)]
      (cond
@@ -320,11 +320,31 @@
        :else
        [:div {:style {:height 28}}]))])
 
-(rum/defcs property-key
-  [state block property {:keys [class-schema?]}]
-  (let [repo (state/get-current-repo)
+(defn- property-collapsed?
+  [block property]
+  (boolean?
+   (some (fn [p] (= (:db/id property) (:db/id p)))
+         (:block/collapsed-properties block))))
+
+(rum/defcs property-key <
+  (rum/local false ::hover?)
+  [state block property {:keys [class-schema? block? collapsed?]}]
+  (let [*hover? (::hover? state)
+        repo (state/get-current-repo)
         icon (pu/get-property property :icon)]
-    [:div.flex.flex-row.items-center
+    [:div.flex.flex-row.items-center {:on-mouse-over #(reset! *hover? true)
+                                      :on-mouse-leave #(reset! *hover? false)}
+     (when block?
+       [:a.block-control
+        {:on-click (fn [event]
+                     (util/stop event)
+                     (property-handler/collapse-expand-property! repo block property (not collapsed?)))}
+        [:span {:class (cond
+                         (or collapsed? @*hover?)
+                         "control-show cursor-pointer"
+                         :else
+                         "control-hide")}
+         (ui/rotating-arrow collapsed?)]])
      (ui/dropdown
       (fn [{:keys [toggle-fn]}]
         [:a.flex {:on-click toggle-fn}
@@ -405,21 +425,25 @@
           (let [type (get-in property [:block/schema :type] :default)
                 block? (and (contains? #{:default :template} type)
                             (uuid? v)
-                            (db/entity [:block/uuid v]))]
+                            (db/entity [:block/uuid v]))
+                collapsed? (when block? (property-collapsed? block property))]
             [:div {:class (if block?
-                            "flex flex-1 flex-col gap-1"
+                            "flex flex-1 flex-col gap-1 property-block"
                             "property-pair items-center")}
              [:div.property-key
               {:class "col-span-2"}
-              (property-key block property (select-keys opts [:class-schema?]))]
+              (property-key block property (assoc (select-keys opts [:class-schema?])
+                                                  :block? block?
+                                                  :collapsed? collapsed?))]
              (if (:class-schema? opts)
                [:div.property-description.text-sm.opacity-70
                 {:class "col-span-3"}
                 (get-in property [:block/schema :description])]
-               [:div.property-value {:class (if block?
-                                              "block-property-value"
-                                              "col-span-3 inline-grid")}
-                (pv/property-value block property v opts)])]))))))
+               (when-not collapsed?
+                 [:div.property-value {:class (if block?
+                                                "block-property-value"
+                                                "col-span-3 inline-grid")}
+                  (pv/property-value block property v opts)]))]))))))
 
 (rum/defcs hidden-properties < (rum/local true ::hide?)
   [state block hidden-properties opts]
@@ -427,10 +451,10 @@
     [:div.hidden-properties.flex.flex-col.gap-1
      (when-not @*hide?
        (properties-section block hidden-properties opts))
-     [:a.block.text-sm.fade-link {:on-click #(swap! *hide? not)}
-      [:div.flex.flex-row.items-center.gap-1
-       (ui/icon (if @*hide? "caret-right" "caret-down") {:size 16})
-       [:div "Hidden properties"]]]]))
+     [:a.block-control.text-sm.flex.flex-row.items-center
+      {:on-click #(swap! *hide? not)}
+      (ui/rotating-arrow @*hide?)
+      [:div "Hidden properties"]]]))
 
 (rum/defcs properties-area < rum/reactive
   {:init (fn [state]
@@ -510,26 +534,26 @@
                    (not new-property?)
                    (not (:page-configure? opts)))
       [:div.ls-properties-area (cond->
-                                {}
-                                 (:selected? opts)
-                                 (assoc :class "select-none"))
-       (properties-section block (if class-schema? properties own-properties) opts)
+                                 {}
+                                  (:selected? opts)
+                                  (assoc :class "select-none"))
+        (properties-section block (if class-schema? properties own-properties) opts)
 
-       (when (and (seq full-hidden-properties) (not class-schema?) (not config/publishing?))
-         (hidden-properties block full-hidden-properties opts))
+        (when (and (seq full-hidden-properties) (not class-schema?) (not config/publishing?))
+          (hidden-properties block full-hidden-properties opts))
 
-       (when (or new-property? (not in-block-container?))
-         (new-property block edit-input-id properties new-property? opts))
+        (when (or new-property? (not in-block-container?))
+          (new-property block edit-input-id properties new-property? opts))
 
-       (when (and (seq class->properties) (not one-class?))
-         (let [page-cp (:page-cp opts)]
-           [:div.parent-properties.flex.flex-1.flex-col.gap-1
-            (for [[class class-properties] class->properties]
-              (let [id-properties (->> class-properties
-                                       remove-built-in-properties
-                                       (map (fn [id] [id (get block-properties id)])))]
-                (when (seq id-properties)
-                  [:div
-                   (when page-cp
-                     [:span.text-sm (page-cp {} class)])
-                   (properties-section block id-properties opts)])))]))])))
+        (when (and (seq class->properties) (not one-class?))
+          (let [page-cp (:page-cp opts)]
+            [:div.parent-properties.flex.flex-1.flex-col.gap-1
+             (for [[class class-properties] class->properties]
+               (let [id-properties (->> class-properties
+                                        remove-built-in-properties
+                                        (map (fn [id] [id (get block-properties id)])))]
+                 (when (seq id-properties)
+                   [:div
+                    (when page-cp
+                      [:span.text-sm (page-cp {} class)])
+                    (properties-section block id-properties opts)])))]))])))

src/main/frontend/components/property.css

@@ -17,12 +17,20 @@
 /*     background: var(--ls-secondary-background-color); */
 /* } */
 
-.ls-block .ls-properties-area, .block-property-value {
+.ls-block .ls-properties-area, .property-block-container {
     border-left: 1px solid;
     border-left-color: var(--ls-guideline-color, #ddd);
 }
 
-.ls-block .ls-properties-area, .property-template .ls-properties-area {
+.ls-page-properties > .ls-properties-area {
+    margin-left: -22px;
+}
+
+.ls-block .ls-properties-area {
+    margin-left: 0;
+}
+
+.property-pair, .property-block .property-value, .ls-page-properties > .ls-properties-area .ls-new-property {
     padding-left: 22px;
 }
 
@@ -30,10 +38,6 @@
     margin-left: 7px;
 }
 
-.ls-block .block-property-value, .property-template .block-property-value {
-    padding-left: 0;
-}
-
 .ls-properties-area {
     @apply grid gap-1;
 

src/main/frontend/db/model.cljs

@@ -36,6 +36,7 @@
     :block/parent
     :block/left
     :block/collapsed?
+    :block/collapsed-properties
     :block/format
     :block/refs
     :block/_refs
@@ -405,7 +406,8 @@ independent of format as format specific heading characters are stripped"
                                  :alias (:block/alias e)
                                  :tags (:block/tags e)
                                  :children children
-                                 :collapsed? (:block/collapsed? e)}]))}
+                                 :collapsed? (:block/collapsed? e)
+                                 :collapsed-properties (:block/collapsed-properties e)}]))}
               nil)
      react
      first)))

src/main/frontend/handler/db_based/property.cljs

@@ -372,3 +372,10 @@
             property-id))
      (keys m))
    (vals m)))
+
+(defn collapse-expand-property!
+  [repo block property collapse?]
+  (let [f (if collapse? :db/add :db/retract)]
+    (db/transact! repo
+                  [[f (:db/id block) :block/collapsed-properties (:db/id property)]]
+                  {:outliner-op :save-block})))

src/main/frontend/handler/property.cljs

@@ -91,3 +91,9 @@
   (if (config/db-based-graph? repo)
     (db-property-handler/replace-key-with-id! m)
     m))
+
+(defn collapse-expand-property!
+  "Notice this works only if the value itself if a block (property type should be either :default or :template)"
+  [repo block property collapse?]
+  (when (config/db-based-graph? repo)
+    (db-property-handler/collapse-expand-property! repo block property collapse?)))