Merge pull request #856 from ubyssey/855-article-sidebar-mobile

855 article sidebar mobile

dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js

@@ -8,6 +8,7 @@ import FeaturedImageTab from '../Editor/tabs/FeaturedImageTab'
 import DeliveryTab from '../Editor/tabs/DeliveryTab'
 import TemplateTab from '../Editor/tabs/TemplateTab'
 import SEOTab from '../Editor/tabs/SEOTab'
+import { desktopSize } from '../../util/helpers'
 
 require('../../../styles/components/article_sidebar.scss')
 
@@ -44,83 +45,117 @@ const tabData = [
   }
 ]
 
-function tabHighlight(localErrors, errors) {
-  for (const error of localErrors) {
-    if (errors.includes(error)){
-      return 'c-article-sidebar__tab-error'
+class ArticleSidebar extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      isOpen: false
     }
   }
-  return ''
-}
-
-function renderTab(data, index, errors) {
-  return <Tab key={index} className={'c-article-sidebar__tab ' + tabHighlight(data.errors, errors)}><span className={'pt-icon-standard ' + data.icon} />{data.title}</Tab>
-}
-
-export default function ArticleSidebar(props) {
-  return (
-    <div className='c-article-sidebar'>
-      <Tabs>
-        <TabList className='c-article-sidebar__tablist'>
-          {tabData.map((data, index) => (renderTab(data, index, Object.keys(props.errors))))}
-        </TabList>
-
-        <TabPanel className='c-article-sidebar__panel'>
-          <BasicFieldsTab
-            update={props.update}
-            section={props.article.section}
-            authors={props.article.authors || []}
-            tags={props.article.tags || []}
-            subsection={props.article.subsection}
-            topic={props.article.topic}
-            slug={props.article.slug}
-            snippet={props.article.snippet}
-            errors={props.errors} />
-        </TabPanel>
-
-        <TabPanel className='c-article-sidebar__panel'>
-          <FeaturedImageTab
-            update={props.update}
-            featured_image={props.article.featured_image}
-            entities={props.entities} />
-        </TabPanel>
 
-        {/* uncomment when featured videos are ready */}
-        {/* <TabPanel className='c-article-sidebar__panel'>
-          <FeaturedVideoTab
-            update={props.update}
-            featured_video={props.article.featured_video}
-            entities={props.entities} />
-        </TabPanel> */}
-
-        <TabPanel className='c-article-sidebar__panel'>
-          <DeliveryTab
-            update={props.update}
-            importance={props.article.importance}
-            reading_time={props.article.reading_time}
-            integrations={props.article.integrations}
-            is_breaking={props.article.is_breaking}
-            breaking_timeout={props.article.breaking_timeout}
-            availableIntegrations={props.integrations} />
-        </TabPanel>
+  tabHighlight(localErrors, errors) {
+    for (const error of localErrors) {
+      if (errors.includes(error)) {
+        return 'c-article-sidebar__tab-error'
+      }
+    }
+    return ''
+  }
 
-        <TabPanel className='c-article-sidebar__panel'>
-          <TemplateTab
-            update={props.update}
-            template={props.article.template || 'default'}
-            data={props.article.template_data || {}}
-            errors={props.errors} />
-        </TabPanel>
+  renderTab(data, index, errors) {
+    return <Tab key={index} className={'c-article-sidebar__tab ' + this.tabHighlight(data.errors, errors)}><span className={'pt-icon-standard ' + data.icon} />{data.title}</Tab>
+  }
 
-        <TabPanel className='c-article-sidebar__panel'>
-          <SEOTab
-            update={props.update}
-            headline={props.article.headline}
-            slug={props.article.slug}
-            seo_keyword={props.article.seo_keyword || ''}
-            seo_description={props.article.seo_description || ''} />
-        </TabPanel>
-      </Tabs>
-    </div>
-  )
+  renderSideBar() {
+    return (
+      <div style={{height: '100%'}}>
+        <Tabs>
+          <TabList className='c-article-sidebar__tablist'>
+            {tabData.map((data, index) => (this.renderTab(data, index, Object.keys(this.props.errors))))}
+          </TabList>
+
+          <TabPanel className='c-article-sidebar__panel'>
+            <BasicFieldsTab
+              update={this.props.update}
+              section={this.props.article.section}
+              authors={this.props.article.authors || []}
+              tags={this.props.article.tags || []}
+              topic={this.props.article.topic}
+              slug={this.props.article.slug}
+              snippet={this.props.article.snippet}
+              errors={this.props.errors} />
+          </TabPanel>
+
+          <TabPanel className='c-article-sidebar__panel'>
+            <FeaturedImageTab
+              update={this.props.update}
+              featured_image={this.props.article.featured_image}
+              entities={this.props.entities} />
+          </TabPanel>
+
+          {/* uncomment when featured videos are ready */}
+          {/* <TabPanel className='c-article-sidebar__panel'>
+            <FeaturedVideoTab
+              update={this.props.update}
+              featured_video={this.props.article.featured_video}
+              entities={this.props.entities} />
+          </TabPanel> */}
+
+          <TabPanel className='c-article-sidebar__panel'>
+            <DeliveryTab
+              update={this.props.update}
+              importance={this.props.article.importance}
+              reading_time={this.props.article.reading_time}
+              integrations={this.props.article.integrations}
+              is_breaking={this.props.article.is_breaking}
+              breaking_timeout={this.props.article.breaking_timeout}
+              availableIntegrations={this.props.integrations} />
+          </TabPanel>
+
+          <TabPanel className='c-article-sidebar__panel'>
+            <TemplateTab
+              update={this.props.update}
+              template={this.props.article.template || 'default'}
+              data={this.props.article.template_data || {}}
+              errors={this.props.errors} />
+          </TabPanel>
+
+          <TabPanel className='c-article-sidebar__panel'>
+            <SEOTab
+              update={this.props.update}
+              headline={this.props.article.headline}
+              slug={this.props.article.slug}
+              seo_keyword={this.props.article.seo_keyword || ''}
+              seo_description={this.props.article.seo_description || ''} />
+          </TabPanel>
+        </Tabs>
+      </div>
+    )
+  }
+
+  render () {
+    const isDesktop = window.document.body.clientWidth > desktopSize 
+    const open = isDesktop ? '' : (this.state.isOpen ? 'open': 'closed')
+    const sliderStyle = {
+      position: 'absolute', 
+      top: 0,
+      left: '-42px', 
+      padding: '13px', 
+      backgroundColor: '#394b59', 
+      borderRadius: '0 0 0 10px',
+      color: 'white',
+      cursor: 'pointer' }
+    return (
+        <div className={'c-article-sidebar ' + open}>
+          { this.renderSideBar() }
+          { !isDesktop && <span 
+            onClick={() => this.setState(prevstate => ({isOpen: !prevstate.isOpen}))}
+            style={sliderStyle}
+            className='nav-padded pt-icon-standard pt-icon-sidebar pt-icon-menu' /> }
+        </div>
+    )
+  }
 }
