Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-07 23:08:24 -05:00
Code Issues Activity

Allow aligning dropwdown to the left

Browse source
This commit is contained in:
Florian Schroedl 2024-05-24 08:36:28 +02:00
parent 406e8d110c
commit 595831118d
4 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

@ -511,13 +511,14 @@
[:span {:class (stl/css :icon)} i/corner-radius]
[:& editable-select
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:on-token-remove on-border-radius-token-unapply
:class (stl/css :token-select)
:type "number"
:min 0
:input-class (stl/css :numeric-input)
:position :right
:min 0
:on-change on-radius-1-change
:on-token-remove on-border-radius-token-unapply
:options border-radius-options
:type "number"
:value (:rx values)}]]
@radius-multi?

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
View file

@ -109,6 +109,7 @@
.size {
@include flexRow;
position: relative;
}
.height,
@ -182,6 +183,7 @@
.radius-1 {
@extend .input-element;
width: $s-108;
position: relative;
}
.radius-4 {

13
frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
View file

@ -38,11 +38,13 @@
:else new-value)]
(set-value! new-value)))))
(mf/defc dropdown-select [{:keys [on-close element-id element-ref options on-select]}]
(mf/defc dropdown-select [{:keys [position on-close element-id element-ref options on-select]}]
[:& dropdown {:show true
:on-close on-close}
[:div {:class (stl/css :custom-select-dropdown)
:ref element-ref}
[:> :div {:class (stl/css-case :custom-select-dropdown true
:custom-select-dropdown-right (= position :right)
:custom-select-dropdown-left (= position :left))
:ref element-ref}
[:ul {:class (stl/css :custom-select-dropdown-list)}
(for [[index item] (d/enumerate options)]
(cond
@ -60,7 +62,7 @@
[:span {:class (stl/css :check-icon)} i/tick]])))]]])
(mf/defc editable-select
[{:keys [value type options class on-change placeholder on-blur input-class on-token-remove] :as params}]
[{:keys [value type options class on-change placeholder on-blur input-class on-token-remove position] :as params}]
(let [state* (mf/use-state {:id (uuid/next)
:is-open? false
:current-value value
@ -239,7 +241,8 @@
i/arrow])
(when (and is-open? (seq options))
[:& dropdown-select {:on-close close-dropdown
[:& dropdown-select {:position position
:on-close close-dropdown
:element-id element-id
:element-ref select-wrapper-ref
:options options

13
frontend/src/app/main/ui/workspace/tokens/editable_select.scss
View file

@ -9,7 +9,6 @@
.editable-select {
@extend .asset-element;
margin: 0;
position: relative;
display: flex;
height: calc($s-32 - 2px); // Fixes border being clipped by the input field
width: 100%;
@ -62,13 +61,21 @@
width: 0;
}
.custom-select-dropdown-left {
left: 0;
right: unset;
}
.custom-select-dropdown-right {
right: 0;
left: unset;
}
.custom-select-dropdown {
@extend .dropdown-wrapper;
max-height: $s-320;
width: auto;
margin-top: $s-4;
right: 0;
left: unset;
.separator {
margin: 0;