From 8a67ae9fce7cf985990fd513fdd7dcc2e2722b5f Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Mon, 22 Jan 2024 22:02:35 +0800 Subject: [PATCH] enhance: remove modal for page configure --- src/main/frontend/components/class.cljs | 5 +- .../frontend/components/db_based/page.cljs | 244 +++++++++--------- src/main/frontend/components/icon.cljs | 3 +- src/main/frontend/components/page.cljs | 132 +++++----- src/main/frontend/components/page.css | 10 +- src/main/frontend/components/property.cljs | 10 +- src/main/frontend/components/property.css | 1 - src/main/frontend/components/whiteboard.cljs | 2 +- src/main/frontend/handler/events.cljs | 2 +- 9 files changed, 216 insertions(+), 193 deletions(-) diff --git a/src/main/frontend/components/class.cljs b/src/main/frontend/components/class.cljs index 9c20f97031b..d31cc56c07e 100644 --- a/src/main/frontend/components/class.cljs +++ b/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:"] diff --git a/src/main/frontend/components/db_based/page.cljs b/src/main/frontend/components/db_based/page.cljs index 864ca2113e8..2676a361d82 100644 --- a/src/main/frontend/components/db_based/page.cljs +++ b/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)])])])) diff --git a/src/main/frontend/components/icon.cljs b/src/main/frontend/components/icon.cljs index c44870d52c4..ad45ef6f7c9 100644 --- a/src/main/frontend/components/icon.cljs +++ b/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]}] diff --git a/src/main/frontend/components/page.cljs b/src/main/frontend/components/page.cljs index 8aee9cf81ec..ca8e3371208 100644 --- a/src/main/frontend/components/page.cljs +++ b/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" diff --git a/src/main/frontend/components/page.css b/src/main/frontend/components/page.css index 3d539010ba5..0d405c605cf 100644 --- a/src/main/frontend/components/page.css +++ b/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; +} diff --git a/src/main/frontend/components/property.cljs b/src/main/frontend/components/property.cljs index 19741399622..3973209f6b8 100644 --- a/src/main/frontend/components/property.cljs +++ b/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) diff --git a/src/main/frontend/components/property.css b/src/main/frontend/components/property.css index 234643c5823..d3a1df0bca1 100644 --- a/src/main/frontend/components/property.css +++ b/src/main/frontend/components/property.css @@ -1,6 +1,5 @@ .property-configure { min-width: 32rem; - padding: 2px; .form-input, .form-select { line-height: 1rem; diff --git a/src/main/frontend/components/whiteboard.cljs b/src/main/frontend/components/whiteboard.cljs index dfe6c4969df..6f6b0f52753 100644 --- a/src/main/frontend/components/whiteboard.cljs +++ b/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 diff --git a/src/main/frontend/handler/events.cljs b/src/main/frontend/handler/events.cljs index 2dda8e319d2..aa9f4cf7965 100644 --- a/src/main/frontend/handler/events.cljs +++ b/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"