From 575aec209c1bafc386af945bfaef920b1d895d00 Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 1 Feb 2023 12:38:54 +0100 Subject: [PATCH 1/3] :bug: Fix button spacing on delete acount modal --- frontend/resources/styles/main/partials/modal.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index 456364fb6..be9028377 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -184,6 +184,7 @@ .modal-footer .action-buttons { justify-content: space-around; + gap: 15px; } .fields-container { From 82d6ba790cd5855bc7b4e13db9dae95085674d57 Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 1 Feb 2023 13:37:06 +0100 Subject: [PATCH 2/3] :bug: Fix button spacing on delete account modal --- CHANGES.md | 2 ++ frontend/resources/styles/main/partials/workspace.scss | 4 +++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGES.md b/CHANGES.md index ae136b8e8..66e155fe3 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -5,6 +5,8 @@ ### :bug: Bugs fixed - Fix components groups items show the component name in list mode [Taiga #4770](https://tree.taiga.io/project/penpot/issue/4770) - 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) ## 1.17.0 diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index 1128ba62f..1331b47e0 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -17,7 +17,7 @@ $height-palette-max: 80px; #workspace { width: 100vw; - height: 100vh; + height: 100%; user-select: none; background-color: $color-canvas; display: grid; @@ -37,6 +37,8 @@ $height-palette-max: 80px; .left-toolbar { grid-area: toolbar; width: $width-left-toolbar; + overflow-y: scroll; + overflow-x: hidden; } .settings-bar.settings-bar-left { From f98630a46bfe98b8cfe65c30f6b96cb8f4662791 Mon Sep 17 00:00:00 2001 From: Eva Date: Thu, 2 Feb 2023 09:36:35 +0100 Subject: [PATCH 3/3] :bug: Fix invitations input on team management and onboarding modal --- CHANGES.md | 2 +- .../styles/main/partials/dashboard-team.scss | 30 +++++++++++- .../resources/styles/main/partials/modal.scss | 46 ++++++++++++++++++- .../src/app/main/ui/components/forms.cljs | 30 +++++++----- 4 files changed, 94 insertions(+), 14 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 66e155fe3..0d9a4406b 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -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 diff --git a/frontend/resources/styles/main/partials/dashboard-team.scss b/frontend/resources/styles/main/partials/dashboard-team.scss index ed8733583..edc8d4f5a 100644 --- a/frontend/resources/styles/main/partials/dashboard-team.scss +++ b/frontend/resources/styles/main/partials/dashboard-team.scss @@ -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 { diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss index be9028377..580ffe0f6 100644 --- a/frontend/resources/styles/main/partials/modal.scss +++ b/frontend/resources/styles/main/partials/modal.scss @@ -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; + } } } } diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index f25358719..fab3f476c 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/frontend/src/app/main/ui/components/forms.cljs @@ -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]]])])]))