mirror of
https://github.com/penpot/penpot.git
synced 2025-05-22 13:37:22 +02: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]]
|
[app.util.i18n :as i18n :refer [tr]]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
|
|
||||||
|
(def ^:private detach-icon
|
||||||
|
(i/icon-xref :detach-refactor (stl/css :detach-icon)))
|
||||||
|
|
||||||
(defn opacity->string
|
(defn opacity->string
|
||||||
[opacity]
|
[opacity]
|
||||||
(if (= opacity :multiple)
|
(if (= opacity :multiple)
|
||||||
|
|
@ -189,14 +193,14 @@
|
||||||
:dnd-over-top (= (:over dprops) :top)
|
:dnd-over-top (= (:over dprops) :top)
|
||||||
:dnd-over-bot (= (:over dprops) :bot))
|
:dnd-over-bot (= (:over dprops) :bot))
|
||||||
:ref dref}
|
:ref dref}
|
||||||
[:span {:class (stl/css :color-info)}
|
[:div {:class (stl/css :color-info)}
|
||||||
[:span {:class (stl/css-case :color-name-wrapper true
|
[:div {:class (stl/css-case :color-name-wrapper true
|
||||||
:no-opacity (or disable-opacity
|
:no-opacity (or disable-opacity
|
||||||
(not opacity?))
|
(not opacity?))
|
||||||
:library-name-wrapper library-color?
|
:library-name-wrapper library-color?
|
||||||
:editing editing-text?
|
:editing editing-text?
|
||||||
:gradient-name-wrapper gradient-color?)}
|
:gradient-name-wrapper gradient-color?)}
|
||||||
[:span {:class (stl/css :color-bullet-wrapper)}
|
[:div {:class (stl/css :color-bullet-wrapper)}
|
||||||
[:& cbn/color-bullet {:color (cond-> color
|
[:& cbn/color-bullet {:color (cond-> color
|
||||||
(nil? color-name) (assoc
|
(nil? color-name) (assoc
|
||||||
:id nil
|
:id nil
|
||||||
|
|
@ -218,7 +222,7 @@
|
||||||
:on-pointer-enter #(reset! hover-detach true)
|
:on-pointer-enter #(reset! hover-detach true)
|
||||||
:on-pointer-leave #(reset! hover-detach false)
|
:on-pointer-leave #(reset! hover-detach false)
|
||||||
:on-click detach-value}
|
:on-click detach-value}
|
||||||
i/detach-refactor])]
|
detach-icon])]
|
||||||
|
|
||||||
;; Rendering a gradient
|
;; Rendering a gradient
|
||||||
gradient-color?
|
gradient-color?
|
||||||
|
|
|
||||||
|
|
@ -10,14 +10,16 @@
|
||||||
@include flexRow;
|
@include flexRow;
|
||||||
|
|
||||||
&.dnd-over-top {
|
&.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 {
|
&.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 {
|
.color-info {
|
||||||
|
--detach-icon-foreground-color: none;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: $s-2;
|
gap: $s-2;
|
||||||
|
|
@ -26,147 +28,153 @@
|
||||||
height: $s-32;
|
height: $s-32;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
.color-name-wrapper {
|
&:hover {
|
||||||
@extend .input-element;
|
--detach-icon-foreground-color: var(--input-foreground-color-active);
|
||||||
flex-grow: 1;
|
|
||||||
width: 100%;
|
.detach-btn,
|
||||||
border-radius: $br-8 0 0 $br-8;
|
.select-btn {
|
||||||
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;
|
|
||||||
background-color: transparent;
|
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;
|
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 {
|
.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;
|
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 {
|
&.editing {
|
||||||
border-radius: $br-8;
|
background-color: var(--input-background-color-active);
|
||||||
.color-input-wrapper {
|
|
||||||
border-radius: $br-8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--input-background-color-hover);
|
|
||||||
border: $s-1 solid var(--input-border-color-hover);
|
|
||||||
.color-bullet-wrapper,
|
.color-bullet-wrapper,
|
||||||
.color-name,
|
.color-name,
|
||||||
.detach-btn,
|
.detach-btn,
|
||||||
.color-input-wrapper {
|
.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);
|
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,
|
||||||
&:focus-within {
|
&:focus-within {
|
||||||
background-color: var(--input-background-color-focus);
|
background-color: var(--input-background-color-focus);
|
||||||
border: $s-1 solid var(--input-border-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 {
|
&:focus,
|
||||||
.detach-btn,
|
&:focus-within {
|
||||||
.select-btn {
|
background-color: var(--input-background-color-focus);
|
||||||
background-color: transparent;
|
border: $s-1 solid var(--input-border-color-focus);
|
||||||
svg {
|
&:hover {
|
||||||
stroke: var(--input-foreground-color-active);
|
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,
|
.remove-btn,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue