me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Change radio button design to be consistent with that of the directory explorer

Browse source 
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Thibaut Girka 2020-09-01 10:21:45 +02:00 committed by ThibG
parent cf553a4477
commit 2cde2c84e8
2 changed files with 10 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/javascript/flavours/glitch/features/list_timeline/index.js
View file

@ -14,6 +14,7 @@ import { openModal } from 'flavours/glitch/actions/modal';
import MissingIndicator from 'flavours/glitch/components/missing_indicator'; import MissingIndicator from 'flavours/glitch/components/missing_indicator';
import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
import Icon from 'flavours/glitch/components/icon'; import Icon from 'flavours/glitch/components/icon';
import RadioButton from 'flavours/glitch/components/radio_button';
const messages = defineMessages({ const messages = defineMessages({
deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' }, deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
@ -176,7 +177,7 @@ class ListTimeline extends React.PureComponent {
multiColumn={multiColumn} multiColumn={multiColumn}
bindToDocument={!multiColumn} bindToDocument={!multiColumn}
> >
<div className='column-header__links'> <div className='column-settings__row column-header__links'>
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}> <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}>
<Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' /> <Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
</button> </button>
@ -187,19 +188,14 @@ class ListTimeline extends React.PureComponent {
</div> </div>
{ replies_policy !== undefined && ( { replies_policy !== undefined && (
<div> <div role='group' aria-labelledby={`list-${id}-replies-policy`}>
<span id={`list-${id}-replies-policy`} className='column-settings__section'>
<FormattedMessage id='lists.replies_policy.title' defaultMessage='Show replies to:' />
</span>
<div className='column-settings__row'> <div className='column-settings__row'>
<fieldset> { ['no_replies', 'list_replies', 'all_replies'].map(policy => (
<legend><FormattedMessage id='lists.replies_policy.title' defaultMessage='Show replies to:' /></legend> <RadioButton name='order' value={policy} label={intl.formatMessage(messages[policy])} checked={replies_policy === policy} onChange={this.handleRepliesPolicyChange} />
{ ['no_replies', 'list_replies', 'all_replies'].map(policy => ( ))}
<div className='setting-radio'>
<input className='setting-radio__input' id={['setting', 'radio', id, policy].join('-')} type='radio' value={policy} checked={replies_policy === policy} onChange={this.handleRepliesPolicyChange} />
<label className='setting-radio__label' htmlFor={['setting', 'radio', id, policy].join('-')}>
<FormattedMessage {...messages[policy]} />
</label>
</div>
))}
</fieldset>
</div> </div>
</div> </div>
)} )}

20
app/javascript/flavours/glitch/styles/components/index.scss
View file

@ -1356,7 +1356,6 @@ button.icon-button.active i.fa-retweet {
} }
.setting-toggle__label, .setting-toggle__label,
.setting-radio__label,
.setting-meta__label { .setting-meta__label {
color: $darker-text-color; color: $darker-text-color;
display: inline-block; display: inline-block;
@ -1365,25 +1364,8 @@ button.icon-button.active i.fa-retweet {
vertical-align: middle; vertical-align: middle;
} }
.setting-radio { .column-settings__row .radio-button {
display: block; display: block;
line-height: 18px;
}
.setting-radio__label {
margin-bottom: 0;
}
.column-settings__row legend {
color: $darker-text-color;
cursor: default;
display: block;
font-weight: 500;
margin-top: 10px;
}
.setting-radio__input {
vertical-align: middle;
} }
.setting-meta__label { .setting-meta__label {