Updated Sidebar, NavigationBar components, Added layouts
• Updated: - Sidebar, NavigationBar components - file structures for both • Added: - layouts for compnents
This commit is contained in:
mgabdev
parent
147f7ed878
commit
d7cd258977
|
|
@ -1,124 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { injectIntl, defineMessages } from 'react-intl'
|
|
||||||
import { me } from '../initial_state'
|
|
||||||
import SidebarSectionTitle from './sidebar_section_title'
|
|
||||||
import SidebarSectionItem from './sidebar_section_item'
|
|
||||||
import Heading from './heading'
|
|
||||||
import LinkFooter from './link_footer'
|
|
||||||
|
|
||||||
class Sidebar extends React.PureComponent {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
intl,
|
|
||||||
title,
|
|
||||||
showLinkFooter,
|
|
||||||
} = this.props
|
|
||||||
|
|
||||||
if (!!me) return null
|
|
||||||
|
|
||||||
const menuItems = [
|
|
||||||
{
|
|
||||||
title: 'Home',
|
|
||||||
icon: 'home',
|
|
||||||
to: '/',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Search',
|
|
||||||
icon: 'search-alt',
|
|
||||||
to: '/search',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Groups',
|
|
||||||
icon: 'group',
|
|
||||||
to: '/groups',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'News',
|
|
||||||
icon: 'news',
|
|
||||||
to: '/news',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const exploreItems = [
|
|
||||||
{
|
|
||||||
title: 'Apps',
|
|
||||||
icon: 'apps',
|
|
||||||
href: 'https://apps.gab.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Shop',
|
|
||||||
icon: 'shop',
|
|
||||||
href: 'https://shop.dissenter.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Trends',
|
|
||||||
icon: 'trends',
|
|
||||||
href: 'https://trends.gab.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Dissenter',
|
|
||||||
icon: 'dissenter',
|
|
||||||
href: 'https://dissenter.com',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<header role='banner' className={[_s.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
|
|
||||||
<div className={[_s.d, _s.w240PX].join(' ')}>
|
|
||||||
<div className={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
|
|
||||||
<div className={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
|
|
||||||
<div className={[_s.d, _s.w100PC].join(' ')}>
|
|
||||||
{
|
|
||||||
!!title &&
|
|
||||||
<div className={[_s.d, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
|
|
||||||
<Heading size='h1'>
|
|
||||||
{title}
|
|
||||||
</Heading>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<nav aria-label='Primary' role='navigation' className={[_s.d, _s.w100PC, _s.mb15].join(' ')}>
|
|
||||||
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
|
|
||||||
{
|
|
||||||
menuItems.map((menuItem, i) => {
|
|
||||||
if (menuItem.hidden) return null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarSectionItem {...menuItem} key={`sidebar-item-menu-${i}`} />
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
<SidebarSectionTitle>{intl.formatMessage(messages.explore)}</SidebarSectionTitle>
|
|
||||||
{
|
|
||||||
exploreItems.map((exploreItem, i) => (
|
|
||||||
<SidebarSectionItem {...exploreItem} key={`sidebar-item-explore-${i}`} />
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
{
|
|
||||||
showLinkFooter && <LinkFooter noPadding />
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
explore: { id: 'explore', defaultMessage: 'Explore' },
|
|
||||||
menu: { id: 'menu', defaultMessage: 'Menu' },
|
|
||||||
})
|
|
||||||
|
|
||||||
Sidebar.propTypes = {
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
showLinkFooter: PropTypes.bool,
|
|
||||||
title: PropTypes.string,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default injectIntl(Sidebar)
|
|
||||||
|
|
@ -3,26 +3,26 @@ import PropTypes from 'prop-types'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||||
import { openSidebar } from '../actions/sidebar'
|
import { openSidebar } from '../../actions/sidebar'
|
||||||
import { openPopover } from '../actions/popover'
|
import { openPopover } from '../../actions/popover'
|
||||||
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
|
import { BREAKPOINT_EXTRA_SMALL } from '../../constants'
|
||||||
import { me } from '../initial_state'
|
import { me } from '../../initial_state'
|
||||||
import { makeGetAccount } from '../selectors'
|
import { makeGetAccount } from '../../selectors'
|
||||||
import Responsive from '../features/ui/util/responsive_component'
|
import Responsive from '../../features/ui/util/responsive_component'
|
||||||
import {
|
import {
|
||||||
CX,
|
CX,
|
||||||
POPOVER_NAV_SETTINGS,
|
POPOVER_NAV_SETTINGS,
|
||||||
} from '../constants'
|
} from '../../constants'
|
||||||
import Avatar from './avatar'
|
import Avatar from '../avatar'
|
||||||
import BackButton from './back_button'
|
import BackButton from '../back_button'
|
||||||
import Button from './button'
|
import Button from '../button'
|
||||||
import Heading from './heading'
|
import Heading from '../heading'
|
||||||
import Icon from './icon'
|
import Icon from '../icon'
|
||||||
import NavigationBarButton from './navigation_bar_button'
|
import NavigationBarButton from '../navigation_bar_button'
|
||||||
import Search from './search'
|
import Search from '../search'
|
||||||
import Text from './text'
|
import Text from '../text'
|
||||||
|
|
||||||
class NavigationBar extends ImmutablePureComponent {
|
class DefaultNavigationBar extends ImmutablePureComponent {
|
||||||
|
|
||||||
handleOnOpenNavSettingsPopover = () => {
|
handleOnOpenNavSettingsPopover = () => {
|
||||||
this.props.onOpenNavSettingsPopover(this.avatarNode)
|
this.props.onOpenNavSettingsPopover(this.avatarNode)
|
||||||
|
|
@ -86,6 +86,7 @@ class NavigationBar extends ImmutablePureComponent {
|
||||||
<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' />
|
||||||
<NavigationBarButton title='News' icon='news' to='/news' />
|
<NavigationBarButton title='News' icon='news' to='/news' />
|
||||||
|
<NavigationBarButton title='TV' icon='gab-tv' href='https://tv.gab.com' />
|
||||||
|
|
||||||
<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(' ')} />
|
||||||
|
|
||||||
|
|
@ -222,7 +223,7 @@ const mapDispatchToProps = (dispatch) => ({
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
NavigationBar.propTypes = {
|
DefaultNavigationBar.propTypes = {
|
||||||
account: ImmutablePropTypes.map,
|
account: ImmutablePropTypes.map,
|
||||||
actions: PropTypes.array,
|
actions: PropTypes.array,
|
||||||
tabs: PropTypes.array,
|
tabs: PropTypes.array,
|
||||||
|
|
@ -234,4 +235,4 @@ NavigationBar.propTypes = {
|
||||||
noSearch: PropTypes.bool,
|
noSearch: PropTypes.bool,
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(NavigationBar)
|
export default connect(mapStateToProps, mapDispatchToProps)(DefaultNavigationBar)
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
|
import { BREAKPOINT_EXTRA_SMALL } from '../../constants'
|
||||||
import Button from './button'
|
import Button from '../button'
|
||||||
import NavigationBarButton from './navigation_bar_button'
|
import NavigationBarButton from '../navigation_bar_button'
|
||||||
import Search from './search'
|
import Search from '../search'
|
||||||
import Text from './text'
|
import Text from '../text'
|
||||||
import ResponsiveComponent from '../features/ui/util/responsive_component'
|
import ResponsiveComponent from '../../features/ui/util/responsive_component'
|
||||||
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
|
import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
|
||||||
|
|
||||||
class LoggedOutNavigationBar extends React.PureComponent {
|
class LoggedOutNavigationBar extends React.PureComponent {
|
||||||
|
|
||||||
|
|
@ -46,6 +46,7 @@ class LoggedOutNavigationBar extends React.PureComponent {
|
||||||
<NavigationBarButton title='Home' icon='home' href='/home' />
|
<NavigationBarButton title='Home' icon='home' href='/home' />
|
||||||
<NavigationBarButton title='Explore' icon='explore' to='/explore' />
|
<NavigationBarButton title='Explore' icon='explore' to='/explore' />
|
||||||
<NavigationBarButton title='News' icon='news' to='/news' />
|
<NavigationBarButton title='News' icon='news' to='/news' />
|
||||||
|
<NavigationBarButton title='TV' icon='gab-tv' href='https://tv.gab.com' />
|
||||||
</div>
|
</div>
|
||||||
</ResponsiveComponent>
|
</ResponsiveComponent>
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import BackButton from '../back_button'
|
||||||
|
import Heading from '../heading'
|
||||||
|
|
||||||
|
class ProfileNavigationBar extends React.PureComponent {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { titleHTML } = this.props
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={[_s.d, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}>
|
||||||
|
<div className={[_s.d, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
|
||||||
|
|
||||||
|
<div className={[_s.d, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}>
|
||||||
|
|
||||||
|
<BackButton
|
||||||
|
className={[_s.minH53PX, _s.pl10, _s.pr10].join(' ')}
|
||||||
|
iconSize='18px'
|
||||||
|
iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className={[_s.d, _s.minH53PX, _s.jcCenter, _s.mrAuto].join(' ')}>
|
||||||
|
<Heading size='h1'>
|
||||||
|
<span className={[_s.textOverflowEllipsis, _s.colorNavigation].join(' ')}>
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: titleHTML }} />
|
||||||
|
</span>
|
||||||
|
</Heading>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
ProfileNavigationBar.propTypes = {
|
||||||
|
titleHTML: PropTypes.string,
|
||||||
|
showBackBtn: PropTypes.bool,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ProfileNavigationBar
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { connect } from 'react-redux'
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
|
||||||
import { injectIntl, defineMessages } from 'react-intl'
|
|
||||||
import { me } from '../initial_state'
|
|
||||||
import { makeGetAccount } from '../selectors'
|
|
||||||
import SidebarSectionTitle from './sidebar_section_title'
|
|
||||||
import SidebarSectionItem from './sidebar_section_item'
|
|
||||||
import Heading from './heading'
|
|
||||||
import BackButton from './back_button'
|
|
||||||
|
|
||||||
class Sidebar extends ImmutablePureComponent {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
intl,
|
|
||||||
account,
|
|
||||||
title,
|
|
||||||
} = this.props
|
|
||||||
|
|
||||||
if (!me || !account) return null
|
|
||||||
|
|
||||||
const menuItems = [
|
|
||||||
{
|
|
||||||
title: intl.formatMessage(messages.blocks),
|
|
||||||
to: '/settings/blocks',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: intl.formatMessage(messages.mutes),
|
|
||||||
to: '/settings/mutes',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: intl.formatMessage(messages.preferences),
|
|
||||||
href: '/settings/preferences',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<header role='banner' className={[_s.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
|
|
||||||
<div className={[_s.d, _s.w240PX].join(' ')}>
|
|
||||||
<div className={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
|
|
||||||
<div className={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
|
|
||||||
<div className={[_s.d, _s.w100PC].join(' ')}>
|
|
||||||
<div className={[_s.d, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
|
|
||||||
<BackButton
|
|
||||||
icon='arrow-left'
|
|
||||||
toHome
|
|
||||||
/>
|
|
||||||
<Heading size='h1'>
|
|
||||||
{title}
|
|
||||||
</Heading>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<nav aria-label='Primary' role='navigation' className={[_s.d, _s.w100PC, _s.mb15].join(' ')}>
|
|
||||||
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
|
|
||||||
{
|
|
||||||
menuItems.map((menuItem, i) => {
|
|
||||||
if (menuItem.hidden) return null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarSectionItem {...menuItem} key={`sidebar-item-menu-${i}`} />
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
|
|
||||||
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
|
|
||||||
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
|
|
||||||
menu: { id: 'menu', defaultMessage: 'Menu' },
|
|
||||||
})
|
|
||||||
|
|
||||||
const mapStateToProps = (state) => ({
|
|
||||||
account: makeGetAccount()(state, me),
|
|
||||||
})
|
|
||||||
|
|
||||||
Sidebar.propTypes = {
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
account: ImmutablePropTypes.map,
|
|
||||||
title: PropTypes.string,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default injectIntl(connect(mapStateToProps)(Sidebar))
|
|
||||||
|
|
@ -1,357 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { connect } from 'react-redux'
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
|
||||||
import { injectIntl, defineMessages } from 'react-intl'
|
|
||||||
import {
|
|
||||||
BREAKPOINT_SMALL,
|
|
||||||
} from '../constants'
|
|
||||||
import Button from './button'
|
|
||||||
import { closeSidebar } from '../actions/sidebar'
|
|
||||||
import { openModal } from '../actions/modal'
|
|
||||||
import { openPopover } from '../actions/popover'
|
|
||||||
import { fetchShortcuts } from '../actions/shortcuts'
|
|
||||||
import { me } from '../initial_state'
|
|
||||||
import { makeGetAccount } from '../selectors'
|
|
||||||
import Responsive from '../features/ui/util/responsive_component'
|
|
||||||
import SidebarSectionTitle from './sidebar_section_title'
|
|
||||||
import SidebarSectionItem from './sidebar_section_item'
|
|
||||||
import Heading from './heading'
|
|
||||||
import BackButton from './back_button'
|
|
||||||
import Pills from './pills'
|
|
||||||
import Text from './text'
|
|
||||||
|
|
||||||
class Sidebar extends ImmutablePureComponent {
|
|
||||||
|
|
||||||
state = {
|
|
||||||
hoveringShortcuts: false,
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.props.onFetchShortcuts()
|
|
||||||
}
|
|
||||||
|
|
||||||
handleOpenComposeModal = () => {
|
|
||||||
this.props.onOpenComposeModal()
|
|
||||||
}
|
|
||||||
|
|
||||||
handleOpenSidebarMorePopover = () => {
|
|
||||||
this.props.openSidebarMorePopover({
|
|
||||||
targetRef: this.moreBtnRef,
|
|
||||||
position: 'top',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMouseEnterShortcuts = () => {
|
|
||||||
this.setState({ hoveringShortcuts: true })
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMouseLeaveShortcuts = () => {
|
|
||||||
this.setState({ hoveringShortcuts: false })
|
|
||||||
}
|
|
||||||
|
|
||||||
setMoreButtonRef = n => {
|
|
||||||
this.moreBtnRef = n
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
intl,
|
|
||||||
account,
|
|
||||||
notificationCount,
|
|
||||||
homeItemsQueueCount,
|
|
||||||
moreOpen,
|
|
||||||
actions,
|
|
||||||
tabs,
|
|
||||||
title,
|
|
||||||
showBackBtn,
|
|
||||||
shortcuts,
|
|
||||||
} = this.props
|
|
||||||
const { hoveringShortcuts } = this.state
|
|
||||||
|
|
||||||
if (!me || !account) return null
|
|
||||||
|
|
||||||
const menuItems = [
|
|
||||||
{
|
|
||||||
title: 'Home',
|
|
||||||
icon: 'home',
|
|
||||||
to: '/home',
|
|
||||||
count: homeItemsQueueCount,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Notifications',
|
|
||||||
icon: 'notifications',
|
|
||||||
to: '/notifications',
|
|
||||||
count: notificationCount,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Search',
|
|
||||||
icon: 'search-alt',
|
|
||||||
to: '/search',
|
|
||||||
hidden: true, // : todo : show only when search on top is not visible
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Groups',
|
|
||||||
icon: 'group',
|
|
||||||
to: '/groups',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Lists',
|
|
||||||
icon: 'list',
|
|
||||||
to: '/lists',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Explore',
|
|
||||||
icon: 'explore',
|
|
||||||
to: '/explore',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Pro Feed',
|
|
||||||
icon: 'explore',
|
|
||||||
to: '/timeline/pro',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'News',
|
|
||||||
icon: 'news',
|
|
||||||
to: '/news',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'More',
|
|
||||||
icon: 'more',
|
|
||||||
onClick: this.handleOpenSidebarMorePopover,
|
|
||||||
buttonRef: this.setMoreButtonRef,
|
|
||||||
active: moreOpen,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
let shortcutItems = []
|
|
||||||
if (!!shortcuts) {
|
|
||||||
shortcuts.forEach((s) => {
|
|
||||||
shortcutItems.push({
|
|
||||||
to: s.get('to'),
|
|
||||||
title: s.get('title'),
|
|
||||||
image: s.get('image'),
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const exploreItems = [
|
|
||||||
{
|
|
||||||
title: 'Apps',
|
|
||||||
icon: 'apps',
|
|
||||||
href: 'https://apps.gab.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Shop',
|
|
||||||
icon: 'shop',
|
|
||||||
href: 'https://shop.dissenter.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Trends',
|
|
||||||
icon: 'trends',
|
|
||||||
href: 'https://trends.gab.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Dissenter',
|
|
||||||
icon: 'dissenter',
|
|
||||||
href: 'https://dissenter.com',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<header role='banner' className={[_s.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
|
|
||||||
<div className={[_s.d, _s.w240PX].join(' ')}>
|
|
||||||
<div className={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
|
|
||||||
<div className={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
|
|
||||||
<div className={[_s.d, _s.w100PC].join(' ')}>
|
|
||||||
{
|
|
||||||
!!title &&
|
|
||||||
<div className={[_s.d, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
|
|
||||||
{
|
|
||||||
showBackBtn &&
|
|
||||||
<BackButton
|
|
||||||
icon='arrow-left'
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
<Heading size='h1'>
|
|
||||||
{title}
|
|
||||||
</Heading>
|
|
||||||
{
|
|
||||||
!!actions &&
|
|
||||||
<div className={[_s.d, _s.bgTransparent, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.mlAuto].join(' ')}>
|
|
||||||
{
|
|
||||||
actions.map((action, i) => (
|
|
||||||
<Button
|
|
||||||
isNarrow
|
|
||||||
backgroundColor='none'
|
|
||||||
color='primary'
|
|
||||||
onClick={action.onClick ? () => action.onClick() : undefined}
|
|
||||||
to={action.to}
|
|
||||||
key={`action-btn-${i}`}
|
|
||||||
className={[_s.ml5, _s.px5].join(' ')}
|
|
||||||
icon={action.icon}
|
|
||||||
iconClassName={_s.cPrimary}
|
|
||||||
iconSize='14px'
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
{
|
|
||||||
!!tabs &&
|
|
||||||
<div className={[_s.d, _s.mt10, _s.pb15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
|
||||||
<Pills pills={tabs} />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<nav aria-label='Primary' role='navigation' className={[_s.d, _s.w100PC, _s.mb15].join(' ')}>
|
|
||||||
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
|
|
||||||
{
|
|
||||||
menuItems.map((menuItem, i) => {
|
|
||||||
if (menuItem.hidden) return null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarSectionItem {...menuItem} key={`sidebar-item-menu-${i}`} />
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
{
|
|
||||||
!!shortcutItems.length > 0 &&
|
|
||||||
<React.Fragment>
|
|
||||||
<SidebarSectionTitle>
|
|
||||||
<div
|
|
||||||
className={[_s.displayFlex, _s.aiCenter, _s.flexRow].join(' ')}
|
|
||||||
onMouseEnter={this.handleMouseEnterShortcuts}
|
|
||||||
onMouseLeave={this.handleMouseLeaveShortcuts}
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{intl.formatMessage(messages.shortcuts)}
|
|
||||||
</span>
|
|
||||||
<Button
|
|
||||||
isText
|
|
||||||
to='/shortcuts'
|
|
||||||
color='brand'
|
|
||||||
backgroundColor='none'
|
|
||||||
className={_s.mlAuto}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
hoveringShortcuts &&
|
|
||||||
<Text color='inherit' size='small' weight='medium' align='right'>
|
|
||||||
{intl.formatMessage(messages.all)}
|
|
||||||
</Text>
|
|
||||||
}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</SidebarSectionTitle>
|
|
||||||
{
|
|
||||||
shortcutItems.map((shortcutItem, i) => (
|
|
||||||
<SidebarSectionItem {...shortcutItem} key={`sidebar-item-shortcut-${i}`} />
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</React.Fragment>
|
|
||||||
}
|
|
||||||
<SidebarSectionTitle>{intl.formatMessage(messages.explore)}</SidebarSectionTitle>
|
|
||||||
{
|
|
||||||
exploreItems.map((exploreItem, i) => (
|
|
||||||
<SidebarSectionItem {...exploreItem} key={`sidebar-item-explore-${i}`} />
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<Responsive min={BREAKPOINT_SMALL}>
|
|
||||||
<Button
|
|
||||||
isBlock
|
|
||||||
onClick={this.handleOpenComposeModal}
|
|
||||||
className={[_s.py15, _s.fs15PX, _s.fw600].join(' ')}
|
|
||||||
>
|
|
||||||
Gab
|
|
||||||
</Button>
|
|
||||||
</Responsive>
|
|
||||||
|
|
||||||
<Responsive max={BREAKPOINT_SMALL}>
|
|
||||||
<Button
|
|
||||||
onClick={this.handleOpenComposeModal}
|
|
||||||
className={_s.py15}
|
|
||||||
icon='pencil'
|
|
||||||
/>
|
|
||||||
</Responsive>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
followers: { id: 'account.followers', defaultMessage: 'Followers' },
|
|
||||||
follows: { id: 'account.follows', defaultMessage: 'Following' },
|
|
||||||
profile: { id: 'account.profile', defaultMessage: 'Profile' },
|
|
||||||
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
|
|
||||||
follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
|
|
||||||
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
|
|
||||||
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
|
|
||||||
filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
|
|
||||||
logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
|
|
||||||
lists: { id: 'column.lists', defaultMessage: 'Lists' },
|
|
||||||
apps: { id: 'tabs_bar.apps', defaultMessage: 'Apps' },
|
|
||||||
more: { id: 'sidebar.more', defaultMessage: 'More' },
|
|
||||||
explore: { id: 'explore', defaultMessage: 'Explore' },
|
|
||||||
news: { id: 'news', defaultMessage: 'News' },
|
|
||||||
menu: { id: 'menu', defaultMessage: 'Menu' },
|
|
||||||
pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
|
|
||||||
trends: { id: 'promo.trends', defaultMessage: 'Trends' },
|
|
||||||
search: { id: 'tabs_bar.search', defaultMessage: 'Search' },
|
|
||||||
shop: { id: 'tabs_bar.shop', defaultMessage: 'Store - Buy Merch' },
|
|
||||||
donate: { id: 'tabs_bar.donate', defaultMessage: 'Make a Donation' },
|
|
||||||
shortcuts: { id: 'navigation_bar.shortcuts', defaultMessage: 'Shortcuts' },
|
|
||||||
all: { id: 'all', defaultMessage: 'All' },
|
|
||||||
edit: { id: 'edit', defaultMessage: 'Edit' },
|
|
||||||
})
|
|
||||||
|
|
||||||
const mapStateToProps = (state) => ({
|
|
||||||
account: makeGetAccount()(state, me),
|
|
||||||
shortcuts: state.getIn(['shortcuts', 'items']),
|
|
||||||
moreOpen: state.getIn(['popover', 'popoverType']) === 'SIDEBAR_MORE',
|
|
||||||
notificationCount: state.getIn(['notifications', 'unread']),
|
|
||||||
homeItemsQueueCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']),
|
|
||||||
})
|
|
||||||
|
|
||||||
const mapDispatchToProps = (dispatch) => ({
|
|
||||||
onClose() {
|
|
||||||
dispatch(closeSidebar())
|
|
||||||
},
|
|
||||||
openSidebarMorePopover(props) {
|
|
||||||
dispatch(openPopover('SIDEBAR_MORE', props))
|
|
||||||
},
|
|
||||||
onOpenComposeModal() {
|
|
||||||
dispatch(openModal('COMPOSE'))
|
|
||||||
},
|
|
||||||
onFetchShortcuts() {
|
|
||||||
dispatch(fetchShortcuts())
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
Sidebar.propTypes = {
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
account: ImmutablePropTypes.map,
|
|
||||||
moreOpen: PropTypes.bool,
|
|
||||||
onClose: PropTypes.func.isRequired,
|
|
||||||
onOpenComposeModal: PropTypes.func.isRequired,
|
|
||||||
onFetchShortcuts: PropTypes.func.isRequired,
|
|
||||||
openSidebarMorePopover: PropTypes.func.isRequired,
|
|
||||||
notificationCount: PropTypes.number.isRequired,
|
|
||||||
homeItemsQueueCount: PropTypes.number.isRequired,
|
|
||||||
actions: PropTypes.array,
|
|
||||||
tabs: PropTypes.array,
|
|
||||||
title: PropTypes.string,
|
|
||||||
showBackBtn: PropTypes.bool,
|
|
||||||
shortcuts: ImmutablePropTypes.list,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Sidebar))
|
|
||||||
|
|
@ -3,12 +3,12 @@ import PropTypes from 'prop-types'
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||||
import { injectIntl, defineMessages } from 'react-intl'
|
import { injectIntl, defineMessages } from 'react-intl'
|
||||||
import { me } from '../initial_state'
|
import { me } from '../../initial_state'
|
||||||
import SidebarSectionTitle from './sidebar_section_title'
|
import SidebarSectionTitle from '../sidebar_section_title'
|
||||||
import SidebarSectionItem from './sidebar_section_item'
|
import SidebarSectionItem from '../sidebar_section_item'
|
||||||
import Heading from './heading'
|
import Heading from '../heading'
|
||||||
import BackButton from './back_button'
|
import BackButton from '../back_button'
|
||||||
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
|
import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
|
||||||
|
|
||||||
class AboutSidebar extends ImmutablePureComponent {
|
class AboutSidebar extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
|
@ -0,0 +1,177 @@
|
||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import { connect } from 'react-redux'
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||||
|
import { injectIntl, defineMessages } from 'react-intl'
|
||||||
|
import { openPopover } from '../../actions/popover'
|
||||||
|
import { fetchShortcuts } from '../../actions/shortcuts'
|
||||||
|
import { me } from '../../initial_state'
|
||||||
|
import Responsive from '../../features/ui/util/responsive_component'
|
||||||
|
import Button from '../button'
|
||||||
|
import Text from '../text'
|
||||||
|
import SidebarSectionTitle from '../sidebar_section_title'
|
||||||
|
import SidebarSectionItem from '../sidebar_section_item'
|
||||||
|
import SidebarLayout from './sidebar_layout'
|
||||||
|
|
||||||
|
class DefaultSidebar extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
state = {
|
||||||
|
hoveringShortcuts: false,
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.props.onFetchShortcuts()
|
||||||
|
}
|
||||||
|
|
||||||
|
handleOpenSidebarMorePopover = () => {
|
||||||
|
this.props.openSidebarMorePopover({
|
||||||
|
targetRef: this.moreBtnRef,
|
||||||
|
position: 'top',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMouseEnterShortcuts = () => {
|
||||||
|
this.setState({ hoveringShortcuts: true })
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMouseLeaveShortcuts = () => {
|
||||||
|
this.setState({ hoveringShortcuts: false })
|
||||||
|
}
|
||||||
|
|
||||||
|
setMoreButtonRef = n => {
|
||||||
|
this.moreBtnRef = n
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
intl,
|
||||||
|
notificationCount,
|
||||||
|
homeItemsQueueCount,
|
||||||
|
moreOpen,
|
||||||
|
actions,
|
||||||
|
tabs,
|
||||||
|
title,
|
||||||
|
showBackBtn,
|
||||||
|
shortcuts,
|
||||||
|
} = this.props
|
||||||
|
const { hoveringShortcuts } = this.state
|
||||||
|
|
||||||
|
if (!me) return null
|
||||||
|
|
||||||
|
let shortcutItems = []
|
||||||
|
if (!!shortcuts) {
|
||||||
|
shortcuts.forEach((s) => {
|
||||||
|
shortcutItems.push({
|
||||||
|
to: s.get('to'),
|
||||||
|
title: s.get('title'),
|
||||||
|
image: s.get('image'),
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SidebarLayout
|
||||||
|
title={title}
|
||||||
|
showBackBtn={showBackBtn}
|
||||||
|
actions={actions}
|
||||||
|
tabs={tabs}
|
||||||
|
>
|
||||||
|
<SidebarSectionTitle>
|
||||||
|
{intl.formatMessage(messages.menu)}
|
||||||
|
</SidebarSectionTitle>
|
||||||
|
<SidebarSectionItem title='Home' icon='home' to='/home' count={homeItemsQueueCount} />
|
||||||
|
<SidebarSectionItem title='Notifications' icon='notifications' to='/notifications' count={notificationCount} />
|
||||||
|
<SidebarSectionItem title='Groups' icon='group' to='/groups' />
|
||||||
|
<SidebarSectionItem title='Lists' icon='list' to='/lists' />
|
||||||
|
<SidebarSectionItem title='Explore' icon='explore' to='/explore' />
|
||||||
|
<SidebarSectionItem title='Pro Feed' icon='explore' to='/timeline/pro' />
|
||||||
|
<SidebarSectionItem title='News' icon='news' to='/news' />
|
||||||
|
<SidebarSectionItem title='More' icon='more' onClick={this.handleOpenSidebarMorePopover} buttonRef={this.setMoreButtonRef} active={moreOpen} />
|
||||||
|
|
||||||
|
{
|
||||||
|
shortcutItems.length > 0 &&
|
||||||
|
<React.Fragment>
|
||||||
|
<SidebarSectionTitle>
|
||||||
|
<div
|
||||||
|
className={[_s.displayFlex, _s.aiCenter, _s.flexRow].join(' ')}
|
||||||
|
onMouseEnter={this.handleMouseEnterShortcuts}
|
||||||
|
onMouseLeave={this.handleMouseLeaveShortcuts}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
{intl.formatMessage(messages.shortcuts)}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
isText
|
||||||
|
to='/shortcuts'
|
||||||
|
color='brand'
|
||||||
|
backgroundColor='none'
|
||||||
|
className={_s.mlAuto}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
hoveringShortcuts &&
|
||||||
|
<Text color='inherit' size='small' weight='medium' align='right'>
|
||||||
|
{intl.formatMessage(messages.all)}
|
||||||
|
</Text>
|
||||||
|
}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</SidebarSectionTitle>
|
||||||
|
{
|
||||||
|
shortcutItems.map((shortcutItem, i) => (
|
||||||
|
<SidebarSectionItem {...shortcutItem} key={`sidebar-item-shortcut-${i}`} />
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</React.Fragment>
|
||||||
|
}
|
||||||
|
|
||||||
|
<SidebarSectionTitle>{intl.formatMessage(messages.explore)}</SidebarSectionTitle>
|
||||||
|
<SidebarSectionItem title='Apps' icon='apps' href='https://apps.gab.com' />
|
||||||
|
<SidebarSectionItem title='Shop' icon='shop' href='https://shop.dissenter.com' />
|
||||||
|
<SidebarSectionItem title='Trends' icon='trends' href='https://trends.gab.com' />
|
||||||
|
<SidebarSectionItem title='Dissenter' icon='dissenter' href='https://dissenter.com' />
|
||||||
|
|
||||||
|
</SidebarLayout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
explore: { id: 'explore', defaultMessage: 'Explore' },
|
||||||
|
menu: { id: 'menu', defaultMessage: 'Menu' },
|
||||||
|
shortcuts: { id: 'navigation_bar.shortcuts', defaultMessage: 'Shortcuts' },
|
||||||
|
all: { id: 'all', defaultMessage: 'All' },
|
||||||
|
})
|
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({
|
||||||
|
shortcuts: state.getIn(['shortcuts', 'items']),
|
||||||
|
moreOpen: state.getIn(['popover', 'popoverType']) === 'SIDEBAR_MORE',
|
||||||
|
notificationCount: state.getIn(['notifications', 'unread']),
|
||||||
|
homeItemsQueueCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']),
|
||||||
|
})
|
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch) => ({
|
||||||
|
openSidebarMorePopover(props) {
|
||||||
|
dispatch(openPopover('SIDEBAR_MORE', props))
|
||||||
|
},
|
||||||
|
onFetchShortcuts() {
|
||||||
|
dispatch(fetchShortcuts())
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
DefaultSidebar.propTypes = {
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
moreOpen: PropTypes.bool,
|
||||||
|
onFetchShortcuts: PropTypes.func.isRequired,
|
||||||
|
openSidebarMorePopover: PropTypes.func.isRequired,
|
||||||
|
notificationCount: PropTypes.number.isRequired,
|
||||||
|
homeItemsQueueCount: PropTypes.number.isRequired,
|
||||||
|
actions: PropTypes.array,
|
||||||
|
tabs: PropTypes.array,
|
||||||
|
title: PropTypes.string,
|
||||||
|
showBackBtn: PropTypes.bool,
|
||||||
|
shortcuts: ImmutablePropTypes.list,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(DefaultSidebar))
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import { injectIntl, defineMessages } from 'react-intl'
|
||||||
|
import { me } from '../../initial_state'
|
||||||
|
import SidebarSectionTitle from '../sidebar_section_title'
|
||||||
|
import SidebarSectionItem from '../sidebar_section_item'
|
||||||
|
import SidebarLayout from './sidebar_layout'
|
||||||
|
|
||||||
|
class LoggedOutSidebar extends React.PureComponent {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { intl, title } = this.props
|
||||||
|
|
||||||
|
if (!!me) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SidebarLayout title={title}>
|
||||||
|
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
|
||||||
|
<SidebarSectionItem title='Home' icon='home' to='/home' />
|
||||||
|
<SidebarSectionItem title='Search' icon='search-alt' to='/search' />
|
||||||
|
<SidebarSectionItem title='Groups' icon='group' to='/groups' />
|
||||||
|
<SidebarSectionItem title='News' icon='news' to='/news' />
|
||||||
|
|
||||||
|
<SidebarSectionTitle>{intl.formatMessage(messages.explore)}</SidebarSectionTitle>
|
||||||
|
<SidebarSectionItem title='Apps' icon='apps' href='https://apps.gab.com' />
|
||||||
|
<SidebarSectionItem title='Shop' icon='shop' href='https://shop.dissenter.com' />
|
||||||
|
<SidebarSectionItem title='Trends' icon='trends' href='https://trends.gab.com' />
|
||||||
|
<SidebarSectionItem title='Dissenter' icon='dissenter' href='https://dissenter.com' />
|
||||||
|
</SidebarLayout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
explore: { id: 'explore', defaultMessage: 'Explore' },
|
||||||
|
menu: { id: 'menu', defaultMessage: 'Menu' },
|
||||||
|
})
|
||||||
|
|
||||||
|
LoggedOutSidebar.propTypes = {
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
title: PropTypes.string,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default injectIntl(LoggedOutSidebar)
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import { injectIntl, defineMessages } from 'react-intl'
|
||||||
|
import { me } from '../../initial_state'
|
||||||
|
import SidebarSectionTitle from '../sidebar_section_title'
|
||||||
|
import SidebarSectionItem from '../sidebar_section_item'
|
||||||
|
import SidebarLayout from './sidebar_layout'
|
||||||
|
|
||||||
|
class SettingsSidebar extends React.PureComponent {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { intl, title } = this.props
|
||||||
|
|
||||||
|
if (!me) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SidebarLayout
|
||||||
|
showBackBtn
|
||||||
|
title={title}
|
||||||
|
>
|
||||||
|
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
|
||||||
|
<SidebarSectionItem title={intl.formatMessage(messages.blocks)} to='/settings/blocks' />
|
||||||
|
<SidebarSectionItem title={intl.formatMessage(messages.mutes)} to='/settings/mutes' />
|
||||||
|
<SidebarSectionItem title={intl.formatMessage(messages.preferences)} to='/settings/preferences' />
|
||||||
|
</SidebarLayout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
|
||||||
|
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
|
||||||
|
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
|
||||||
|
menu: { id: 'menu', defaultMessage: 'Menu' },
|
||||||
|
})
|
||||||
|
|
||||||
|
SettingsSidebar.propTypes = {
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
title: PropTypes.string,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default injectIntl(SettingsSidebar)
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import { connect } from 'react-redux'
|
||||||
|
import {
|
||||||
|
BREAKPOINT_SMALL,
|
||||||
|
} from '../../constants'
|
||||||
|
import Button from '../button'
|
||||||
|
import { openModal } from '../../actions/modal'
|
||||||
|
import Responsive from '../../features/ui/util/responsive_component'
|
||||||
|
import Heading from '../heading'
|
||||||
|
import BackButton from '../back_button'
|
||||||
|
import Pills from '../pills'
|
||||||
|
|
||||||
|
class SidebarLayout extends React.PureComponent {
|
||||||
|
|
||||||
|
handleOpenComposeModal = () => {
|
||||||
|
this.props.onOpenComposeModal()
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
actions,
|
||||||
|
tabs,
|
||||||
|
title,
|
||||||
|
showBackBtn,
|
||||||
|
children,
|
||||||
|
} = this.props
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header role='banner' className={[_s.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
|
||||||
|
<div className={[_s.d, _s.w240PX].join(' ')}>
|
||||||
|
<div className={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
|
||||||
|
<div className={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
|
||||||
|
<div className={[_s.d, _s.w100PC].join(' ')}>
|
||||||
|
{
|
||||||
|
!!title &&
|
||||||
|
<div className={[_s.d, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
|
||||||
|
{
|
||||||
|
showBackBtn &&
|
||||||
|
<BackButton
|
||||||
|
icon='arrow-left'
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
<Heading size='h1'>
|
||||||
|
{title}
|
||||||
|
</Heading>
|
||||||
|
{
|
||||||
|
!!actions &&
|
||||||
|
<div className={[_s.d, _s.bgTransparent, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.mlAuto].join(' ')}>
|
||||||
|
{
|
||||||
|
actions.map((action, i) => (
|
||||||
|
<Button
|
||||||
|
isNarrow
|
||||||
|
backgroundColor='none'
|
||||||
|
color='primary'
|
||||||
|
onClick={action.onClick ? () => action.onClick() : undefined}
|
||||||
|
to={action.to}
|
||||||
|
key={`action-btn-${i}`}
|
||||||
|
className={[_s.ml5, _s.px5].join(' ')}
|
||||||
|
icon={action.icon}
|
||||||
|
iconClassName={_s.cPrimary}
|
||||||
|
iconSize='14px'
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
{
|
||||||
|
!!tabs &&
|
||||||
|
<div className={[_s.d, _s.mt10, _s.pb15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
||||||
|
<Pills pills={tabs} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<nav aria-label='Primary' role='navigation' className={[_s.d, _s.w100PC, _s.mb15].join(' ')}>
|
||||||
|
{children}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<Responsive min={BREAKPOINT_SMALL}>
|
||||||
|
<Button
|
||||||
|
isBlock
|
||||||
|
onClick={this.handleOpenComposeModal}
|
||||||
|
className={[_s.py15, _s.fs15PX, _s.fw600].join(' ')}
|
||||||
|
>
|
||||||
|
Gab
|
||||||
|
</Button>
|
||||||
|
</Responsive>
|
||||||
|
|
||||||
|
<Responsive max={BREAKPOINT_SMALL}>
|
||||||
|
<Button
|
||||||
|
onClick={this.handleOpenComposeModal}
|
||||||
|
className={_s.py15}
|
||||||
|
icon='pencil'
|
||||||
|
/>
|
||||||
|
</Responsive>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch) => ({
|
||||||
|
onOpenComposeModal() {
|
||||||
|
dispatch(openModal('COMPOSE'))
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
SidebarLayout.propTypes = {
|
||||||
|
onOpenComposeModal: PropTypes.func.isRequired,
|
||||||
|
actions: PropTypes.array,
|
||||||
|
tabs: PropTypes.array,
|
||||||
|
title: PropTypes.string,
|
||||||
|
showBackBtn: PropTypes.bool,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(null, mapDispatchToProps)(SidebarLayout)
|
||||||
|
|
@ -5,8 +5,8 @@ import {
|
||||||
BREAKPOINT_EXTRA_SMALL,
|
BREAKPOINT_EXTRA_SMALL,
|
||||||
} from '../constants'
|
} from '../constants'
|
||||||
import { me } from '../initial_state'
|
import { me } from '../initial_state'
|
||||||
import NavigationBar from '../components/navigation_bar'
|
import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar'
|
||||||
import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
|
import LoggedOutNavigationBar from '../components/navigation_bar/logged_out_navigation_bar'
|
||||||
import FooterBar from '../components/footer_bar'
|
import FooterBar from '../components/footer_bar'
|
||||||
import Responsive from '../features/ui/util/responsive_component'
|
import Responsive from '../features/ui/util/responsive_component'
|
||||||
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
|
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
|
||||||
|
|
@ -79,7 +79,7 @@ class SettingsLayout extends React.PureComponent {
|
||||||
|
|
||||||
{
|
{
|
||||||
me &&
|
me &&
|
||||||
<NavigationBar title={title} noSearch />
|
<DefaultNavigationBar title={title} noSearch />
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
!me &&
|
!me &&
|
||||||
|
|
|
||||||
|
|
@ -6,11 +6,11 @@ import {
|
||||||
BREAKPOINT_EXTRA_SMALL,
|
BREAKPOINT_EXTRA_SMALL,
|
||||||
} from '../constants'
|
} from '../constants'
|
||||||
import { me } from '../initial_state'
|
import { me } from '../initial_state'
|
||||||
import LoggedOutSidebar from '../components/logged_out_sidebar'
|
import LoggedOutSidebar from '../components/sidebar/logged_out_sidebar'
|
||||||
import Sidebar from '../components/sidebar'
|
import DefaultSidebar from '../components/sidebar/default_sidebar'
|
||||||
import SidebarPanelGroup from '../components/sidebar_panel_group'
|
import SidebarPanelGroup from '../components/sidebar_panel_group'
|
||||||
import NavigationBar from '../components/navigation_bar'
|
import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar'
|
||||||
import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
|
import LoggedOutNavigationBar from '../components/navigation_bar/logged_out_navigation_bar'
|
||||||
import FooterBar from '../components/footer_bar'
|
import FooterBar from '../components/footer_bar'
|
||||||
import FloatingActionButton from '../components/floating_action_button'
|
import FloatingActionButton from '../components/floating_action_button'
|
||||||
import Responsive from '../features/ui/util/responsive_component'
|
import Responsive from '../features/ui/util/responsive_component'
|
||||||
|
|
@ -58,7 +58,7 @@ class Layout extends React.PureComponent {
|
||||||
|
|
||||||
{
|
{
|
||||||
me &&
|
me &&
|
||||||
<NavigationBar
|
<DefaultNavigationBar
|
||||||
actions={actions}
|
actions={actions}
|
||||||
tabs={tabs}
|
tabs={tabs}
|
||||||
title={title}
|
title={title}
|
||||||
|
|
@ -76,7 +76,7 @@ class Layout extends React.PureComponent {
|
||||||
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
|
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
|
||||||
{
|
{
|
||||||
!!me &&
|
!!me &&
|
||||||
<Sidebar
|
<DefaultSidebar
|
||||||
actions={actions}
|
actions={actions}
|
||||||
showBackBtn={showBackBtn}
|
showBackBtn={showBackBtn}
|
||||||
tabs={tabs}
|
tabs={tabs}
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,12 @@ import { BREAKPOINT_EXTRA_SMALL } from '../constants'
|
||||||
import Sticky from 'react-stickynode'
|
import Sticky from 'react-stickynode'
|
||||||
import { me } from '../initial_state'
|
import { me } from '../initial_state'
|
||||||
import { CX } from '../constants'
|
import { CX } from '../constants'
|
||||||
import NavigationBar from '../components/navigation_bar'
|
import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar'
|
||||||
import FooterBar from '../components/footer_bar'
|
import FooterBar from '../components/footer_bar'
|
||||||
import ProfileHeader from '../components/profile_header'
|
import ProfileHeader from '../components/profile_header'
|
||||||
import FloatingActionButton from '../components/floating_action_button'
|
import FloatingActionButton from '../components/floating_action_button'
|
||||||
import ProfileNavigationBar from '../components/profile_navigation_bar'
|
import ProfileNavigationBar from '../components/navigation_bar/profile_navigation_bar'
|
||||||
import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
|
import LoggedOutNavigationBar from '../components/navigation_bar/logged_out_navigation_bar'
|
||||||
import Responsive from '../features/ui/util/responsive_component'
|
import Responsive from '../features/ui/util/responsive_component'
|
||||||
import Divider from '../components/divider'
|
import Divider from '../components/divider'
|
||||||
import WrappedBundle from '../features/ui/util/wrapped_bundle'
|
import WrappedBundle from '../features/ui/util/wrapped_bundle'
|
||||||
|
|
@ -91,7 +91,7 @@ class ProfileLayout extends ImmutablePureComponent {
|
||||||
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
|
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
|
||||||
{
|
{
|
||||||
me &&
|
me &&
|
||||||
<NavigationBar />
|
<DefaultNavigationBar />
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
!me &&
|
!me &&
|
||||||
|
|
|
||||||
|
|
@ -5,11 +5,11 @@ import {
|
||||||
BREAKPOINT_EXTRA_SMALL,
|
BREAKPOINT_EXTRA_SMALL,
|
||||||
} from '../constants'
|
} from '../constants'
|
||||||
import { me } from '../initial_state'
|
import { me } from '../initial_state'
|
||||||
import NavigationBar from '../components/navigation_bar'
|
import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar'
|
||||||
import FooterBar from '../components/footer_bar'
|
import FooterBar from '../components/footer_bar'
|
||||||
import Responsive from '../features/ui/util/responsive_component'
|
import Responsive from '../features/ui/util/responsive_component'
|
||||||
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
|
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
|
||||||
import SettingsSidebar from '../components/settings_sidebar'
|
import SettingsSidebar from '../components/sidebar/settings_sidebar'
|
||||||
import WrappedBundle from '../features/ui/util/wrapped_bundle'
|
import WrappedBundle from '../features/ui/util/wrapped_bundle'
|
||||||
import {
|
import {
|
||||||
SidebarXS,
|
SidebarXS,
|
||||||
|
|
@ -37,7 +37,7 @@ class SettingsLayout extends React.PureComponent {
|
||||||
<WrappedBundle component={SidebarXS} />
|
<WrappedBundle component={SidebarXS} />
|
||||||
</Responsive>
|
</Responsive>
|
||||||
|
|
||||||
<NavigationBar
|
<DefaultNavigationBar
|
||||||
title={title}
|
title={title}
|
||||||
noSearch
|
noSearch
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue