UX: redesign of chat settings + add chat retention info (#19017)

* UX: redesign of chat settings
This commit is contained in:
chapoi 2022-11-16 11:10:42 +01:00 committed by GitHub
parent 9bf95d472d
commit 7e39a21de1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 59 additions and 13 deletions

View File

@ -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

View File

@ -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

View File

@ -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", {

View File

@ -12,7 +12,6 @@
{{/if}}
</div>
</div>
{{#unless this.channel.current_user_membership.muted}}
<div class="chat-form__field">
<label class="chat-form__label">
@ -42,17 +41,19 @@
</div>
</div>
{{/unless}}
<div class="chat-retention-info">{{d-icon "info-circle"}}{{i18n "chat.settings.retention_info" days=this.siteSettings.chat_channel_retention_days}}</div>
</div>
{{#if (chat-guardian "can-edit-chat-channel")}}
<h3 class="chat-form__section-admin-title">{{i18n "chat.settings.admin_title"}}</h3>
{{#if this.autoJoinAvailable}}
<div class="chat-form__section">
<div class="chat-form__field">
{{#if this.channel.auto_join_users}}
<DButton @action={{action "onDisableAutoJoinUsers"}} @label="chat.settings.disable_auto_join_users" @class="archive-btn chat-form__btn btn-flat" @icon="minus-circle" />
{{else}}
<DButton @action={{action "onEnableAutoJoinUsers"}} @label="chat.settings.enable_auto_join_users" @class="archive-btn chat-form__btn btn-flat" @icon="user-plus" />
{{/if}}
<label class="chat-form__label">
<span>{{i18n "chat.settings.auto_join_users_label"}}</span>
</label>
<ComboBox @content={{this.autoAddUsersOptions}} @value={{this.channel.auto_join_users}} @valueProperty="value" @class="channel-settings-view__auto-join-selector" @onChange={{action (fn this.onToggleAutoJoinUsers this.channel.auto_join_users)}} />
<div class="chat-form__description -autojoin">{{i18n "chat.settings.auto_join_users_info" category=this.channel.chatable.name}}</div>
</div>
</div>
{{/if}}

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -158,3 +158,9 @@
}
}
}
.chat-form {
&__description.-autojoin {
max-width: 50%;
}
}

View File

@ -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"