Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-26 08:29:42 -05:00
Code Issues Activity

🐛 Fix copy button cropped

Browse source
This commit is contained in:
Eva 2024-01-12 13:23:28 +01:00 • committed by Alonso Torres
parent af6e808337
commit 6ecf0f4ca4
6 changed files with 49 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -769,10 +769,6 @@
@include titleTipography; @include titleTipography;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
text-align: left; text-align: left;
display: grid;
grid-template-columns: 1fr 22px;
grid-template-areas: "name button";
width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: fit-content; height: fit-content;

3
frontend/resources/styles/common/refactor/mixins.scss
View file

@ -97,8 +97,7 @@
color: var(--menu-foreground-color); color: var(--menu-foreground-color);
} }
@mixin copyWrapper { @mixin copyWrapperBase {
@include flexColumn;
position: relative; position: relative;
min-height: $s-32; min-height: $s-32;
width: $s-156; width: $s-156;

2
frontend/src/app/main/ui/components/copy_button.cljs
View file

@ -25,7 +25,7 @@
(let [sub (timers/schedule 1000 #(reset! just-copied false))] (let [sub (timers/schedule 1000 #(reset! just-copied false))]
;; On unmount we dispose the timer ;; On unmount we dispose the timer
#(rx/-dispose sub))))) #(rx/-dispose sub)))))
[:button {:class (dm/str class " " (stl/css-case :copy-button true [:button {:class (dm/str class " " (stl/css-case :copy-button (not (some? children))
:copy-wrapper (some? children))) :copy-wrapper (some? children)))
:on-click #(when-not @just-copied :on-click #(when-not @just-copied
(reset! just-copied true) (reset! just-copied true)

66
frontend/src/app/main/ui/components/copy_button.scss
View file

@ -10,7 +10,7 @@
@include buttonStyle; @include buttonStyle;
@include flexCenter; @include flexCenter;
height: $s-32; height: $s-32;
width: $s-28; width: $s-32;
border: $s-1 solid transparent; border: $s-1 solid transparent;
border-radius: $br-8; border-radius: $br-8;
background-color: transparent; background-color: transparent;
@ -46,32 +46,50 @@
stroke: var(--button-tertiary-foreground-color-active); stroke: var(--button-tertiary-foreground-color-active);
} }
} }
}
&.copy-wrapper { .copy-wrapper {
@include copyWrapper; @include buttonStyle;
height: fit-content; @include copyWrapperBase;
text-align: left; display: grid;
.icon-btn { grid-template-columns: 1fr $s-24;
position: absolute; grid-template-areas: "name button";
display: flex; width: 100%;
justify-content: center; height: fit-content;
align-items: center; text-align: left;
top: 0; .icon-btn {
right: 0; position: absolute;
height: 32px; display: flex;
width: 28px; justify-content: center;
svg { align-items: center;
@extend .button-icon-small; top: 0;
display: none; right: 0;
} height: $s-32;
width: $s-32;
svg {
@extend .button-icon-small;
display: none;
} }
&:hover { }
.icon-btn { &:hover {
svg { .icon-btn {
display: flex; svg {
stroke: var(--button-tertiary-foreground-color-active); display: flex;
} stroke: var(--button-tertiary-foreground-color-active);
} }
} }
} }
&:hover {
background-color: var(--color-background-tertiary);
color: var(--color-foreground-primary);
border: $s-1 solid var(--color-background-tertiary);
}
&:focus,
&:focus-visible {
outline: none;
border: $s-1 solid var(--button-tertiary-border-color-focus);
background-color: transparent;
color: var(--button-tertiary-foreground-color-focus);
}
} }

5
frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
View file

@ -89,12 +89,13 @@
.color-info, .color-info,
.color-row-copy-btn { .color-row-copy-btn {
@include copyWrapper; display: flex;
max-width: $s-144;
} }
.first-row { .first-row {
display: grid; display: grid;
grid-template-columns: 1fr $s-20; grid-template-columns: 1fr $s-24;
grid-template-areas: "name button"; grid-template-areas: "name button";
height: fit-content; height: fit-content;
width: 100%; width: 100%;

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

@ -80,7 +80,8 @@
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography")] (tr "inspect.attributes.typography")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)} [:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)
:class (stl/css :copy-btn-wrapper)}
[:div {:class (stl/css :button-children)} (:name typography)]]]]) [:div {:class (stl/css :button-children)} (:name typography)]]]])
(when (:font-id style) (when (:font-id style)