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

Merge pull request #3800 from penpot/alotor-ui-polish

Browse source 
New UI Polishing
This commit is contained in:
Eva Marco 2023-11-15 14:16:56 +01:00 • committed by GitHub
commit fe1a433440
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 82 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -68,6 +68,12 @@
editing-text* (mf/use-state false)
editing-text? (deref editing-text*)
opacity?
(and (not gradient-color?)
(not multiple-colors?)
(not library-color?)
(not disable-opacity))
on-focus
(mf/use-fn
(mf/deps on-focus)
@ -187,6 +193,7 @@
:ref dref}
[:span {:class (stl/css :color-info)}
[:span {:class (stl/css-case :color-name-wrapper true
:no-opacity (not opacity?)
:library-name-wrapper library-color?
:editing editing-text?
:gradient-name-wrapper gradient-color?)}
@ -238,16 +245,13 @@
:on-blur on-blur
:on-change handle-value-change}]])]
(when (and (not gradient-color?)
(not multiple-colors?)
(not library-color?))
(when opacity?
[:div {:class (stl/css :opacity-element-wrapper)}
[:span {:class (stl/css :icon-text)}
"%"]
[:> numeric-input* {:value (-> color :opacity opacity->string)
:className (stl/css :opacity-input)
:placeholder (tr "settings.multiple")
:placeholder "--"
:select-on-focus select-on-focus
:on-focus on-focus
:on-blur on-blur
@ -263,14 +267,7 @@
:on-click handle-select}
i/move-refactor])]
;; OLD CSS
[:div.row-flex.color-data {:title title
:class (dom/classnames
:dnd-over-top (= (:over dprops) :top)

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

@ -24,6 +24,9 @@
border-radius: $br-8 0 0 $br-8;
padding: 0;
margin-right: 0;
&.no-opacity {
border-radius: $br-8;
}
.color-bullet-wrapper {
height: $s-28;
padding: 0 $s-2 0 $s-8;
@ -115,6 +118,7 @@
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;
}