Progress

app/javascript/gabsocial/layouts/default_layout.js

@@ -1,82 +1,35 @@
-import Sticky from 'react-stickynode'
-import * as Constants from '../constants'
-import Search from '../components/search'
-import ColumnHeader from '../components/column_header'
-import Sidebar from '../components/sidebar'
-// import Header from '../components/header'
-// import Footer from '../components/footer'
-import FloatingActionButton from '../components/floating_action_button'
-import Responsive from '../features/ui/util/responsive_component'
+import Layout from './layout'
 
 export default class DefaultLayout extends PureComponent {
   static propTypes = {
     actions: PropTypes.array,
     tabs: PropTypes.array,
     layout: PropTypes.object,
-    title: PropTypes.string,
     showBackBtn: PropTypes.bool,
+    title: PropTypes.string.isRequired,
+    children: PropTypes.node.isRequired,
   }
 
   render() {
-    const { children, title, showBackBtn, layout, actions, tabs } = this.props
-
-    console.log("Constants.BREAKPOINT_EXTRA_SMALL:", Constants.BREAKPOINT_EXTRA_SMALL)
+    const {
+      children,
+      title,
+      showBackBtn,
+      layout,
+      actions,
+      tabs,
+     } = this.props
 
     return (
-      <div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundColorSecondary3].join(' ')}>
-
-        <Responsive min={Constants.BREAKPOINT_EXTRA_SMALL}>
-          <Sidebar />
-        </Responsive>
-
-        <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
-
-          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
-            <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
-              <div className={[_s.default, _s.width645PX].join(' ')}>
-                <ColumnHeader
-                  title={title}
-                  showBackBtn={showBackBtn}
-                  actions={actions}
-                  tabs={tabs}
-                />
-              </div>
-              <Responsive min={Constants.BREAKPOINT_EXTRA_SMALL}>
-                <div className={[_s.default, _s.width340PX].join(' ')}>
-                  <Search />
-                </div>
-              </Responsive>
-            </div>
-          </div>
-
-          <div className={[_s.default, _s.height53PX].join(' ')}></div>
-
-          <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pl15, _s.py15].join(' ')}>
-            <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
-              <div className={_s.default}>
-                {children}
-              </div>
-            </div>
-
-            <Responsive min={Constants.BREAKPOINT_EXTRA_SMALL}>
-              <div className={[_s.default, _s.width340PX].join(' ')}>
-                <Sticky top={73} enabled>
-                  <div className={[_s.default, _s.width340PX].join(' ')}>
-                    {layout}
-                  </div>
-                </Sticky>
-              </div>
-            </Responsive>
-
-            <Responsive max={Constants.BREAKPOINT_EXTRA_SMALL}>
-              <FloatingActionButton />
-            </Responsive>
-
-          </div>
-
-        </main>
-
-      </div>
+      <Layout
+        title={title}
+        showBackBtn={showBackBtn}
+        actions={actions}
+        tabs={tabs}
+        layout={layout}
+      >
+        {children}
+      </Layout>
     )
   }
 

app/javascript/gabsocial/layouts/group_layout.js

@@ -1,15 +1,8 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import Sticky from 'react-stickynode'
-import Sidebar from '../components/sidebar'
-import Search from '../components/search'
-import Image from '../components/image'
-import Text from '../components/text'
-import Button from '../components/button'
-import DisplayName from '../components/display_name'
-import TabBar from '../components/tab_bar'
-import Block from '../components/block'
-import ColumnHeader from '../components/column_header'
+import Layout from './layout'
+import GroupHeader from '../components/group_header'
 
 export default class GroupLayout extends ImmutablePureComponent {
   static propTypes = {
@@ -21,117 +14,46 @@ export default class GroupLayout extends ImmutablePureComponent {
   }
 
   render() {
-    const { group, children, layout, showBackBtn, actions, relationships } = this.props
-
-    const tabs = !group ? null : [
-      {
-        to: `/groups/${group.get('id')}`,
-        title: 'Latest',
-      },
-      {
-        to: `/groups/${group.get('id')}/pinned`,
-        title: 'Pinned',
-      },
-      {
-        to: `/groups/${group.get('id')}/popular`,
-        title: 'Popular',
-      },
-    ]
+    const {
+      group,
+      children,
+      layout,
+      showBackBtn,
+      actions,
+      relationships,
+    } = this.props
 
     const title = !!group ? group.get('title') : undefined
 
-    console.log("relationships:", relationships)
-    // const !!relationships && relationships.get('member')
-
     return (
-      <div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundColorSecondary3].join(' ')}>
+      <Layout
+        noRightSidebar
+        title={title}
+        actions={actions}
+        showBackBtn={showBackBtn}
+      >
+        <div className={[_s.default, _s.width1015PX, _s.pl15, _s.py15].join(' ')}>
 
-        <Sidebar />
+          <GroupHeader group={group} relationships={relationships} />
 
-        <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
-
-          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
-            <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
-              <div className={[_s.default, _s.width645PX].join(' ')}>
-                <ColumnHeader
-                  title={title}
-                  showBackBtn={showBackBtn}
-                  actions={actions}
-                />
-              </div>
-              <div className={[_s.default, _s.width340PX].join(' ')}>
-                <Search />
+          <div className={[_s.default, _s.flexRow, _s.width100PC, _s.justifyContentSpaceBetween].join(' ')}>
+            <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
+              <div className={_s.default}>
+                {children}
               </div>
             </div>
+
+            <div className={[_s.default, _s.width340PX].join(' ')}>
+              <Sticky top={73} enabled>
+                <div className={[_s.default, _s.width340PX].join(' ')}>
+                  {layout}
+                </div>
+              </Sticky>
+            </div>
           </div>
 
-          <div className={[_s.default, _s.height53PX].join(' ')}></div>
-
-          <div className={[_s.default, _s.width1015PX, _s.pl15, _s.py15].join(' ')}>
-
-            <div className={[_s.default, _s.z1, _s.width100PC, _s.mb15].join(' ')}>
-              <Block>
-                <div className={[_s.default, _s.width100PC].join(' ')}>
-                  <Image className={_s.height350PX} src='https://gab.com/media/user/bz-5cf53d08403d4.jpeg' />
-                  <div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}>
-                    <div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
-                      <TabBar tabs={tabs} />
-                      <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.marginLeftAuto].join(' ')}>
-                        <Button
-                          color='primary'
-                          backgroundColor='tertiary'
-                          radiusSmall
-                          className={_s.mr5}
-                        >
-                          <Text color='inherit' size='small'>
-                          Leave/Join
-                          </Text>
-                        </Button>
-                        <Button
-                          color='primary'
-                          backgroundColor='tertiary'
-                          radiusSmall
-                          className={_s.mr5}
-                        >
-                          <Text color='inherit' size='small'>
-                            Share
-                          </Text>
-                        </Button>
-                        <Button
-                          radiusSmall
-                          color='primary'
-                          backgroundColor='tertiary'
-                          className={_s.mr5}
-                          icon='ellipsis'
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </Block>
-            </div>
-
-            <div className={[_s.default, _s.flexRow, _s.width100PC, _s.justifyContentSpaceBetween].join(' ')}>
-              <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
-                <div className={_s.default}>
-                  {children}
-                </div>
-              </div>
-
-              <div className={[_s.default, _s.width340PX].join(' ')}>
-                <Sticky top={73} enabled>
-                  <div className={[_s.default, _s.width340PX].join(' ')}>
-                    {layout}
-                  </div>
-                </Sticky>
-              </div>
-            </div>
-
-          </div>
-
-        </main>
-
-      </div>
+        </div>
+      </Layout>
     )
   }
 

app/javascript/gabsocial/layouts/layout.js

