Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-10 00:58:26 -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
{:title (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
[:& file-uploader
{:input-id "image-upload"
@ -114,7 +115,8 @@
[:button
{:title (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)))
:on-click interrupt}
i/move-refactor]]
@ -123,7 +125,7 @@
[:button
{:title (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
:data-tool "frame"
:data-test "artboard-btn"}
@ -132,7 +134,7 @@
[:button
{:title (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
:data-tool "rect"
:data-test "rect-btn"}
@ -141,7 +143,7 @@
[:button
{:title (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
:data-tool "circle"
:data-test "ellipse-btn"}
@ -150,7 +152,7 @@
[:button
{:title (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
:data-tool "text"}
i/text-refactor]]
@ -161,7 +163,7 @@
[:button
{:title (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
:data-tool "curve"
:data-test "curve-btn"}
@ -170,7 +172,7 @@
[:button
{:title (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
:data-tool "path"
:data-test "path-btn"}
@ -180,7 +182,7 @@
[:li
[:button
{: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}
i/bug-refactor]])]]

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

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