Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 17:21:17 -05:00
Code Issues 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;
box-shadow: 0px 4px 8px rgba($color-black, 0.25);
border-radius: 8px;
width: 450px;
width: 500px;
position: fixed;
form {
@ -23,9 +23,12 @@
}
.custom-select {
width: 155px;
width: 180px;
overflow: hidden;
justify-content: normal;
select {
height: auto;
}
}
.action-buttons {

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

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

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

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

2
frontend/src/app/main/ui/dashboard/team.cljs
View file

@ -118,7 +118,7 @@
:on-error (partial on-error form)}]
(st/emit! (dd/invite-team-member (with-meta params mdata))
(dd/fetch-team-invitations))))]
[:div.modal.dashboard-invite-modal.form-container
[:& fm/form {:on-submit on-submit :form form}
[:div.title