enhance: move tags outside page info

src/main/frontend/components/db_based/page.cljs

@@ -23,17 +23,15 @@
   (let [class? (= mode :class)
         edit-input-id-prefix (str "edit-block-" (:block/uuid page))
         configure-opts {:selected? false
-                        :page-configure? true}
+                        :page-configure? configure?}
         has-viewable-properties? (db-property-handler/block-has-viewable-properties? page)
         has-class-properties? (seq (:class/schema.properties page))
-        has-tags? (seq (:block/tags page))
         hide-properties? (:logseq.property/hide-properties? page)]
     (when (or configure?
               (and
                (not hide-properties?)
                (or has-viewable-properties?
-                   has-class-properties?
-                   has-tags?)))
+                   has-class-properties?)))
       [:div.ls-page-properties
        {:class (util/classnames [{:no-mode (nil? mode)
                                   :no-properties (if class?
@@ -79,7 +77,7 @@
                       class? :class
                       property? :property
                       :else :page)))
-    [:div.flex.flex-col.gap-1.pt-2.pb-4
+    [:div.flex.flex-col.gap-1.pb-4
      (case mode
        :property
        (property-component/property-config page {:inline-text component-block/inline-text})
@@ -133,58 +131,43 @@
         types (:block/type page)
         class? (contains? types "class")
         collapsed? (not @*show-info?)
-        has-tags? (seq (:block/tags page))
         has-properties? (seq (remove (set (keys db-property/built-in-properties))
                                      (keys (:block/properties page))))
-        show-info? (or @*show-info? has-tags? has-properties?)]
+        show-info? (or @*show-info? has-properties?)]
     (when (if config/publishing?
             ;; Since publishing is read-only, hide this component if it has no info to show
             ;; as it creates a fair amount of empty vertical space
-            (or has-tags? (some? types))
-            (or show-info? has-tags? has-properties?))
+            (some? types)
+            show-info?)
       [:div.page-info
        {:class (util/classnames [{:is-collapsed collapsed?}])}
-       [:div.py-1 {:class (if (or @*hover? (not collapsed?))
-                            "border rounded"
-                            "border rounded border-transparent")}
-        [:div.info-title.cursor
-         {:on-mouse-over #(reset! *hover? true)
-          :on-mouse-leave #(when-not (state/dropdown-opened?)
-                             (reset! *hover? false))
-          :on-click (if config/publishing?
-                      (fn [_]
-                        (when (seq (set/intersection #{"class" "property"} types))
-                          (swap! *show-info? not)))
-                      #(swap! *show-info? not))}
-         (when show-info?
+       [:div {:class (if (or @*hover? (not collapsed?))
+                       "border rounded"
+                       "border rounded border-transparent")}
+        (when-not collapsed?
+          [:div.info-title.cursor.py-1
+           {:on-mouse-over #(reset! *hover? true)
+            :on-mouse-leave #(when-not (state/dropdown-opened?)
+                               (reset! *hover? false))
+            :on-click (if config/publishing?
+                        (fn [_]
+                          (when (seq (set/intersection #{"class" "property"} types))
+                            (swap! *show-info? not)))
+                        #(do
+                           (swap! *show-info? not)
+                           (swap! *hover? not)))}
            [:<>
-            [:div.flex.flex-row.items-center.gap-2
-             (if collapsed?
-               (when (or has-tags? @*hover? config/publishing?)
-                 (if (and config/publishing? (seq (set/intersection #{"class" "property"} types)))
-                   [:div
-                    [:div.opacity-50.pointer.text-sm "Expand for more info"]]
-                   (when has-tags?
-                     [:div.pl-3.page-info-tags
-                      {:style {:margin-left 2}
-                       :on-click util/stop-propagation}
-                      (tags page)])))
-               [:div.flex.flex-row.items-center.gap-1
-                [:a.flex.fade-link.ml-3 (ui/icon "info-circle")]
-                (mode-switch types *mode)])]
-            (when (or @*hover? (not collapsed?))
-              [:div.px-1.absolute.right-0.top-0
-               (shui/button
-                {:variant :ghost :size :sm}
-                (if collapsed?
-                  [:span.opacity-80.flex.items-center
-                   (ui/icon "adjustments-horizontal" {:size 16})]
-                  (ui/icon "x")))])])]
-        (when show-info?
-          (if collapsed?
-            (when (or (seq (:block/properties page))
-                      (and class? (seq (:class/schema.properties page))))
-              [:div.px-2 {:style {:margin-left 2}}
-               (page-properties page {:mode (if class? :class :page)})])
-            [:div.pt-2.px-4
-             (page-configure page *mode)]))]])))
+            [:div.flex.flex-row.items-center.gap-1
+             [:a.flex.fade-link.ml-3 (ui/icon "info-circle")]
+             (mode-switch types *mode)]
+            [:div.px-1.absolute.right-0.top-0
+             (shui/button
+              {:variant :ghost :size :sm}
+              (ui/icon "x"))]]])
+        (if collapsed?
+          (when (or (seq (:block/properties page))
+                    (and class? (seq (:class/schema.properties page))))
+            [:div.px-2 {:style {:margin-left 2}}
+             (page-properties page {:mode (if class? :class :page)})])
+          [:div.px-3
+           (page-configure page *mode)])]])))

src/main/frontend/components/page.cljs

@@ -509,50 +509,55 @@
                  [:div ((state/get-component :whiteboard/tldraw-preview) (:block/uuid page))] ;; FIXME: this is not reactive
                  [:div.relative.grid.gap-4
                   (when (and (not sidebar?) (not block?))
-                     [:div.flex.flex-row.space-between
-                      (when (or (mobile-util/native-platform?) (util/mobile?))
-                        [:div.flex.flex-row.pr-2
-                         {:style {:margin-left -15}
-                          :on-mouse-over (fn [e]
-                                           (page-mouse-over e *control-show? *all-collapsed?))
-                          :on-mouse-leave (fn [e]
-                                            (page-mouse-leave e *control-show?))}
-                         (page-blocks-collapse-control title *control-show? *all-collapsed?)])
-                      (when (and (not whiteboard?) (ldb/page? page))
-                        (page-title page {:journal? journal?
-                                          :fmt-journal? fmt-journal?
-                                          :preview? preview?
-                                          :*hover? (::hover-title? state)
-                                          :*show-page-info? (::show-page-info? state)}))
-                      (when (not config/publishing?)
-                        (when config/lsp-enabled?
-                          [:div.flex.flex-row
-                           (plugins/hook-ui-slot :page-head-actions-slotted nil)
-                           (plugins/hook-ui-items :pagebar)]))])
-
-                   (cond
-                     (and db-based? (not block?))
-                     (db-page/page-info page (::show-page-info? state))
-
-                     (and (not db-based?) (not block?))
-                     [:div.pb-2])
-
-                   [:div
-                    (when (and block? (not sidebar?) (not whiteboard?))
-                      (let [config (merge config {:id "block-parent"
-                                                  :block? true})]
-                        [:div.mb-4
-                         (component-block/breadcrumb config repo block-id {:level-limit 3})]))
-
-                    (when (and db-based? (not block?) (not preview?))
-                      (db-page/page-properties-react page {:configure? false}))
+                    [:div.flex.flex-row.space-between
+                     (when (or (mobile-util/native-platform?) (util/mobile?))
+                       [:div.flex.flex-row.pr-2
+                        {:style {:margin-left -15}
+                         :on-mouse-over (fn [e]
+                                          (page-mouse-over e *control-show? *all-collapsed?))
+                         :on-mouse-leave (fn [e]
+                                           (page-mouse-leave e *control-show?))}
+                        (page-blocks-collapse-control title *control-show? *all-collapsed?)])
+                     (when (and (not whiteboard?) (ldb/page? page))
+                       (page-title page {:journal? journal?
+                                         :fmt-journal? fmt-journal?
+                                         :preview? preview?
+                                         :*hover? (::hover-title? state)
+                                         :*show-page-info? (::show-page-info? state)}))
+                     (when (not config/publishing?)
+                       (when config/lsp-enabled?
+                         [:div.flex.flex-row
+                          (plugins/hook-ui-slot :page-head-actions-slotted nil)
+                          (plugins/hook-ui-items :pagebar)]))])
+
+                  (when (and db-based? (not block?) (:block/tags page))
+                    [:div.cursor-pointer
+                     {:class (if sidebar? "ml-6" "ml-1")}
+                     (db-page/tags page)])
+
+                  (cond
+                    (and db-based? (not block?))
+                    (db-page/page-info page (::show-page-info? state))
+
+                    (and (not db-based?) (not block?))
+                    [:div.pb-2])
+
+                  [:div
+                   (when (and block? (not sidebar?) (not whiteboard?))
+                     (let [config (merge config {:id "block-parent"
+                                                 :block? true})]
+                       [:div.mb-4
+                        (component-block/breadcrumb config repo block-id {:level-limit 3})]))
+
+                   (when (and db-based? (not block?) (not preview?))
+                     (db-page/page-properties-react page {:configure? false}))
 
                    ;; blocks
-                    (if loading?
-                      [:div.space-y-2
-                       (shui/skeleton {:class "h-6 w-full"})
-                       (shui/skeleton {:class "h-6 w-full"})]
-                      (page-blocks-cp repo page {:sidebar? sidebar? :whiteboard? whiteboard?}))]])
+                   (if loading?
+                     [:div.space-y-2
+                      (shui/skeleton {:class "h-6 w-full"})
+                      (shui/skeleton {:class "h-6 w-full"})]
+                     (page-blocks-cp repo page {:sidebar? sidebar? :whiteboard? whiteboard?}))]])
 
                (when today?
                  (today-queries repo today? sidebar?))
