Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-27 23:21:47 -05:00
Code Issues Activity

Merge pull request #3985 from penpot/niwinz-staging-lipstick-title-bar

Browse source 
💄 Make title-bar component usable externally
This commit is contained in:
Eva Marco 2024-01-09 10:08:06 +01:00 • committed by GitHub
commit 419776bf5e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 116 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,23 +13,23 @@
(mf/defc title-bar
{::mf/wrap-props false}
[{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children class clickable-all?]}]
[{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable]}]
(let [klass (dm/str (stl/css :title-bar) " " class)]
[:div {:class klass}
(if collapsable?
(if ^boolean collapsable
[:div {:class (stl/css :title-wrapper)}
(if clickable-all?
(if ^boolean all-clickable
[:button {:class (stl/css :toggle-btn)
:on-click on-collapsed}
[:span {:class (stl/css-case
:collapsabled-icon true
:rotated collapsed?)}
:rotated collapsed)}
i/arrow-refactor]
[:div {:class (stl/css :title)} title]]
[:*
[:button {:class (stl/css-case
:collapsabled-icon true
:rotated collapsed?)
:rotated collapsed)
:on-click on-collapsed}
i/arrow-refactor]
[:div {:class (stl/css :title)} title]])]

14
frontend/src/app/main/ui/debug/components_preview.cljs
View file

@ -102,26 +102,26 @@
[:h3 "Titles"]
[:& component-wrapper
{:title "Title"}
[:& title-bar {:collapsable? false
:title "Title"}]]
[:& title-bar {:collapsable false
:title "Title"}]]
[:& component-wrapper
{:title "Title and action button"}
[:& title-bar {:collapsable? false
[:& title-bar {:collapsable false
:title "Title"
:on-btn-click on-btn-click
:btn-children i/add-refactor}]]
[:& component-wrapper
{:title "Collapsed title and action button"}
[:& title-bar {:collapsable? true
:collapsed? collapsed?
[:& title-bar {:collapsable true
:collapsed collapsed?
:on-collapsed toggle-collapsed
:title "Title"
:on-btn-click on-btn-click
:btn-children i/add-refactor}]]
[:& component-wrapper
{:title "Collapsed title and children"}
[:& title-bar {:collapsable? true
:collapsed? collapsed?
[:& title-bar {:collapsable true
:collapsed collapsed?
:on-collapsed toggle-collapsed
:title "Title"}
[:& tab-container {:on-change-tab set-tab

6
frontend/src/app/main/ui/viewer/inspect/annotation.cljs
View file

@ -15,9 +15,9 @@
(mf/defc annotation
[{:keys [content] :as props}]
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable? false
:title (tr "workspace.options.component.annotation")
:class (stl/css :title-spacing-annotation)}
[:& title-bar {:collapsable false
:title (tr "workspace.options.component.annotation")
:class (stl/css :title-spacing-annotation)}
[:& copy-button {:data content}]]
[:div {:class (stl/css :annotation-content)} content]])

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

@ -21,9 +21,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")
:class (stl/css :title-spacing-blur)}
[:& title-bar {:collapsable false
: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)}])]

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

@ -54,9 +54,9 @@
(let [shapes (filter has-fill? shapes)]
(when (seq shapes)
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable? false
:title (tr "inspect.attributes.fill")
:class (stl/css :title-spacing-fill)}]
[:& title-bar {:collapsable false
:title (tr "inspect.attributes.fill")
:class (stl/css :title-spacing-fill)}]
[:div {:class (stl/css :attributes-content)}
(for [shape shapes]

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

@ -31,9 +31,9 @@
(mf/defc geometry-panel
[{:keys [objects shapes]}]
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable? false
:title (tr "inspect.attributes.size")
:class (stl/css :title-spacing-geometry)}
[:& title-bar {:collapsable false
: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)}])]

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

@ -45,9 +45,9 @@
(when (seq shapes)
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable? false
:title "Layout"
:class (stl/css :title-spacing-layout)}
[:& title-bar {:collapsable false
:title "Layout"
:class (stl/css :title-spacing-layout)}
(when (= (count shapes) 1)
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]

6
frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs
View file

@ -63,9 +63,9 @@
(when some-layout-prop?
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable? false
:title menu-title
:class (stl/css :title-spacing-layout-element)}
[:& title-bar {:collapsable false
:title menu-title
:class (stl/css :title-spacing-layout-element)}
(when (= (count shapes) 1)
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]

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

@ -53,9 +53,9 @@
(when (and (seq shapes) (> (count shapes) 0))
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable? false
:title (tr "inspect.attributes.shadow")
:class (stl/css :title-spacing-shadow)}]
[:& title-bar {:collapsable false
:title (tr "inspect.attributes.shadow")
:class (stl/css :title-spacing-shadow)}]
[:div {:class (stl/css :attributes-content)}
(for [shape shapes]

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

@ -61,9 +61,9 @@
(let [shapes (->> shapes (filter has-stroke?))]
(when (seq shapes)
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable? false
:title (tr "inspect.attributes.stroke")
:class (stl/css :title-spacing-stroke)}]
[:& title-bar {:collapsable false
:title (tr "inspect.attributes.stroke")
:class (stl/css :title-spacing-stroke)}]
[:div {:class (stl/css :attributes-content)}
(for [shape shapes]

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

@ -47,7 +47,7 @@
(let [shape (first shapes)]
(when (seq (:svg-attrs shape))
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable? false
:title (tr "workspace.sidebar.options.svg-attrs.title")
:class (stl/css :title-spacing-svg)}]
[:& title-bar {:collapsable false
:title (tr "workspace.sidebar.options.svg-attrs.title")
:class (stl/css :title-spacing-svg)}]
[:& svg-block {:shape shape}]])))

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

@ -189,9 +189,9 @@
[{:keys [shapes]}]
(when-let [shapes (seq (filter has-text? shapes))]
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable? false
:title (tr "inspect.attributes.typography")
:class (stl/css :title-spacing-text)}]
[:& title-bar {:collapsable false
:title (tr "inspect.attributes.typography")
:class (stl/css :title-spacing-text)}]
(for [shape shapes]
[:& text-block {:shape shape

6
frontend/src/app/main/ui/viewer/inspect/exports.cljs
View file

@ -136,9 +136,9 @@
vec))))
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? false
:title (tr "workspace.options.export")
:class (stl/css :title-spacing-export-viewer)}
[:& title-bar {:collapsable false
:title (tr "workspace.options.export")
:class (stl/css :title-spacing-export-viewer)}
[:button {:class (stl/css :add-export)
:on-click add-export} i/add-refactor]]]

12
frontend/src/app/main/ui/workspace/libraries.cljs
View file

@ -199,9 +199,9 @@
[:*
[:div {:class (stl/css :section)}
[:& title-bar {:collapsable? false
:title (tr "workspace.libraries.in-this-file")
:class (stl/css :title-spacing-lib)}]
[:& title-bar {:collapsable false
:title (tr "workspace.libraries.in-this-file")
:class (stl/css :title-spacing-lib)}]
[:div {:class (stl/css :section-list)}
[:div {:class (stl/css :section-list-item)}
@ -245,9 +245,9 @@
i/detach-refactor]])]]
[:div {:class (stl/css :section)}
[:& title-bar {:collapsable? false
:title (tr "workspace.libraries.shared-libraries")
:class (stl/css :title-spacing-lib)}]
[:& title-bar {:collapsable false
:title (tr "workspace.libraries.shared-libraries")
:class (stl/css :title-spacing-lib)}]
[:div {:class (stl/css :libraries-search)}
[:& search-bar {:on-change change-search-term
:value search-term

4
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

@ -55,7 +55,9 @@
(mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
on-tab-change
(mf/use-fn #(st/emit! (dw/go-to-layout %)))]
(mf/use-fn #(do
(prn "on-tab-change" %)
(st/emit! (dw/go-to-layout %))))]
[:aside {:ref parent-ref
:id "left-sidebar-aside"

17
frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
View file

@ -136,9 +136,9 @@
title-buttons (filter #(= (get-role %) :title-button) children)
content (filter #(= (get-role %) :content) children)]
[:div {:class (stl/css :asset-section)}
[:& title-bar {:collapsable? true
:collapsed? (not open?)
:clickable-all? true
[:& title-bar {:collapsable true
:collapsed (not open?)
:all-clickable true
:on-collapsed #(st/emit! (dw/set-assets-section-open file-id section (not open?)))
:class (stl/css :title-spacing)
:title (mf/html [:span {:class (stl/css :title-name)}
@ -154,6 +154,7 @@
content)]))
(mf/defc asset-section-block
{::mf/wrap-props false}
[{:keys [children]}]
[:* children])
@ -161,11 +162,11 @@
[rename components-to-group group-name]
(let [undo-id (js/Symbol)]
(st/emit! (dwu/start-undo-transaction undo-id))
(apply st/emit!
(->> components-to-group
(map #(rename
(:id %)
(add-group % group-name)))))
(->> components-to-group
(map #(rename
(:id %)
(add-group % group-name)))
(run! st/emit!))
(st/emit! (dwu/commit-undo-transaction undo-id))))
(defn on-drop-asset

6
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
View file

@ -52,9 +52,9 @@
(fn []
(st/emit! (dw/set-assets-section-open file-id :library (not open?)))))]
[:div {:class (stl/css :library-title)}
[:& title-bar {:collapsable? true
:collapsed? (not open?)
:clickable-all? true
[:& title-bar {:collapsable true
:collapsed (not open?)
:all-clickable true
:on-collapsed toggle-open
:title (if local?
(mf/html [:div {:class (stl/css :special-title)}

6
frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
View file

@ -46,9 +46,9 @@
(mf/use-fn #(swap! menu-state cmm/close-context-menu))]
[:div {:class (stl/css :group-title)
:on-context-menu on-context-menu}
[:& title-bar {:collapsable? true
:collapsed? (not group-open?)
:clickable-all? true
[:& title-bar {:collapsable true
:collapsed (not group-open?)
:all-clickable true
:on-collapsed on-fold-group
:title (mf/html [:* (when-not (empty? other-path)
[:span {:class (stl/css :pre-path)

2
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View file

@ -374,7 +374,7 @@
i/tick-refactor])]])]
[:div {:class (stl/css :tool-window-bar)}
[:& title-bar {:collapsable? false
[:& title-bar {:collapsable false
:title (:name page)
:on-btn-click toggle-search
:btn-children i/search-refactor}]]))]))

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
View file

@ -77,8 +77,8 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? has-value?
:collapsed? (not open?)
[:& title-bar {:collapsable has-value?
:collapsed (not open?)
:on-collapsed toggle-content
:title (case type
:multiple (tr "workspace.options.blur-options.title.multiple")

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
View file

@ -215,8 +215,8 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? has-colors?
:collapsed? (not open?)
[:& title-bar {:collapsable has-colors?
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.options.selection-color")
:class (stl/css-case :title-spacing-selected-colors (not has-colors?))}]]

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
View file

@ -484,8 +484,8 @@
:on-click on-component-back}
[:span i/arrow-refactor]
[:span (tr "workspace.options.component")]]
[:& title-bar {:collapsable? true
:collapsed? (not open?)
[:& title-bar {:collapsable true
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.options.component")
:class (stl/css :title-spacing-component)}])]

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs
View file

@ -157,8 +157,8 @@
(when in-frame?
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? true
:collapsed? (not open?)
[:& title-bar {:collapsable true
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.options.constraints")}]]
(when open?

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
View file

@ -171,8 +171,8 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? has-exports?
:collapsed? (not open?)
[:& title-bar {:collapsable has-exports?
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export"))
:class (stl/css-case :title-spacing-export (not has-exports?))}

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View file

@ -137,8 +137,8 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? has-fills?
:collapsed? (not open?)
[:& title-bar {:collapsable has-fills?
:collapsed (not open?)
:on-collapsed toggle-content
:title label
:class (stl/css-case :title-spacing-fill (not has-fills?))}

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
View file

@ -294,8 +294,8 @@
handle-create-grid (mf/use-fn (mf/deps id) #(st/emit! (dw/add-frame-grid id)))]
[:div {:class (stl/css :element-set)}
[:& title-bar {:collapsable? has-frame-grids?
:collapsed? (not open?)
[:& title-bar {:collapsable has-frame-grids?
:collapsed (not open?)
:on-collapsed toggle-content
:class (stl/css-case :title-spacing-board-grid (not has-frame-grids?))
:title (tr "workspace.options.guides.title")}

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
View file

@ -165,8 +165,8 @@
[:div {:class (stl/css :grid-cell-menu)}
[:div {:class (stl/css :grid-cell-menu-title)}
[:& title-bar {:collapsable? true
:collapsed? (not open?)
[:& title-bar {:collapsable true
:collapsed (not open?)
:on-collapsed #(swap! state* update :open not)
:title "Grid cell"}]]

18
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -157,9 +157,9 @@
[{:keys [flows]}]
(when (seq flows)
[:div {:class (stl/css :interaction-options)}
[:& title-bar {:collapsable? false
:title (tr "workspace.options.flows.flow-starts")
:class (stl/css :title-spacing-layout-flow)}]
[:& title-bar {:collapsable false
:title (tr "workspace.options.flows.flow-starts")
:class (stl/css :title-spacing-layout-flow)}]
(for [flow flows]
[:& flow-item {:flow flow :key (str (:id flow))}])]))
@ -170,9 +170,9 @@
add-flow (mf/use-fn #(st/emit! (dwi/add-flow-selected-frame)))]
[:div {:class (stl/css :element-set)}
[:& title-bar {:collapsable? false
:title (tr "workspace.options.flows.flow")
:class (stl/css :title-spacing-layout-flow)}
[:& title-bar {:collapsable false
:title (tr "workspace.options.flows.flow")
:class (stl/css :title-spacing-layout-flow)}
(when (nil? flow)
[:button {:class (stl/css :add-flow-btn)
:title (tr "workspace.options.flows.add-flow-start")
@ -712,9 +712,9 @@
[:div {:class (stl/css :interaction-options)}
(when (and shape (not (cfh/unframed-shape? shape)))
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? false
:title (tr "workspace.options.interactions")
:class (stl/css :title-spacing-layout-interactions)}
[:& title-bar {:collapsable false
:title (tr "workspace.options.interactions")
:class (stl/css :title-spacing-layout-interactions)}
[:button {:class (stl/css :add-interaction-btn)
:on-click add-interaction}

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -895,8 +895,8 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? has-layout?
:collapsed? (not open?)
[:& title-bar {:collapsable has-layout?
:collapsed (not open?)
:on-collapsed toggle-content
:title "Layout"
:class (stl/css-case :title-spacing-layout (not has-layout?))}

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

@ -361,8 +361,8 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? has-content?
:collapsed? (not open?)
[:& title-bar {:collapsable has-content?
:collapsed (not open?)
:on-collapsed toggle-content
:title title
:class (stl/css-case :title-spacing-layout-element true

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -288,8 +288,8 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? has-shadows?
:collapsed? (not open?)
[:& title-bar {:collapsable has-shadows?
:collapsed (not open?)
:on-collapsed toggle-content
:title (case type
:multiple (tr "workspace.options.shadow-options.title.multiple")

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
View file

@ -163,8 +163,8 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? has-strokes?
:collapsed? (not open?)
[:& title-bar {:collapsable has-strokes?
:collapsed (not open?)
:on-collapsed toggle-content
:title label
:class (stl/css-case :title-spacing-stroke (not has-strokes?))}

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
View file

@ -86,8 +86,8 @@
(when-not (empty? attrs)
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-set-title)}
[:& title-bar {:collapsable? has-attributes?
:collapsed? (not open?)
[:& title-bar {:collapsable has-attributes?
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.sidebar.options.svg-attrs.title")
:class (stl/css-case :title-spacing-svg-attrs (not has-attributes?))}]]

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
View file

@ -283,8 +283,8 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? true
:collapsed? (not main-menu-open?)
[:& title-bar {:collapsable true
:collapsed (not main-menu-open?)
:on-collapsed toggle-main-menu
:title label
:class (stl/css :title-spacing-text)}

6
frontend/src/app/main/ui/workspace/sidebar/options/page.cljs
View file

@ -28,9 +28,9 @@
on-close (mf/use-fn #(st/emit! (dwu/commit-undo-transaction :options)))]
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? false
:title (tr "workspace.options.canvas-background")
:class (stl/css :title-spacing-page)}]]
[:& title-bar {:collapsable false
:title (tr "workspace.options.canvas-background")
:class (stl/css :title-spacing-page)}]]
[:div {:class (stl/css :element-content)}
[:& color-row
{:disable-gradient true

12
frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
View file

@ -210,12 +210,12 @@
[:div {:class (stl/css :sitemap)
:style #js {"--height" (str size "px")}}
[:& title-bar {:collapsable? true
:collapsed? (not show-pages?)
:on-collapsed toggle-pages
:clickable-all? true
:title (tr "workspace.sidebar.sitemap")
:class (stl/css :title-spacing-sitemap)}
[:& title-bar {:collapsable true
:collapsed (not show-pages?)
:on-collapsed toggle-pages
:all-clickable true
:title (tr "workspace.sidebar.sitemap")
:class (stl/css :title-spacing-sitemap)}
(if ^boolean read-only?
[:di {:class (stl/css :view-only-mode)}