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

42
static/styles/settings.css
View File

@ -939,29 +939,41 @@ input[type="checkbox"] {
.emojiset_choices, .emojiset_choices,
.user_list_style_values { .user_list_style_values {
padding: 0 10px; padding: 0 10px;
}
label { label.display-settings-radio-choice-label {
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2); border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
padding: 8px 0 10px; padding: 8px 0 10px;
&:last-of-type { &:last-of-type {
border-bottom: none; border-bottom: none;
}
input[type="radio"] {
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;
} }
input[type="radio"] { &:disabled {
position: relative; cursor: not-allowed;
top: -2px;
margin: 0 5px 0 0;
&:checked + span {
font-weight: 600;
}
} }
.right { &:checked + span {
float: right; font-weight: 600;
} }
} }
.right {
float: right;
}
} }
.emojiset_choices { .emojiset_choices {

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

@ -46,7 +46,7 @@
<label class="emoji-theme title">{{t "Emoji theme" }}</label> <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"> <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}} {{#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}}"/> <input type="radio" class="setting_emojiset_choice" name="emojiset" value="{{this.key}}"/>
<span>{{this.text}}</span> <span>{{this.text}}</span>
<span class="right"> <span class="right">
@ -84,7 +84,7 @@
<label class="title">{{t "User list style" }}</label> <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"> <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}} {{#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}}"/> <input type="radio" class="setting_user_list_style_choice" name="user_list_style" value="{{this.code}}"/>
<span>{{this.description}}</span> <span>{{this.description}}</span>
<span class="right preview"> <span class="right preview">