Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-25 07:58:49 -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;
color: var(--color-foreground-primary);
text-align: left;
display: grid;
grid-template-columns: 1fr 22px;
grid-template-areas: "name button";
width: 100%;
margin: 0;
padding: 0;
height: fit-content;

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

@ -97,8 +97,7 @@
color: var(--menu-foreground-color);
}
@mixin copyWrapper {
@include flexColumn;
@mixin copyWrapperBase {
position: relative;
min-height: $s-32;
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))]
;; On unmount we dispose the timer
#(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)))
:on-click #(when-not @just-copied
(reset! just-copied true)

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

@ -10,7 +10,7 @@
@include buttonStyle;
@include flexCenter;
height: $s-32;
width: $s-28;
width: $s-32;
border: $s-1 solid transparent;
border-radius: $br-8;
background-color: transparent;
@ -46,32 +46,50 @@
stroke: var(--button-tertiary-foreground-color-active);
}
}
}
&.copy-wrapper {
@include copyWrapper;
height: fit-content;
text-align: left;
.icon-btn {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
right: 0;
height: 32px;
width: 28px;
svg {
@extend .button-icon-small;
display: none;
}
.copy-wrapper {
@include buttonStyle;
@include copyWrapperBase;
display: grid;
grid-template-columns: 1fr $s-24;
grid-template-areas: "name button";
width: 100%;
height: fit-content;
text-align: left;
.icon-btn {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
right: 0;
height: $s-32;
width: $s-32;
svg {
@extend .button-icon-small;
display: none;
}
&:hover {
.icon-btn {
svg {
display: flex;
stroke: var(--button-tertiary-foreground-color-active);
}
}
&:hover {
.icon-btn {
svg {
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-row-copy-btn {
@include copyWrapper;
display: flex;
max-width: $s-144;
}
.first-row {
display: grid;
grid-template-columns: 1fr $s-20;
grid-template-columns: 1fr $s-24;
grid-template-areas: "name button";
height: fit-content;
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)}
(tr "inspect.attributes.typography")]
[: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)]]]])
(when (:font-id style)