3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-21 20:16:14 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #4149 from penpot/xaviju-fix-margin-detach-button

Browse source 
🐛 Fix detach button position and color info overflow
This commit is contained in:
Eva Marco 2024-02-15 15:59:42 +01:00 • committed by GitHub
commit 862053738a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 140 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -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?

64
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
View file

@ -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,14 +28,25 @@
height: $s-32; height: $s-32;
width: 100%; width: 100%;
flex-grow: 1; flex-grow: 1;
min-width: 0;
.color-name-wrapper { &:hover {
--detach-icon-foreground-color: var(--input-foreground-color-active);
.detach-btn,
.select-btn {
background-color: transparent;
}
}
}
.color-name-wrapper {
@extend .input-element; @extend .input-element;
flex-grow: 1; flex-grow: 1;
width: 100%; width: 100%;
border-radius: $br-8 0 0 $br-8; border-radius: $br-8 0 0 $br-8;
padding: 0; padding: 0;
margin-right: 0; margin-inline-end: 0;
gap: $s-4; gap: $s-4;
input { input {
padding: 0; padding: 0;
@ -43,6 +56,8 @@
padding: 0 $s-2 0 $s-8; padding: 0 $s-2 0 $s-8;
border-radius: $br-8 0 0 $br-8; border-radius: $br-8 0 0 $br-8;
background-color: transparent; background-color: transparent;
display: flex;
align-items: center;
&:hover { &:hover {
background-color: transparent; background-color: transparent;
} }
@ -58,11 +73,13 @@
@extend .button-tertiary; @extend .button-tertiary;
height: $s-28; height: $s-28;
width: $s-28; width: $s-28;
margin-inline-start: auto;
border-radius: 0 $br-8 $br-8 0; border-radius: 0 $br-8 $br-8 0;
display: none; display: none;
svg {
@extend .button-icon;
} }
.detach-icon {
@extend .button-icon;
stroke: var(--detach-icon-foreground-color);
} }
.color-input-wrapper { .color-input-wrapper {
@include titleTipography; @include titleTipography;
@ -84,6 +101,8 @@
} }
} }
&:hover { &:hover {
--detach-icon-foreground-color: var(--input-foreground-color-active);
background-color: var(--input-background-color-hover); background-color: var(--input-background-color-hover);
border: $s-1 solid var(--input-border-color-hover); border: $s-1 solid var(--input-border-color-hover);
.color-bullet-wrapper, .color-bullet-wrapper,
@ -94,9 +113,6 @@
} }
.detach-btn { .detach-btn {
display: flex; display: flex;
svg {
stroke: var(--input-foreground-color-active);
}
} }
&.editing { &.editing {
background-color: var(--input-background-color-active); background-color: var(--input-background-color-active);
@ -130,18 +146,21 @@
border: $s-1 solid var(--input-border-color-active); border: $s-1 solid var(--input-border-color-active);
} }
} }
} }
.gradient-name-wrapper {
.gradient-name-wrapper {
border-radius: 0 $br-8 $br-8 0; border-radius: 0 $br-8 $br-8 0;
.color-name { .color-name {
@include flexRow; @include flexRow;
border-radius: 0 $br-8 $br-8 0; border-radius: 0 $br-8 $br-8 0;
} }
} }
.library-name-wrapper {
.library-name-wrapper {
border-radius: $br-8; border-radius: $br-8;
} }
.opacity-element-wrapper {
.opacity-element-wrapper {
@extend .input-element; @extend .input-element;
width: $s-60; width: $s-60;
border-radius: 0 $br-8 $br-8 0; border-radius: 0 $br-8 $br-8 0;
@ -153,19 +172,8 @@
.icon-text { .icon-text {
@include flexCenter; @include flexCenter;
height: $s-32; height: $s-32;
margin-right: $s-4; margin-inline-end: $s-4;
padding-top: $s-2; margin-block-start: $s-2;
}
}
&:hover {
.detach-btn,
.select-btn {
background-color: transparent;
svg {
stroke: var(--input-foreground-color-active);
}
}
} }
} }