+
+export default ArticleSidebar

dispatch/static/manager/src/js/components/ArticleEditor/index.js

@@ -155,7 +155,6 @@ class ArticleEditorComponent extends React.Component {
     }
 
     const title = this.props.isNew ? 'New article' : `Edit - ${article.headline}`
-
     return (
       <DocumentTitle title={title}>
         <div className='u-container-main'>

dispatch/static/manager/src/js/components/Header/Header.js

@@ -2,40 +2,82 @@ import React from 'react'
 import { Link } from 'react-router'
 import LoadingBar from 'react-redux-loading-bar'
 import HeaderButtons from './HeaderButtons'
-import MobileHeader from './MobileHeader'
+import MobileHeaderButtons from './MobileHeaderButtons'
 import { desktopSize } from '../../util/helpers'
 
 require('../../../styles/components/header.scss')
 require('../../../styles/components/loading_bar.scss')
 
-const renderLink = (url, classes, value) => {
-  return (
-    <div className='nav-padded'>
-      <Link to={url} className={'pt-button pt-minimal ' + classes}>{value}</Link>
-    </div>
-  )
-}
+class Header extends React.Component {
+  constructor(props) {
+    super(props)
 
-const DesktopHeader = () => {
-  return (
-    <header className='c-header'>
-      <div className={'row no-gutters'}>
-        <div className='col-10 flex-start'>
-          {renderLink('/', 'nav-logo pt-icon-selection', 'dispatch')}
-          <span className="pt-navbar-divider" />
-          <HeaderButtons />
-        </div>
-        <div className={'col-2 flex-end'}>
-          {renderLink('/profile/', 'pt-icon-user', '')}
-          {renderLink('/logout/', 'pt-icon-log-out', '')}
+    this.state = {
+      isOpen: false
+    }
+  }
+
+  renderLink(url, classes, value) {
+    return (
+      <div className='nav-padded'>
+        <Link to={url} className={'pt-button pt-minimal ' + classes}>{value}</Link>
+      </div>
+    )
+  }
+
+  renderDesktopHeader() {
+    return (
+      <header className='c-header'>
+        <div className={'row no-gutters'}>
+          <div className='col-10 flex-start'>
+            {this.renderLink('/', 'nav-logo pt-icon-selection', 'dispatch')}
+            <span className="pt-navbar-divider" />
+            <HeaderButtons />
+          </div>
+          <div className={'col-2 flex-end'}>
+            {this.renderLink('/profile/', 'pt-icon-user', '')}
+            {this.renderLink('/logout/', 'pt-icon-log-out', '')}
+          </div>
         </div>
+        <LoadingBar className='c-loading-bar' />
+      </header>
+    )
+  }
+
+  renderMobileHeader() {
+    const open = this.state.isOpen ? 'open' : 'closed'
+    return (
+      <header className='c-header'>
+        <span 
+          onClick={() => this.setState(prevstate => ({isOpen: !prevstate.isOpen}))}
+          className='nav-padded pt-icon-standard pt-icon-menu '>
+          <div className={'nav-dropdown-content ' + open} >
+            <div style={{display:'flex', flexDirection:'row', justifyContent:'space-around'}}>
+              <div className='nav-padded'>
+                <Link to='/profile/' className="pt-button pt-minimal pt-icon-large pt-icon-user" />
+                <h3>Profile</h3>
+              </div>
+              <div className='nav-padded'>
+                <Link to='/logout/' className="pt-button pt-minimal pt-icon-large pt-icon-log-out" />
+                <h3>Logout</h3>
+              </div>
+            </div>
+            <MobileHeaderButtons />
+          </div>
+        </span>
+        <Link to='/' className='pt-button pt-minimal pt-icon-selection nav-logo'>dispatch</Link>
+        <span className='nav-padded pt-icon-standard pt-icon-blank ' />
+      </header>
+    )
+  }
+
+  render() {
+    return (
+      <div>
+        { this.props.viewWidth > desktopSize ? this.renderDesktopHeader() : this.renderMobileHeader() }
       </div>
-      <LoadingBar className='c-loading-bar' />
-    </header>
-  )
+    )
+  }
 }
 
-export default function Header() {
-  const windowWidth = window.document.body.clientWidth || window.innerWidth
-  return windowWidth > desktopSize ? DesktopHeader() : <MobileHeader />
-}
+export default Header

dispatch/static/manager/src/js/components/ItemList/ItemListHeader.js

@@ -5,6 +5,7 @@ import ConfirmButton from '../inputs/ConfirmButton'
 import { Toolbar, ToolbarLeft, ToolbarRight } from '../Toolbar'
 import ItemListPagination from './ItemListPagination'
 import ItemListSearchBar from './ItemListSearchBar'
+import FilterDropdown from '../inputs/filters/FilterDropdown'
 
 export default function ItemListHeader(props) {
 
@@ -33,15 +34,7 @@ export default function ItemListHeader(props) {
         className='c-item-list__header__delete'
         onConfirm={() => props.actions.deleteItems(props.items.selected)}
         disabled={!props.items.selected.length}>Delete</ConfirmButton>
-      <div className='c-item-list__header__filters'>
-        <div className='c-item-list__header__filters__button pt-button' style={{display: 'flex', alignItems: 'center'}}>
-          <h3>Filters</h3>
-          <span className='pt-icon-caret-down pt-icon-standard' />
-        </div>
-        <div className='c-item-list__header__filters__dropdown'>
-          {props.filters}
-        </div>
-      </div>
+      <FilterDropdown filters={props.filters} />
       {props.toolbarContent}
     </div>
   )