random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated DefaultNavigationBar to have light/muted/dark mode toggle

Browse Source 
• Updated:
- DefaultNavigationBar to have light/muted/dark mode toggle on desktop only
This commit is contained in:
mgabdev 2020-10-16 17:00:59 -05:00
parent 42f244e967
commit 57c2edbd2f
1 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/javascript/gabsocial/components/navigation_bar/default_navigation_bar.js
View File

@ -21,6 +21,8 @@ import { makeGetAccount } from '../../selectors'
import Responsive from '../../features/ui/util/responsive_component' import Responsive from '../../features/ui/util/responsive_component'
import { import {
CX, CX,
THEMES,
DEFAULT_THEME,
POPOVER_NAV_SETTINGS, POPOVER_NAV_SETTINGS,
} from '../../constants' } from '../../constants'
import Avatar from '../avatar' import Avatar from '../avatar'
@ -34,6 +36,13 @@ import Text from '../text'
class DefaultNavigationBar extends ImmutablePureComponent { class DefaultNavigationBar extends ImmutablePureComponent {
handleOnClickLightBulb = () => {
let index = THEMES.findIndex((t) => t === this.props.theme)
const nextIndex = (index === THEMES.length -1) ? 0 : index += 1
const newTheme = THEMES[nextIndex]
this.props.onChange('theme', newTheme)
}
handleOnOpenNavSettingsPopover = () => { handleOnOpenNavSettingsPopover = () => {
this.props.onOpenNavSettingsPopover(this.avatarNode) this.props.onOpenNavSettingsPopover(this.avatarNode)
} }
@ -166,6 +175,7 @@ class DefaultNavigationBar extends ImmutablePureComponent {
<NavigationBarButton attrTitle='Notifications' icon='notifications' to='/notifications' /> <NavigationBarButton attrTitle='Notifications' icon='notifications' to='/notifications' />
<NavigationBarButton attrTitle='Settings' icon='cog' href='/settings/preferences' /> <NavigationBarButton attrTitle='Settings' icon='cog' href='/settings/preferences' />
<NavigationBarButton attrTitle='Dark/Muted/Light Mode' icon='light-bulb' onClick={this.handleOnClickLightBulb} />
<div className={[_s.d, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} /> <div className={[_s.d, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
@ -282,6 +292,7 @@ class DefaultNavigationBar extends ImmutablePureComponent {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
account: makeGetAccount()(state, me), account: makeGetAccount()(state, me),
emailConfirmationResends: state.getIn(['user', 'emailConfirmationResends'], 0), emailConfirmationResends: state.getIn(['user', 'emailConfirmationResends'], 0),
theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
}) })
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
@ -300,6 +311,10 @@ const mapDispatchToProps = (dispatch) => ({
onResendUserConfirmationEmail() { onResendUserConfirmationEmail() {
dispatch(resendUserConfirmationEmail()) dispatch(resendUserConfirmationEmail())
}, },
onChange(key, value) {
dispatch(changeSetting(['displayOptions', key], value))
dispatch(saveSettings())
},
}) })
DefaultNavigationBar.propTypes = { DefaultNavigationBar.propTypes = {
@ -315,6 +330,7 @@ DefaultNavigationBar.propTypes = {
emailConfirmationResends: PropTypes.number.isRequired, emailConfirmationResends: PropTypes.number.isRequired,
noActions: PropTypes.bool, noActions: PropTypes.bool,
noSearch: PropTypes.bool, noSearch: PropTypes.bool,
theme: PropTypes.string,
} }
export default connect(mapStateToProps, mapDispatchToProps)(DefaultNavigationBar) export default connect(mapStateToProps, mapDispatchToProps)(DefaultNavigationBar)