github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-05 16:18:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix move org dialog must be select

Browse Source
This commit is contained in:
Pablo Alba 2026-05-05 11:27:48 +02:00 committed by Pablo Alba
parent 7d923f8e1d
commit 3431aee177
5 changed files with 63 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/app/main/ui/dashboard/team.cljs
View File

@ -810,7 +810,7 @@
(mf/defc select-organization-modal
{::mf/register modal/components
::mf/register-as :select-organization-modal}
[{:keys [organizations current-organization-id on-confirm title-key choose-key placeholder-key accept-key cancel-key]}]
[{:keys [organizations current-organization-id on-confirm title-key text-key choose-key placeholder-key accept-key cancel-key]}]
(let [valid-organizations (mf/with-memo [organizations]
(remove #(= (:id %) current-organization-id) organizations))
options (mf/with-memo [valid-organizations]
@ -844,12 +844,16 @@
[:button {:class (stl/css :modal-close-btn)
:on-click modal/hide!} deprecated-icon/close]]
(when text-key
[:div {:class (stl/css :modal-content :modal-select-org-text)} (tr text-key)])
[:div
[:div {:class (stl/css :modal-select-org-content)}
(tr choose-key)]
[:> combobox* {:id "selected-id"
:class (stl/css :team-member)
:options options
:select-only true
:default-selected (or (some-> (get-in @form [:data :selected-id]) str) "")
:placeholder (tr placeholder-key)
:on-change on-change}]]
@ -1450,6 +1454,7 @@
:current-organization-id (:organization-id team)
:on-confirm on-add-team-to-org-confirm
:title-key "dashboard.change-org-modal.title"
:text-key "dashboard.change-org-modal.text"
:choose-key "dashboard.change-org-modal.choose"
:placeholder-key "dashboard.change-org-modal.select"
:accept-key "dashboard.change-org-modal.accept"

8
frontend/src/app/main/ui/dashboard/team.scss
View File

@ -880,7 +880,7 @@
}
.modal-select-org-content {
@include t.use-typography("body-medium");
@include t.use-typography("body-large");
color: var(--color-foreground-secondary);
overflow: auto;
@ -895,6 +895,12 @@
height: $sz-40;
}
.modal-select-org-text {
@include t.use-typography("body-large");
color: var(--color-foreground-secondary);
}
// ORGANIZATIONS SETTINGS
.org-block-content {

65
frontend/src/app/main/ui/ds/controls/combobox.cljs
View File

@ -29,19 +29,21 @@
[:placeholder {:optional true} :string]
[:disabled {:optional true} :boolean]
[:default-selected {:optional true} :string]
[:select-only {:optional true} :boolean]
[:on-change {:optional true} fn?]
[:empty-to-end {:optional true} [:maybe :boolean]]
[:has-error {:optional true} :boolean]])
(mf/defc combobox*
{::mf/schema schema:combobox}
[{:keys [id options class placeholder disabled has-error default-selected max-length empty-to-end on-change] :rest props}]
[{:keys [id options class placeholder disabled has-error default-selected select-only max-length empty-to-end on-change] :rest props}]
(let [;; NOTE: we use mfu/bean here for transparently handle
;; options provide as clojure data structures or javascript
;; plain objects and lists.
options (if (array? options)
(mfu/bean options)
options)
select-only (d/nilv select-only false)
empty-to-end (d/nilv empty-to-end false)
is-open* (mf/use-state false)
@ -64,13 +66,15 @@
value-ref (mf/use-ref nil)
dropdown-options
(mf/with-memo [options filter-id]
(->> options
(filterv (fn [option]
(let [option (str/lower (get option :label))
filter (str/lower filter-id)]
(str/includes? option filter))))
(not-empty)))
(mf/with-memo [options filter-id select-only]
(if select-only
(not-empty options)
(->> options
(filterv (fn [option]
(let [option (str/lower (get option :label))
filter (str/lower filter-id)]
(str/includes? option filter))))
(not-empty))))
set-option-ref
(mf/use-fn
@ -113,7 +117,7 @@
on-blur
(mf/use-fn
(mf/deps on-change options selected-id)
(mf/deps on-change options selected-id select-only)
(fn [event]
(dom/stop-propagation event)
(let [target (dom/get-related-target event)
@ -125,9 +129,11 @@
(when-let [input-node (mf/ref-val input-ref)]
(let [input-value (dom/get-input-value input-node)
selected-option (d/seek #(= selected-id (get % :id)) options)
value (if (some? selected-option)
value (if select-only
selected-id
input-value)]
(if (some? selected-option)
selected-id
input-value))]
(on-change value))))))))
on-input-click
@ -149,10 +155,18 @@
on-input-key-down
(mf/use-fn
(mf/deps is-open focused-id disabled)
(mf/deps is-open focused-id disabled select-only)
(fn [event]
(dom/stop-propagation event)
(when-not disabled
(when (and select-only
(not (kbd/down-arrow? event))
(not (kbd/up-arrow? event))
(not (kbd/home? event))
(not (kbd/enter? event))
(not (kbd/esc? event))
(not (kbd/tab? event)))
(dom/prevent-default event))
(let [options (mf/ref-val options-ref)
len (count options)
index (d/index-of-pred options #(= focused-id (get % :id)))
@ -201,15 +215,17 @@
on-input-change
(mf/use-fn
(mf/deps select-only)
(fn [event]
(dom/stop-propagation event)
(let [value (-> event
dom/get-target
dom/get-value)]
(mf/set-ref-val! value-ref value)
(reset! selected-id* value)
(reset! filter-id* value)
(reset! focused-id* nil))))
(when-not select-only
(let [value (-> event
dom/get-target
dom/get-value)]
(mf/set-ref-val! value-ref value)
(reset! selected-id* value)
(reset! filter-id* value)
(reset! focused-id* nil)))))
selected-option
(mf/with-memo [options selected-id]
@ -268,16 +284,19 @@
:role "combobox"
:class (stl/css :input)
:auto-complete "off"
:aria-autocomplete "both"
:aria-autocomplete (if select-only "none" "both")
:aria-expanded is-open
:aria-controls listbox-id
:aria-activedescendant focused-id
:data-testid "combobox-input"
:max-length (d/nilv max-length max-input-length)
:disabled disabled
:value (if (str/empty? (:id selected-option))
(d/nilv selected-id "")
(d/nilv (:label selected-option) ""))
:read-only select-only
:value (if select-only
(d/nilv (:label selected-option) "")
(if (str/empty? (:id selected-option))
(d/nilv selected-id "")
(d/nilv (:label selected-option) "")))
:placeholder placeholder
:on-change on-input-change
:on-click on-input-click

5
frontend/translations/en.po
View File

@ -1157,7 +1157,10 @@ msgid "dashboard.select-org-modal.accept"
msgstr "ADD TO ORGANIZATION"
msgid "dashboard.change-org-modal.title"
msgstr "CHANGE TEAM'S ORGANIZATION"
msgstr "Change team's organization"
msgid "dashboard.change-org-modal.text"
msgstr "Projects and files will remain available to team members. The team will get the configuration from the new organization."
msgid "dashboard.change-org-modal.choose"
msgstr "Move to:"

5
frontend/translations/es.po
View File

@ -1161,7 +1161,10 @@ msgid "dashboard.select-org-modal.accept"
msgstr "AÑADIR A UNA ORGANIZACIÓN"
msgid "dashboard.change-org-modal.title"
msgstr "CAMBIAR EL EQUIPO DE ORGANIZACIÓN"
msgstr "Cambiar el equipo de organización"
msgid "dashboard.change-org-modal.text"
msgstr "Los miembros del equipo seguirán teniendo acceso a los proyectos y ficheros. El equipo tendrá la configuración de la nueva organización."
msgid "dashboard.change-org-modal.choose"
msgstr "Mover a:"