diff --git a/app/assets/javascripts/discourse/app/components/user-nav/messages-groups-dropdown.js b/app/assets/javascripts/discourse/app/components/user-nav/messages-groups-dropdown.js new file mode 100644 index 00000000000..3d5502d9579 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-nav/messages-groups-dropdown.js @@ -0,0 +1,53 @@ +import { gte, reads } from "@ember/object/computed"; +import ComboBoxComponent from "select-kit/components/combo-box"; +import DiscourseURL from "discourse/lib/url"; +import I18n from "I18n"; +import { computed } from "@ember/object"; + +export default ComboBoxComponent.extend({ + pluginApiIdentifiers: ["messages-dropdown"], + classNames: ["message-dropdown"], + content: reads("groupsWithMessages"), + valueProperty: "name", + hasManyGroups: gte("content.length", 10), + + selectKitOptions: { + caretDownIcon: "caret-right", + caretUpIcon: "caret-down", + filterable: "hasManyGroups", + }, + + groupsWithMessages: computed(function () { + const groups = [ + { + name: I18n.t("user.messages.inbox"), + }, + ]; + + this.user.groupsWithMessages.forEach((group) => { + groups.push({ name: group.name, icon: "inbox" }); + }); + + if (this.pmTaggingEnabled) { + groups.push({ name: I18n.t("user.messages.tags") }); + } + + return groups; + }), + + actions: { + onChange(item) { + let url; + + if (this.user.groups.some((g) => g.name === item)) { + url = `/u/${this.user.username}/messages/group/${item}`; + } else if (item === I18n.t("user.messages.tags")) { + url = `/u/${this.user.username}/messages/tags`; + } else { + url = `/u/${this.user.username}/messages`; + } + + DiscourseURL.routeToUrl(url); + }, + }, +}); diff --git a/app/assets/javascripts/discourse/app/components/user-nav/messages-nav.hbs b/app/assets/javascripts/discourse/app/components/user-nav/messages-nav.hbs new file mode 100644 index 00000000000..a35091d7a7d --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-nav/messages-nav.hbs @@ -0,0 +1,105 @@ +
+ {{#if (gt @user.groupsWithMessages.length 0)}} +
    +
  1. + +
    2. +
+ {{/if}} + + + + {{#if this.site.desktopView}} +
+ {{#if @isGroup}} + + {{/if}} + + {{#if @showNewPM}} + + {{/if}} +
+ {{/if}} +
diff --git a/app/assets/javascripts/discourse/app/components/user-nav/messages-nav.js b/app/assets/javascripts/discourse/app/components/user-nav/messages-nav.js new file mode 100644 index 00000000000..b89709d85c1 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-nav/messages-nav.js @@ -0,0 +1,24 @@ +import Component from "@glimmer/component"; +import { inject as service } from "@ember/service"; + +export default class UserNavMessagesNav extends Component { + @service site; + + get messagesDropdownvalue() { + switch (this.args.currentRouteName) { + case "userPrivateMessages.tags": + case "userPrivateMessages.tagsShow": + return "tags"; + default: + if (this.args.groupFilter) { + return this.args.groupFilter; + } else { + return "inbox"; + } + } + } + + get displayTags() { + return this.args.pmTaggingEnabled && this.messagesDropdownvalue === "tags"; + } +} diff --git a/app/assets/javascripts/discourse/app/controllers/user-private-messages.js b/app/assets/javascripts/discourse/app/controllers/user-private-messages.js index e0ec47bbe5a..4b9e10fa474 100644 --- a/app/assets/javascripts/discourse/app/controllers/user-private-messages.js +++ b/app/assets/javascripts/discourse/app/controllers/user-private-messages.js @@ -1,6 +1,7 @@ import Controller, { inject as controller } from "@ember/controller"; import { action } from "@ember/object"; -import { alias, and, equal } from "@ember/object/computed"; +import { inject as service } from "@ember/service"; +import { alias, and, equal, readOnly } from "@ember/object/computed"; import discourseComputed from "discourse-common/utils/decorators"; import { VIEW_NAME_WARNINGS } from "discourse/routes/user-private-messages-warnings"; import I18n from "I18n"; @@ -9,6 +10,7 @@ export const PERSONAL_INBOX = "__personal_inbox__"; export default Controller.extend({ user: controller(), + router: service(), pmView: false, viewingSelf: alias("user.viewingSelf"), @@ -17,6 +19,7 @@ export default Controller.extend({ group: null, groupFilter: alias("group.name"), currentPath: alias("router._router.currentPath"), + currentRouteName: readOnly("router.currentRouteName"), pmTaggingEnabled: alias("site.can_tag_pms"), tagId: null, diff --git a/app/assets/javascripts/discourse/app/templates/user/messages.hbs b/app/assets/javascripts/discourse/app/templates/user/messages.hbs index bf566c7ba59..5ca63d8f2ca 100644 --- a/app/assets/javascripts/discourse/app/templates/user/messages.hbs +++ b/app/assets/javascripts/discourse/app/templates/user/messages.hbs @@ -1,103 +1,124 @@ - - -
  • - - {{i18n "user.messages.inbox"}} - -
    • +{{#if this.currentUser.redesigned_user_page_nav_enabled}} + - {{#if this.isPersonal}} -
  • - - {{i18n "user.messages.sent"}} + +{{else}} + + +
  • + + {{i18n "user.messages.inbox"}}
    • - {{#if this.viewingSelf}} + {{#if this.isPersonal}}
  • - - {{this.newLinkText}} + + {{i18n "user.messages.sent"}}
    • + {{#if this.viewingSelf}} +
  • + + {{this.newLinkText}} + +
    • + +
  • + + {{this.unreadLinkText}} + +
    • + {{/if}} +
  • - - {{this.unreadLinkText}} + + {{i18n "user.messages.archive"}}
    • {{/if}} -
  • - - {{i18n "user.messages.archive"}} - -
    • - {{/if}} + {{#each this.model.groups as |group|}} + {{#if group.has_messages}} +
  • + + {{d-icon "users"}} + {{capitalize-string group.name}} + +
    • - {{#each this.model.groups as |group|}} - {{#if group.has_messages}} -
  • - - {{d-icon "users"}} - {{capitalize-string group.name}} - -
    • + {{#if (and this.isGroup (eq this.groupFilter group.name))}} + {{#if this.viewingSelf}} +
  • + + {{this.newLinkText}} + +
    • - {{#if (and this.isGroup (eq this.groupFilter group.name))}} - {{#if this.viewingSelf}} -
  • - - {{this.newLinkText}} - -
    • +
  • + + {{this.unreadLinkText}} + +
    • + {{/if}}
  • - - {{this.unreadLinkText}} + + {{i18n "user.messages.archive"}}
    • {{/if}} - -
  • - - {{i18n "user.messages.archive"}} - -
    • {{/if}} + {{/each}} + + {{#if this.pmTaggingEnabled}} +
  • + + {{i18n "user.messages.tags"}} + + + {{#if this.tagId}} +
  • + + {{this.tagId}} + +
    • + {{/if}} + {{/if}} - {{/each}} - {{#if this.pmTaggingEnabled}} -
  • - - {{i18n "user.messages.tags"}} - + + + - {{#if this.tagId}} -
  • - - {{this.tagId}} - -
    • - {{/if}} - - {{/if}} + {{#unless this.site.mobileView}} +
    + {{#if this.group}} + + {{/if}} - - - - -{{#unless this.site.mobileView}} -
    - {{#if this.group}} - - {{/if}} - - {{#if this.showNewPM}} - - {{/if}} -
    -{{/unless}} + {{#if this.showNewPM}} + + {{/if}} +
    + {{/unless}} +{{/if}}
    diff --git a/app/assets/stylesheets/desktop/new-user.scss b/app/assets/stylesheets/desktop/new-user.scss index f360fd65511..dd378295a6c 100644 --- a/app/assets/stylesheets/desktop/new-user.scss +++ b/app/assets/stylesheets/desktop/new-user.scss @@ -14,6 +14,23 @@ grid-row-end: 2; } + .user-navigation-container { + grid-column-start: 1; + grid-column-end: 3; + grid-row-start: 1; + grid-row-end: 2; + + display: flex; + flex-direction: row; + } + + .user-navigation-container ~ .user-content { + grid-column-start: 1; + grid-column-end: 3; + grid-row-start: 2; + grid-row-end: 3; + } + .user-content { grid-column-start: 1; grid-column-end: 3; diff --git a/app/assets/stylesheets/mobile/new-user.scss b/app/assets/stylesheets/mobile/new-user.scss index 24b6acc3fc1..8fe72e0053c 100644 --- a/app/assets/stylesheets/mobile/new-user.scss +++ b/app/assets/stylesheets/mobile/new-user.scss @@ -49,4 +49,17 @@ @include ellipsis; } } + + #navigation-bar { + margin-top: 1em; + display: flex; + flex-wrap: nowrap; + width: 100%; + overflow-x: scroll; + margin-bottom: 0; + padding-bottom: 0.5em; + a { + white-space: nowrap; + } + } } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index aabda302ece..3a485e8d005 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -1275,6 +1275,7 @@ en: move_to_archive: "Archive" failed_to_move: "Failed to move selected messages (perhaps your network is down)" tags: "Tags" + all_tags: "All Tags" warnings: "Official Warnings" read_more_in_group: "Want to read more? Browse other messages in %{groupLink}." read_more: "Want to read more? Browse other messages in personal messages."