Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-10 09:08:31 -05:00
Code Issues Activity

💄 Remove nesting of mail toolbar buttons css

Browse source
This commit is contained in:
Belén Albeza 2024-02-28 16:21:55 +01:00 • committed by Andrey Antukh
parent 75716c37e1
commit a3e4f3f376
2 changed files with 27 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/app/main/ui/workspace/top_toolbar.cljs
View file

@ -53,7 +53,8 @@
[:button [:button
{:title (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) {:title (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
:aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) :aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
:on-click on-click} :on-click on-click
:class (stl/css :main-toolbar-options-button)}
i/img-refactor i/img-refactor
[:& file-uploader [:& file-uploader
{:input-id "image-upload" {:input-id "image-upload"
@ -114,7 +115,8 @@
[:button [:button
{:title (tr "workspace.toolbar.move" (sc/get-tooltip :move)) {:title (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move)) :aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:class (stl/css-case :selected (and (nil? selected-drawtool) :class (stl/css-case :main-toolbar-options-button true
:selected (and (nil? selected-drawtool)
(not edition))) (not edition)))
:on-click interrupt} :on-click interrupt}
i/move-refactor]] i/move-refactor]]
@ -123,7 +125,7 @@
[:button [:button
{:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame)) {:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
:aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame)) :aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
:class (stl/css-case :selected (= selected-drawtool :frame)) :class (stl/css-case :main-toolbar-options-button true :selected (= selected-drawtool :frame))
:on-click select-drawtool :on-click select-drawtool
:data-tool "frame" :data-tool "frame"
:data-test "artboard-btn"} :data-test "artboard-btn"}
@ -132,7 +134,7 @@
[:button [:button
{:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect)) {:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
:aria-label (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect)) :aria-label (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
:class (stl/css-case :selected (= selected-drawtool :rect)) :class (stl/css-case :main-toolbar-options-button true :selected (= selected-drawtool :rect))
:on-click select-drawtool :on-click select-drawtool
:data-tool "rect" :data-tool "rect"
:data-test "rect-btn"} :data-test "rect-btn"}
@ -141,7 +143,7 @@
[:button [:button
{:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse)) {:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
:aria-label (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse)) :aria-label (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
:class (stl/css-case :selected (= selected-drawtool :circle)) :class (stl/css-case :main-toolbar-options-button true :selected (= selected-drawtool :circle))
:on-click select-drawtool :on-click select-drawtool
:data-tool "circle" :data-tool "circle"
:data-test "ellipse-btn"} :data-test "ellipse-btn"}
@ -150,7 +152,7 @@
[:button [:button
{:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text)) {:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
:aria-label (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text)) :aria-label (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
:class (stl/css-case :selected (= selected-drawtool :text)) :class (stl/css-case :main-toolbar-options-button true :selected (= selected-drawtool :text))
:on-click select-drawtool :on-click select-drawtool
:data-tool "text"} :data-tool "text"}
i/text-refactor]] i/text-refactor]]
@ -161,7 +163,7 @@
[:button [:button
{:title (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve)) {:title (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
:aria-label (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve)) :aria-label (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
:class (stl/css-case :selected (= selected-drawtool :curve)) :class (stl/css-case :main-toolbar-options-button true :selected (= selected-drawtool :curve))
:on-click select-drawtool :on-click select-drawtool
:data-tool "curve" :data-tool "curve"
:data-test "curve-btn"} :data-test "curve-btn"}
@ -170,7 +172,7 @@
[:button [:button
{:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path)) {:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
:aria-label (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path)) :aria-label (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
:class (stl/css-case :selected (= selected-drawtool :path)) :class (stl/css-case :main-toolbar-options-button true :selected (= selected-drawtool :path))
:on-click select-drawtool :on-click select-drawtool
:data-tool "path" :data-tool "path"
:data-test "path-btn"} :data-test "path-btn"}
@ -180,7 +182,7 @@
[:li [:li
[:button [:button
{:title "Debugging tool" {:title "Debugging tool"
:class (stl/css-case :selected (contains? layout :debug-panel)) :class (stl/css-case :main-toolbar-options-button true :selected (contains? layout :debug-panel))
:on-click toggle-debug-panel} :on-click toggle-debug-panel}
i/bug-refactor]])]] i/bug-refactor]])]]

32
frontend/src/app/main/ui/workspace/top_toolbar.scss
View file

@ -48,25 +48,25 @@
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
li { li {
position: relative; position: relative;
}
}
button { .main-toolbar-options-button {
@extend .button-tertiary; @extend .button-tertiary;
height: $s-36; height: $s-36;
width: $s-36; width: $s-36;
flex-shrink: 0; flex-shrink: 0;
border-radius: $s-8; border-radius: $s-8;
border: none; border: none;
margin: 0 $s-2; margin: 0 $s-2;
svg { svg {
@extend .button-icon; @extend .button-icon;
stroke: var(--color-foreground-secondary); stroke: var(--color-foreground-secondary);
} }
&.selected { &.selected {
@extend .button-icon-selected; @extend .button-icon-selected;
}
}
} }
} }