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

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

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