From 7e39a21de1c6794ee0c225be9cda6249cb1a55ea Mon Sep 17 00:00:00 2001 From: chapoi <101828855+chapoi@users.noreply.github.com> Date: Wed, 16 Nov 2022 11:10:42 +0100 Subject: [PATCH] UX: redesign of chat settings + add chat retention info (#19017) * UX: redesign of chat settings --- .../jobs/regular/auto_join_channel_batch.rb | 1 + .../auto_manage_channel_memberships.rb | 1 + .../components/chat-channel-settings-view.js | 15 ++++++++++- .../components/chat-channel-settings-view.hbs | 13 +++++----- .../stylesheets/common/chat-channel-info.scss | 3 ++- .../assets/stylesheets/common/chat-form.scss | 25 ++++++++++++++++--- .../assets/stylesheets/desktop/desktop.scss | 6 +++++ plugins/chat/config/locales/client.en.yml | 8 ++++-- 8 files changed, 59 insertions(+), 13 deletions(-) diff --git a/plugins/chat/app/jobs/regular/auto_join_channel_batch.rb b/plugins/chat/app/jobs/regular/auto_join_channel_batch.rb index a4a11270de7..16d01e96a94 100644 --- a/plugins/chat/app/jobs/regular/auto_join_channel_batch.rb +++ b/plugins/chat/app/jobs/regular/auto_join_channel_batch.rb @@ -1,3 +1,4 @@ +# NOTE: When changing auto-join logic, make sure to update the `settings.auto_join_users_info` translation as well. # frozen_string_literal: true module Jobs diff --git a/plugins/chat/app/jobs/regular/auto_manage_channel_memberships.rb b/plugins/chat/app/jobs/regular/auto_manage_channel_memberships.rb index 6d579bc88ef..9785db5c920 100644 --- a/plugins/chat/app/jobs/regular/auto_manage_channel_memberships.rb +++ b/plugins/chat/app/jobs/regular/auto_manage_channel_memberships.rb @@ -1,3 +1,4 @@ +# NOTE: When changing auto-join logic, make sure to update the `settings.auto_join_users_info` translation as well. # frozen_string_literal: true module Jobs diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-settings-view.js b/plugins/chat/assets/javascripts/discourse/components/chat-channel-settings-view.js index 8ca9eda17af..7c5fd6bdb2a 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-settings-view.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-settings-view.js @@ -18,6 +18,11 @@ const MUTED_OPTIONS = [ { name: I18n.t("chat.settings.muted_off"), value: false }, ]; +const AUTO_ADD_USERS_OPTIONS = [ + { name: I18n.t("chat.settings.enable_auto_join_users"), value: true }, + { name: I18n.t("chat.settings.disable_auto_join_users"), value: false }, +]; + export default class ChatChannelSettingsView extends Component { @service chat; @service router; @@ -27,6 +32,7 @@ export default class ChatChannelSettingsView extends Component { notificationLevels = NOTIFICATION_LEVELS; mutedOptions = MUTED_OPTIONS; + autoAddUsersOptions = AUTO_ADD_USERS_OPTIONS; isSavingNotificationSetting = false; savedDesktopNotificationLevel = false; savedMobileNotificationLevel = false; @@ -119,11 +125,18 @@ export default class ChatChannelSettingsView extends Component { } @action + onToggleAutoJoinUsers() { + if (!this.channel.auto_join_users) { + this.onEnableAutoJoinUsers(); + } else { + this.onDisableAutoJoinUsers(); + } + } + onDisableAutoJoinUsers() { this._updateAutoJoinUsers(false); } - @action onEnableAutoJoinUsers() { this.dialog.confirm({ message: I18n.t("chat.settings.auto_join_users_warning", { diff --git a/plugins/chat/assets/javascripts/discourse/templates/components/chat-channel-settings-view.hbs b/plugins/chat/assets/javascripts/discourse/templates/components/chat-channel-settings-view.hbs index 875e816ec05..39b46b4091a 100644 --- a/plugins/chat/assets/javascripts/discourse/templates/components/chat-channel-settings-view.hbs +++ b/plugins/chat/assets/javascripts/discourse/templates/components/chat-channel-settings-view.hbs @@ -12,7 +12,6 @@ {{/if}} - {{#unless this.channel.current_user_membership.muted}}
{{/unless}} +
{{d-icon "info-circle"}}{{i18n "chat.settings.retention_info" days=this.siteSettings.chat_channel_retention_days}}
{{#if (chat-guardian "can-edit-chat-channel")}} +

{{i18n "chat.settings.admin_title"}}

{{#if this.autoJoinAvailable}}
- {{#if this.channel.auto_join_users}} - - {{else}} - - {{/if}} + + +
{{i18n "chat.settings.auto_join_users_info" category=this.channel.chatable.name}}
{{/if}} diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-info.scss b/plugins/chat/assets/stylesheets/common/chat-channel-info.scss index 2a6c5c1fd19..ca997c77258 100644 --- a/plugins/chat/assets/stylesheets/common/chat-channel-info.scss +++ b/plugins/chat/assets/stylesheets/common/chat-channel-info.scss @@ -44,7 +44,8 @@ .channel-settings-view__desktop-notification-level-selector, .channel-settings-view__mobile-notification-level-selector, -.channel-settings-view__muted-selector { +.channel-settings-view__muted-selector, +.channel-settings-view__auto-join-selector { width: 220px; } diff --git a/plugins/chat/assets/stylesheets/common/chat-form.scss b/plugins/chat/assets/stylesheets/common/chat-form.scss index 2e3dd0ba5a2..24e44dc5d84 100644 --- a/plugins/chat/assets/stylesheets/common/chat-form.scss +++ b/plugins/chat/assets/stylesheets/common/chat-form.scss @@ -1,9 +1,8 @@ .chat-form__section { - padding: 1.5rem 1rem; - border-bottom: 1px solid var(--primary-low); + margin: 1.5rem 1rem; &:first-child { - padding-top: 0; + margin-top: 0; } &:last-child { @@ -11,6 +10,11 @@ border-bottom: none; } } +.chat-form__section-admin-title { + margin-inline: 1rem; + padding-top: 1rem; + border-top: 1px solid var(--primary-low); +} .chat-form__field { margin-bottom: 1rem; @@ -20,6 +24,12 @@ } } +.chat-form__description { + margin-top: 3px; + color: var(--primary-medium); + font-size: var(--font-down-1); +} + .chat-form__btn { border: 0; background: none; @@ -41,3 +51,12 @@ font-size: var(--font-down-1); } } + +.chat-retention-info { + margin-top: 2rem; + color: var(--primary-high); + + .d-icon { + margin-right: 0.5em; + } +} diff --git a/plugins/chat/assets/stylesheets/desktop/desktop.scss b/plugins/chat/assets/stylesheets/desktop/desktop.scss index d754a95f10b..2be4ff3ee48 100644 --- a/plugins/chat/assets/stylesheets/desktop/desktop.scss +++ b/plugins/chat/assets/stylesheets/desktop/desktop.scss @@ -158,3 +158,9 @@ } } } + +.chat-form { + &__description.-autojoin { + max-width: 50%; + } +} diff --git a/plugins/chat/config/locales/client.en.yml b/plugins/chat/config/locales/client.en.yml index a96c01e29fe..c07d07d2faa 100644 --- a/plugins/chat/config/locales/client.en.yml +++ b/plugins/chat/config/locales/client.en.yml @@ -289,8 +289,10 @@ en: always: "For all activity" settings: - enable_auto_join_users: "Automatically add all recently active users" - disable_auto_join_users: "Stop automatically adding users" + auto_join_users_label: "Automatically add users" + auto_join_users_info: "Check hourly which users have been active in the last 3 months and, if they have access to the %{category} category, add them to this channel." + enable_auto_join_users: "Yes" + disable_auto_join_users: "No" auto_join_users_warning: "Every user who isn't a member of this channel and has access to the %{category} category will join. Are you sure?" desktop_notification_level: "Desktop notifications" follow: "Join" @@ -304,6 +306,8 @@ en: save: "Save" saved: "Saved" unfollow: "Leave" + admin_title: "Admin" + retention_info: "Chat history will be saved for %{days} days." admin: title: "Chat"