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

✨ Small changes on multi-input behaviour and styles

Browse source
This commit is contained in:
Pablo Alba 2022-03-04 14:56:02 +01:00
parent cfe657d853
commit 7e26e2bc21
4 changed files with 19 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/resources/styles/main/partials/dashboard-team.scss
View file

@ -4,7 +4,7 @@
padding: 14px; padding: 14px;
box-shadow: 0px 4px 8px rgba($color-black, 0.25); box-shadow: 0px 4px 8px rgba($color-black, 0.25);
border-radius: 8px; border-radius: 8px;
width: 450px; width: 500px;
position: fixed; position: fixed;
form { form {
@ -23,9 +23,12 @@
} }
.custom-select { .custom-select {
width: 155px; width: 180px;
overflow: hidden; overflow: hidden;
justify-content: normal; justify-content: normal;
select {
height: auto;
}
} }
.action-buttons { .action-buttons {

4
frontend/resources/styles/main/partials/forms.scss
View file

@ -230,6 +230,8 @@ textarea {
.custom-multi-input { .custom-multi-input {
border-radius: 2px; border-radius: 2px;
border: 1px solid $color-gray-20; border: 1px solid $color-gray-20;
max-height: 300px;
overflow-y: auto;
&.invalid { &.invalid {
label { label {
@ -253,7 +255,7 @@ textarea {
} }
.selected-item { .selected-item {
// margin-bottom: 5px; width: 100%;
&:not(:last-child) { &:not(:last-child) {
margin-right: 3px; margin-right: 3px;

19
frontend/src/app/main/ui/components/forms.cljs
View file

@ -141,9 +141,9 @@
:focus @focus? :focus @focus?
:valid (and touched? (not error)) :valid (and touched? (not error))
:invalid (and touched? error) :invalid (and touched? error)
:disabled disabled :disabled disabled)
;; :empty (str/empty? value) ;; :empty (str/empty? value)
)
on-focus #(reset! focus? true) on-focus #(reset! focus? true)
on-change (fn [event] on-change (fn [event]
@ -278,7 +278,7 @@
(let [value (str/join " " (map :text items))] (let [value (str/join " " (map :text items))]
(fm/update-input-value! form input-name value)))) (fm/update-input-value! form input-name value))))
on-key-up on-key-down
(mf/use-fn (mf/use-fn
(mf/deps @value) (mf/deps @value)
(fn [event] (fn [event]
@ -309,12 +309,13 @@
remove-item! remove-item!
(mf/use-fn (mf/use-fn
(fn [item] (fn [item]
(swap! items #(into #{} (remove (fn [x] (= x item))) %))))] (swap! items #(into [] (remove (fn [x] (= x item))) %))))]
(mf/with-effect [result] (mf/with-effect [result @value]
(if (every? :valid result) (let [val (cond-> @value trim str/trim)
(update-form! result) values (conj-dedup result {:text val :valid (valid-item-fn val)})
(update-form! []))) values (filterv #(:valid %) values)]
(update-form! values)))
[:div {:class klass} [:div {:class klass}
(when-let [items (seq @items)] (when-let [items (seq @items)]
@ -331,7 +332,7 @@
:auto-focus true :auto-focus true
:on-focus on-focus :on-focus on-focus
:on-blur on-blur :on-blur on-blur
:on-key-up on-key-up :on-key-down on-key-down
:value @value :value @value
:on-change on-change :on-change on-change
:placeholder (when empty? label)}] :placeholder (when empty? label)}]