UX: reorders chat-channel fields (#19905)

This commit also adds a long description to the auto join field. This is the same description used in channel settings.

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

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

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

@@ -1,45 +1,67 @@
 <DModalBody @title="chat.create_channel.title">
-  <label class="create-channel-label">
+  <div class="create-channel-control">
-    {{i18n "chat.create_channel.choose_category.label"}}
+    <label for="channel-name" class="create-channel-label">
-  </label>
+      {{i18n "chat.create_channel.name"}}
-  <CategoryChooser
+    </label>
-    @value={{this.categoryId}}
+    <Input
-    @onChange={{action "onCategoryChange"}}
+      name="channel-name"
-    @options={{hash none="chat.create_channel.choose_category.none"}}
+      class="create-channel-name-input"
-  />
+      @type="text"
+      @value={{this.name}}
+    />
+  </div>
 
-  {{#if this.categoryPermissionsHint}}
+  <div class="create-channel-control">
-    <div class="create-channel-hint">
+    <label for="channel-description" class="create-channel-label">
-      {{this.categoryPermissionsHint}}
+      {{i18n "chat.create_channel.description"}}
-    </div>
+    </label>
-  {{/if}}
+    <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">
+    <div class="create-channel-control">
-      <Input @type="checkbox" @checked={{this.autoJoinUsers}} />
+      <label class="create-channel-label">
-      <span>{{i18n "chat.settings.enable_auto_join_users"}}</span>
+        <Input @type="checkbox" @checked={{this.autoJoinUsers}} />
-    </label>
+        <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">

plugins/chat/assets/stylesheets/common/common.scss

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

plugins/chat/assets/stylesheets/common/create-channel-modal.scss

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

plugins/chat/config/locales/client.en.yml

@@ -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."
+        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."
-        enable_auto_join_users: "Automatically add all recently active users"
+        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"

plugins/chat/plugin.rb

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