Added BlockedUsers, MutedUsers pages. Updated Settings

• Added:
- BlockedUsers, MutedUsers pages

• Updated:
- SettingsPage, SettingsLayout

app/javascript/gabsocial/components/settings_sidebar.js

@@ -0,0 +1,94 @@
+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'
+
+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),
+})
+
+export default
+@connect(mapStateToProps)
+@injectIntl
+class Sidebar extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    account: ImmutablePropTypes.map,
+    title: PropTypes.string,
+  }
+
+  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.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
+        <div className={[_s.default, _s.width240PX].join(' ')}>
+          <div className={[_s.default, _s.posFixed, _s.heightCalc53PX, _s.bottom0].join(' ')}>
+            <div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
+              <div className={[_s.default, _s.width100PC].join(' ')}>
+                <div className={[_s.default, _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.default, _s.width100PC, _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>
+    )
+  }
+
+}

app/javascript/gabsocial/features/blocked_accounts.js

@@ -6,10 +6,12 @@ import { me } from '../initial_state'
 import { fetchBlocks, expandBlocks } from '../actions/blocks'
 import Account from '../components/account'
 import Block from '../components/block'
+import Heading from '../components/heading'
 import ScrollableList from '../components/scrollable_list'
 
 const messages = defineMessages({
   empty: { id: 'empty_column.blocks', defaultMessage: 'You haven\'t blocked any users yet.' },
+  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
 })
 
 const mapStateToProps = (state) => ({
@@ -19,12 +21,8 @@ const mapStateToProps = (state) => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  onFetchBlocks() {
+  onFetchBlocks: () => dispatch(fetchBlocks()),
-    dispatch(fetchBlocks())
+  onExpandBlocks: () => dispatch(expandBlocks()),
-  },
-  onExpandBlocks() {
-    dispatch(expandBlocks())
-  },
 })
 
 export default
@@ -61,6 +59,11 @@ class Blocks extends ImmutablePureComponent {
 
     return (
       <Block>
+        <div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter].join(' ')}>
+          <Heading size='h2'>
+            {intl.formatMessage(messages.blocks)}
+          </Heading>
+        </div>
         <ScrollableList
           scrollKey='blocked_accounts'
           onLoadMore={this.handleLoadMore}

app/javascript/gabsocial/features/mutes.js

@@ -6,6 +6,7 @@ import { me } from '../initial_state'
 import { fetchMutes, expandMutes } from '../actions/mutes'
 import Account from '../components/account'
 import Block from '../components/block'
+import Heading from '../components/heading'
 import ScrollableList from '../components/scrollable_list'
 
 const mapStateToProps = (state) => ({
@@ -15,12 +16,8 @@ const mapStateToProps = (state) => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  onFetchMutes() {
+  onFetchMutes: () => dispatch(fetchMutes()),
-    dispatch(fetchMutes())
+  onExpandMutes: () => dispatch(expandMutes()),
-  },
-  onExpandMutes() {
-    dispatch(expandMutes())
-  },
 })
 
 export default
@@ -53,6 +50,11 @@ class Mutes extends ImmutablePureComponent {
 
     return (
       <Block>
+        <div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter].join(' ')}>
+          <Heading size='h2'>
+            <FormattedMessage id='navigation_bar.mutes' defaultMessage='Muted users' />
+          </Heading>
+        </div>
         <ScrollableList
           scrollKey='mutes'
           onLoadMore={this.handleLoadMore}

app/javascript/gabsocial/features/ui/ui.js

