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

Added noActions prop to NavigationBar

Browse Source 
• Added:
- noActions prop to NavigationBar for Introduction
This commit is contained in:
mgabdev 2020-07-14 01:05:21 -05:00
parent e9475219c9
commit 37499c3172
1 changed files with 56 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
app/javascript/gabsocial/components/navigation_bar.js
View File

@ -47,6 +47,7 @@ class NavigationBar extends ImmutablePureComponent {
showBackBtn: PropTypes.bool, showBackBtn: PropTypes.bool,
onOpenSidebar: PropTypes.func.isRequired, onOpenSidebar: PropTypes.func.isRequired,
onOpenNavSettingsPopover: PropTypes.func.isRequired, onOpenNavSettingsPopover: PropTypes.func.isRequired,
noActions: PropTypes.bool,
noSearch: PropTypes.bool, noSearch: PropTypes.bool,
} }
@ -66,6 +67,7 @@ class NavigationBar extends ImmutablePureComponent {
tabs, tabs,
account, account,
onOpenSidebar, onOpenSidebar,
noActions,
noSearch, noSearch,
} = this.props } = this.props
@ -104,30 +106,33 @@ class NavigationBar extends ImmutablePureComponent {
</div> </div>
<div className={[_s.default, _s.mlAuto].join(' ')}> <div className={[_s.default, _s.mlAuto].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.pl15, _s.flexRow, _s.alignItemsCenter, _s.justifyContentSpaceBetween].join(' ')}> {
!noActions &&
<div className={[_s.default, _s.height53PX, _s.pl15, _s.flexRow, _s.alignItemsCenter, _s.justifyContentSpaceBetween].join(' ')}>
<NavigationBarButton title='Home' icon='home' to='/home' /> <NavigationBarButton title='Home' icon='home' to='/home' />
<NavigationBarButton title='Explore' icon='explore' to='/explore' /> <NavigationBarButton title='Explore' icon='explore' to='/explore' />
<NavigationBarButtonDivider /> <NavigationBarButtonDivider />
<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' />
<NavigationBarButtonDivider /> <NavigationBarButtonDivider />
{ {
!!account && !!account &&
<button <button
ref={this.setAvatarNode} ref={this.setAvatarNode}
title={account.get('display_name')} title={account.get('display_name')}
onClick={this.handleOnOpenNavSettingsPopover} onClick={this.handleOnOpenNavSettingsPopover}
className={[_s.height53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.default, _s.justifyContentCenter, _s.ml15].join(' ')} className={[_s.height53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.default, _s.justifyContentCenter, _s.ml15].join(' ')}
> >
<Avatar account={account} size={32} noHover /> <Avatar account={account} size={32} noHover />
</button> </button>
} }
</div> </div>
}
</div> </div>
</Responsive> </Responsive>
@ -136,7 +141,7 @@ class NavigationBar extends ImmutablePureComponent {
<Responsive max={BREAKPOINT_EXTRA_SMALL}> <Responsive max={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.width84PX, _s.alignItemsStart, _s.pl10].join(' ')}> <div className={[_s.default, _s.width84PX, _s.alignItemsStart, _s.pl10].join(' ')}>
{ {
!!account && !showBackBtn && !!account && !showBackBtn && !noActions &&
<button <button
title={account.get('display_name')} title={account.get('display_name')}
onClick={onOpenSidebar} onClick={onOpenSidebar}
@ -154,6 +159,22 @@ class NavigationBar extends ImmutablePureComponent {
iconClassName={[_s.mr5, _s.fillNavigation].join(' ')} iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
/> />
} }
{
noActions &&
<h1 className={[_s.default, _s.mr15].join(' ')}>
<Button
to='/'
isText
title='Gab'
aria-label='Gab'
color='none'
backgroundColor='none'
className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
>
<Icon id='logo' className={_s.fillNavigationBrand} />
</Button>
</h1>
}
</div> </div>
<div className={[_s.default, _s.height53PX, _s.justifyContentCenter, _s.mlAuto, _s.mrAuto].join(' ')}> <div className={[_s.default, _s.height53PX, _s.justifyContentCenter, _s.mlAuto, _s.mrAuto].join(' ')}>
@ -181,17 +202,20 @@ class NavigationBar extends ImmutablePureComponent {
/> />
)) ))
} }
<Button {
isNarrow !noSearch &&
backgroundColor='none' <Button
color='primary' isNarrow
to='/search' backgroundColor='none'
key={`action-btn-search`} color='primary'
className={[_s.ml5, _s.height53PX, _s.justifyContentCenter, _s.px5].join(' ')} to='/search'
icon='search' key={`action-btn-search`}
iconClassName={_s.fillNavigation} className={[_s.ml5, _s.height53PX, _s.justifyContentCenter, _s.px5].join(' ')}
iconSize='18px' icon='search'
/> iconClassName={_s.fillNavigation}
iconSize='18px'
/>
}
</div> </div>
</div> </div>