Progress

app/javascript/gabsocial/components/modal/compose_modal.js

@@ -49,9 +49,9 @@ class ComposeModal extends ImmutablePureComponent {
     const title = isEditing ? messages.edit : isComment ? messages.comment : messages.title
 
     return (
-      <div style={{width: '512px'}} className={[_s.d, _s.modal].join(' ')}>
+      <div style={{width: '580px'}} className={[_s.d, _s.modal].join(' ')}>
         <Block>
-          <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.pl10, _s.pr15].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.pl5, _s.pr10].join(' ')}>
             <div className={[_s.d, _s.w115PX, _s.aiStart, _s.jcCenter, _s.mrAuto].join(' ')}>
               <Button
                 backgroundColor='none'
@@ -69,8 +69,8 @@ class ComposeModal extends ImmutablePureComponent {
               <ComposeFormSubmitButton type='header' />
             </div>
           </div>
-          <div className={[_s.d].join(' ')}>
-            <TimelineComposeBlock isModal />
+          <div className={[_s.d, _s.pt5].join(' ')}>
+            <TimelineComposeBlock isModal formLocation='modal' />
           </div>
         </Block>
       </div>

app/javascript/gabsocial/components/modal/deck_column_add_modal.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { MODAL_DECK_COLUMN_ADD_OPTIONS } from '../../constants'
 import { setDeckColumnAtIndex } from '../../actions/deck'
 import { openModal } from '../../actions/modal'
 import ModalLayout from './modal_layout'
@@ -10,27 +11,19 @@ import Text from '../text'
 class DeckColumnAddModal extends React.PureComponent {
 
   onAdd = (column) => {
-    console.log("onAdd column: ", column)
-    switch (column) {
-      case 'user':
-        // 
-        break
-      case 'list':
-        // 
-        break
-      case 'group':
-        // 
-        break
-      case 'hashtag':
-        // 
-        break
-      default:
-        this.props.dispatch(setDeckColumnAtIndex(column))
-        this.props.onClose()
-        break
+    const moreOptions = ['user', 'list', 'group', 'hashtag']
+    if (moreOptions.indexOf(column) > -1) {
+      this.openOptionsModal(column)
+    } else {
+      this.props.dispatch(setDeckColumnAtIndex(column))
+      this.props.onClose()
     }
   }
 
+  openOptionsModal = (column) => {
+    this.props.dispatch(openModal(MODAL_DECK_COLUMN_ADD_OPTIONS, { column }))
+  }
+
   render() {
     const {
       intl,

app/javascript/gabsocial/components/modal/deck_column_add_options_modal.js

@@ -0,0 +1,75 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { openModal } from '../../actions/modal'
+import { MODAL_DECK_COLUMN_ADD } from '../../constants'
+import Heading from '../heading'
+import Button from '../button'
+import Block from '../block'
+
+class DeckColumnAddOptionsModal extends React.PureComponent {
+
+  state = {
+    selectedItem: null,
+  }
+
+  onClickClose = () => {
+    this.props.onClose()
+    this.props.dispatch(openModal(MODAL_DECK_COLUMN_ADD))
+  }
+
+  handleAdd = () => {
+    //
+  }
+
+  render() {
+    const { column } = this.props
+    const { selectedItem } = this.state
+
+    // user, hashtag, list, groups
+
+    if (!column) return <div />
+    const title = `Select a ${column}`
+
+    return (
+      <div style={{width: '520px'}} className={[_s.d, _s.modal].join(' ')}>
+        <Block>
+          <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.pl10, _s.pr15].join(' ')}>
+            <div className={[_s.d, _s.w115PX, _s.aiStart, _s.jcCenter, _s.mrAuto].join(' ')}>
+              <Button
+                backgroundColor='none'
+                title='Back'
+                onClick={this.onClickClose}
+                color='secondary'
+                icon='back'
+                iconSize='16px'
+              />
+            </div>
+            <Heading size='h2'>
+              {title}
+            </Heading>
+            <div className={[_s.d, _s.w115PX, _s.aiEnd, _s.jcCenter, _s.mlAuto].join(' ')}>
+              <Button
+                isDisabled={!selectedItem}
+                onClick={this.handleAdd}
+              >
+                Add
+              </Button>
+            </div>
+          </div>
+          <div className={[_s.d].join(' ')}>
+            test
+          </div>
+        </Block>
+      </div>
+    )
+  }
+
+}
+
+DeckColumnAddOptionsModal.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  column: PropTypes.string.isRequired,
+}
+
+export default connect()(DeckColumnAddOptionsModal)

app/javascript/gabsocial/components/modal/modal_root.js

@@ -16,6 +16,7 @@ import {
   MODAL_COMPOSE,
   MODAL_CONFIRM,
   MODAL_DECK_COLUMN_ADD,
+  MODAL_DECK_COLUMN_ADD_OPTIONS,
   MODAL_DISPLAY_OPTIONS,
   MODAL_EDIT_PROFILE,
   MODAL_EDIT_SHORTCUTS,
@@ -51,6 +52,7 @@ import {
   ComposeModal,
   ConfirmationModal,
   DeckColumnAddModal,
+  DeckColumnAddOptionsModal,
   DisplayOptionsModal,
   EditProfileModal,
   EditShortcutsModal,
@@ -89,6 +91,7 @@ const MODAL_COMPONENTS = {
   [MODAL_COMPOSE]: ComposeModal,
   [MODAL_CONFIRM]: ConfirmationModal,
   [MODAL_DECK_COLUMN_ADD]: DeckColumnAddModal,
+  [MODAL_DECK_COLUMN_ADD_OPTIONS]: DeckColumnAddOptionsModal,
   [MODAL_DISPLAY_OPTIONS]: DisplayOptionsModal,
   [MODAL_EDIT_SHORTCUTS]: EditShortcutsModal,
   [MODAL_EDIT_PROFILE]: EditProfileModal,