stream settings: Remove further differences from settings.css.

This fixes various visual glitches that resulted from reusing
components and overriding key elements of them.  The specific logical
changes are as follows:

* Delete custom checkbox positioning for stream settings; we now just
  use the common app_components.css code.
* Remove custom subscription-control-label styling; just use settings
  defaults.
* Copy the h3/h4 styling from settings.css. Ideally we'll deduplicate
  this in further cleanup.
* Add the inline property to stream_settings_checkbox elements, to
  reduce variable with settings_checkbox.hbs.
* Place every individual input inside an input-group, so that we can
  use the standard settings.css styling.
This commit is contained in:
Tim Abbott 2021-11-23 14:41:57 -08:00
parent 53a5942ab3
commit 5ac2241cf9
3 changed files with 21 additions and 30 deletions

View File

@ -97,13 +97,6 @@
border-radius: 4px;
}
.subscription-control-label {
display: inline-block;
vertical-align: middle;
line-height: 18px;
padding: 5px;
}
.sp-preview {
width: 20px;
border: none;
@ -129,10 +122,6 @@
color: hsl(0, 0%, 64%);
}
.sub_setting_checkbox .checkbox span {
margin-top: 7px !important;
}
.sub_setting_checkbox .muted-sub label,
.sub_setting_checkbox .control-label-disabled label {
cursor: not-allowed;
@ -200,11 +189,19 @@
color: hsl(0, 100%, 50%);
}
.stream_setting_subsection_title {
/* TODO: Unify with settings.css definition */
h3.stream_setting_subsection_title {
display: inline-block;
font-size: 1.5em;
font-weight: normal;
line-height: 1.5;
}
h4.stream_setting_subsection_title {
display: inline-block;
font-size: 1.35em;
font-weight: normal;
line-height: 1.5;
margin: 10px 0 0;
}
.new-stream-name,
@ -959,11 +956,6 @@
.subscription-type-text {
display: inline;
ul {
margin: 0 0 10px 14px;
list-style-type: unset;
}
}
b {
@ -1015,13 +1007,7 @@
}
#subscription_overlay .subsection-parent {
margin: 0;
padding: 5px 10px;
.input-group {
border-bottom: 1px solid hsl(0, 0%, 87%);
padding: 5px 0;
input[type="checkbox"] {
margin-top: 0;
}
@ -1037,6 +1023,10 @@
input[type="radio"] {
margin-right: 5px;
}
.inline {
display: inline !important;
}
}
}

View File

@ -76,8 +76,8 @@
</div>
<div class="subscription-config">
<div class="subsection-parent">
{{#each other_settings}}
<div class="input-group">
{{#each other_settings}}
{{> stream_settings_checkbox
setting_name=name
is_checked=is_checked
@ -87,8 +87,9 @@
disabled_realm_setting=disabled_realm_setting
is_disabled=is_disabled
label=label}}
{{/each}}
</div>
{{/each}}
<div class="input-group">
<label for="streamcolor" class="subscription-control-label">{{t "Stream color" }}</label>
<span class="sub_setting_control">
@ -96,10 +97,10 @@
</span>
</div>
</div>
<h4>{{t "Notification settings" }}</h4>
<h4 class="stream_setting_subsection_title">{{t "Notification settings" }}</h4>
<div class="subsection-parent">
{{#each notification_settings}}
<div class="input-group">
{{#each notification_settings}}
{{> stream_settings_checkbox
setting_name=name
is_checked=is_checked
@ -109,8 +110,8 @@
disabled_realm_setting=disabled_realm_setting
is_disabled=is_disabled
label=label}}
{{/each}}
</div>
{{/each}}
</div>
</div>
</div>

View File

@ -10,7 +10,7 @@
{{#if is_disabled}}disabled="disabled"{{/if}} />
<span></span>
</label>
<label class="subscription-control-label" for="{{setting_name}}_{{stream_id}}">{{label}}</label>
<label class="subscription-control-label inline" for="{{setting_name}}_{{stream_id}}">{{label}}</label>
{{!-- Tooltips for settings --}}
{{#if (eq setting_name "is_muted")}}