From 5f0c21d9068ce98f2e2c734ca58344582bfbb84c Mon Sep 17 00:00:00 2001 From: David Battersby Date: Wed, 5 Feb 2025 15:19:13 +0400 Subject: [PATCH] UX: multiple drafts menu improvements (#31195) This change includes the following updates: - Rename view all to view all drafts - Remove view all link from drop-down when all drafts are displayed in the menu - Different icon for draft topics and PMs (adds envelope for PMs) - Disable drop-down when New Topic button is disabled (private categories etc) - Improve drafts drop-down loading (no longer disables the trigger btn on click) --- .../app/components/create-topic-button.hbs | 2 +- .../app/components/topic-drafts-dropdown.gjs | 54 +++++++++++++------ .../components/drafts-dropdown-menu.scss | 3 +- config/locales/client.en.yml | 2 +- spec/system/drafts_dropdown_spec.rb | 52 ++++++++++++++++++ .../page_objects/components/drafts_menu.rb | 12 +++++ 6 files changed, 107 insertions(+), 18 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/create-topic-button.hbs b/app/assets/javascripts/discourse/app/components/create-topic-button.hbs index 1448f5bd87d..66bb152827b 100644 --- a/app/assets/javascripts/discourse/app/components/create-topic-button.hbs +++ b/app/assets/javascripts/discourse/app/components/create-topic-button.hbs @@ -18,6 +18,6 @@ {{#if @showDrafts}} - + {{/if}} {{/if}} \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/topic-drafts-dropdown.gjs b/app/assets/javascripts/discourse/app/components/topic-drafts-dropdown.gjs index 257b39d08b3..de9577a4246 100644 --- a/app/assets/javascripts/discourse/app/components/topic-drafts-dropdown.gjs +++ b/app/assets/javascripts/discourse/app/components/topic-drafts-dropdown.gjs @@ -7,6 +7,10 @@ import { or } from "truth-helpers"; import DButton from "discourse/components/d-button"; import DropdownMenu from "discourse/components/dropdown-menu"; import DiscourseURL from "discourse/lib/url"; +import { + NEW_PRIVATE_MESSAGE_KEY, + NEW_TOPIC_KEY, +} from "discourse/models/composer"; import { i18n } from "discourse-i18n"; import DMenu from "float-kit/components/d-menu"; @@ -35,6 +39,20 @@ export default class TopicDraftsDropdown extends Component { : ""; } + draftIcon(item) { + if (item.draft_key.startsWith(NEW_TOPIC_KEY)) { + return "layer-group"; + } else if (item.draft_key.startsWith(NEW_PRIVATE_MESSAGE_KEY)) { + return "envelope"; + } else { + return "reply"; + } + } + + get showViewAll() { + return this.draftCount > DRAFTS_LIMIT; + } + @action onRegisterApi(api) { this.dMenu = api; @@ -42,6 +60,10 @@ export default class TopicDraftsDropdown extends Component { @action async onShowMenu() { + if (this.loading) { + return; + } + this.loading = true; try { @@ -82,7 +104,7 @@ export default class TopicDraftsDropdown extends Component { @onShow={{this.onShowMenu}} @onRegisterApi={{this.onRegisterApi}} @modalForMobile={{true}} - @disabled={{this.loading}} + @disabled={{@disabled}} class="btn-small btn-default" > <:content> @@ -91,7 +113,7 @@ export default class TopicDraftsDropdown extends Component { {{/each}} - + {{#if this.showViewAll}} + - - - {{this.otherDraftsText}} - {{i18n "drafts.dropdown.view_all"}} - - + + + {{this.otherDraftsText}} + {{i18n "drafts.dropdown.view_all"}} + + + {{/if}} diff --git a/app/assets/stylesheets/desktop/components/drafts-dropdown-menu.scss b/app/assets/stylesheets/desktop/components/drafts-dropdown-menu.scss index 94429124677..2be7d2da665 100644 --- a/app/assets/stylesheets/desktop/components/drafts-dropdown-menu.scss +++ b/app/assets/stylesheets/desktop/components/drafts-dropdown-menu.scss @@ -1,3 +1,4 @@ .topic-drafts-menu-content .dropdown-menu { - max-width: 300px; + max-width: 350px; + min-width: 275px; } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index fb8d0e5d7f1..7e3b4ed1b75 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -500,7 +500,7 @@ en: dropdown: title: "Open the latest drafts menu" untitled: "Untitled draft" - view_all: "view all" + view_all: "view all drafts" other_drafts: one: "+%{count} other draft" other: "+%{count} other drafts" diff --git a/spec/system/drafts_dropdown_spec.rb b/spec/system/drafts_dropdown_spec.rb index 90b4e0d635f..55338b182ad 100644 --- a/spec/system/drafts_dropdown_spec.rb +++ b/spec/system/drafts_dropdown_spec.rb @@ -64,5 +64,57 @@ describe "Drafts dropdown", type: :system do expect(drafts_dropdown.draft_item_count).to eq(4) expect(drafts_dropdown.other_drafts_count).to eq(1) end + + it "shows the view all drafts when there are other drafts to display" do + page.visit "/" + drafts_dropdown.open + + expect(drafts_dropdown).to be_open + expect(drafts_dropdown).to have_view_all_link + end + + it "does not show the view all drafts link when all drafts are displayed" do + Draft.where(user_id: user.id).order("created_at DESC").limit(2).destroy_all + + page.visit "/" + drafts_dropdown.open + + expect(drafts_dropdown).to be_open + expect(drafts_dropdown).to have_no_view_all_link + end + end + + describe "with private category" do + fab!(:group) + fab!(:group_user) { Fabricate(:group_user, user: user, group: group) } + fab!(:category) { Fabricate(:private_category, group: group, permission_type: 3) } + fab!(:subcategory) do + Fabricate( + :private_category, + parent_category_id: category.id, + group: group, + permission_type: 1, + ) + end + + let(:category_page) { PageObjects::Pages::Category.new } + + before do + SiteSetting.default_subcategory_on_read_only_category = false + + Draft.set( + user, + Draft::NEW_TOPIC, + 0, + { title: "This is a test topic", reply: "Lorem ipsum dolor sit amet" }.to_json, + ) + end + + it "disables the drafts dropdown menu when new topic button is disabled" do + category_page.visit(category) + + expect(category_page).to have_button("New Topic", disabled: true) + expect(drafts_dropdown).to be_disabled + end end end diff --git a/spec/system/page_objects/components/drafts_menu.rb b/spec/system/page_objects/components/drafts_menu.rb index 47e1a4ab507..ac7250e6f50 100644 --- a/spec/system/page_objects/components/drafts_menu.rb +++ b/spec/system/page_objects/components/drafts_menu.rb @@ -13,6 +13,10 @@ module PageObjects has_no_css?(MENU_SELECTOR + "-trigger") end + def disabled? + find(MENU_SELECTOR + "-trigger")["disabled"] + end + def open? has_css?(MENU_SELECTOR + "-content") end @@ -21,6 +25,14 @@ module PageObjects has_no_css?(MENU_SELECTOR + "-content") end + def has_view_all_link? + has_css?(MENU_SELECTOR + "-content .view-all-drafts") + end + + def has_no_view_all_link? + has_no_css?(MENU_SELECTOR + "-content .view-all-drafts") + end + def open find(MENU_SELECTOR + "-trigger").click end