github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-20 11:06:32 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: reorders chat-channel fields (#19905)

Browse Source 
This commit also adds a long description to the auto join field. This is the same description used in channel settings.
This commit is contained in:
Joffrey JAFFEUX 2023-01-18 13:12:08 +01:00 committed by GitHub
parent f29b956339
commit 1d4c1fe002
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 115 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
plugins/chat/assets/javascripts/discourse/controllers/create-channel.js
View File

@ -5,7 +5,7 @@ import ModalFunctionality from "discourse/mixins/modal-functionality";
import { action, computed } from "@ember/object";
import { gt, notEmpty } from "@ember/object/computed";
import { inject as service } from "@ember/service";
import { isBlank } from "@ember/utils";
import { isBlank, isPresent } from "@ember/utils";
import { htmlSafe } from "@ember/template";
const DEFAULT_HINT = htmlSafe(
@ -39,6 +39,13 @@ export default class CreateChannelController extends Controller.extend(
return !this.categorySelected || isBlank(this.name);
}
@computed("categorySelected", "name")
get categoryName() {
return this.categorySelected && isPresent(this.name)
? escapeExpression(this.name)
: null;
}
onShow() {
this.set("categoryPermissionsHint", DEFAULT_HINT);
}

98
plugins/chat/assets/javascripts/discourse/templates/modal/create-channel.hbs
View File

@ -1,45 +1,67 @@
<DModalBody @title="chat.create_channel.title">
<label class="create-channel-label">
{{i18n "chat.create_channel.choose_category.label"}}
</label>
<CategoryChooser
@value={{this.categoryId}}
@onChange={{action "onCategoryChange"}}
@options={{hash none="chat.create_channel.choose_category.none"}}
/>
<div class="create-channel-control">
<label for="channel-name" class="create-channel-label">
{{i18n "chat.create_channel.name"}}
</label>
<Input
name="channel-name"
class="create-channel-name-input"
@type="text"
@value={{this.name}}
/>
</div>
{{#if this.categoryPermissionsHint}}
<div class="create-channel-hint">
{{this.categoryPermissionsHint}}
</div>
{{/if}}
<div class="create-channel-control">
<label for="channel-description" class="create-channel-label">
{{i18n "chat.create_channel.description"}}
</label>
<Input
name="channel-description"
class="create-channel-description-input"
@type="textarea"
@value={{this.description}}
/>
</div>
<div class="create-channel-control">
<label class="create-channel-label">
{{i18n "chat.create_channel.choose_category.label"}}
</label>
<CategoryChooser
@value={{this.categoryId}}
@onChange={{action "onCategoryChange"}}
@options={{hash none="chat.create_channel.choose_category.none"}}
/>
{{#if this.categoryPermissionsHint}}
<div class="create-channel-hint">
{{this.categoryPermissionsHint}}
</div>
{{/if}}
</div>
{{#if this.autoJoinAvailable}}
<label class="create-channel-label">
<Input @type="checkbox" @checked={{this.autoJoinUsers}} />
<span>{{i18n "chat.settings.enable_auto_join_users"}}</span>
</label>
<div class="create-channel-control">
<label class="create-channel-label">
<Input @type="checkbox" @checked={{this.autoJoinUsers}} />
<div class="auto-join-channel">
<span class="auto-join-channel__label">
{{i18n "chat.settings.auto_join_users_label"}}
</span>
<p class="auto-join-channel__description">
{{#if this.categoryName}}
{{i18n
"chat.settings.auto_join_users_info"
category=this.categoryName
}}
{{else}}
{{i18n "chat.settings.auto_join_users_info_no_category"}}
{{/if}}
</p>
</div>
</label>
</div>
{{/if}}
<label for="channel-name" class="create-channel-label">
{{i18n "chat.create_channel.name"}}
</label>
<Input
name="channel-name"
class="create-channel-name-input"
@type="text"
@value={{this.name}}
/>
<label for="channel-description" class="create-channel-label">
{{i18n "chat.create_channel.description"}}
</label>
<Input
name="channel-description"
class="create-channel-description-input"
@type="textarea"
@value={{this.description}}
/>
</DModalBody>
<div class="modal-footer">
@ -49,4 +71,4 @@
@label="chat.create_channel.create"
@disabled={{this.createDisabled}}
/>
</div>
</div>

37
plugins/chat/assets/stylesheets/common/common.scss
View File

@ -525,43 +525,6 @@ body.has-full-page-chat {
margin-bottom: 0;
}
.create-channel-modal {
.modal-inner-container {
width: 500px;
}
.choose-topic-results-list {
max-height: 200px;
overflow-y: scroll;
}
.select-kit.combo-box,
.create-channel-name-input,
.create-channel-description-input,
#choose-topic-title {
width: 100%;
margin-bottom: 0;
}
.category-chooser {
.select-kit-selected-name.selected-name.choice {
color: var(
--primary-high
); // Make consistent with color of placeholder text when choosing topic
}
}
.create-channel-hint {
font-size: 0.8em;
margin-top: 0.2em;
}
.create-channel-label,
label[for="choose-topic-title"] {
margin: 1em 0 0.35em;
}
.chat-channel-title {
margin: 1em 0 0 0;
}
}
.chat-message-collapser,
.chat-message-text {
> p {

44
plugins/chat/assets/stylesheets/common/create-channel-modal.scss Normal file
View File

@ -0,0 +1,44 @@
.create-channel-modal {
.modal-inner-container {
width: 500px;
}
.choose-topic-results-list {
max-height: 200px;
overflow-y: scroll;
}
.select-kit.combo-box,
.create-channel-name-input,
.create-channel-description-input,
#choose-topic-title {
width: 100%;
margin-bottom: 0;
}
.category-chooser {
.select-kit-selected-name.selected-name.choice {
color: var(
--primary-high
); // Make consistent with color of placeholder text when choosing topic
}
}
.create-channel-hint {
font-size: var(--font-down-1);
padding-top: 0.25rem;
color: var(--secondary-low);
}
.create-channel-control {
margin-bottom: 1rem;
}
.auto-join-channel {
&__description {
margin: 0;
padding-top: 0.25rem;
color: var(--secondary-low);
font-size: var(--font-down-1) !important;
}
}
}

4
plugins/chat/config/locales/client.en.yml
View File

@ -324,8 +324,8 @@ en:
channel_wide_mentions_label: "Allow @all and @here mentions"
channel_wide_mentions_description: "Allow users to notify all members of #%{channel} with @all or only those who are active in the moment with @here"
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: "Automatically add all recently active users"
auto_join_users_info: "Check hourly which users have been active in the last 3 months. Add them to this channel if they have access to the %{category} category."
auto_join_users_info_no_category: "Check hourly which users have been active in the last 3 months. Add them to this channel if they have access to the selected category."
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"

1
plugins/chat/plugin.rb
View File

@ -13,6 +13,7 @@ register_asset "stylesheets/mixins/chat-scrollbar.scss"
register_asset "stylesheets/common/core-extensions.scss"
register_asset "stylesheets/common/chat-emoji-picker.scss"
register_asset "stylesheets/common/chat-channel-card.scss"
register_asset "stylesheets/common/create-channel-modal.scss"
register_asset "stylesheets/common/dc-filter-input.scss"
register_asset "stylesheets/common/common.scss"
register_asset "stylesheets/common/chat-browse.scss"