mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 23:49:45 -05:00
Merge pull request #4149 from penpot/xaviju-fix-margin-detach-button
🐛 Fix detach button position and color info overflow
This commit is contained in:
Eva Marco
GitHub
commit
862053738a
2 changed files with 140 additions and 128 deletions
|
|
@ -27,6 +27,10 @@
|
|||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
|
||||
(def ^:private detach-icon
|
||||
(i/icon-xref :detach-refactor (stl/css :detach-icon)))
|
||||
|
||||
(defn opacity->string
|
||||
[opacity]
|
||||
(if (= opacity :multiple)
|
||||
|
|
@ -189,14 +193,14 @@
|
|||
:dnd-over-top (= (:over dprops) :top)
|
||||
:dnd-over-bot (= (:over dprops) :bot))
|
||||
:ref dref}
|
||||
[:span {:class (stl/css :color-info)}
|
||||
[:span {:class (stl/css-case :color-name-wrapper true
|
||||
:no-opacity (or disable-opacity
|
||||
(not opacity?))
|
||||
:library-name-wrapper library-color?
|
||||
:editing editing-text?
|
||||
:gradient-name-wrapper gradient-color?)}
|
||||
[:span {:class (stl/css :color-bullet-wrapper)}
|
||||
[:div {:class (stl/css :color-info)}
|
||||
[:div {:class (stl/css-case :color-name-wrapper true
|
||||
:no-opacity (or disable-opacity
|
||||
(not opacity?))
|
||||
:library-name-wrapper library-color?
|
||||
:editing editing-text?
|
||||
:gradient-name-wrapper gradient-color?)}
|
||||
[:div {:class (stl/css :color-bullet-wrapper)}
|
||||
[:& cbn/color-bullet {:color (cond-> color
|
||||
(nil? color-name) (assoc
|
||||
:id nil
|
||||
|
|
@ -218,7 +222,7 @@
|
|||
:on-pointer-enter #(reset! hover-detach true)
|
||||
:on-pointer-leave #(reset! hover-detach false)
|
||||
:on-click detach-value}
|
||||
i/detach-refactor])]
|
||||
detach-icon])]
|
||||
|
||||
;; Rendering a gradient
|
||||
gradient-color?
|
||||
|
|
|
|||
|
|
@ -10,14 +10,16 @@
|
|||
@include flexRow;
|
||||
|
||||
&.dnd-over-top {
|
||||
border-top: $s-1 solid var(--layer-row-foreground-color-drag);
|
||||
border-block-start: $s-1 solid var(--layer-row-foreground-color-drag);
|
||||
}
|
||||
&.dnd-over-bot {
|
||||
border-bottom: $s-1 solid var(--layer-row-foreground-color-drag);
|
||||
border-block-end: $s-1 solid var(--layer-row-foreground-color-drag);
|
||||
}
|
||||
}
|
||||
|
||||
.color-info {
|
||||
--detach-icon-foreground-color: none;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-2;
|
||||
|
|
@ -26,147 +28,153 @@
|
|||
height: $s-32;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
|
||||
.color-name-wrapper {
|
||||
@extend .input-element;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
gap: $s-4;
|
||||
input {
|
||||
padding: 0;
|
||||
}
|
||||
.color-bullet-wrapper {
|
||||
height: $s-28;
|
||||
padding: 0 $s-2 0 $s-8;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
&:hover {
|
||||
--detach-icon-foreground-color: var(--input-foreground-color-active);
|
||||
|
||||
.detach-btn,
|
||||
.select-btn {
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.color-name {
|
||||
@include titleTipography;
|
||||
@include textEllipsis;
|
||||
padding-inline: $s-6;
|
||||
}
|
||||
}
|
||||
|
||||
.color-name-wrapper {
|
||||
@extend .input-element;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
padding: 0;
|
||||
margin-inline-end: 0;
|
||||
gap: $s-4;
|
||||
input {
|
||||
padding: 0;
|
||||
}
|
||||
.color-bullet-wrapper {
|
||||
height: $s-28;
|
||||
padding: 0 $s-2 0 $s-8;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.color-name {
|
||||
@include titleTipography;
|
||||
@include textEllipsis;
|
||||
padding-inline: $s-6;
|
||||
border-radius: $br-8;
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
.detach-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
margin-inline-start: auto;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
display: none;
|
||||
}
|
||||
.detach-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--detach-icon-foreground-color);
|
||||
}
|
||||
.color-input-wrapper {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-28;
|
||||
padding: 0 $s-0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
background-color: var(--input-background-color);
|
||||
color: var(--input-foreground-color);
|
||||
border-radius: $br-0;
|
||||
}
|
||||
&.no-opacity {
|
||||
border-radius: $br-8;
|
||||
.color-input-wrapper {
|
||||
border-radius: $br-8;
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
--detach-icon-foreground-color: var(--input-foreground-color-active);
|
||||
|
||||
background-color: var(--input-background-color-hover);
|
||||
border: $s-1 solid var(--input-border-color-hover);
|
||||
.color-bullet-wrapper,
|
||||
.color-name,
|
||||
.detach-btn,
|
||||
.color-input-wrapper {
|
||||
background-color: var(--input-background-color-hover);
|
||||
}
|
||||
.detach-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
display: none;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
.color-input-wrapper {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-28;
|
||||
padding: 0 $s-0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
background-color: var(--input-background-color);
|
||||
color: var(--input-foreground-color);
|
||||
border-radius: $br-0;
|
||||
}
|
||||
&.no-opacity {
|
||||
border-radius: $br-8;
|
||||
.color-input-wrapper {
|
||||
border-radius: $br-8;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--input-background-color-hover);
|
||||
border: $s-1 solid var(--input-border-color-hover);
|
||||
&.editing {
|
||||
background-color: var(--input-background-color-active);
|
||||
.color-bullet-wrapper,
|
||||
.color-name,
|
||||
.detach-btn,
|
||||
.color-input-wrapper {
|
||||
background-color: var(--input-background-color-hover);
|
||||
}
|
||||
.detach-btn {
|
||||
display: flex;
|
||||
svg {
|
||||
stroke: var(--input-foreground-color-active);
|
||||
}
|
||||
}
|
||||
&.editing {
|
||||
background-color: var(--input-background-color-active);
|
||||
.color-bullet-wrapper,
|
||||
.color-name,
|
||||
.detach-btn,
|
||||
.color-input-wrapper {
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
}
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
background-color: var(--input-background-color-focus);
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
background-color: var(--input-background-color-focus);
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
&:hover {
|
||||
background-color: var(--input-background-color-hover);
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
}
|
||||
}
|
||||
|
||||
&.editing {
|
||||
background-color: var(--input-background-color-active);
|
||||
&:hover {
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
.gradient-name-wrapper {
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
.color-name {
|
||||
@include flexRow;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
}
|
||||
}
|
||||
.library-name-wrapper {
|
||||
border-radius: $br-8;
|
||||
}
|
||||
.opacity-element-wrapper {
|
||||
@extend .input-element;
|
||||
width: $s-60;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
.opacity-input {
|
||||
padding: 0;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
min-width: $s-28;
|
||||
}
|
||||
.icon-text {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
margin-right: $s-4;
|
||||
padding-top: $s-2;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.detach-btn,
|
||||
.select-btn {
|
||||
background-color: transparent;
|
||||
svg {
|
||||
stroke: var(--input-foreground-color-active);
|
||||
}
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
background-color: var(--input-background-color-focus);
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
&:hover {
|
||||
background-color: var(--input-background-color-hover);
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
}
|
||||
}
|
||||
|
||||
&.editing {
|
||||
background-color: var(--input-background-color-active);
|
||||
&:hover {
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gradient-name-wrapper {
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
.color-name {
|
||||
@include flexRow;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
}
|
||||
}
|
||||
|
||||
.library-name-wrapper {
|
||||
border-radius: $br-8;
|
||||
}
|
||||
|
||||
.opacity-element-wrapper {
|
||||
@extend .input-element;
|
||||
width: $s-60;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
.opacity-input {
|
||||
padding: 0;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
min-width: $s-28;
|
||||
}
|
||||
.icon-text {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
margin-inline-end: $s-4;
|
||||
margin-block-start: $s-2;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-btn,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue