Progress

2020-02-13 19:40:04 -05:00
parent 389b189d64
commit cdde454915
44 changed files with 783 additions and 819 deletions
--- a/app/javascript/gabsocial/components/column_header.js
+++ b/app/javascript/gabsocial/components/column_header.js
@@ -0,0 +1,145 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import Icon from './icon'
+
+const messages = defineMessages({
+  show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
+  hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
+})
+
+export default @injectIntl
+class ColumnHeader extends PureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  }
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    title: PropTypes.node,
+    icon: PropTypes.string,
+    active: PropTypes.bool,
+    children: PropTypes.node,
+  }
+
+  state = {
+    collapsed: true,
+  }
+
+  historyBack = () => {
+    if (window.history && window.history.length === 1) {
+      this.context.router.history.push('/home') // homehack
+    } else {
+      this.context.router.history.goBack()
+    }
+  }
+
+  handleToggleClick = (e) => {
+    e.stopPropagation()
+    this.setState({
+      collapsed: !this.state.collapsed,
+    })
+  }
+
+  handleBackClick = () => {
+    this.historyBack()
+  }
+
+  render () {
+    const { title, icon, active, children, intl: { formatMessage } } = this.props
+    const { collapsed } = this.state
+
+    return (
+      <div className={[styles.default, styles.height100PC, styles.flexRow].join(' ')}>
+        { /* <button className={[styles.default, styles.cursorPointer, styles.backgroundTransparent, styles.alignItemsCenter, styles.marginRight10PX, styles.justifyContentCenter].join(' ')}>
+          <Icon className={[styles.marginRight5PX, styles.fillColorBrand].join(' ')} id='back' width='24px' height='24px' />
+        </button> */ }
+        <h1 className={[styles.default, styles.height100PC, styles.justifyContentCenter].join(' ')}>
+          <span className={[styles.default, styles.text, styles.fontSize24PX, styles.fontWeight500, styles.colorBlack].join(' ')}>
+            {title}
+          </span>
+        </h1>
+        <div className={[styles.default, styles.backgroundTransparent, styles.flexRow, styles.alignItemsCenter, styles.justifyContentCenter, styles.marginLeftAuto].join(' ')}>
+          <button className={[styles.default, styles.marginLeft5PX, styles.cursorPointer, styles.backgroundSubtle2, styles.paddingHorizontal10PX, styles.paddingVertical5PX, styles.radiusSmall].join(' ')}>
+            <Icon className={styles.fillColorSubtle} id='ellipsis' width='24px' height='24px' />
+          </button>
+          <button className={[styles.default, styles.marginLeft5PX, styles.cursorPointer, styles.backgroundSubtle2, styles.paddingHorizontal10PX, styles.paddingVertical5PX, styles.radiusSmall].join(' ')}>
+            <Icon className={styles.fillColorSubtle} id='ellipsis' width='24px' height='24px' />
+          </button>
+          <button className={[styles.default, styles.marginLeft5PX, styles.cursorPointer, styles.backgroundSubtle2, styles.paddingHorizontal10PX, styles.paddingVertical5PX, styles.radiusSmall].join(' ')}>
+            <Icon className={styles.fillColorSubtle} id='ellipsis' width='24px' height='24px' />
+          </button>
+        </div>
+      </div>
+    )
+
+    // const wrapperClassName = classNames('column-header__wrapper', {
+    //   'column-header__wrapper--active': active,
+    // })
+
+    // const buttonClassName = classNames('column-header', {
+    //   'column-header--active': active,
+    // })
+
+    // const btnTitle = formatMessage(collapsed ? messages.show : messages.hide)
+    // const hasTitle = icon && title
+    // const hasChildren = !!children
+
+    // if (!hasChildren && !hasTitle) {
+    //   return null
+    // } else if (!hasChildren && hasTitle) {
+    //   return (
+    //     <div className={wrapperClassName}>
+    //       <h1 className={buttonClassName}>
+    //         <Icon id={icon} fixedWidth className='column-header__icon' />
+    //         {title}
+    //       </h1>
+    //     </div>
+    //   )
+    // }
+
+    // const collapsibleClassName = classNames('column-header__collapsible', {
+    //   'column-header__collapsible--collapsed': collapsed,
+    // })
+
+    // const collapsibleButtonClassName = classNames('column-header__button', {
+    //   'column-header__button--active': !collapsed,
+    // })
+
+    // return (
+    //   <div className={wrapperClassName}>
+    //     <h1 className={buttonClassName}>
+    //       {
+    //         hasTitle && (
+    //           <Fragment>
+    //             <Icon id={icon} fixedWidth className='column-header__icon' />
+    //             {title}
+    //           </Fragment>
+    //         )
+    //       }
+
+    //       <button
+    //         className={collapsibleButtonClassName}
+    //         title={btnTitle}
+    //         aria-label={btnTitle}
+    //         aria-pressed={!collapsed}
+    //         onClick={this.handleToggleClick}
+    //       >
+    //         <Icon id='sliders' />
+    //       </button>
+    //     </h1>
+
+    //     <div className={collapsibleClassName} tabIndex={collapsed ? -1 : null}>
+    //       <div className='column-header__collapsible-inner'>
+    //         {
+    //           !collapsed &&
+    //           <div key='extra-content' className='column-header__collapsible__extra'>
+    //             {children}
+    //           </div>
+    //         }
+    //       </div>
+    //     </div>
+    //   </div>
+    // )
+  }
+
+}