enhance: remove modal for page configure

src/main/frontend/components/class.cljs

@@ -61,12 +61,13 @@
 
 (rum/defcs configure < rum/reactive
   "Configure a class page"
-  [state page]
+  [state page {:keys [show-title?]
+               :or {show-title? true}}]
   (let [page-id (:db/id page)
         page (when page-id (db/sub-block page-id))]
     (when page
       [:div.property-configure.grid.gap-2
-       [:h1.title.mb-4 "Configure class"]
+       (when show-title? [:h1.title.mb-4 "Configure class"])
 
        [:div.grid.grid-cols-5.gap-1.items-center.class-parent
         [:div.col-span-2 "Parent class:"]

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

@@ -12,38 +12,40 @@
             [frontend.handler.property.util :as pu]
             [frontend.handler.db-based.property.util :as db-pu]
             [frontend.ui :as ui]
-            [frontend.util :as util]
             [frontend.state :as state]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [logseq.shui.ui :as shui-ui]
+            [frontend.util :as util]
+            [clojure.string :as string]))
 
 (rum/defc page-properties < rum/reactive
-  [page {:keys [configure? show-page-properties?]}]
+  [page {:keys [configure? mode]}]
   (let [types (:block/type page)
         class? (contains? types "class")
+        property? (contains? types "property")
         edit-input-id-prefix (str "edit-block-" (:block/uuid page))
         configure-opts {:selected? false
                         :page-configure? true}
         has-viewable-properties? (db-property-handler/block-has-viewable-properties? page)
         has-class-properties? (seq (:properties (:block/schema page)))]
-    (when (or configure? has-viewable-properties? has-class-properties?)
-      [:div.ls-page-properties.mb-4 {:style {:padding 2}}
+    (when (or configure? has-viewable-properties? has-class-properties? property?)
+      [:div.ls-page-properties.mb-4
        (if configure?
          (cond
-           (and class? (not show-page-properties?) (not has-class-properties?))
-           [:div
-            [:div.mb-1 "Class properties:"]
-            (component-block/db-properties-cp {:editor-box editor/box}
-                                              page
-                                              (str edit-input-id-prefix "-schema")
-                                              (assoc configure-opts :class-schema? true))]
+           (and class? has-class-properties? (= :class mode))
+           nil
+
+           (and class? (not has-class-properties?))
+           (component-block/db-properties-cp {:editor-box editor/box}
+                                             page
+                                             (str edit-input-id-prefix "-schema")
+                                             (assoc configure-opts :class-schema? true))
 
            (not (db-property-handler/block-has-viewable-properties? page))
-           [:div
-            [:div.mb-1 "Page properties:"]
-            (component-block/db-properties-cp {:editor-box editor/box}
-                                              page
-                                              (str edit-input-id-prefix "-page")
-                                              (assoc configure-opts :class-schema? false))])
+           (component-block/db-properties-cp {:editor-box editor/box}
+                                             page
+                                             (str edit-input-id-prefix "-page")
+                                             (assoc configure-opts :class-schema? false)))
          (if config/publishing?
            [:div.flex.flex-col.gap-4
             (when has-viewable-properties?
@@ -88,7 +90,7 @@
 
 (rum/defc icon-row < rum/reactive
   [page]
-  [:div.grid.grid-cols-5.gap-1.items-center.leading-8
+  [:div.grid.grid-cols-5.gap-1.items-center
    [:label.col-span-2 "Icon:"]
    (let [icon-value (pu/get-block-property-value page :icon)]
      [:div.col-span-3.flex.flex-row.items-center.gap-2
@@ -109,85 +111,43 @@
                             :title "Delete this icon"}
         (ui/icon "X")])])])
 
-(rum/defcs page-configure-inner <
-  (rum/local false ::show-page-properties?)
-  {:will-unmount (fn [state]
-                   (let [on-unmount (nth (:rum/args state) 1)]
-                     (on-unmount)))}
-  [state page _on-unmount opts]
-  (let [*show-page-properties? (::show-page-properties? state)
+(rum/defc tags
+  [page]
+  (let [tags-property (pu/get-property :tags)]
+    (pv/property-value page tags-property
+                       (map :block/uuid (:block/tags page))
+                       {:page-cp (fn [config page]
+                                   (component-block/page-cp (assoc config :tag? true) page))})))
+
+(rum/defc tags-row < rum/reactive
+  [page]
+  [:div.grid.grid-cols-5.gap-1.items-center
+   [:label.col-span-2 "Tags:"]
+   [:div.col-span-3.flex.flex-row.items-center.gap-2
+    (tags page)]])
+
+(rum/defcs page-configure < rum/reactive
+  [state page *mode]
+  (let [*mode *mode
+        mode (rum/react *mode)
         types (:block/type page)
         class? (contains? types "class")
         property? (contains? types "property")
-        class-or-property? (or class? property?)
-        page-opts {:configure? true
-                   :show-page-properties? @*show-page-properties?}]
-    [:div.flex.flex-col.justify-between.p-4 {:style {:min-width 700
-                                                     :min-height 400}}
-     [:div.flex.flex-col.gap-2
-      (cond
-        (not class-or-property?)
-        (when (and (not class?)
-                   (not property?))
-          [:<>
-           (icon-row page)
-           (page-properties page page-opts)])
-
-        @*show-page-properties?
-        (page-properties page page-opts)
-
-        :else
-        [:<>
-         (when class?
-           (class-component/configure page))
-         (when class?
-           (icon-row page))
-         (when class?
-           (page-properties page page-opts))
-         (when (and property? (not class?))
-           [:h2.title "Configure property"])
-         (when property?
-           (property-component/property-config page page (assoc opts
-                                                                :inline-text component-block/inline-text)))])]
-
-     (when (and class-or-property?
-                (not (db-property-handler/block-has-viewable-properties? page))
-                (not config/publishing?)
-                (empty? (:properties (:block/schema page))))
-       [:a.fade-link.flex.flex-row.items-center.gap-1.text-sm
-        {:on-click #(swap! *show-page-properties? not)}
-        (ui/icon (if @*show-page-properties?
-                   "arrow-narrow-left"
-                   "arrow-narrow-right"))
-        (if @*show-page-properties?
-          "Back"
-          "Edit page properties")])]))
-
-(rum/defc page-configure
-  [page *hover? *configuring?]
-  (when (or @*hover? (and config/publishing? (some #{"class" "property"} (:block/type page))))
-    (let [toggle-fn' (fn [toggle-fn]
-                       (fn []
-                         (toggle-fn)
-                         (reset! *configuring? true)))]
-      (ui/dropdown
-       (fn [{:keys [toggle-fn]}]
-         [:a.fade-link.flex.flex-row.items-center
-          {:on-click (toggle-fn' toggle-fn)}
-          [:div.mr-1.text-sm (if-let [block-type (and config/publishing?
-                                                      (some #{"class" "property"} (:block/type page)))]
-                               (str "More info on this " block-type)
-                               "Configure")]])
-       (fn [{:keys [toggle-fn]}]
-         (page-configure-inner
-          page
-          (fn []
-            (reset! *configuring? false)
-            (reset! *hover? false))
-          {:toggle-fn toggle-fn}))
-
-       {:modal-class (util/hiccup->class
-                      "origin-top-right.absolute.left-0.mt-2.rounded-md.shadow-lg")}))))
+        page-opts {:configure? true}]
+    (when (nil? mode)
+      (reset! *mode (cond
+                      property? :property
+                      class? :class
+                      :else :page)))
+    [:div.flex.flex-col.gap-1
+     (if (= mode :property)
+       (property-component/property-config page page {:inline-text component-block/inline-text})
+       [:<>
+        (when (= mode :class)
+          (class-component/configure page {:show-title? false}))
+        (tags-row page)
+        (icon-row page)
+        (page-properties page (assoc page-opts :mode mode))])]))
 
 (rum/defc page-properties-react < rum/reactive
   [page* page-opts]
@@ -197,23 +157,77 @@
               (some #{"class" "property"} (:block/type page)))
       (page-properties page page-opts))))
 
-(rum/defc page-tags <
-  [page tags-property *hover? *configuring?]
-  (let [toggle-fn' (fn [toggle-fn]
-                     (fn []
-                       (toggle-fn)
-                       (swap! *configuring? not)))]
-    (ui/dropdown
-     (fn [{:keys [toggle-fn]}]
-       [:a.fade-link.flex.flex-row.items-center
-        {:on-click (toggle-fn' toggle-fn)}
-        [:div.ml-1.text-sm "Set tags"]])
-     (fn [{:keys [toggle-fn]}]
-       (pv/property-value page tags-property nil {:on-chosen (toggle-fn' toggle-fn)
-                                                  :dropdown? false}))
-     {:modal-class (util/hiccup->class
-                    "origin-top-right.absolute.left-0.mt-2.rounded-md.shadow-lg")
-      :on-toggle (fn [value]
-                   (when (false? value)
-                     (reset! *configuring? false)
-                     (reset! *hover? false)))})))
+(rum/defc mode-switch < rum/reactive
+  [types *mode]
+  (let [current-mode (rum/react *mode)
+        property? (contains? types "property")
+        class? (contains? types "class")
+        modes (->
+               (cond
+                 (and property? class?)
+                 ["Property" "Class"]
+                 property?
+                 ["Property"]
+                 class?
+                 ["Class"]
+                 :else
+                 [])
+               (conj "Page"))]
+    [:div.flex.flex-row.items-center.gap-1
+     (for [mode modes]
+       (let [mode' (keyword (string/lower-case mode))
+             selected? (= mode' current-mode)]
+         (shui-ui/button {:variant (if selected? :outline :ghost) :size :sm
+                          :on-click (fn [e]
+                                      (util/stop-propagation e)
+                                      (reset! *mode mode'))}
+                         mode)))]))
+
+(rum/defcs page-info < rum/reactive
+  (rum/local false ::hover?)
+  (rum/local nil ::mode)
+  {:init (fn [state]
+           (let [page (first (:rum/args state))
+                 properties (:block/properties page)]
+             (assoc state ::collapsed? (atom (empty? properties)))))}
+  [state page *hover-title?]
+  (let [page (db/sub-block (:db/id page))
+        *collapsed? (::collapsed? state)
+        *hover? (::hover? state)
+        *mode (::mode state)
+        types (:block/type page)
+        hover-title? (rum/react *hover-title?)
+        collapsed? (rum/react *collapsed?)
+        has-tags? (seq (:block/tags page))
+        hover-or-expanded? (or @*hover? hover-title? (not collapsed?))]
+    [:div.page-info {:on-mouse-over #(reset! *hover? true)
+                     :on-mouse-leave #(reset! *hover? false)}
+     (when (or hover-or-expanded? has-tags?)
+       [:div.fade-in.p-2 (cond-> {}
+                           (or @*hover? (not collapsed?))
+                           (assoc :class "border rounded"))
+        [:div.info-title.cursor {:on-click #(swap! *collapsed? not)}
+         [:div.flex.flex-row.items-center.gap-2.justify-between
+          [:div.flex.flex-row.items-center.gap-2
+           (if collapsed?
+             [:<>
+              (shui-ui/button {:variant :ghost :size :sm :class "fade-link"}
+                              (ui/icon "tags"))
+              [:div {:on-click util/stop-propagation}
+               (tags page)]]
+             [:div.flex.flex-row.items-center.gap-1
+              (shui-ui/button {:variant :ghost :size :sm :class "fade-link"}
+                              (ui/icon "info-circle"))
+              [:a.text-sm.font-medium.fade-link
+               "Configure:"]
+              (mode-switch types *mode)])]
+          (when (or @*hover? (not collapsed?))
+            (shui-ui/button
+             {:variant :ghost :size :sm :class "fade-link"}
+             (ui/icon (if collapsed?
+                        "chevron-down"
+                        "chevron-up"))))]]
+
+        (when-not collapsed?
+          [:div.py-2.px-4
+           (page-configure page *mode)])])]))

src/main/frontend/components/icon.cljs

@@ -177,7 +177,8 @@
      [:button.flex {:on-click #(when-not disabled? (toggle-fn))}
       (if icon-value
         (icon icon-value)
-        [:span.bullet-container.cursor [:span.bullet]])])
+        [:div.opacity-50.text-sm
+         "Empty"])])
    (if config/publishing?
      (constantly [])
      (fn [{:keys [toggle-fn]}]

src/main/frontend/components/page.cljs

@@ -312,24 +312,20 @@
 (rum/defcs ^:large-vars/cleanup-todo page-title < rum/reactive
   (rum/local false ::edit?)
   (rum/local "" ::input-value)
-  (rum/local false ::hover?)
-  (rum/local false ::configuring?)
   {:init (fn [state]
            (let [page-name (first (:rum/args state))
                  original-name (:block/original-name (db/entity [:block/name (util/page-name-sanity-lc page-name)]))
                  *title-value (atom original-name)]
              (assoc state ::title-value *title-value)))}
-  [state page-name {:keys [fmt-journal? preview?]}]
+  [state page-name {:keys [fmt-journal? preview? *hover?]}]
   (when page-name
     (let [page (when page-name (db/entity [:block/name page-name]))
           page (db/sub-block (:db/id page))
           title (:block/original-name page)]
       (when title
         (let [icon (pu/lookup (:block/properties page) :icon)
-              *hover? (::hover? state)
               *title-value (get state ::title-value)
               *edit? (get state ::edit?)
-              *configuring? (::configuring? state)
               *input-value (get state ::input-value)
               repo (state/get-current-repo)
               hls-page? (pdf-utils/hls-file? title)
@@ -345,8 +341,7 @@
               tags-property (db/entity [:block/name "tags"])]
           [:div.ls-page-title.flex.flex-1.flex-row.flex-wrap.w-full.relative.items-center.gap-2
            {:on-mouse-over #(reset! *hover? true)
-            :on-mouse-out #(when-not @*configuring?
-                             (reset! *hover? false))}
+            :on-mouse-out #(reset! *hover? false)}
            (when icon
              [:div.page-icon {:on-mouse-down util/stop-propagation}
               (if (and (map? icon) db-based?)
@@ -358,66 +353,61 @@
                                                              (:block/uuid page)
                                                              {:properties {icon-property-id icon}})))})
                 icon)])
-           [:div.flex.flex-1.flex-row.flex-wrap.items-center.gap-4
-            [:h1.page-title.flex-1.cursor-pointer.gap-1
-             {:class (when-not whiteboard-page? "title")
-              :on-mouse-down (fn [e]
-                               (when (util/right-click? e)
-                                 (state/set-state! :page-title/context {:page page-name})))
-              :on-click (fn [e]
-                          (when-not (= (.-nodeName (.-target e)) "INPUT")
-                            (.preventDefault e)
-                            (if (gobj/get e "shiftKey")
-                              (when-let [page (db/pull repo '[*] [:block/name page-name])]
-                                (state/sidebar-add-block!
-                                 repo
-                                 (:db/id page)
-                                 :page))
-                              (when (and (not hls-page?)
-                                         (not fmt-journal?)
-                                         (not config/publishing?)
-                                         (not (and (contains? (:block/type page) "property")
-                                                   (contains? db-property/built-in-properties-keys-str page-name))))
-                                (reset! *input-value (if untitled? "" old-name))
-                                (reset! *edit? true)))))}
-
-             (if @*edit?
-               (page-title-editor page {:*title-value *title-value
-                                        :*edit? *edit?
-                                        :*input-value *input-value
-                                        :page-name page-name
-                                        :old-name old-name
-                                        :untitled? untitled?
-                                        :whiteboard-page? whiteboard-page?
-                                        :preview? preview?})
-               [:span.title.block
-                {:on-click (fn []
-                             (when (and (state/home?) (not preview?))
-                               (route-handler/redirect-to-page! page-name)))
-                 :data-value @*input-value
-                 :data-ref   page-name
-                 :style      {:opacity (when @*edit? 0)}}
-                (let [nested? (and (string/includes? title page-ref/left-brackets)
-                                   (string/includes? title page-ref/right-brackets))]
-                  (cond untitled? [:span.opacity-50 (t :untitled)]
-                        nested? (component-block/map-inline {} (gp-mldoc/inline->edn title (mldoc/get-default-config
-                                                                                            (:block/format page))))
-                        :else title))])]
-            (when (and db-based? (seq (:block/tags page)))
-              [:div.page-tags.ml-4
-               (pv/property-value page tags-property (map :block/uuid (:block/tags page))
-                                  {:page-cp (fn [config page]
-                                              (component-block/page-cp (assoc config :tag? true) page))})])]
-
-           (when (and db-based? (not whiteboard-page?))
-             [:div.absolute.bottom-2.left-0
-              [:div.page-add-tags.flex.flex-row.items-center.flex-wrap.gap-2.ml-2
-               (when (and (empty? (:block/tags page)) @*hover? (not config/publishing?))
-                 (db-page/page-tags page tags-property *hover? *configuring?))
-
-               (when (or (some #(contains? #{"class" "property"} %) (:block/type page))
-                         (not (db-property-handler/block-has-viewable-properties? page)))
-                 (db-page/page-configure page *hover? *configuring?))]])])))))
+           [:h1.page-title.flex-1.cursor-pointer.gap-1
+            {:class (when-not whiteboard-page? "title")
+             :on-mouse-down (fn [e]
+                              (when (util/right-click? e)
+                                (state/set-state! :page-title/context {:page page-name})))
+             :on-click (fn [e]
+                         (when-not (= (.-nodeName (.-target e)) "INPUT")
+                           (.preventDefault e)
+                           (if (gobj/get e "shiftKey")
+                             (when-let [page (db/pull repo '[*] [:block/name page-name])]
+                               (state/sidebar-add-block!
+                                repo
+                                (:db/id page)
+                                :page))
+                             (when (and (not hls-page?)
+                                        (not fmt-journal?)
+                                        (not config/publishing?)
+                                        (not (and (contains? (:block/type page) "property")
+                                                  (contains? db-property/built-in-properties-keys-str page-name))))
+                               (reset! *input-value (if untitled? "" old-name))
+                               (reset! *edit? true)))))}
+
+            (if @*edit?
+              (page-title-editor page {:*title-value *title-value
+                                       :*edit? *edit?
+                                       :*input-value *input-value
+                                       :page-name page-name
+                                       :old-name old-name
+                                       :untitled? untitled?
+                                       :whiteboard-page? whiteboard-page?
+                                       :preview? preview?})
+              [:span.title.block
+               {:on-click (fn []
+                            (when (and (state/home?) (not preview?))
+                              (route-handler/redirect-to-page! page-name)))
+                :data-value @*input-value
+                :data-ref   page-name
+                :style      {:opacity (when @*edit? 0)}}
+               (let [nested? (and (string/includes? title page-ref/left-brackets)
+                                  (string/includes? title page-ref/right-brackets))]
+                 (cond untitled? [:span.opacity-50 (t :untitled)]
+                       nested? (component-block/map-inline {} (gp-mldoc/inline->edn title (mldoc/get-default-config
+                                                                                           (:block/format page))))
+                       :else title))])]
+
+           ;; (when (and db-based? (not whiteboard-page?))
+           ;;   [:div.absolute.bottom-2.left-0
+           ;;    [:div.page-add-tags.flex.flex-row.items-center.flex-wrap.gap-2.ml-2
+           ;;     (when (and (empty? (:block/tags page)) @*hover? (not config/publishing?))
+           ;;       (db-page/page-tags page tags-property *hover? *configuring?))
+
+           ;;     (when (or (some #(contains? #{"class" "property"} %) (:block/type page))
+           ;;               (not (db-property-handler/block-has-viewable-properties? page)))
+           ;;       (db-page/page-configure page *hover? *configuring?))]])
+           ])))))
 
 (defn- page-mouse-over
   [e *control-show? *all-collapsed?]
@@ -472,6 +462,7 @@
   (rum/local false ::all-collapsed?)
   (rum/local false ::control-show?)
   (rum/local nil   ::current-page)
+  (rum/local false ::hover-title?)
   [state {:keys [repo page-name preview? sidebar?] :as option}]
   (when-let [path-page-name (get-path-page-name state page-name)]
     (let [current-repo (state/sub :git/current-repo)
@@ -524,13 +515,18 @@
                  (when (and (not whiteboard?) original-name)
                    (page-title page-name {:journal? journal?
                                           :fmt-journal? fmt-journal?
-                                          :preview? preview?})))
+                                          :preview? preview?
+                                          :*hover? (::hover-title? 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 db-based?
+              [:div.pb-4
+               (db-page/page-info page (::hover-title? state))])
+
             [:div
              (when (and block? (not sidebar?) (not whiteboard?))
                (let [config {:id "block-parent"

src/main/frontend/components/page.css

@@ -239,9 +239,8 @@
 .ls-page-title {
   @apply rounded-sm;
 
-  padding: 5px 8px;
-  padding-bottom: 2rem;
-  margin: 0 -6px 12px -6px;
+  padding: 5px 8px 12px 8px;
+  margin: 0 -6px;
 
   &.title {
     margin-bottom: 12px;
@@ -408,3 +407,8 @@ html.is-native-ios {
 .ring-none {
     @apply focus:ring-0 focus:ring-offset-0;
 }
+
+.page-info {
+    min-height: 46px;
+    margin-left: -21px;
+}

src/main/frontend/components/property.cljs

@@ -720,7 +720,15 @@
                    (not (:page-configure? opts)))
       [:div.ls-properties-area (cond-> (if in-block-container?
                                          {}
-                                         {:class [(if class-schema? "class-properties" "page-properties")]})
+                                         {:class [(cond
+                                                    class-schema?
+                                                    "class-properties"
+
+                                                    (config/db-based-graph? (state/get-current-repo))
+                                                    nil
+
+                                                    :else
+                                                    "page-properties")]})
                                  (:selected? opts)
                                  (update :class conj "select-none"))
        (properties-section block (if class-schema? properties own-properties) opts)

src/main/frontend/components/property.css

@@ -1,6 +1,5 @@
 .property-configure {
     min-width: 32rem;
-    padding: 2px;
 
     .form-input, .form-select {
         line-height: 1rem;

src/main/frontend/components/whiteboard.cljs

@@ -269,7 +269,7 @@
                             e
                             (content/page-title-custom-context-menu-content page-name))
                            (state/set-state! :page-title/context nil))}
-       (page/page-title page-name {:*configure-show? (atom false)})]
+       (page/page-title page-name {:*hover? (atom false)})]
 
       [:div.whiteboard-page-refs
        (references-count page-name

src/main/frontend/handler/events.cljs

@@ -811,7 +811,7 @@
 (defmethod handle :class/configure [[_ page]]
   (state/set-modal!
    #(vector :<>
-            (class-component/configure page)
+            (class-component/configure page {})
             (db-page/page-properties page {:configure? true}))
    {:id :page-configure
     :label "page-configure"