From 00ee6833c8e00418623a983521028fb368ae272f Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 29 Feb 2024 16:15:35 +0100 Subject: [PATCH] :sparkles: Separate `inspect-title-bar` from `title-bar` This now makes the component a bit less overloaded and the implementation simplified without bracking too much the modularization --- .../src/app/main/ui/components/title_bar.cljs | 27 +++++++++++++------ .../ui/viewer/inspect/attributes/blur.cljs | 9 +++---- .../ui/viewer/inspect/attributes/fill.cljs | 9 +++---- .../viewer/inspect/attributes/geometry.cljs | 9 +++---- .../ui/viewer/inspect/attributes/layout.cljs | 9 +++---- .../ui/viewer/inspect/attributes/shadow.cljs | 9 +++---- .../ui/viewer/inspect/attributes/stroke.cljs | 9 +++---- .../ui/viewer/inspect/attributes/svg.cljs | 9 +++---- .../ui/viewer/inspect/attributes/text.cljs | 9 +++---- .../src/app/main/ui/viewer/inspect/code.cljs | 20 +++++++------- 10 files changed, 61 insertions(+), 58 deletions(-) diff --git a/frontend/src/app/main/ui/components/title_bar.cljs b/frontend/src/app/main/ui/components/title_bar.cljs index 7c7a50af3..45a23a975 100644 --- a/frontend/src/app/main/ui/components/title_bar.cljs +++ b/frontend/src/app/main/ui/components/title_bar.cljs @@ -15,9 +15,13 @@ (i/icon-xref :arrow-refactor (stl/css :chevron-icon))) (mf/defc title-bar - {::mf/wrap-props false} - [{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable add-icon-gap origin]}] - (let [klass (dm/str (stl/css-case :title-bar true :all-clickable all-clickable) " " class)] + {::mf/props :obj} + [{:keys [class collapsable collapsed title children + btn-children all-clickable add-icon-gap + on-collapsed on-btn-click]}] + (let [klass (stl/css-case :title-bar true + :all-clickable all-clickable) + klass (dm/str klass " " class)] [:div {:class klass} (if ^boolean collapsable [:div {:class (stl/css :title-wrapper)} @@ -35,13 +39,20 @@ :collapsed collapsed) :on-click on-collapsed} chevron-icon] - [:div {:class (stl/css :title)} title]])] - [:div {:class (stl/css-case :title-only true - :title-only-icon-gap add-icon-gap - :title-only (not= :inspect origin) - :inspect-title (= :inspect origin))} title]) + [:div {:class (stl/css :title)} + title]])] + [:div {:class (stl/css-case + :title-only true + :title-only-icon-gap add-icon-gap)} + title]) children (when (some? on-btn-click) [:button {:class (stl/css :title-button) :on-click on-btn-click} btn-children])])) + +(mf/defc inspect-title-bar + {::mf/props :obj} + [{:keys [class title]}] + [:div {:class (dm/str (stl/css :title-bar) " " class)} + [:div {:class (stl/css :title-only :inspect-title)} title]]) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs index 3b006e94c..ff2e450f9 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs @@ -9,7 +9,7 @@ (:require [app.common.data.macros :as dm] [app.main.ui.components.copy-button :refer [copy-button]] - [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.components.title-bar :refer [inspect-title-bar]] [app.util.code-gen.style-css :as css] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -22,10 +22,9 @@ (let [shapes (->> shapes (filter has-blur?))] (when (seq shapes) [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable false - :title (tr "inspect.attributes.blur") - :origin :inspect - :class (stl/css :title-spacing-blur)} + [:& inspect-title-bar + {:title (tr "inspect.attributes.blur") + :class (stl/css :title-spacing-blur)} (when (= (count shapes) 1) [:& copy-button {:data (css/get-css-property objects (first shapes) :filter) :class (stl/css :copy-btn-title)}])] diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs index 85f607333..05acf6fbf 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs @@ -7,7 +7,7 @@ (ns app.main.ui.viewer.inspect.attributes.fill (:require-macros [app.main.style :as stl]) (:require - [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.components.title-bar :refer [inspect-title-bar]] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.util.code-gen.style-css :as css] [app.util.i18n :refer [tr]] @@ -53,10 +53,9 @@ (let [shapes (filter has-fill? shapes)] (when (seq shapes) [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable false - :origin :inspect - :title (tr "inspect.attributes.fill") - :class (stl/css :title-spacing-fill)}] + [:& inspect-title-bar + {:title (tr "inspect.attributes.fill") + :class (stl/css :title-spacing-fill)}] [:div {:class (stl/css :attributes-content)} (for [shape shapes] diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs index cc7cc70f5..8fd9c4ee7 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs @@ -10,7 +10,7 @@ [app.common.data :as d] [app.common.data.macros :as dm] [app.main.ui.components.copy-button :refer [copy-button]] - [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.components.title-bar :refer [inspect-title-bar]] [app.main.ui.viewer.inspect.attributes.common :as cmm] [app.util.code-gen.style-css :as css] [app.util.i18n :refer [tr]] @@ -36,10 +36,9 @@ (mf/defc geometry-panel [{:keys [objects shapes]}] [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable false - :title (tr "inspect.attributes.size") - :origin :inspect - :class (stl/css :title-spacing-geometry)} + [:& inspect-title-bar + {:title (tr "inspect.attributes.size") + :class (stl/css :title-spacing-geometry)} (when (= (count shapes) 1) [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs index a5a7df866..9af1d0927 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs @@ -11,7 +11,7 @@ [app.common.data.macros :as dm] [app.common.types.shape.layout :as ctl] [app.main.ui.components.copy-button :refer [copy-button]] - [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.components.title-bar :refer [inspect-title-bar]] [app.main.ui.viewer.inspect.attributes.common :as cmm] [app.util.code-gen.style-css :as css] [rumext.v2 :as mf])) @@ -52,10 +52,9 @@ (when (seq shapes) [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable false - :origin :inspect - :title "Layout" - :class (stl/css :title-spacing-layout)} + [:& inspect-title-bar + {:title "Layout" + :class (stl/css :title-spacing-layout)} (when (= (count shapes) 1) [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs index c77ab51b3..c62a85fb9 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs @@ -10,7 +10,7 @@ [app.common.data :as d] [app.common.data.macros :as dm] [app.main.ui.components.copy-button :refer [copy-button]] - [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.components.title-bar :refer [inspect-title-bar]] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.util.code-gen.style-css :as css] [app.util.i18n :refer [tr]] @@ -53,10 +53,9 @@ (when (and (seq shapes) (> (count shapes) 0)) [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable false - :origin :inspect - :title (tr "inspect.attributes.shadow") - :class (stl/css :title-spacing-shadow)}] + [:& inspect-title-bar + {:title (tr "inspect.attributes.shadow") + :class (stl/css :title-spacing-shadow)}] [:div {:class (stl/css :attributes-content)} (for [shape shapes] diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs index 2ba125be3..e8e1ebcd3 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs @@ -10,7 +10,7 @@ [app.common.data :as d] [app.common.data.macros :as dm] [app.main.ui.components.copy-button :refer [copy-button]] - [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.components.title-bar :refer [inspect-title-bar]] [app.main.ui.formats :as fmt] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.util.code-gen.style-css-formats :as cssf] @@ -61,10 +61,9 @@ (let [shapes (->> shapes (filter has-stroke?))] (when (seq shapes) [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable false - :origin :inspect - :title (tr "inspect.attributes.stroke") - :class (stl/css :title-spacing-stroke)}] + [:& inspect-title-bar + {:title (tr "inspect.attributes.stroke") + :class (stl/css :title-spacing-stroke)}] [:div {:class (stl/css :attributes-content)} (for [shape shapes] diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs index c788c95db..b353ad5ba 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs @@ -9,7 +9,7 @@ (:require [app.common.data :as d] [app.main.ui.components.copy-button :refer [copy-button]] - [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.components.title-bar :refer [inspect-title-bar]] [app.util.i18n :refer [tr]] [cuerdas.core :as str] [rumext.v2 :as mf])) @@ -53,8 +53,7 @@ (let [shape (first shapes)] (when (seq (:svg-attrs shape)) [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable false - :origin :inspect - :title (tr "workspace.sidebar.options.svg-attrs.title") - :class (stl/css :title-spacing-svg)}] + [:& inspect-title-bar + {:title (tr "workspace.sidebar.options.svg-attrs.title") + :class (stl/css :title-spacing-svg)}] [:& svg-block {:shape shape}]]))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs index 137fcc01c..d2a3eceb8 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs @@ -14,7 +14,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.copy-button :refer [copy-button]] - [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.components.title-bar :refer [inspect-title-bar]] [app.main.ui.formats :as fmt] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.util.i18n :refer [tr]] @@ -190,10 +190,9 @@ [{:keys [shapes]}] (when-let [shapes (seq (filter has-text? shapes))] [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable false - :origin :inspect - :title (tr "inspect.attributes.typography") - :class (stl/css :title-spacing-text)}] + [:& inspect-title-bar + {:title (tr "inspect.attributes.typography") + :class (stl/css :title-spacing-text)}] (for [shape shapes] [:& text-block {:shape shape diff --git a/frontend/src/app/main/ui/viewer/inspect/code.cljs b/frontend/src/app/main/ui/viewer/inspect/code.cljs index 08acf69c9..6c96e575e 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/code.cljs @@ -181,29 +181,29 @@ (use-resize-hook :code 400 100 800 :y false :bottom) ;; set-style - ;; (mf/use-callback + ;; (mf/use-fn ;; (fn [value] ;; (reset! style-type* value))) set-markup - (mf/use-callback + (mf/use-fn (mf/deps markup-type*) (fn [value] (reset! markup-type* value))) handle-copy-all-code - (mf/use-callback + (mf/use-fn (mf/deps style-code markup-code images-data) (fn [] (wapi/write-to-clipboard (gen-all-code style-code markup-code images-data)))) ;;handle-open-review - ;;(mf/use-callback + ;;(mf/use-fn ;; (fn [] ;; (st/emit! (dp/open-preview-selected)))) handle-collapse - (mf/use-callback + (mf/use-fn (fn [e] (let [panel-type (keyword (dom/get-data (dom/get-current-target e) "type"))] (swap! collapsed* @@ -257,11 +257,11 @@ [:div {:class (stl/css :code-lang-option)} "CSS"] - ;; We will have a select when we have more than one option - ;; [:& select {:default-value style-type - ;; :class (stl/css :code-lang-select) - ;; :on-change set-style - ;; :options [{:label "CSS" :value "css"}]}] + ;; We will have a select when we have more than one option + ;; [:& select {:default-value style-type + ;; :class (stl/css :code-lang-select) + ;; :on-change set-style + ;; :options [{:label "CSS" :value "css"}]}] [:div {:class (stl/css :action-btns)} [:button {:class (stl/css :expand-button)