Updated Sidebar, NavigationBar components, Added layouts
• Updated: - Sidebar, NavigationBar components - file structures for both • Added: - layouts for compnents
This commit is contained in:
mgabdev
79
app/javascript/gabsocial/components/sidebar/about_sidebar.js
Normal file
79
app/javascript/gabsocial/components/sidebar/about_sidebar.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
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 SidebarSectionTitle from '../sidebar_section_title'
|
||||
import SidebarSectionItem from '../sidebar_section_item'
|
||||
import Heading from '../heading'
|
||||
import BackButton from '../back_button'
|
||||
import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
|
||||
|
||||
class AboutSidebar extends ImmutablePureComponent {
|
||||
|
||||
render() {
|
||||
const {
|
||||
intl,
|
||||
title,
|
||||
items,
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<header role='banner' className={[_s.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
|
||||
<ResponsiveClassesComponent
|
||||
classNames={[_s.d, _s.w240PX].join(' ')}
|
||||
classNamesXS={[_s.d, _s.w100PC].join(' ')}
|
||||
>
|
||||
<ResponsiveClassesComponent
|
||||
classNames={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}
|
||||
classNamesXS={[_s.d, _s.px15].join(' ')}
|
||||
>
|
||||
<ResponsiveClassesComponent
|
||||
classNames={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}
|
||||
classNamesXS={[_s.d, _s.aiStart, _s.w100PC, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
|
||||
>
|
||||
<div className={[_s.d, _s.w100PC].join(' ')}>
|
||||
<div className={[_s.d, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
|
||||
{
|
||||
me && <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>
|
||||
{
|
||||
items.map((menuItem, i) => (
|
||||
<SidebarSectionItem {...menuItem} key={`about-sidebar-item-menu-${i}`} />
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
|
||||
</ResponsiveClassesComponent>
|
||||
</ResponsiveClassesComponent>
|
||||
</ResponsiveClassesComponent>
|
||||
</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' },
|
||||
})
|
||||
|
||||
AboutSidebar.propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
account: ImmutablePropTypes.map,
|
||||
title: PropTypes.string,
|
||||
items: PropTypes.array.isRequired,
|
||||
}
|
||||
|
||||
export default injectIntl(AboutSidebar)
|
||||
177
app/javascript/gabsocial/components/sidebar/default_sidebar.js
Normal file
177
app/javascript/gabsocial/components/sidebar/default_sidebar.js
Normal file
@@ -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)
|
||||
122
app/javascript/gabsocial/components/sidebar/sidebar_layout.js
Normal file
122
app/javascript/gabsocial/components/sidebar/sidebar_layout.js
Normal file
@@ -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)
|
||||
Reference in New Issue
Block a user