stream_settings: Restructure stream creation panel.

Removed the "Stream permissions" heading to simplify the panel.

Moved the "Announce new stream in {stream}" option just above
"Default stream for new users".

Implement a collapsible "Advanced configurations" section,
collapsed by default, to accommodate less commonly changed settings.
This allows for future expansion of stream permission configurations.

Fixes part of #29403.
This commit is contained in:
sujal 2024-03-24 03:09:08 +05:30 committed by sujal shah
parent 07d0854ed3
commit ea2d92d934
6 changed files with 150 additions and 98 deletions

View File

@ -122,6 +122,28 @@ class StreamNameError {
}
const stream_name_error = new StreamNameError();
function toggle_advanced_configurations() {
const $advanced_configurations_view = $(".advanced-configurations-collapase-view");
const $toggle_button = $(".toggle-advanced-configurations-icon");
if ($advanced_configurations_view.is(":visible")) {
// Toggle into the condensed state
$advanced_configurations_view.addClass("hide");
$toggle_button.addClass("fa-caret-right");
$toggle_button.removeClass("fa-caret-down");
} else {
// Toggle into the expanded state
$advanced_configurations_view.removeClass("hide");
$toggle_button.addClass("fa-caret-down");
$toggle_button.removeClass("fa-caret-right");
}
}
$("body").on("click", ".advanced-configurations-container .advance-config-title-container", (e) => {
e.stopPropagation();
toggle_advanced_configurations();
});
// Stores the previous state of the stream creation checkbox.
let stream_announce_previous_value;

View File

@ -223,7 +223,7 @@ function setup_dropdown(sub, slim_sub) {
event.stopPropagation();
can_remove_subscribers_group_widget.render();
settings_components.save_discard_stream_settings_widget_status_handler(
$("#stream_permission_settings"),
$(".advanced-configurations-container"),
slim_sub,
);
},

View File

@ -525,6 +525,22 @@ input[type="checkbox"] {
}
}
.advanced-configurations-container {
.advance-config-title-container {
display: flex;
align-items: center;
cursor: pointer;
.stream_setting_subsection_title {
margin: 4px 8px;
}
.toggle-advanced-configurations-icon {
font-size: 20px;
}
}
}
.organization-settings-parent > div:first-of-type {
margin-top: 10px;
}

View File

