3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-12 19:16:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Separate inspect-title-bar from title-bar

Browse source 
This now makes the component a bit less overloaded and
the implementation simplified without bracking too much
the modularization
This commit is contained in:
Andrey Antukh 2024-02-29 16:15:35 +01:00 • committed by Alonso Torres
parent 20b651560d
commit 00ee6833c8
10 changed files with 61 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/app/main/ui/components/title_bar.cljs
View file

@ -15,9 +15,13 @@
(i/icon-xref :arrow-refactor (stl/css :chevron-icon))) (i/icon-xref :arrow-refactor (stl/css :chevron-icon)))
(mf/defc title-bar (mf/defc title-bar
{::mf/wrap-props false} {::mf/props :obj}
[{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable add-icon-gap origin]}] [{:keys [class collapsable collapsed title children
(let [klass (dm/str (stl/css-case :title-bar true :all-clickable all-clickable) " " class)] 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} [:div {:class klass}
(if ^boolean collapsable (if ^boolean collapsable
[:div {:class (stl/css :title-wrapper)} [:div {:class (stl/css :title-wrapper)}
@ -35,13 +39,20 @@
:collapsed collapsed) :collapsed collapsed)
:on-click on-collapsed} :on-click on-collapsed}
chevron-icon] chevron-icon]
[:div {:class (stl/css :title)} title]])] [:div {:class (stl/css :title)}
[:div {:class (stl/css-case :title-only true title]])]
:title-only-icon-gap add-icon-gap [:div {:class (stl/css-case
:title-only (not= :inspect origin) :title-only true
:inspect-title (= :inspect origin))} title]) :title-only-icon-gap add-icon-gap)}
title])
children children
(when (some? on-btn-click) (when (some? on-btn-click)
[:button {:class (stl/css :title-button) [:button {:class (stl/css :title-button)
:on-click on-btn-click} :on-click on-btn-click}
btn-children])])) 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]])

7
frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs
View file

