From a4ce90e855078836156482cc9d8a15f39c3d32b3 Mon Sep 17 00:00:00 2001 From: Bianca Nenciu Date: Wed, 21 Dec 2022 14:49:24 +0200 Subject: [PATCH] UX: Improve assign modal design (#403) Implements a new design that improves the user experience: - add a clear cancel button - add an indication the note is optional - change the plus icon to a search icon - show an error when the user tries to assign without choosing an assignee - move suggestions to default search results - focus search input when modal is displayed --- .../controllers/assign-user.js | 11 +++- .../initializers/extend-for-assigns.js | 5 +- .../discourse/services/task-actions.js | 4 -- .../discourse/templates/modal/assign-user.hbs | 57 ++++++++++--------- assets/stylesheets/assigns.scss | 52 ++++++++--------- config/locales/client.en.yml | 8 +-- .../acceptance/assign-enabled-test.js | 4 -- test/javascripts/unit/task-actions-test.js | 1 - 8 files changed, 71 insertions(+), 71 deletions(-) diff --git a/assets/javascripts/discourse-assign/controllers/assign-user.js b/assets/javascripts/discourse-assign/controllers/assign-user.js index c14b835..08aba02 100644 --- a/assets/javascripts/discourse-assign/controllers/assign-user.js +++ b/assets/javascripts/discourse-assign/controllers/assign-user.js @@ -15,10 +15,13 @@ export default Controller.extend(ModalFunctionality, { taskActions: service(), autofocus: not("capabilities.touch"), assigneeName: or("model.username", "model.group_name"), + assigneeError: false, init() { this._super(...arguments); - this.allowedGroups = []; + + this.set("allowedGroups", []); + this.set("assigneeError", false); ajax("/assign/suggestions").then((data) => { if (this.isDestroying || this.isDestroyed) { @@ -77,6 +80,11 @@ export default Controller.extend(ModalFunctionality, { return this.bulkAction(this.model.username); } + if (!this.assigneeName) { + this.set("assigneeError", true); + return; + } + let path = "/assign/assign"; if (isEmpty(this.get("model.username"))) { @@ -136,6 +144,7 @@ export default Controller.extend(ModalFunctionality, { }, setGroupOrUser(name) { + this.set("assigneeError", false); if (this.allowedGroupsForAssignment.includes(name)) { this.setProperties({ "model.username": null, diff --git a/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js b/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js index 6c3f0bd..cdd4645 100644 --- a/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js +++ b/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js @@ -924,10 +924,7 @@ export default { actions: { showReAssign() { this.set("assignUser.isBulkAction", true); - this.set("assignUser.model", { - username: "", - description: "discourse_assign.assign_bulk_modal.description", - }); + this.set("assignUser.model", { username: "" }); this.send("changeBulkTemplate", "modal/assign-user"); }, unassignTopics() { diff --git a/assets/javascripts/discourse/services/task-actions.js b/assets/javascripts/discourse/services/task-actions.js index f906008..7baf2bb 100644 --- a/assets/javascripts/discourse/services/task-actions.js +++ b/assets/javascripts/discourse/services/task-actions.js @@ -29,10 +29,6 @@ export default Service.extend({ this.i18nSuffix(options.targetType) + `.${options.isAssigned ? "reassign_title" : "title"}`, model: { - description: - `discourse_assign.${options.isAssigned ? "reassign" : "assign"}` + - this.i18nSuffix(options.targetType) + - ".description", reassign: options.isAssigned, username: target.assigned_to_user?.username, group_name: target.assigned_to_group?.name, diff --git a/assets/javascripts/discourse/templates/modal/assign-user.hbs b/assets/javascripts/discourse/templates/modal/assign-user.hbs index b48336e..352cd70 100644 --- a/assets/javascripts/discourse/templates/modal/assign-user.hbs +++ b/assets/javascripts/discourse/templates/modal/assign-user.hbs @@ -1,31 +1,32 @@ {{#d-modal-body class="assign"}}
-

{{i18n model.description}}

- {{email-group-user-chooser - autocomplete="off" - value=assigneeName - onChange=(action "assignUsername") - autofocus="autofocus" - showUserStatus=true - options=(hash - mobilePlacementStrategy="absolute" - filterPlaceholder=placeholderKey - includeGroups=true - customSearchOptions=(hash assignableGroups=true) - groupMembersOf=allowedGroups - maximum=1 - autofocus=autofocus - tabindex=1 - ) - }} -
- {{#each assignSuggestions as |user|}} - - {{avatar user imageSize="small"}} - {{decorate-username-selector user.username}} - - {{/each}} +
+ + {{email-group-user-chooser + autocomplete="off" + value=assigneeName + onChange=(action "assignUsername") + autofocus="autofocus" + showUserStatus=true + caretIcon="search" + options=(hash + mobilePlacementStrategy="absolute" + filterPlaceholder=placeholderKey + includeGroups=true + customSearchOptions=(hash assignableGroups=true defaultSearchResults=this.assignSuggestions) + groupMembersOf=allowedGroups + maximum=1 + autofocus=autofocus + tabindex=1 + ) + }} + {{#if this.assigneeError}} + + {{d-icon "exclamation-triangle"}} {{i18n "discourse_assign.assign_modal.choose_assignee"}} + + {{/if}}
+ {{#if this.statusEnabled}}
@@ -37,8 +38,11 @@ }}
{{/if}} +
- + {{textarea id="assign-modal-note" value=model.note key-down=(action "handleTextAreaKeydown")}}
@@ -52,4 +56,5 @@ class="btn-primary" disabled=disabled }} +
diff --git a/assets/stylesheets/assigns.scss b/assets/stylesheets/assigns.scss index 70d120c..9556383 100644 --- a/assets/stylesheets/assigns.scss +++ b/assets/stylesheets/assigns.scss @@ -66,37 +66,37 @@ margin-left: 5px; } -.assign.modal-body .email-group-user-chooser { - display: block; - width: 300px; - margin-top: 5px; -} - -.assign-user-modal p { - margin-top: 0; -} - -.assign-suggestions { - margin-top: 15px; - margin-bottom: 15px; - - img { - margin-right: 5px; - cursor: pointer; +.assign-user-modal { + .modal-inner-container { + width: 400px; } - .groups { - margin-top: 5px; - a { - margin-right: 5px; + label { + font-weight: bold; + + .label-optional { + color: var(--primary-medium); + font-weight: normal; } } - .on-holiday { - position: absolute; - margin-left: -18px; - margin-top: 14px; - color: var(--primary-medium); + .email-group-user-chooser { + width: 100%; + + .caret-icon { + color: var(--primary-medium); + } + } + + .control-group.assignee-error { + .select-kit-header { + border-color: var(--danger); + } + + .error-label { + color: var(--danger); + font-size: var(--font-down-1); + } } } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index b26c190..558bd68 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -50,19 +50,17 @@ en: help: "Edit assignment details" reassign_modal: title: "Reassign Topic" - description: "Enter the name of the user you'd like to Reassign this topic" assign_modal: title: "Assign Topic" reassign_title: "Reassign Topic" - description: "Enter the name of the user you'd like to assign this topic" assign: "Assign" + assignee_label: Assignee + choose_assignee: Choose a user to assign. note_label: Note + optional_label: "(optional)" status_label: Status assign_post_modal: title: "Assign Post" - description: "Enter the name of the user you'd like to assign this post" - assign_bulk_modal: - description: "Enter the name of the user you'd like to assign these topics" claim: title: "claim" help: "Assign topic to yourself" diff --git a/test/javascripts/acceptance/assign-enabled-test.js b/test/javascripts/acceptance/assign-enabled-test.js index cf15efa..a628e23 100644 --- a/test/javascripts/acceptance/assign-enabled-test.js +++ b/test/javascripts/acceptance/assign-enabled-test.js @@ -46,8 +46,6 @@ acceptance("Discourse Assign | Assign mobile", function (needs) { assert.ok(menu.rowByValue("assign").exists()); await menu.selectRowByValue("assign"); assert.ok(exists(".assign.modal-body"), "assign modal opens"); - - await click(".assign-suggestions .avatar"); }); }); @@ -102,8 +100,6 @@ acceptance("Discourse Assign | Assign desktop", function (needs) { await click("#topic-footer-button-assign"); assert.ok(exists(".assign.modal-body"), "assign modal opens"); - - await click(".assign-suggestions .avatar"); }); }); diff --git a/test/javascripts/unit/task-actions-test.js b/test/javascripts/unit/task-actions-test.js index 40dd2fe..a82b6f2 100644 --- a/test/javascripts/unit/task-actions-test.js +++ b/test/javascripts/unit/task-actions-test.js @@ -21,7 +21,6 @@ discourseModule("Unit | Service | task-actions", function () { assert.deepEqual(modalCall[1], { title: "discourse_assign.assign_modal.title", model: { - description: "discourse_assign.assign_modal.description", reassign: false, username: "tomtom", group_name: "cats",