Move ThemeToggle to separate class, style it, and fix it on mobile

tl-language-filters
Sean King 2020-07-19 18:44:17 -06:00
rodzic 796bf9c844
commit 277f4b5f22
5 zmienionych plików z 27 dodań i 39 usunięć

Wyświetl plik

@ -15,6 +15,7 @@ import { shortNumberFormat } from '../utils/numbers';
import { isStaff } from '../utils/accounts';
import { makeGetAccount } from '../selectors';
import { logOut } from 'soapbox/actions/auth';
import ThemeToggle from '../features/ui/components/theme_toggle';
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },
@ -119,6 +120,12 @@ class SidebarMenu extends ImmutablePureComponent {
</div>
<div className='sidebar-menu__section sidebar-menu__section--borderless'>
<div className='sidebar-menu-item theme-toggle'>
<ThemeToggle showLabel />
</div>
</div>
<div className='sidebar-menu__section sidebar-menu__section'>
<NavLink className='sidebar-menu-item' to={`/@${acct}`} onClick={onClose}>
<Icon id='user' />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.profile)}</span>

Wyświetl plik

@ -12,13 +12,10 @@ import ActionBar from 'soapbox/features/compose/components/action_bar';
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';
import ThemeToggle from '../../ui/components/theme_toggle';
const messages = defineMessages({
post: { id: 'tabs_bar.post', defaultMessage: 'Post' },
switchToLight: { id: 'tabs_bar.theme_toggle_light', defaultMessage: 'Switch to light theme' },
switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' },
});
@withRouter
@ -29,10 +26,8 @@ class TabsBar extends React.PureComponent {
history: PropTypes.object.isRequired,
onOpenCompose: PropTypes.func,
onOpenSidebar: PropTypes.func.isRequired,
toggleTheme: PropTypes.func,
logo: PropTypes.string,
account: ImmutablePropTypes.map,
settings: ImmutablePropTypes.map.isRequired,
}
state = {
@ -84,12 +79,8 @@ class TabsBar extends React.PureComponent {
}));
}
handleToggleTheme = () => {
this.props.toggleTheme(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
}
render() {
const { account, onOpenCompose, onOpenSidebar, intl, settings } = this.props;
const { account, onOpenCompose, onOpenSidebar, intl } = this.props;
const { collapsed } = this.state;
const classes = classNames('tabs-bar', {
@ -108,7 +99,7 @@ class TabsBar extends React.PureComponent {
</div>
{ account &&
<div className='flex'>
<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)} />
<ThemeToggle />
<div className='tabs-bar__profile'>
<Avatar account={account} />
<button className='tabs-bar__sidebar-btn' onClick={onOpenSidebar} />
@ -140,11 +131,9 @@ class TabsBar extends React.PureComponent {
const mapStateToProps = state => {
const me = state.get('me');
const settings = getSettings(state);
return {
account: state.getIn(['accounts', me]),
logo: state.getIn(['soapbox', 'logo']),
settings: settings,
};
};
@ -155,9 +144,6 @@ const mapDispatchToProps = (dispatch) => ({
onOpenSidebar() {
dispatch(openSidebar());
},
toggleTheme(setting) {
dispatch(changeSetting(['themeMode'], setting));
},
});
export default injectIntl(

Wyświetl plik

@ -61,6 +61,7 @@
@import 'components/still-image';
@import 'components/timeline-queue-header';
@import 'components/badge';
@import 'components/theme-toggle';
@import 'components/trends';
@import 'components/wtf-panel';
@import 'components/profile-info-panel';

Wyświetl plik

@ -161,6 +161,10 @@
margin-right: 10px;
}
&.theme-toggle {
padding-top: 0;
}
&:hover {
&__title {
color: var(--primary-text-color);

Wyświetl plik

@ -111,14 +111,6 @@
}
}
&__button-theme-toggle {
margin-left: 10px;
padding: 0 10px;
font-size: 20px;
.fa { margin-right: 0; }
}
&__button-compose {
display: block;
@media screen and (max-width: $nav-breakpoint-3) {display: none;}
@ -149,22 +141,20 @@
display: flex;
}
.setting-toggle {
margin-top: 5px;
margin-left: 10px;
.theme-toggle {
@media screen and (max-width: $nav-breakpoint-3) {display: none;}
.react-toggle-track-check,
.react-toggle-track-x {
height: 15px;
color: #fff;
}
.setting-toggle {
margin-top: 3px;
margin-left: 10px;
.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);
.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);
}
}
}
}