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

🐛 Fix invitations input on team management and onboarding modal

Browse source
This commit is contained in:
Eva 2023-02-02 09:36:35 +01:00
parent 82d6ba790c
commit f98630a46b
4 changed files with 94 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGES.md
View file

@ -7,7 +7,7 @@
- Fix typing CMD+Z on MacOS turns the cursor into a Zoom cursor [Taiga #4778](https://tree.taiga.io/project/penpot/issue/4778)
- Fix white space on small screens [Taiga #4774](https://tree.taiga.io/project/penpot/issue/4774)
- Fix button spacing on delete acount modal [Taiga #4762](https://tree.taiga.io/project/penpot/issue/4762)
- Fix invitations input on team management and onboarding modal [Taiga #4760](https://tree.taiga.io/project/penpot/issue/4760)
## 1.17.0

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

@ -29,7 +29,35 @@
.custom-input {
width: 100%;
height: 115px;
min-height: 116px;
max-height: 176px;
overflow-y: hidden;
input {
&.no-padding {
padding-top: 12px;
}
min-height: 40px;
}
.selected-items {
gap: 8px;
padding: 8px;
max-height: 132px;
overflow-y: scroll;
.selected-item {
.around {
height: 24px;
display: flex;
align-items: center;
justify-content: flex-start;
width: fit-content;
.icon {
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
}
.custom-select {

46
frontend/resources/styles/main/partials/modal.scss
View file

@ -1542,8 +1542,52 @@
.onboarding-team-members {
.team-left {
padding: 42px 64px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: auto;
form {
margin-top: 32px;
margin-top: 5px;
.invite-row {
.custom-input {
width: 100%;
min-height: 80px;
height: fit-content;
max-height: 176px;
overflow-y: hidden;
input {
&.no-padding {
padding-top: 12px;
}
min-height: 40px;
}
.selected-items {
gap: 7px;
padding: 7px;
max-height: 132px;
overflow-y: scroll;
.selected-item {
.around {
height: 24px;
display: flex;
align-items: center;
justify-content: flex-start;
width: fit-content;
.icon {
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
}
}
.buttons {
margin-top: 12px;
}
}
}
}

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

@ -130,7 +130,7 @@
(cond
(and touched? (:message error))
[:span.error {:id (dm/str "error-" input-name)
:data-test (clojure.string/join [data-test "-error"]) }(tr (:message error))]
:data-test (clojure.string/join [data-test "-error"])} (tr (:message error))]
(string? hint)
[:span.hint hint])]]))
@ -328,7 +328,13 @@
remove-item!
(mf/use-fn
(fn [item]
(swap! items #(into [] (remove (fn [x] (= x item))) %))))]
(swap! items #(into [] (remove (fn [x] (= x item))) %))))
manage-key-down
(mf/use-fn
(fn [item event]
(when (kbd/enter? event)
(remove-item! item))))]
(mf/with-effect [result @value]
(let [val (cond-> @value trim str/trim)
@ -337,14 +343,6 @@
(update-form! values)))
[:div {:class klass}
(when-let [items (seq @items)]
[:div.selected-items
(for [item items]
[:div.selected-item {:key (:text item)}
[:span.around {:class (when-not (:valid item) "invalid")}
[:span.text (:text item)]
[:span.icon {:on-click #(remove-item! item)} i/cross]]])])
[:input {:id (name input-name)
:class in-klass
:type "text"
@ -355,4 +353,14 @@
:value @value
:on-change on-change
:placeholder (when empty? label)}]
[:label {:for (name input-name)} label]]))
[:label {:for (name input-name)} label]
(when-let [items (seq @items)]
[:div.selected-items
(for [item items]
[:div.selected-item {:key (:text item)
:tab-index "0"
:on-key-down (partial manage-key-down item)}
[:span.around {:class (when-not (:valid item) "invalid")}
[:span.text (:text item)]
[:span.icon {:on-click #(remove-item! item)} i/cross]]])])]))