Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

settings: Do not use bootstrap css in radio-type display settings. 

We rewrite the CSS rules, handled by bootstrap for the radio
buttons in display settings (both user and realm-level defaults),
to settings.css as we are in process of removing bootstrap.

This commit adds a new class "display-settings-radio-choice-label"
to radio label elements in the display settings and the bootstrap
CSS rules along with existing CSS defined by us for radio-type
display settings are added to this class.

This change will help us in future where we may want to have
reusable components (like settings_checkbox) for radio-type
settings with visual preview.

The line-height property added to input element by bootstrap is
not added to settings.css since it is already added for all inputs
in zulip.css.
This commit is contained in:
Sahil Batra 2022-11-22 15:52:27 +05:30 committed by Tim Abbott
parent f8065dcd3d
commit 55aaf1d56d
2 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
static/styles/settings.css
View File

@ -939,8 +939,9 @@ input[type="checkbox"] {
.emojiset_choices,
.user_list_style_values {
padding: 0 10px;
}
label {
label.display-settings-radio-choice-label {
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
padding: 8px 0 10px;
@ -952,6 +953,18 @@ input[type="checkbox"] {
position: relative;
top: -2px;
margin: 0 5px 0 0;
width: auto;
cursor: pointer;
&:focus {
outline: 1px dotted hsl(0, 0%, 20%);
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
&:disabled {
cursor: not-allowed;
}
&:checked + span {
font-weight: 600;
@ -962,7 +975,6 @@ input[type="checkbox"] {
float: right;
}
}
}
.emojiset_choices {
width: 350px;

4
static/templates/settings/display_settings.hbs
View File

@ -46,7 +46,7 @@
<label class="emoji-theme title">{{t "Emoji theme" }}</label>
<div class="emojiset_choices grey-box prop-element" id="{{prefix}}emojiset" data-setting-widget-type="radio-group" data-setting-choice-type="string">
{{#each settings_object.emojiset_choices}}
<label>
<label class="display-settings-radio-choice-label">
<input type="radio" class="setting_emojiset_choice" name="emojiset" value="{{this.key}}"/>
<span>{{this.text}}</span>
<span class="right">
@ -84,7 +84,7 @@
<label class="title">{{t "User list style" }}</label>
<div class="user_list_style_values grey-box prop-element" id="{{prefix}}user_list_style" data-setting-widget-type="radio-group" data-setting-choice-type="number">
{{#each user_list_style_values}}
<label>
<label class="display-settings-radio-choice-label">
<input type="radio" class="setting_user_list_style_choice" name="user_list_style" value="{{this.code}}"/>
<span>{{this.description}}</span>
<span class="right preview">