mirror of https://github.com/zulip/zulip.git
streams: Use consistent settings HTML structure in stream types modal.
We had our input elements for stream settings inside li tags and their alignment was managed using CSS. We move away from this HTML structure to have inputs and labels inside divs for two reasons. First is that if we want to later refactor the HTML to have some different design, then having them inside `ul` requires complex changes to CSS and eventually we would have to move away from using `li`s for the part that is changed to have a different design. Second `li`s are generally not used to organize input elements. Above is an explanation of why this change is a preparatory commit for shifting to have a tabbed design in the stream edit page. So following changes are done to have a more consistent HTML structure in stream types modal: * Added modal-body and removed the non-standard usage of the unordered list for settings header and inputs. * Updated relevant CSS rules to have the same design during refactor. Co-authored-by: Pragati Agrawal <pragati22066@gmail.com>
This commit is contained in:
m-e-l-u-h-a-n
Tim Abbott
parent
777f784e07
commit
5de115a964
|
|
@ -581,7 +581,8 @@ on a dark background, and don't change the dark labels dark either. */
|
|||
.subscriber-list-box,
|
||||
.subscriber-list-box .subscriber_list_container .subscriber-list tr,
|
||||
#subscription_overlay ul.grey-box li,
|
||||
#stream_privacy_modal ul.grey-box li,
|
||||
#subscription_overlay .grey-box .radio-input-parent,
|
||||
#stream_privacy_modal .grey-box .radio-input-parent,
|
||||
#settings_page .sidebar,
|
||||
#settings_page .sidebar *,
|
||||
table,
|
||||
|
|
|
|||
|
|
@ -594,16 +594,6 @@
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#make-invite-only {
|
||||
.radio {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.grey-box .checkbox {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
#announce-new-stream {
|
||||
margin-top: 10px;
|
||||
|
||||
|
|
@ -1015,61 +1005,64 @@
|
|||
}
|
||||
}
|
||||
|
||||
ul.grey-box {
|
||||
#stream_privacy_modal & {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
#subscription_overlay ul.grey-box {
|
||||
li {
|
||||
#stream_privacy_modal &,
|
||||
#subscription_overlay & {
|
||||
border-bottom: 1px solid hsl(0, 0%, 87%);
|
||||
padding: 5px 0;
|
||||
}
|
||||
border-bottom: 1px solid hsl(0, 0%, 87%);
|
||||
padding: 5px 0;
|
||||
|
||||
input[type="checkbox"] {
|
||||
#stream_privacy_modal & {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#subscription_overlay & {
|
||||
margin-top: 0;
|
||||
}
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
#stream_privacy_modal &,
|
||||
#subscription_overlay & {
|
||||
border-bottom: none;
|
||||
}
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.sp-replacer {
|
||||
#stream_privacy_modal &,
|
||||
#subscription_overlay & {
|
||||
box-shadow: none;
|
||||
}
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
#stream_privacy_modal &,
|
||||
#subscription_overlay & {
|
||||
margin-right: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#stream_privacy_modal,
|
||||
.stream-creation-body {
|
||||
.input-group {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.radio-input-parent {
|
||||
border-bottom: 1px solid hsl(0, 0%, 87%);
|
||||
margin: 5px 0 5px 5px;
|
||||
padding: 5px 0;
|
||||
|
||||
input[type="radio"] {
|
||||
margin: 0 0 1px 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
label.radio {
|
||||
display: inline;
|
||||
margin: 5px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 5ch;
|
||||
text-align: right;
|
||||
}
|
||||
&.message-retention-setting-group {
|
||||
input {
|
||||
width: 5ch;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
label.dropdown-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
select {
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
select {
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,42 @@
|
|||
<ul class="grey-box">
|
||||
<div class="alert stream-privacy-status"></div>
|
||||
<h4>{{t 'Who can access the stream?'}}
|
||||
{{> help_link_widget link="/help/stream-permissions" }}
|
||||
</h4>
|
||||
{{#each stream_privacy_policy_values}}
|
||||
<li>
|
||||
<label class="radio">
|
||||
<div class="grey-box">
|
||||
<div class="input-group">
|
||||
<div class="alert stream-privacy-status"></div>
|
||||
<h4>{{t 'Who can access the stream?'}}
|
||||
{{> help_link_widget link="/help/stream-permissions" }}
|
||||
</h4>
|
||||
{{#each stream_privacy_policy_values}}
|
||||
<div class="radio-input-parent">
|
||||
<input type="radio" name="privacy" value="{{ this.code }}" {{#if (eq this.code ../stream_privacy_policy) }}checked{{/if}} />
|
||||
<b>{{ this.name }}:</b> {{ this.description }}
|
||||
</label>
|
||||
</li>
|
||||
{{/each}}
|
||||
<h4>{{t 'Who can post to the stream?'}}
|
||||
{{> help_link_widget link="/help/stream-sending-policy" }}
|
||||
</h4>
|
||||
{{#each stream_post_policy_values}}
|
||||
<li>
|
||||
<label class="radio">
|
||||
<label class="radio">
|
||||
<b>{{ this.name }}:</b> {{ this.description }}
|
||||
</label>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<h4>{{t 'Who can post to the stream?'}}
|
||||
{{> help_link_widget link="/help/stream-sending-policy" }}
|
||||
</h4>
|
||||
{{#each stream_post_policy_values}}
|
||||
<div class="radio-input-parent">
|
||||
<input type="radio" name="stream-post-policy" value="{{ this.code }}" {{#if (eq this.code ../stream_post_policy) }}checked{{/if}} />
|
||||
{{ this.description }}
|
||||
</label>
|
||||
</li>
|
||||
{{/each}}
|
||||
<label class="radio">
|
||||
{{ this.description }}
|
||||
</label>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
{{#if (or is_owner is_stream_edit)}}
|
||||
<h4>{{t "Message retention for stream" }}
|
||||
{{> help_link_widget link="/help/message-retention-policy" }}
|
||||
</h4>
|
||||
<div>
|
||||
<h4>{{t "Message retention for stream" }}
|
||||
{{> help_link_widget link="/help/message-retention-policy" }}
|
||||
</h4>
|
||||
|
||||
{{> settings/upgrade_tip_widget}}
|
||||
{{> settings/upgrade_tip_widget}}
|
||||
|
||||
<li>
|
||||
<div class="input-group inline-block">
|
||||
<div class="input-group inline-block message-retention-setting-group">
|
||||
<label for="stream_message_retention_setting" class="dropdown-title">{{t "Message retention period" }}
|
||||
<i class="fa fa-info-circle settings-info-icon realm_allow_message_deleting_tooltip tippy-zulip-tooltip" aria-hidden="true" data-tippy-content="{{t 'Only owners can change stream message retention policy.' }}"></i>
|
||||
</label>
|
||||
|
|
@ -53,6 +59,6 @@
|
|||
{{#if disable_message_retention_setting}}disabled{{/if}}/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@
|
|||
<button type="button" class="close close-modal-btn" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">×</span></button>
|
||||
<h3 id="stream_privacy_modal_label">{{t "Change stream permissions for #" }}{{ stream_name }}<span class="email"></span></h3>
|
||||
</div>
|
||||
{{> stream_types }}
|
||||
<div class="modal-body">
|
||||
{{> stream_types }}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="button rounded close-modal-btn" data-dismiss="modal">{{t "Cancel" }}</button>
|
||||
<button class="button rounded btn-danger" id="change-stream-privacy-button"
|
||||
|
|
|
|||
Loading…
Reference in New Issue