diff --git a/app/javascript/gabsocial/components/logged_out_sidebar.js b/app/javascript/gabsocial/components/logged_out_sidebar.js deleted file mode 100644 index f26308e9..00000000 --- a/app/javascript/gabsocial/components/logged_out_sidebar.js +++ /dev/null @@ -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 ( -
-
-
-
-
- { - !!title && -
- - {title} - -
- } -
- - - { - showLinkFooter && - } -
-
-
-
- ) - } - -} - -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) \ No newline at end of file diff --git a/app/javascript/gabsocial/components/navigation_bar.js b/app/javascript/gabsocial/components/navigation_bar/default_navigation_bar.js similarity index 89% rename from app/javascript/gabsocial/components/navigation_bar.js rename to app/javascript/gabsocial/components/navigation_bar/default_navigation_bar.js index 4afdd715..24bd01da 100644 --- a/app/javascript/gabsocial/components/navigation_bar.js +++ b/app/javascript/gabsocial/components/navigation_bar/default_navigation_bar.js @@ -3,26 +3,26 @@ import PropTypes from 'prop-types' import { connect } from 'react-redux' import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' -import { openSidebar } from '../actions/sidebar' -import { openPopover } from '../actions/popover' -import { BREAKPOINT_EXTRA_SMALL } from '../constants' -import { me } from '../initial_state' -import { makeGetAccount } from '../selectors' -import Responsive from '../features/ui/util/responsive_component' +import { openSidebar } from '../../actions/sidebar' +import { openPopover } from '../../actions/popover' +import { BREAKPOINT_EXTRA_SMALL } from '../../constants' +import { me } from '../../initial_state' +import { makeGetAccount } from '../../selectors' +import Responsive from '../../features/ui/util/responsive_component' import { CX, POPOVER_NAV_SETTINGS, -} from '../constants' -import Avatar from './avatar' -import BackButton from './back_button' -import Button from './button' -import Heading from './heading' -import Icon from './icon' -import NavigationBarButton from './navigation_bar_button' -import Search from './search' -import Text from './text' +} from '../../constants' +import Avatar from '../avatar' +import BackButton from '../back_button' +import Button from '../button' +import Heading from '../heading' +import Icon from '../icon' +import NavigationBarButton from '../navigation_bar_button' +import Search from '../search' +import Text from '../text' -class NavigationBar extends ImmutablePureComponent { +class DefaultNavigationBar extends ImmutablePureComponent { handleOnOpenNavSettingsPopover = () => { this.props.onOpenNavSettingsPopover(this.avatarNode) @@ -86,6 +86,7 @@ class NavigationBar extends ImmutablePureComponent { +
@@ -222,7 +223,7 @@ const mapDispatchToProps = (dispatch) => ({ } }) -NavigationBar.propTypes = { +DefaultNavigationBar.propTypes = { account: ImmutablePropTypes.map, actions: PropTypes.array, tabs: PropTypes.array, @@ -234,4 +235,4 @@ NavigationBar.propTypes = { noSearch: PropTypes.bool, } -export default connect(mapStateToProps, mapDispatchToProps)(NavigationBar) \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(DefaultNavigationBar) \ No newline at end of file diff --git a/app/javascript/gabsocial/components/logged_out_navigation_bar.js b/app/javascript/gabsocial/components/navigation_bar/logged_out_navigation_bar.js similarity index 87% rename from app/javascript/gabsocial/components/logged_out_navigation_bar.js rename to app/javascript/gabsocial/components/navigation_bar/logged_out_navigation_bar.js index b0b0d709..6532c3cb 100644 --- a/app/javascript/gabsocial/components/logged_out_navigation_bar.js +++ b/app/javascript/gabsocial/components/navigation_bar/logged_out_navigation_bar.js @@ -1,12 +1,12 @@ import React from 'react' import PropTypes from 'prop-types' -import { BREAKPOINT_EXTRA_SMALL } from '../constants' -import Button from './button' -import NavigationBarButton from './navigation_bar_button' -import Search from './search' -import Text from './text' -import ResponsiveComponent from '../features/ui/util/responsive_component' -import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component' +import { BREAKPOINT_EXTRA_SMALL } from '../../constants' +import Button from '../button' +import NavigationBarButton from '../navigation_bar_button' +import Search from '../search' +import Text from '../text' +import ResponsiveComponent from '../../features/ui/util/responsive_component' +import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component' class LoggedOutNavigationBar extends React.PureComponent { @@ -46,6 +46,7 @@ class LoggedOutNavigationBar extends React.PureComponent { +
} diff --git a/app/javascript/gabsocial/components/navigation_bar/profile_navigation_bar.js b/app/javascript/gabsocial/components/navigation_bar/profile_navigation_bar.js new file mode 100644 index 00000000..c9021f1a --- /dev/null +++ b/app/javascript/gabsocial/components/navigation_bar/profile_navigation_bar.js @@ -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 ( +
+
+ +
+ + + +
+ + +
+ + +
+ +
+ +
+
+ ) + } + +} + +ProfileNavigationBar.propTypes = { + titleHTML: PropTypes.string, + showBackBtn: PropTypes.bool, +} + +export default ProfileNavigationBar \ No newline at end of file diff --git a/app/javascript/gabsocial/components/settings_sidebar.js b/app/javascript/gabsocial/components/settings_sidebar.js deleted file mode 100644 index 5c326012..00000000 --- a/app/javascript/gabsocial/components/settings_sidebar.js +++ /dev/null @@ -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 ( -
-
-
-
-
-
- - - {title} - -
- -
- - -
-
-
-
- ) - } - -} - -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)) \ No newline at end of file diff --git a/app/javascript/gabsocial/components/sidebar.js b/app/javascript/gabsocial/components/sidebar.js deleted file mode 100644 index 9e825717..00000000 --- a/app/javascript/gabsocial/components/sidebar.js +++ /dev/null @@ -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 ( -
-
-
-
-
- { - !!title && -
- { - showBackBtn && - - } - - {title} - - { - !!actions && -
- { - actions.map((action, i) => ( -
- } -
- } - { - !!tabs && -
- -
- } -
- - - - - - - -
-
-
-
- ) - } - -} - -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)) \ No newline at end of file diff --git a/app/javascript/gabsocial/components/about_sidebar.js b/app/javascript/gabsocial/components/sidebar/about_sidebar.js similarity index 87% rename from app/javascript/gabsocial/components/about_sidebar.js rename to app/javascript/gabsocial/components/sidebar/about_sidebar.js index 26eda88e..63e15878 100644 --- a/app/javascript/gabsocial/components/about_sidebar.js +++ b/app/javascript/gabsocial/components/sidebar/about_sidebar.js @@ -3,12 +3,12 @@ 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' +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 { diff --git a/app/javascript/gabsocial/components/sidebar/default_sidebar.js b/app/javascript/gabsocial/components/sidebar/default_sidebar.js new file mode 100644 index 00000000..f18b099a --- /dev/null +++ b/app/javascript/gabsocial/components/sidebar/default_sidebar.js @@ -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 ( + + + {intl.formatMessage(messages.menu)} + + + + + + + + + + + { + shortcutItems.length > 0 && + + +
+ + {intl.formatMessage(messages.shortcuts)} + + +
+ + { + shortcutItems.map((shortcutItem, i) => ( + + )) + } + + } + + {intl.formatMessage(messages.explore)} + + + + + + + ) + } + +} + +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)) \ No newline at end of file diff --git a/app/javascript/gabsocial/components/sidebar/logged_out_sidebar.js b/app/javascript/gabsocial/components/sidebar/logged_out_sidebar.js new file mode 100644 index 00000000..9f2a4b6d --- /dev/null +++ b/app/javascript/gabsocial/components/sidebar/logged_out_sidebar.js @@ -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 ( + + {intl.formatMessage(messages.menu)} + + + + + + {intl.formatMessage(messages.explore)} + + + + + + ) + } + +} + +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) \ No newline at end of file diff --git a/app/javascript/gabsocial/components/sidebar/settings_sidebar.js b/app/javascript/gabsocial/components/sidebar/settings_sidebar.js new file mode 100644 index 00000000..d01df296 --- /dev/null +++ b/app/javascript/gabsocial/components/sidebar/settings_sidebar.js @@ -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 ( + + {intl.formatMessage(messages.menu)} + + + + + ) + } + +} + +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) \ No newline at end of file diff --git a/app/javascript/gabsocial/components/sidebar/sidebar_layout.js b/app/javascript/gabsocial/components/sidebar/sidebar_layout.js new file mode 100644 index 00000000..ff82c850 --- /dev/null +++ b/app/javascript/gabsocial/components/sidebar/sidebar_layout.js @@ -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 ( +
+
+
+
+
+ { + !!title && +
+ { + showBackBtn && + + } + + {title} + + { + !!actions && +
+ { + actions.map((action, i) => ( +
+ } +
+ } + { + !!tabs && +
+ +
+ } +
+ + + + + + + +
+
+
+
+ ) + } + +} + +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) \ No newline at end of file diff --git a/app/javascript/gabsocial/layouts/about_layout.js b/app/javascript/gabsocial/layouts/about_layout.js index 14d6287f..7b1100ff 100644 --- a/app/javascript/gabsocial/layouts/about_layout.js +++ b/app/javascript/gabsocial/layouts/about_layout.js @@ -5,8 +5,8 @@ import { BREAKPOINT_EXTRA_SMALL, } from '../constants' import { me } from '../initial_state' -import NavigationBar from '../components/navigation_bar' -import LoggedOutNavigationBar from '../components/logged_out_navigation_bar' +import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar' +import LoggedOutNavigationBar from '../components/navigation_bar/logged_out_navigation_bar' import FooterBar from '../components/footer_bar' import Responsive from '../features/ui/util/responsive_component' import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component' @@ -79,7 +79,7 @@ class SettingsLayout extends React.PureComponent { { me && - + } { !me && diff --git a/app/javascript/gabsocial/layouts/layout.js b/app/javascript/gabsocial/layouts/layout.js index 5e8dff73..4fa39c63 100644 --- a/app/javascript/gabsocial/layouts/layout.js +++ b/app/javascript/gabsocial/layouts/layout.js @@ -6,11 +6,11 @@ import { BREAKPOINT_EXTRA_SMALL, } from '../constants' import { me } from '../initial_state' -import LoggedOutSidebar from '../components/logged_out_sidebar' -import Sidebar from '../components/sidebar' +import LoggedOutSidebar from '../components/sidebar/logged_out_sidebar' +import DefaultSidebar from '../components/sidebar/default_sidebar' import SidebarPanelGroup from '../components/sidebar_panel_group' -import NavigationBar from '../components/navigation_bar' -import LoggedOutNavigationBar from '../components/logged_out_navigation_bar' +import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar' +import LoggedOutNavigationBar from '../components/navigation_bar/logged_out_navigation_bar' import FooterBar from '../components/footer_bar' import FloatingActionButton from '../components/floating_action_button' import Responsive from '../features/ui/util/responsive_component' @@ -58,7 +58,7 @@ class Layout extends React.PureComponent { { me && - { !!me && - { me && - + } { !me && diff --git a/app/javascript/gabsocial/layouts/settings_layout.js b/app/javascript/gabsocial/layouts/settings_layout.js index 1de5c0d1..7d72da81 100644 --- a/app/javascript/gabsocial/layouts/settings_layout.js +++ b/app/javascript/gabsocial/layouts/settings_layout.js @@ -5,11 +5,11 @@ import { BREAKPOINT_EXTRA_SMALL, } from '../constants' 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 Responsive from '../features/ui/util/responsive_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 { SidebarXS, @@ -37,7 +37,7 @@ class SettingsLayout extends React.PureComponent { -