@ -21,14 +21,8 @@
<input type="text" name="stream_description" id="create_stream_description" class="settings_text_input"
placeholder="{{t 'Channel description' }}" value="" autocomplete="off" maxlength="{{ max_stream_description_length }}" />
</section>
{{#if ask_to_announce_stream}}
<div id="announce-new-stream">
{{>announce_stream_checkbox }}
</div>
{{/if}}
<section class="block" id="make-invite-only">
<div class="stream-types">
<h3 class="stream_setting_subsection_title">{{t "Channel permissions" }}</h3>
{{> stream_types
stream_post_policy=stream_post_policy_values.everyone.code
is_stream_edit=false

View File

@ -53,27 +53,18 @@
rendered_description=rendered_description
}}
</div>
<div class="stream-permissions settings-subsection-parent" id="stream_permission_settings">
<div class="subsection-header">
<h3 class="stream_setting_subsection_title">{{t "Channel permissions" }}
</h3>
{{> ../settings/settings_save_discard_widget section_name="stream-permissions" }}
</div>
<div class="stream-permissions-warning-banner"></div>
{{> stream_types
stream_post_policy_values=../stream_post_policy_values
stream_privacy_policy_values=../stream_privacy_policy_values
stream_privacy_policy=../stream_privacy_policy
check_default_stream=../check_default_stream
zulip_plan_is_not_limited=../zulip_plan_is_not_limited
upgrade_text_for_wide_organization_logo=../upgrade_text_for_wide_organization_logo
is_business_type_org=../is_business_type_org
org_level_message_retention_setting=../org_level_message_retention_setting
is_stream_edit=true
can_remove_subscribers_setting_widget_name="can_remove_subscribers_group" }}
</div>
{{> stream_types
stream_post_policy_values=../stream_post_policy_values
stream_privacy_policy_values=../stream_privacy_policy_values
stream_privacy_policy=../stream_privacy_policy
check_default_stream=../check_default_stream
zulip_plan_is_not_limited=../zulip_plan_is_not_limited
upgrade_text_for_wide_organization_logo=../upgrade_text_for_wide_organization_logo
is_business_type_org=../is_business_type_org
org_level_message_retention_setting=../org_level_message_retention_setting
is_stream_edit=true
can_remove_subscribers_setting_widget_name="can_remove_subscribers_group"
}}
{{/with}}
<div class="stream_details_box">
<div class="stream_details_box_header">

View File

@ -1,76 +1,105 @@
<div class="input-group stream-privacy-values">
<div class="alert stream-privacy-status"></div>
<label>{{t 'Who can access the channel?'}}
{{> ../help_link_widget link="/help/channel-permissions" }}
</label>
<div id="stream_permission_settings" class="stream-permissions {{#if is_stream_edit}}settings-subsection-parent{{/if}}">
{{#if is_stream_edit}}
<div class="subsection-header">
<h3 class="stream_setting_subsection_title">{{t "Channel permissions" }}
</h3>
{{> ../settings/settings_save_discard_widget section_name="stream-permissions" }}
</div>
<div class="stream-permissions-warning-banner"></div>
{{/if}}
<div class="stream-privacy_choices prop-element" id="id_stream_privacy" data-setting-widget-type="radio-group" data-setting-choice-type="string">
{{#each stream_privacy_policy_values}}
<div class="settings-radio-input-parent">
<label class="radio">
<input type="radio" name="privacy" value="{{ this.code }}" {{#if (eq this.code ../stream_privacy_policy) }}checked{{/if}} />
<b>{{ this.name }}:</b> {{ this.description }}
</label>
</div>
{{/each}}
</div>
</div>
<div class="default-stream">
{{> ../settings/settings_checkbox
prefix="id_"
setting_name="is_default_stream"
is_checked=check_default_stream
label=(t "Default channel for new users")
help_link="/help/set-default-channels-for-new-users"
}}
</div>
<div class="input-group">
<label class="settings-field-label">{{t 'Who can post to the channel?'}}
{{> ../help_link_widget link="/help/channel-posting-policy" }}
</label>
<select name="stream-post-policy" class="stream_post_policy_setting prop-element settings_select bootstrap-focus-style" id="id_stream_post_policy" data-setting-widget-type="number">
{{#each stream_post_policy_values}}
<option value="{{this.code}}" {{#if (eq this.code ../stream_post_policy) }}selected{{/if}}>
{{ this.description}}
</option>
{{/each}}
</select>
</div>
{{> ../dropdown_widget_with_label
widget_name=can_remove_subscribers_setting_widget_name
label=(t 'Who can unsubscribe others from this channel?')
value_type="number"}}
{{#if (or is_owner is_stream_edit)}}
<div>
<div class="input-group inline-block message-retention-setting-group time-limit-setting">
<label class="settings-field-label">{{t "Message retention period" }}
{{> ../help_link_widget link="/help/message-retention-policy" }}
<div class="input-group stream-privacy-values">
<div class="alert stream-privacy-status"></div>
<label>{{t 'Who can access the channel?'}}
{{> ../help_link_widget link="/help/channel-permissions" }}
</label>
{{> ../settings/upgrade_tip_widget}}
<select name="stream_message_retention_setting"
class="stream_message_retention_setting prop-element settings_select bootstrap-focus-style"
id="id_message_retention_days"
data-setting-widget-type="message-retention-setting">
<option value="realm_default">{{t "Use organization level settings {org_level_message_retention_setting}" }}</option>
<option value="unlimited">{{t 'Retain forever' }}</option>
<option value="custom_period">{{t 'Custom' }}</option>
</select>
<div class="dependent-settings-block stream-message-retention-days-input">
<label class="inline-block">
{{t 'Retention period (days)' }}:
</label>
<input type="text" autocomplete="off"
name="stream-message-retention-days"
class="stream-message-retention-days message-retention-setting-custom-input time-limit-custom-input"
id="stream_message_retention_custom_input" />
<div class="stream-privacy_choices prop-element" id="id_stream_privacy" data-setting-widget-type="radio-group" data-setting-choice-type="string">
{{#each stream_privacy_policy_values}}
<div class="settings-radio-input-parent">
<label class="radio">
<input type="radio" name="privacy" value="{{ this.code }}" {{#if (eq this.code ../stream_privacy_policy) }}checked{{/if}} />
<b>{{ this.name }}:</b> {{ this.description }}
</label>
</div>
{{/each}}
</div>
</div>
{{#if ask_to_announce_stream}}
<div id="announce-new-stream">
{{>announce_stream_checkbox }}
</div>
{{/if}}
<div class="default-stream">
{{> ../settings/settings_checkbox
prefix="id_"
setting_name="is_default_stream"
is_checked=check_default_stream
label=(t "Default channel for new users")
help_link="/help/set-default-channels-for-new-users"
}}
</div>
</div>
<div class="advanced-configurations-container stream-permissions {{#if is_stream_edit}}settings-subsection-parent{{/if}}">
<div class="advance-config-title-container {{#if is_stream_edit}}subsection-header{{/if}}">
<i class="fa fa-sm fa-caret-right toggle-advanced-configurations-icon" aria-hidden="true"></i>
<h4 class="stream_setting_subsection_title"><span>{{t 'Advanced configurations' }}</span></h4>
{{#if is_stream_edit}}
{{> ../settings/settings_save_discard_widget section_name="stream-permissions" }}
{{/if}}
</div>
<div class="advanced-configurations-collapase-view hide">
<div class="input-group">
<label class="dropdown-title">{{t 'Who can post to the channel?'}}
{{> ../help_link_widget link="/help/stream-sending-policy" }}
</label>
<select name="stream-post-policy" class="stream_post_policy_setting prop-element settings_select bootstrap-focus-style" id="id_stream_post_policy" data-setting-widget-type="number">
{{#each stream_post_policy_values}}
<option value="{{this.code}}" {{#if (eq this.code ../stream_post_policy) }}selected{{/if}}>
{{ this.description}}
</option>
{{/each}}
</select>
</div>
{{> ../dropdown_widget_with_label
widget_name=can_remove_subscribers_setting_widget_name
label=(t 'Who can unsubscribe others from this channel?')
value_type="number"}}
{{#if (or is_owner is_stream_edit)}}
<div>
<div class="input-group inline-block message-retention-setting-group time-limit-setting">
<label class="dropdown-title">{{t "Message retention period" }}
{{> ../help_link_widget link="/help/message-retention-policy" }}
</label>
{{> ../settings/upgrade_tip_widget}}
<select name="stream_message_retention_setting"
class="stream_message_retention_setting prop-element settings_select bootstrap-focus-style"
id="id_message_retention_days"
data-setting-widget-type="message-retention-setting">
<option value="realm_default">{{t "Use organization level settings {org_level_message_retention_setting}" }}</option>
<option value="unlimited">{{t 'Retain forever' }}</option>
<option value="custom_period">{{t 'Custom' }}</option>
</select>
<div class="dependent-settings-block stream-message-retention-days-input">
<label class="inline-block">
{{t 'Retention period (days)' }}:
</label>
<input type="text" autocomplete="off"
name="stream-message-retention-days"
class="stream-message-retention-days message-retention-setting-custom-input time-limit-custom-input"
id="stream_message_retention_custom_input" />
</div>
</div>
</div>
{{/if}}
</div>
</div>
{{/if}}