Change design of toggle button
This commit is contained in:
parent
03e33df86b
commit
796bf9c844
3 changed files with 36 additions and 18 deletions
|
@ -9,8 +9,14 @@ export default class SettingToggle extends React.PureComponent {
|
|||
prefix: PropTypes.string,
|
||||
settings: ImmutablePropTypes.map.isRequired,
|
||||
settingPath: PropTypes.array.isRequired,
|
||||
label: PropTypes.node.isRequired,
|
||||
label: PropTypes.node,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
icons: PropTypes.oneOfType([
|
||||
PropTypes.bool,
|
||||
PropTypes.object,
|
||||
]),
|
||||
condition: PropTypes.string,
|
||||
ariaLabel: PropTypes.string,
|
||||
}
|
||||
|
||||
onChange = ({ target }) => {
|
||||
|
@ -18,13 +24,13 @@ export default class SettingToggle extends React.PureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { prefix, settings, settingPath, label } = this.props;
|
||||
const { prefix, settings, settingPath, label, icons, condition, ariaLabel } = this.props;
|
||||
const id = ['setting-toggle', prefix, ...settingPath].filter(Boolean).join('-');
|
||||
|
||||
return (
|
||||
<div className='setting-toggle'>
|
||||
<Toggle id={id} checked={settings.getIn(settingPath)} onChange={this.onChange} onKeyDown={this.onKeyDown} />
|
||||
<label htmlFor={id} className='setting-toggle__label'>{label}</label>
|
||||
<div className='setting-toggle' aria-label={ariaLabel}>
|
||||
<Toggle id={id} checked={condition ? settings.getIn(settingPath) === condition : settings.getIn(settingPath)} onChange={this.onChange} icons={icons} onKeyDown={this.onKeyDown} />
|
||||
{label && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -13,6 +13,7 @@ import { openModal } from '../../../actions/modal';
|
|||
import { openSidebar } from '../../../actions/sidebar';
|
||||
import Icon from '../../../components/icon';
|
||||
import { changeSetting, getSettings } from 'soapbox/actions/settings';
|
||||
import SettingToggle from '../../notifications/components/setting_toggle';
|
||||
|
||||
const messages = defineMessages({
|
||||
post: { id: 'tabs_bar.post', defaultMessage: 'Post' },
|
||||
|
@ -31,7 +32,7 @@ class TabsBar extends React.PureComponent {
|
|||
toggleTheme: PropTypes.func,
|
||||
logo: PropTypes.string,
|
||||
account: ImmutablePropTypes.map,
|
||||
themeMode: PropTypes.string,
|
||||
settings: ImmutablePropTypes.map.isRequired,
|
||||
}
|
||||
|
||||
state = {
|
||||
|
@ -83,18 +84,12 @@ class TabsBar extends React.PureComponent {
|
|||
}));
|
||||
}
|
||||
|
||||
getNewThemeValue() {
|
||||
if (this.props.themeMode === 'light') return 'dark';
|
||||
|
||||
return 'light';
|
||||
}
|
||||
|
||||
handleToggleTheme = () => {
|
||||
this.props.toggleTheme(this.getNewThemeValue());
|
||||
this.props.toggleTheme(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
|
||||
}
|
||||
|
||||
render() {
|
||||
const { account, onOpenCompose, onOpenSidebar, intl, themeMode } = this.props;
|
||||
const { account, onOpenCompose, onOpenSidebar, intl, settings } = this.props;
|
||||
const { collapsed } = this.state;
|
||||
|
||||
const classes = classNames('tabs-bar', {
|
||||
|
@ -113,9 +108,7 @@ class TabsBar extends React.PureComponent {
|
|||
</div>
|
||||
{ account &&
|
||||
<div className='flex'>
|
||||
<button className='tabs-bar__button-theme-toggle button' onClick={this.handleToggleTheme} aria-label={themeMode === 'light' ? intl.formatMessage(messages.switchToDark) : intl.formatMessage(messages.switchToLight)}>
|
||||
<Icon id={themeMode === 'light' ? 'sun' : 'moon'} />
|
||||
</button>
|
||||
<SettingToggle settings={settings} settingPath={['themeMode']} condition={'light'} onChange={this.handleToggleTheme} icons={{ checked: <Icon id='sun' />, unchecked: <Icon id='moon' /> }} ariaLabel={settings.get('themeMode') === 'light' ? intl.formatMessage(messages.switchToDark) : intl.formatMessage(messages.switchToLight)} />
|
||||
<div className='tabs-bar__profile'>
|
||||
<Avatar account={account} />
|
||||
<button className='tabs-bar__sidebar-btn' onClick={onOpenSidebar} />
|
||||
|
@ -151,7 +144,7 @@ const mapStateToProps = state => {
|
|||
return {
|
||||
account: state.getIn(['accounts', me]),
|
||||
logo: state.getIn(['soapbox', 'logo']),
|
||||
themeMode: settings.get('themeMode'),
|
||||
settings: settings,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -149,6 +149,25 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.setting-toggle {
|
||||
margin-top: 5px;
|
||||
margin-left: 10px;
|
||||
|
||||
.react-toggle-track-check,
|
||||
.react-toggle-track-x {
|
||||
height: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.react-toggle--checked {
|
||||
.react-toggle-track {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
&:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: var(--accent-color--bright);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-bar__link {
|
||||
|
|
Loading…
Reference in a new issue