Added new SearchLayout, SearchNavigationBarXS

• Added:
- new SearchLayout, SearchNavigationBarXS

app/javascript/gabsocial/components/navigation_bar/search_navigation_bar_xs.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Heading from '../heading'
+import Search from '../search'
+import Pills from '../pills'
+import Button from '../button'
+
+class SearchNavigationBar extends React.PureComponent {
+
+  render() {
+    const {
+      children,
+      tabs,
+      value,
+    } = this.props
+
+    const to = '/home'
+
+    return (
+      <div className={[_s.d, _s.z4, _s.minH103PX, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.minH103PX, _s.bgPrimary, _s.borderBottom1PX, _s.borderColorSecondary, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+
+          <div className={[_s.d, _s.h53PX, _s.flexRow, _s.bgNavigation, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}>
+
+            <Button
+              noClasses
+              color='primary'
+              backgroundColor='none'
+              className={[_s.d, _s.noUnderline, _s.aiCenter, _s.bgTransparent, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.jcCenter, _s.pl10, _s.pr10, _s.minH53PX].join(' ')}
+              to={to}
+              icon='angle-left'
+              iconSize='18px'
+              iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
+            />
+        
+            <div className={[_s.d, _s.minH53PX, _s.jcCenter, _s.flexGrow1, _s.mr15].join(' ')}>
+              <Search isInNav />
+            </div>
+
+          </div>
+
+          <div className={[_s.d, _s.overflowXScroll, _s.noScrollbar, _s.flexRow, _s.w100PC, _s.pt10, _s.pb5, _s.pr10].join(' ')}>
+            <Pills pills={tabs} />
+          </div>
+
+        </div>
+      </div>
+    )
+  }
+
+}
+
+SearchNavigationBar.propTypes = {
+  tabs: PropTypes.array,
+  value: PropTypes.string,
+}
+
+export default SearchNavigationBar

app/javascript/gabsocial/layouts/search_layout.js

@@ -0,0 +1,152 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { defineMessages, injectIntl } from 'react-intl'
+import { me } from '../initial_state'
+import {
+  BREAKPOINT_EXTRA_SMALL,
+  CX,
+} from '../constants'
+import Layout from '../layouts/layout'
+import PageTitle from '../features/ui/util/page_title'
+import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar'
+import FooterBar from '../components/footer_bar'
+import ProfileHeader from '../components/profile_header'
+import FloatingActionButton from '../components/floating_action_button'
+import SearchNavigationBar from '../components/navigation_bar/search_navigation_bar_xs'
+import LoggedOutNavigationBar from '../components/navigation_bar/logged_out_navigation_bar'
+import Responsive from '../features/ui/util/responsive_component'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import Search from '../components/search'
+import Pills from '../components/pills'
+import {
+  LinkFooter,
+  TrendsPanel,
+  SearchFilterPanel,
+  SignUpPanel,
+} from '../features/ui/util/async_components'
+
+class SearchLayout extends React.PureComponent {
+
+  componentWillMount() {
+    const { intl } = this.props
+
+    this.searchTabs = [
+      {
+        title: intl.formatMessage(messages.top),
+        to: '/search',
+        active: 1,
+      },
+      {
+        title: intl.formatMessage(messages.people),
+        to: '/search/people',
+      },
+      {
+        title: intl.formatMessage(messages.groups),
+        to: '/search/groups',
+      },
+      {
+        title: intl.formatMessage(messages.statuses),
+        to: '/search/statuses',
+      },
+      {
+        title: intl.formatMessage(messages.links),
+        to: '/search/links',
+      },
+      {
+        title: intl.formatMessage(messages.hashtags),
+        to: '/search/hashtags',
+      },
+    ]
+  }
+
+  render() {
+    const {
+      intl,
+      children,
+      value,
+    } = this.props
+
+    const mainContentClasses = CX({
+      d: 1,
+      w100PC: 1,
+      z1: 1,
+    })
+
+    const title = intl.formatMessage(messages.search)
+    const qos = !!value ? value : ''
+
+    return (
+      <React.Fragment>
+        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+          {
+            !!me &&
+            <SearchNavigationBar tabs={this.searchTabs} value={value} />
+          }
+          {
+            !me &&
+            <LoggedOutNavigationBar />
+          }
+
+          <main role='main' className={mainContentClasses}>
+
+            {
+              !me &&
+              <div className={[_s.d, _s.py15].join(' ')}>
+                <Pills pills={this.searchTabs} />
+              </div>
+            }
+
+            {children} 
+          </main>
+
+          <FooterBar />
+
+        </Responsive>
+
+        <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+          <Layout
+            noComposeButton
+            title={title}
+            showBackBtn
+            tabs={this.searchTabs}
+            page={`search.${qos}`}
+            layout={[
+              SignUpPanel,
+              SearchFilterPanel,
+              TrendsPanel,
+              LinkFooter,
+            ]}
+          >
+            <PageTitle path={title} />
+            {children}
+          </Layout>
+        </Responsive>
+
+      </React.Fragment>
+    )
+  }
+
+}
+
+SearchLayout.propTypes = {
+  intl: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+  value: PropTypes.string,
+}
+
+const messages = defineMessages({
+  search: { id: 'search', defaultMessage: 'Search' },
+  top: { id: 'top', defaultMessage: 'Top' },
+  people: { id: 'people', defaultMessage: 'People' },
+  groups: { id: 'groups', defaultMessage: 'Groups' },
+  statuses: { id: 'statuses', defaultMessage: 'Statuses' },
+  hashtags: { id: 'hashtags', defaultMessage: 'Hashtags' },
+  links: { id: 'links', defaultMessage: 'Links' },
+})
+
+const mapStateToProps = (state) => ({
+  value: state.getIn(['search', 'value']),
+})
+
+export default injectIntl(connect(mapStateToProps)(SearchLayout))

app/javascript/gabsocial/pages/search_page.js

@@ -1,104 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
+import SearchLayout from '../layouts/search_layout'
-import { defineMessages, injectIntl } from 'react-intl'
-import { BREAKPOINT_EXTRA_SMALL } from '../constants'
-import Responsive from '../features/ui/util/responsive_component'
-import PageTitle from '../features/ui/util/page_title'
-import Search from '../components/search'
-import Layout from '../layouts/layout'
-import {
-  LinkFooter,
-  TrendsPanel,
-  SearchFilterPanel,
-  SignUpPanel,
-} from '../features/ui/util/async_components'
 
 class SearchPage extends React.PureComponent {
 
-  componentWillMount() {
-    const { intl } = this.props
-
-    this.tabs = [
-      {
-        title: intl.formatMessage(messages.top),
-        to: '/search'
-      },
-      {
-        title: intl.formatMessage(messages.people),
-        to: '/search/people'
-      },
-      {
-        title: intl.formatMessage(messages.groups),
-        to: '/search/groups'
-      },
-      {
-        title: intl.formatMessage(messages.statuses),
-        to: '/search/statuses'
-      },
-      {
-        title: intl.formatMessage(messages.hashtags),
-        to: '/search/hashtags'
-      },
-    ]
-  }
-
   render() {
-    const {
+    const { children } = this.props
-      children,
-      intl,
-      value,
-    } = this.props
-
-    const title = intl.formatMessage(messages.search)
-    const qos = !!value ? value : ''
 
     return (
-      <Layout
+      <SearchLayout>
-        noComposeButton
-        title={title}
-        showBackBtn
-        tabs={this.tabs}
-        page={`search.${qos}`}
-        layout={[
-          SignUpPanel,
-          SearchFilterPanel,
-          TrendsPanel,
-          LinkFooter,
-        ]}
-      >
-        <PageTitle path={title} />
-
-        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s.d, _s.px10].join(' ')}>
-            <Search />
-          </div>
-        </Responsive>
-
         {children}
-      </Layout>
+      </SearchLayout>
     )
   }
 
 }
 
-const messages = defineMessages({
+export default SearchLayout
-  search: { id: 'search', defaultMessage: 'Search' },
-  top: { id: 'top', defaultMessage: 'Top' },
-  people: { id: 'people', defaultMessage: 'People' },
-  groups: { id: 'groups', defaultMessage: 'Groups' },
-  statuses: { id: 'statuses', defaultMessage: 'Statuses' },
-  hashtags: { id: 'hashtags', defaultMessage: 'Hashtags' },
-})
-
-const mapStateToProps = (state) => ({
-  value: state.getIn(['search', 'value']),
-})
-
-SearchPage.propTypes = {
-  intl: PropTypes.object.isRequired,
-  children: PropTypes.node.isRequired,
-  value: PropTypes.string,
-}
-
-export default injectIntl(connect(mapStateToProps)(SearchPage))