Progress on Gab Deck, Updates on Compose

• Progress on Gab Deck, Updates on Compose
2020-12-08 23:15:33 -05:00
parent 6950f67520
commit 998f00ae48
26 changed files with 895 additions and 381 deletions
--- a/app/javascript/gabsocial/components/composer.js
+++ b/app/javascript/gabsocial/components/composer.js
@@ -261,7 +261,7 @@ class Composer extends React.PureComponent {
      <div className={_s.d}>

        {
-          !small && isPro &&
+          isPro &&
          <RichTextEditorBar
            editorState={editorState}
            onChange={this.onChange}
--- a/app/javascript/gabsocial/components/deck_column.js
+++ b/app/javascript/gabsocial/components/deck_column.js
@@ -10,12 +10,13 @@ class DeckColumn extends React.PureComponent {
      subtitle,
      icon,
      children,
+      index,
    } = this.props

    return (
      <div className={[_s.d, _s.w360PX, _s.px2, _s.bgSecondary, _s.h100VH].join(' ')}>
        <div className={[_s.d, _s.w100PC, _s.bgPrimary, _s.h100VH].join(' ')}>
-          <DeckColumnHeader title={title} subtitle={subtitle} icon={icon} />
+          <DeckColumnHeader title={title} subtitle={subtitle} icon={icon} index={index} />
          <div className={[_s.d, _s.w100PC, _s.overflowYScroll, _s.boxShadowNone, _s.posAbs, _s.top60PX, _s.left0, _s.right0, _s.bottom0].join(' ')}>
            {children}
          </div>
@@ -30,6 +31,7 @@ DeckColumn.propTypes = {
  title: PropTypes.string,
  subtitle: PropTypes.string,
  icon: PropTypes.string,
+  index: PropTypes.number,
 }

 export default DeckColumn
--- a/app/javascript/gabsocial/components/deck_column_header.js
+++ b/app/javascript/gabsocial/components/deck_column_header.js
@@ -1,11 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { deleteDeckColumnAtIndex } from '../actions/deck'
 import Icon from './icon'
 import Text from './text'
 import Button from './button'

 class DeckColumnHeader extends React.PureComponent {

+  handleClickDelete = () => {
+    this.props.dispatch(deleteDeckColumnAtIndex(this.props.index))
+  }
+
+  handleClickRefresh = () => {
+
+  }
+
  render() {
    const {
      title,
@@ -15,22 +25,41 @@ class DeckColumnHeader extends React.PureComponent {
    } = this.props

    return (
-      <div className={[_s.d, _s.w100PC, _s.flexRow, _s.aiCenter, _s.h60PX, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgPrimary].join(' ')}>
-        { !!icon && <Icon id={icon} className={_s.cPrimary} size='20px' /> }
+      <div data-sort-header className={[_s.d, _s.w100PC, _s.flexRow, _s.aiCenter, _s.h60PX, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgPrimary].join(' ')}>
+        {
+          !!icon &&
+          <div data-sort-header className={[_s.d, _s.flexRow, _s.mr15, _s.cursorEWResize].join(' ')}>
+            <span className={[_s.d, _s.w1PX, _s.h24PX, _s.mr2, _s.bgSecondary].join(' ')} />
+            <span className={[_s.d, _s.w1PX, _s.h24PX, _s.mr2, _s.bgSecondary].join(' ')} />
+            <span className={[_s.d, _s.w1PX, _s.h24PX, _s.bgSecondary].join(' ')} />
+          </div>
+        }
+        { !!icon && <Icon id={icon} className={_s.cPrimary} size='18px' /> }
        <div className={[_s.d, _s.flexRow, _s.aiEnd, _s.ml15].join(' ')}>
-          { !!title && <Text size='large' weight='medium'>{title}</Text> }
-          { !!subtitle && <Text className={_s.ml5} size='small' color='secondary'>{subtitle}</Text> }
+          { !!title && <Text size='extraLarge' weight='medium'>{title}</Text> }
+          { !!subtitle && <Text className={_s.ml5} color='secondary'>{subtitle}</Text> }
        </div>
-        <div className={[_s.d, _s.aiCenter, _s.mlAuto, _s.jcCenter].join(' ')}>
-          {
-            !!title &&
+        {
+          !!title &&
+          <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.mlAuto, _s.jcCenter].join(' ')}>
            <Button
-              color='primary'
-              backgroundColor='none'
-              icon='list'
+              isNarrow
+              noClasses
+              onClick={this.handleClickRefresh}
+              className={[_s.d, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.bgTransparent, _s.px5, _s.py5].join(' ')}
+              iconClassName={_s.cSecondary}
+              icon='repost'
            />
-          }
-        </div>
+            <Button
+              isNarrow
+              noClasses
+              onClick={this.handleClickDelete}
+              className={[_s.d, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.bgTransparent, _s.px5, _s.py5].join(' ')}
+              iconClassName={_s.cSecondary}
+              icon='trash'
+            />
+          </div>
+        }
      </div>
    )
  }
@@ -41,6 +70,7 @@ DeckColumnHeader.propTypes = {
  title: PropTypes.string,
  subtitle: PropTypes.string,
  icon: PropTypes.string,
+  index: PropTypes.number,
 }

-export default DeckColumnHeader
+export default connect()(DeckColumnHeader)
--- a/app/javascript/gabsocial/components/modal/compose_post_destination_modal.js
+++ b/app/javascript/gabsocial/components/modal/compose_post_destination_modal.js
--- a/app/javascript/gabsocial/components/modal/deck_column_add_modal.js
+++ b/app/javascript/gabsocial/components/modal/deck_column_add_modal.js
@@ -2,7 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { setDeckColumnAtIndex } from '../../actions/deck'
-import { saveSettings } from '../../actions/settings'
 import { openModal } from '../../actions/modal'
 import ModalLayout from './modal_layout'
 import Button from '../button'
@@ -11,6 +10,7 @@ import Text from '../text'
 class DeckColumnAddModal extends React.PureComponent {

  onAdd = (column) => {
+    console.log("onAdd column: ", column)
    switch (column) {
      case 'user':
        // 
@@ -18,15 +18,12 @@ class DeckColumnAddModal extends React.PureComponent {
      case 'list':
        // 
        break
-      case 'groups':
-        // 
-        break
      case 'group':
        // 
        break
      default:
        this.props.dispatch(setDeckColumnAtIndex(column))
-        this.props.dispatch(saveSettings())
+        this.props.onClose()
        break
    }
  }
@@ -47,7 +44,7 @@ class DeckColumnAddModal extends React.PureComponent {
          <div className={[_s.d, _s.pl10, _s.borderBottom1PX, _s.borderColorSecondary, _s.flexRow, _s.aiCenter, _s.jcCenter].join(' ')}>
            <DeckColumnAddModalButton icon='home' type='Home' onClick={() => this.onAdd('home')} />
            <DeckColumnAddModalButton icon='group' type='User' onClick={() => this.onAdd('user')} />
-            <DeckColumnAddModalButton icon='notifications' type='Notifications' onClick={() => this.onAdd('home')} />
+            <DeckColumnAddModalButton icon='notifications' type='Notifications' onClick={() => this.onAdd('notifications')} />
          </div>
          <div className={[_s.d, _s.pl10, _s.borderBottom1PX, _s.borderColorSecondary, _s.flexRow, _s.aiCenter, _s.jcCenter].join(' ')}>
            <DeckColumnAddModalButton icon='list' type='List' onClick={() => this.onAdd('list')} />
@@ -56,7 +53,7 @@ class DeckColumnAddModal extends React.PureComponent {
          </div>
          <div className={[_s.d, _s.pl10, _s.pb10, _s.flexRow, _s.aiCenter, _s.jcCenter].join(' ')}>
            <DeckColumnAddModalButton icon='pro' type='PRO Timeline' onClick={() => this.onAdd('pro')} />
-            <DeckColumnAddModalButton icon='group' type='Groups Timeline' onClick={() => this.onAdd('groups')} />
+            <DeckColumnAddModalButton icon='pencil' type='Compose' onClick={() => this.onAdd('compose')} />
            <DeckColumnAddModalButton icon='group' type='Group Timeline' onClick={() => this.onAdd('group')} />
          </div>
        </div>
@@ -85,7 +82,7 @@ const DeckColumnAddModalButton = ({ icon, type, onClick }) => (


 DeckColumnAddModalButton.propTypes = {
-  onSetDeckColumnAtIndex: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
 }

 export default connect()(DeckColumnAddModal)
--- a/app/javascript/gabsocial/components/navigation_bar/compose_navigation_bar_xs.js
+++ b/app/javascript/gabsocial/components/navigation_bar/compose_navigation_bar_xs.js
@@ -0,0 +1,96 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { length } from 'stringz'
+import { openPopover } from '../../actions/popover'
+import { MAX_POST_CHARACTER_COUNT } from '../../constants'
+import Heading from '../heading'
+import Button from '../button'
+import BackButton from '../back_button'
+import Text from '../text'
+import CharacterCounter from '../character_counter'
+
+class ComposeNavigationBar extends React.PureComponent {
+
+  handleOnPost = () => {
+    // 
+  }
+
+  render() {
+    const {
+      isUploading,
+      isChangingUpload,
+      isSubmitting,
+      anyMedia,
+      text,
+    } = this.props
+
+    const disabledButton =  isSubmitting || isUploading || isChangingUpload || length(text) > MAX_POST_CHARACTER_COUNT || (length(text.trim()) === 0 && !anyMedia)
+    const buttonOptions = {
+      backgroundColor: disabledButton ? 'tertiary' : 'brand',
+      color: disabledButton ? 'tertiary' : 'white',
+      isDisabled: disabledButton,
+      onClick: this.handleOnPost,
+    }
+
+    return (
+      <div className={[_s.d, _s.z4, _s.h53PX, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.h53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+
+          <div className={[_s.d, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}>
+
+            <BackButton
+              toHome
+              className={[_s.h53PX, _s.pl10, _s.pr10].join(' ')}
+              iconSize='18px'
+              iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
+            />
+
+            <div className={[_s.d, _s.h53PX, _s.flexRow, _s.jcCenter, _s.aiCenter, _s.mrAuto].join(' ')}>
+              <Heading size='h1'>
+                Compose
+              </Heading>
+            </div>
+
+            <div className={[_s.d, _s.h53PX, _s.flexRow, _s.mlAuto, _s.aiCenter, _s.jcCenter, _s.mr15].join(' ')}>
+              <CharacterCounter max={MAX_POST_CHARACTER_COUNT} text={text} />
+
+              <Button {...buttonOptions}>
+                <Text color='inherit' weight='bold' size='medium' className={_s.px5}>
+                  POST
+                </Text>
+              </Button>
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+    )
+  }
+
+}
+
+const mapStateToProps = (state, props) => ({
+  isUploading: state.getIn(['compose', 'is_uploading']),
+  isChangingUpload: state.getIn(['compose', 'is_changing_upload']),
+  isSubmitting: state.getIn(['compose', 'is_submitting']),
+  anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
+  text: state.getIn(['compose', 'text']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onSubmitCompose() {
+    //
+  },
+})
+
+ComposeNavigationBar.propTypes = {
+  isUploading: PropTypes.bool,
+  isChangingUpload: PropTypes.bool,
+  isSubmitting: PropTypes.bool,
+  anyMedia: PropTypes.bool,
+  text: PropTypes.string,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ComposeNavigationBar)
--- a/app/javascript/gabsocial/components/sidebar/deck_sidebar.js
+++ b/app/javascript/gabsocial/components/sidebar/deck_sidebar.js
@@ -11,6 +11,7 @@ import { makeGetAccount } from '../../selectors'
 import {
  THEMES,
  DEFAULT_THEME,
+  MODAL_COMPOSE,
  POPOVER_NAV_SETTINGS,
  MODAL_DECK_COLUMN_ADD,
 } from '../../constants'
@@ -38,6 +39,10 @@ class DeckSidebar extends ImmutablePureComponent {
    this.props.onOpenNewColumnModal()
  }

+  handleOnOpenComposeModal = () => {
+    this.props.onOpenComposeModal()
+  }
+
  setAvatarNode = (c) => {
    this.avatarNode = c
  }
@@ -70,9 +75,9 @@ class DeckSidebar extends ImmutablePureComponent {

              <div className={[_s.d, _s.px10].join(' ')}>

-                <NavigationBarButton icon='pencil' />
+                <NavigationBarButton icon='pencil' onClick={this.handleOnOpenComposeModal} />
                
-                <NavigationBarButton icon='search' />
+                <NavigationBarButton icon='search' to='/search' />

                <Divider isSmall />

@@ -117,12 +122,15 @@ const mapDispatchToProps = (dispatch) => ({
  onOpenNavSettingsPopover(targetRef) {
    dispatch(openPopover(POPOVER_NAV_SETTINGS, {
      targetRef,
-      position: 'right-start',
+      position: 'top-start',
    }))
  },
  onOpenNewColumnModal() {
    dispatch(openModal(MODAL_DECK_COLUMN_ADD))
  },
+  onOpenComposeModal() {
+    dispatch(openModal(MODAL_COMPOSE))
+  },
  onChange(key, value) {
    dispatch(changeSetting(['displayOptions', key], value))
    dispatch(saveSettings())
@@ -133,6 +141,7 @@ DeckSidebar.propTypes = {
  account: ImmutablePropTypes.map,
  onOpenNavSettingsPopover: PropTypes.func.isRequired,
  onOpenNewColumnModal: PropTypes.func.isRequired,
+  onOpenComposeModal: PropTypes.func.isRequired,
  theme: PropTypes.string,
  logoDisabled: PropTypes.bool,
 }