@ -9,7 +9,7 @@
(:require (:require
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.ui.components.copy-button :refer [copy-button]] [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.code-gen.style-css :as css]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -22,9 +22,8 @@
(let [shapes (->> shapes (filter has-blur?))] (let [shapes (->> shapes (filter has-blur?))]
(when (seq shapes) (when (seq shapes)
[:div {:class (stl/css :attributes-block)} [:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false [:& inspect-title-bar
:title (tr "inspect.attributes.blur") {:title (tr "inspect.attributes.blur")
:origin :inspect
:class (stl/css :title-spacing-blur)} :class (stl/css :title-spacing-blur)}
(when (= (count shapes) 1) (when (= (count shapes) 1)
[:& copy-button {:data (css/get-css-property objects (first shapes) :filter) [:& copy-button {:data (css/get-css-property objects (first shapes) :filter)

7
frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs
View file

@ -7,7 +7,7 @@
(ns app.main.ui.viewer.inspect.attributes.fill (ns app.main.ui.viewer.inspect.attributes.fill
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (: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.main.ui.viewer.inspect.attributes.common :refer [color-row]]
[app.util.code-gen.style-css :as css] [app.util.code-gen.style-css :as css]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@ -53,9 +53,8 @@
(let [shapes (filter has-fill? shapes)] (let [shapes (filter has-fill? shapes)]
(when (seq shapes) (when (seq shapes)
[:div {:class (stl/css :attributes-block)} [:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false [:& inspect-title-bar
:origin :inspect {:title (tr "inspect.attributes.fill")
:title (tr "inspect.attributes.fill")
:class (stl/css :title-spacing-fill)}] :class (stl/css :title-spacing-fill)}]
[:div {:class (stl/css :attributes-content)} [:div {:class (stl/css :attributes-content)}

7
frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs
View file

@ -10,7 +10,7 @@
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.ui.components.copy-button :refer [copy-button]] [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.main.ui.viewer.inspect.attributes.common :as cmm]
[app.util.code-gen.style-css :as css] [app.util.code-gen.style-css :as css]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@ -36,9 +36,8 @@
(mf/defc geometry-panel (mf/defc geometry-panel
[{:keys [objects shapes]}] [{:keys [objects shapes]}]
[:div {:class (stl/css :attributes-block)} [:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false [:& inspect-title-bar
:title (tr "inspect.attributes.size") {:title (tr "inspect.attributes.size")
:origin :inspect
:class (stl/css :title-spacing-geometry)} :class (stl/css :title-spacing-geometry)}
(when (= (count shapes) 1) (when (= (count shapes) 1)

7
frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs
View file

@ -11,7 +11,7 @@
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.types.shape.layout :as ctl] [app.common.types.shape.layout :as ctl]
[app.main.ui.components.copy-button :refer [copy-button]] [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.main.ui.viewer.inspect.attributes.common :as cmm]
[app.util.code-gen.style-css :as css] [app.util.code-gen.style-css :as css]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -52,9 +52,8 @@
(when (seq shapes) (when (seq shapes)
[:div {:class (stl/css :attributes-block)} [:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false [:& inspect-title-bar
:origin :inspect {:title "Layout"
:title "Layout"
:class (stl/css :title-spacing-layout)} :class (stl/css :title-spacing-layout)}
(when (= (count shapes) 1) (when (= (count shapes) 1)

7
frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs
View file

@ -10,7 +10,7 @@
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.ui.components.copy-button :refer [copy-button]] [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.main.ui.viewer.inspect.attributes.common :refer [color-row]]
[app.util.code-gen.style-css :as css] [app.util.code-gen.style-css :as css]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@ -53,9 +53,8 @@
(when (and (seq shapes) (> (count shapes) 0)) (when (and (seq shapes) (> (count shapes) 0))
[:div {:class (stl/css :attributes-block)} [:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false [:& inspect-title-bar
:origin :inspect {:title (tr "inspect.attributes.shadow")
:title (tr "inspect.attributes.shadow")
:class (stl/css :title-spacing-shadow)}] :class (stl/css :title-spacing-shadow)}]
[:div {:class (stl/css :attributes-content)} [:div {:class (stl/css :attributes-content)}

7
frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
View file

@ -10,7 +10,7 @@
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.ui.components.copy-button :refer [copy-button]] [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.formats :as fmt]
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
[app.util.code-gen.style-css-formats :as cssf] [app.util.code-gen.style-css-formats :as cssf]
@ -61,9 +61,8 @@
(let [shapes (->> shapes (filter has-stroke?))] (let [shapes (->> shapes (filter has-stroke?))]
(when (seq shapes) (when (seq shapes)
[:div {:class (stl/css :attributes-block)} [:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false [:& inspect-title-bar
:origin :inspect {:title (tr "inspect.attributes.stroke")
:title (tr "inspect.attributes.stroke")
:class (stl/css :title-spacing-stroke)}] :class (stl/css :title-spacing-stroke)}]
[:div {:class (stl/css :attributes-content)} [:div {:class (stl/css :attributes-content)}

7
frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs
View file

@ -9,7 +9,7 @@
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.main.ui.components.copy-button :refer [copy-button]] [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]] [app.util.i18n :refer [tr]]
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -53,8 +53,7 @@
(let [shape (first shapes)] (let [shape (first shapes)]
(when (seq (:svg-attrs shape)) (when (seq (:svg-attrs shape))
[:div {:class (stl/css :attributes-block)} [:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false [:& inspect-title-bar
:origin :inspect {:title (tr "workspace.sidebar.options.svg-attrs.title")
:title (tr "workspace.sidebar.options.svg-attrs.title")
:class (stl/css :title-spacing-svg)}] :class (stl/css :title-spacing-svg)}]
[:& svg-block {:shape shape}]]))) [:& svg-block {:shape shape}]])))

7
frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs
View file

@ -14,7 +14,7 @@
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.copy-button :refer [copy-button]] [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.formats :as fmt]
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@ -190,9 +190,8 @@
[{:keys [shapes]}] [{:keys [shapes]}]
(when-let [shapes (seq (filter has-text? shapes))] (when-let [shapes (seq (filter has-text? shapes))]
[:div {:class (stl/css :attributes-block)} [:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false [:& inspect-title-bar
:origin :inspect {:title (tr "inspect.attributes.typography")
:title (tr "inspect.attributes.typography")
:class (stl/css :title-spacing-text)}] :class (stl/css :title-spacing-text)}]
(for [shape shapes] (for [shape shapes]

10
frontend/src/app/main/ui/viewer/inspect/code.cljs
View file

@ -181,29 +181,29 @@
(use-resize-hook :code 400 100 800 :y false :bottom) (use-resize-hook :code 400 100 800 :y false :bottom)
;; set-style ;; set-style
;; (mf/use-callback ;; (mf/use-fn
;; (fn [value] ;; (fn [value]
;; (reset! style-type* value))) ;; (reset! style-type* value)))
set-markup set-markup
(mf/use-callback (mf/use-fn
(mf/deps markup-type*) (mf/deps markup-type*)
(fn [value] (fn [value]
(reset! markup-type* value))) (reset! markup-type* value)))
handle-copy-all-code handle-copy-all-code
(mf/use-callback (mf/use-fn
(mf/deps style-code markup-code images-data) (mf/deps style-code markup-code images-data)
(fn [] (fn []
(wapi/write-to-clipboard (gen-all-code style-code markup-code images-data)))) (wapi/write-to-clipboard (gen-all-code style-code markup-code images-data))))
;;handle-open-review ;;handle-open-review
;;(mf/use-callback ;;(mf/use-fn
;; (fn [] ;; (fn []
;; (st/emit! (dp/open-preview-selected)))) ;; (st/emit! (dp/open-preview-selected))))
handle-collapse handle-collapse
(mf/use-callback (mf/use-fn
(fn [e] (fn [e]
(let [panel-type (keyword (dom/get-data (dom/get-current-target e) "type"))] (let [panel-type (keyword (dom/get-data (dom/get-current-target e) "type"))]
(swap! collapsed* (swap! collapsed*