@@ -180,18 +180,8 @@ class SwitchingArea extends PureComponent {
         <WrappedRoute path='/search/hashtags' exact page={SearchPage} component={Search} content={children} />
         <WrappedRoute path='/search/groups' exact page={SearchPage} component={Search} content={children} />
 
-        { /*
+        <WrappedRoute path='/settings/blocks' exact page={SettingsPage} component={BlockedAccounts} content={children} componentParams={{ title: 'Blocked Users' }} />
-        <WrappedRoute path='/settings/account' exact page={SettingsPage} component={AccountSettings} content={children} />
+        <WrappedRoute path='/settings/mutes' exact page={SettingsPage} component={Mutes} content={children} componentParams={{ title: 'Muted Users' }} />
-        <WrappedRoute path='/settings/profile' exact page={SettingsPage} component={ProfileSettings} content={children} />
-        <WrappedRoute path='/settings/relationships' exact page={SettingsPage} component={RelationshipSettings} content={children} />
-        <WrappedRoute path='/settings/development' exact page={SettingsPage} component={Development} content={children} />
-        <WrappedRoute path='/settings/billing' exact page={SettingsPage} component={Billing} content={children} />
-        */ }
-
-        { /* <WrappedRoute path='/settings/blocks' exact page={SettingsPage} component={BlockedAccounts} content={children} componentParams={{ title: 'Blocked Accounts' }} />
-        <WrappedRoute path='/settings/domain-blocks' exact page={SettingsPage} component={BlockedDomains} content={children} componentParams={{ title: 'Blocked Domains' }} />
-        <WrappedRoute path='/settings/filters' exact page={SettingsPage} component={Filters} content={children} componentParams={{ title: 'Muted Words' }} />
-        <WrappedRoute path='/settings/mutes' exact page={SettingsPage} component={Mutes} content={children} componentParams={{ title: 'Muted Accounts' }} /> */ }
         
         <Redirect from='/@:username' to='/:username' exact />
         <WrappedRoute path='/:username' publicRoute exact page={ProfilePage} component={AccountTimeline} content={children} />

app/javascript/gabsocial/layouts/settings_layout.js

@@ -1,48 +1,80 @@
-import Sticky from 'react-stickynode'
+import {
-import Search from '../components/search'
+  CX,
-import ColumnHeader from '../components/column_header'
+  BREAKPOINT_EXTRA_SMALL,
-import Sidebar from '../components/sidebar'
+} from '../constants'
+import { me } from '../initial_state'
+import SidebarXS from '../components/sidebar_xs'
+import NavigationBar from '../components/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'
 
 export default class SettingsLayout extends PureComponent {
+
   static propTypes = {
-    actions: PropTypes.array,
-    tabs: PropTypes.array,
     title: PropTypes.string,
   }
 
   render() {
-    const { children, actions, tabs, title } = this.props
+    const { children, title } = this.props
+
+    const mainBlockClasses = CX({
+      default: 1,
+      width1015PX: 1,
+      flexRow: 1,
+      justifyContentEnd: 1,
+      py15: 1,
+      mlAuto: !me,
+      mrAuto: !me,
+    })
 
     return (
-      <div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
+      <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
 
-        <Sidebar />
+        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+          <SidebarXS />
+        </Responsive>
 
-        <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
+        <NavigationBar
-
-          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgTertiary, _s.z3, _s.top0, _s.posFixed].join(' ')}>
-            <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
-              <div className={[_s.default, _s.width100PC].join(' ')}>
-                <ColumnHeader
           title={title}
-                  showBackBtn={true}
+          noSearch
-                  actions={actions}
-                  tabs={tabs}
         />
-              </div>
-            </div>
-          </div>
 
-          <div className={[_s.default, _s.height53PX].join(' ')}></div>
+        <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
 
-          <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pl15, _s.py15].join(' ')}>
+          <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-            <div className={[_s.default, _s.z1, _s.width100PC].join(' ')}>
+            <SettingsSidebar title='Settings' />
+          </Responsive>
+
+          <ResponsiveClassesComponent
+            classNames={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesSmall={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesXS={[_s.default, _s.width100PC].join(' ')}
+          >
+            <main role='main'>
+
+              <ResponsiveClassesComponent
+                classNames={mainBlockClasses}
+                classNamesXS={[_s.default, _s.width1015PX, _s.justifyContentEnd, _s.pb15].join(' ')}
+              >
+
+                <div className={[_s.default, _s.width1015PX, _s.z1].join(' ')}>
+
+                  <div className={_s.default}>
                     {children}
                   </div>
                 </div>
 
-        </main>
+              </ResponsiveClassesComponent>
 
+            </main>
+          </ResponsiveClassesComponent>
+        </div>
+
+        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+          <FooterBar />
+        </Responsive>
       </div>
     )
   }