@@ -579,7 +584,7 @@
                    (hierarchy/structures route-page-name)))
 
                (when (and (not (false? unlinked-refs?))
-                       (not (or block-or-whiteboard? sidebar? home?)))
+                          (not (or block-or-whiteboard? sidebar? home?)))
                  [:div {:key "page-unlinked-references"}
                   (reference/unlinked-references page)])])))))))
 

src/main/frontend/components/property.cljs

@@ -713,7 +713,7 @@
 (rum/defcs ^:large-vars/cleanup-todo properties-area < rum/reactive
   {:init (fn [state]
            (assoc state ::id (str (random-uuid))))}
-  [state target-block edit-input-id {:keys [in-block-container? page? page-configure? class-schema?] :as opts}]
+  [state target-block edit-input-id {:keys [in-block-container? page-configure? class-schema?] :as opts}]
   (let [id (::id state)
         block (resolve-linked-block-if-exists target-block)
         page? (db/page? block)
@@ -797,10 +797,16 @@
                                                        (.closest (.-target %) "[blockid]"))]
                                    (state/set-selection-blocks! [block])
                                    (some-> js/document.activeElement (.blur)))))
-       (let [own-properties' (if (and page? (not class-schema?))
+       (let [own-properties' (cond
+                               (and page? page-configure?)
                                (concat [[:block/tags (:block/tags block)]
                                         [:logseq.property/icon (:logseq.property/icon block)]]
                                        (remove (fn [[k _v]] (contains? #{:block/tags :logseq.property/icon} k)) own-properties))
+
+                               page?
+                               (remove (fn [[k _v]] (contains? #{:logseq.property/icon} k)) own-properties)
+
+                               :else
                                own-properties)]
          (properties-section block (if class-schema? properties own-properties') opts))