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

🐛 Fix color palette inner scroll width

Browse source
This commit is contained in:
Belén Albeza 2024-06-03 15:28:24 +02:00
parent 8f0fd0a6e2
commit 258aaf81d5
3 changed files with 28 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/app/main/ui/workspace/color_palette.cljs
View file

@ -41,27 +41,29 @@
state (mf/use-state {:show-menu false}) state (mf/use-state {:show-menu false})
offset-step (cond offset-step (cond
(<= size 64) 40 (<= size 64) 40
(<= size 72) 88 (<= size 80) 72
(<= size 80) 88 :else 72)
:else 88)
buttons-size (cond buttons-size (cond
(<= size 64) 164 (<= size 64) 164
(<= size 72) 164
(<= size 80) 132
:else 132) :else 132)
width (- width buttons-size) width (- width buttons-size)
visible (int (/ width offset-step)) visible (int (/ width offset-step))
show-arrows? (> (count current-colors) visible) show-arrows? (> (count current-colors) visible)
visible (if show-arrows?
(int (/ (- width 48) offset-step))
visible)
offset (:offset @state 0) offset (:offset @state 0)
max-offset (- (count current-colors) max-offset (- (count current-colors)
visible) visible)
container (mf/use-ref nil) container (mf/use-ref nil)
bullet-size (cond bullet-size (cond
(<= size 64) "32" (<= size 64) "32"
(<= size 72) "28" (<= size 72) "28"
(<= size 80) "32" (<= size 80) "32"
:else "32") :else "32")
color-cell-width (cond
(<= size 64) 32
:else 64)
on-left-arrow-click on-left-arrow-click
(mf/use-callback (mf/use-callback
@ -103,7 +105,7 @@
[:div {:class (stl/css-case :color-palette true [:div {:class (stl/css-case :color-palette true
:no-text (< size 64)) :no-text (< size 64))
:style #js {"--bullet-size" (dm/str bullet-size "px")}} :style #js {"--bullet-size" (dm/str bullet-size "px") "--color-cell-width" (dm/str color-cell-width "px")}}
(when show-arrows? (when show-arrows?
[:button {:class (stl/css :left-arrow) [:button {:class (stl/css :left-arrow)

19
frontend/src/app/main/ui/workspace/color_palette.scss
View file

@ -73,28 +73,27 @@
} }
.color-palette-content { .color-palette-content {
display: flex;
overflow: hidden; overflow: hidden;
}
.color-palette-inside { .color-palette-inside {
display: flex; display: grid;
grid-auto-flow: column;
grid-auto-columns: var(--color-cell-width);
gap: $s-8; gap: $s-8;
} }
.color-cell {
.color-cell {
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
justify-items: center; justify-items: center;
height: 100%; height: 100%;
width: $s-80;
&.is-not-library-color {
width: $s-64;
}
&.no-text { &.no-text {
@include flexCenter; @include flexCenter;
width: $s-32; width: $s-32;
} }
}
} }
.color-palette-empty { .color-palette-empty {

1
frontend/src/app/main/ui/workspace/palette.cljs
View file

@ -125,7 +125,6 @@
(dom/blur! node)))) (dom/blur! node))))
any-palette? (or color-palette? text-palette?) any-palette? (or color-palette? text-palette?)
size-classname size-classname
(cond (cond
(<= size 64) (stl/css :small-palette) (<= size 64) (stl/css :small-palette)