@@ -0,0 +1,119 @@
+import Sticky from 'react-stickynode'
+import * as Constants from '../constants'
+import Search from '../components/search'
+import ColumnHeader from '../components/column_header'
+import Sidebar from '../components/sidebar'
+// import Header from '../components/header'
+// import Footer from '../components/footer'
+import FloatingActionButton from '../components/floating_action_button'
+import Responsive from '../features/ui/util/responsive_component'
+
+export default class Layout extends PureComponent {
+  static propTypes = {
+    actions: PropTypes.array,
+    tabs: PropTypes.array,
+    layout: PropTypes.object,
+    title: PropTypes.string,
+    showBackBtn: PropTypes.bool,
+    noSidebar: PropTypes.bool,
+    noRightSidebar: PropTypes.bool,
+    noHeader: PropTypes.bool,
+    noComposeButton: PropTypes.bool,
+  }
+
+  render() {
+    const {
+      children,
+      title,
+      showBackBtn,
+      layout,
+      actions,
+      tabs,
+      noSidebar,
+      noRightSidebar,
+      noHeader,
+      noComposeButton,
+    } = this.props
+
+    return (
+      <div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundColorSecondary3].join(' ')}>
+
+        {
+          !noSidebar &&
+          <Responsive min={Constants.BREAKPOINT_EXTRA_SMALL}>
+            <Sidebar />
+          </Responsive>
+        }
+
+        <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
+
+          {
+            !noHeader &&
+            <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
+              <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
+                <div className={[_s.default, _s.width645PX].join(' ')}>
+                  <ColumnHeader
+                    title={title}
+                    showBackBtn={showBackBtn}
+                    actions={actions}
+                    tabs={tabs}
+                  />
+                </div>
+                <Responsive min={Constants.BREAKPOINT_EXTRA_SMALL}>
+                  <div className={[_s.default, _s.width340PX].join(' ')}>
+                    <Search />
+                  </div>
+                </Responsive>
+              </div>
+            </div>
+          }
+
+          {
+            !noHeader &&
+            <div className={[_s.default, _s.height53PX].join(' ')}></div>
+          }
+
+          <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pl15, _s.py15].join(' ')}>
+
+            {
+              noRightSidebar && children
+            }
+
+            {
+              !noRightSidebar &&
+              <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
+                <div className={_s.default}>
+                  {children}
+                </div>
+              </div>
+            }
+
+            {
+              !noRightSidebar &&
+              <Responsive min={Constants.BREAKPOINT_EXTRA_SMALL}>
+                <div className={[_s.default, _s.width340PX].join(' ')}>
+                  <Sticky top={73} enabled>
+                    <div className={[_s.default, _s.width340PX].join(' ')}>
+                      {layout}
+                    </div>
+                  </Sticky>
+                </div>
+              </Responsive>
+            }
+
+            {
+              !noComposeButton &&
+              <Responsive max={Constants.BREAKPOINT_EXTRA_SMALL}>
+                <FloatingActionButton />
+              </Responsive>
+            }
+
+          </div>
+
+        </main>
+
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/layouts/profile_layout.js

@@ -1,20 +1,12 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import Sticky from 'react-stickynode'
-import classNames from 'classnames/bind'
-import Sidebar from '../components/sidebar'
-import Avatar from '../components/avatar'
-import Image from '../components/image'
-import Text from '../components/text'
-import Button from '../components/button'
-import DisplayName from '../components/display_name'
-import TabBar from '../components/tab_bar'
+import Layout from './layout'
 import ProfileHeader from '../components/profile_header'
 
-const cx = classNames.bind(_s)
-
 export default class ProfileLayout extends ImmutablePureComponent {
   static propTypes = {
+    children: PropTypes.node.isRequired,
     account: ImmutablePropTypes.map,
     layout: PropTypes.object,
     title: PropTypes.string,
@@ -22,42 +14,44 @@ export default class ProfileLayout extends ImmutablePureComponent {
   }
 
   render() {
-    const { account, children, layout } = this.props
+    const {
+      account,
+      children,
+      layout,
+    } = this.props
 
     return (
-      <div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundColorSecondary3].join(' ')}>
+      <Layout
+        noRightSidebar
+        noHeader
+        noComposeButton
+      >
 
-        <Sidebar />
+        <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pl15, _s.py15].join(' ')}>
+          <div className={[_s.default, _s.z1, _s.width100PC].join(' ')}>
 
-        <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
+            <ProfileHeader account={account} />
 
-          <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pl15, _s.py15].join(' ')}>
-            <div className={[_s.default, _s.z1, _s.width100PC].join(' ')}>
-
-              <ProfileHeader account={account} />
-
-              <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pr15, _s.py15].join(' ')}>
-                <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
-                  <div className={_s.default}>
-                    {children}
-                  </div>
-                </div>
-
-                <div className={[_s.default, _s.width340PX].join(' ')}>
-                  <Sticky top={15} enabled>
-                    <div className={[_s.default, _s.width340PX].join(' ')}>
-                      {layout}
-                    </div>
-                  </Sticky>
+            <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pr15, _s.py15].join(' ')}>
+              <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
+                <div className={_s.default}>
+                  {children}
                 </div>
               </div>
 
+              <div className={[_s.default, _s.width340PX].join(' ')}>
+                <Sticky top={15} enabled>
+                  <div className={[_s.default, _s.width340PX].join(' ')}>
+                    {layout}
+                  </div>
+                </Sticky>
+              </div>
             </div>
+
           </div>
+        </div>
 
-        </main>
-
-      </div>
+      </Layout>
     )
   }