Progress on deck, dms

app/javascript/gabsocial/features/compose/components/compose_extra_button.js

@@ -17,6 +17,7 @@ class ComposeExtraButton extends React.PureComponent {
       buttonRef,
       isLast,
       small,
+      iconClassName,
     } = this.props
 
     const containerClasses = CX({
@@ -42,7 +43,7 @@ class ComposeExtraButton extends React.PureComponent {
       px10: 1,
     })
 
-    const iconClasses = CX({
+    const iconClasses = CX(iconClassName, {
       cSecondary: !active,
       cWhite: active,
       mr10: 1,
@@ -89,6 +90,7 @@ ComposeExtraButton.propTypes = {
   active: PropTypes.bool,
   buttonRef: PropTypes.func,
   small: PropTypes.bool,
+  iconClassName: PropTypes.string,
 }
 
 export default ComposeExtraButton

app/javascript/gabsocial/features/compose/components/compose_extra_button_list.js

@@ -43,10 +43,16 @@ class ComposeExtraButtonList extends React.PureComponent {
     
 
   render() {
-    const { isMatch, edit, hidePro, isModal } = this.props
+    const {
+      isMatch,
+      edit,
+      hidePro,
+      isModal,
+      isStandalone,
+    } = this.props
     const { height } = this.state
 
-    const small = height <= 660 || isModal
+    const small = (height <= 660 || isModal) && !isStandalone
 
     const containerClasses = CX({
       d: 1,
@@ -84,6 +90,7 @@ ComposeExtraButtonList.propTypes = {
   edit: PropTypes.bool,
   isMatch: PropTypes.bool,
   isModal: PropTypes.bool,
+  isStandalone: PropTypes.bool,
 }
 
 export default ComposeExtraButtonList

app/javascript/gabsocial/features/compose/components/compose_form.js

@@ -28,6 +28,7 @@ import ExpiresPostButton from './expires_post_button'
 import RichTextEditorButton from './rich_text_editor_button'
 import StatusContainer from '../../../containers/status_container'
 import StatusVisibilityButton from './status_visibility_button'
+import MoreButton from './more_button'
 import UploadButton from './media_upload_button'
 import UploadForm from './upload_form'
 import Input from '../../../components/input'
@@ -82,6 +83,8 @@ class ComposeForm extends ImmutablePureComponent {
     if (!this.form.contains(e.target)) {
       this.handleClickOutside()
     } else {
+      // : todo :
+      // if mobile go to /compose else openModal
       if (!isStandalone && !isModalOpen && !shouldCondense) {
         this.props.openComposeModal()
         return false
@@ -395,7 +398,7 @@ class ComposeForm extends ImmutablePureComponent {
 
           { !isModalOpen && <ComposeFormSubmitButton /> }
             
-          <ComposeExtraButtonList isMatch={isMatch} hidePro={hidePro} edit={edit} isModal={isModalOpen} />
+          <ComposeExtraButtonList isStandalone={isStandalone} isMatch={isMatch} hidePro={hidePro} edit={edit} isModal={isModalOpen} />
         </div>
       )
     }
@@ -413,6 +416,7 @@ class ComposeForm extends ImmutablePureComponent {
           <UploadButton />
           <EmojiPickerButton isMatch={isMatch} />
           <PollButton />
+          <MoreButton />
           <ComposeFormSubmitButton />
         </div>
         <div className={[_s.d, _s.posAbs, _s.z2, _s.left0, _s.right0, _s.bottom0, _s.top0].join(' ')} />

app/javascript/gabsocial/features/compose/components/compose_form_submit_button.js

@@ -12,6 +12,7 @@ class ComposeFormSubmitButton extends React.PureComponent {
       active,
       small,
       disabledButton,
+      type,
     } = this.props
 
     const containerClasses = CX({
@@ -72,7 +73,7 @@ class ComposeFormSubmitButton extends React.PureComponent {
 
 // {intl.formatMessage(scheduledAt ? messages.schedulePost : edit ? messages.postEdit : messages.post)}
 ComposeFormSubmitButton.propTypes = {
-  
+  type: PropTypes.oneOf(['header', 'block', 'comment'])
 }
 
 export default ComposeFormSubmitButton

app/javascript/gabsocial/features/compose/components/emoji_picker_button.js

@@ -32,6 +32,7 @@ class EmojiPickerButton extends React.PureComponent {
         active={active && isMatch}
         buttonRef={this.setButton}
         small={small}
+        iconClassName={_s.cIconComposeEmoji}
       />
     )
   }

app/javascript/gabsocial/features/compose/components/expires_post_button.js

@@ -40,6 +40,7 @@ class ExpiresPostButton extends React.PureComponent {
         onClick={this.handleToggle}
         small={small}
         title={intl.formatMessage(messages.expires)}
+        iconClassName={_s.cIconComposeExpires}
       />
     )
   }

app/javascript/gabsocial/features/compose/components/media_upload_button.js

@@ -42,6 +42,7 @@ class UploadButton extends ImmutablePureComponent {
         onClick={this.handleClick}
         small={small}
         icon='media'
+        iconClassName={_s.cIconComposeMedia}
       >
         <label>
           <span className={_s.displayNone}>{intl.formatMessage(messages.upload)}</span>

app/javascript/gabsocial/features/compose/components/more_button.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import ComposeExtraButton from './compose_extra_button'
+
+class MoreButton extends React.PureComponent {
+  render () {
+    return <ComposeExtraButton title='More' icon='more' iconClassName={_s.cTertiary} />
+  }
+}
+
+export default MoreButton

app/javascript/gabsocial/features/compose/components/poll_button.js

@@ -30,6 +30,7 @@ class PollButton extends React.PureComponent {
         icon='poll'
         small={small}
         active={active}
+        iconClassName={_s.cIconComposePoll}
       />
     )
   }

app/javascript/gabsocial/features/compose/components/rich_text_editor_button.js

@@ -28,6 +28,7 @@ class RichTextEditorButton extends React.PureComponent {
         onClick={this.handleClick}
         small={small}
         active={active}
+        iconClassName={_s.cIconComposeRichText}
       />
     )
   }

app/javascript/gabsocial/features/compose/components/schedule_post_button.js

@@ -41,6 +41,7 @@ class SchedulePostButton extends React.PureComponent {
         onClick={this.handleToggle}
         small={small}
         title={intl.formatMessage(messages.schedule_status)}
+        iconClassName={_s.cIconComposeSchedule}
       />
     )
   }

app/javascript/gabsocial/features/compose/components/spoiler_button.js

@@ -22,6 +22,7 @@ class SpoilerButton extends React.PureComponent {
         onClick={this.handleClick}
         small={small}
         active={active}
+        iconClassName={_s.cIconComposeSpoiler}
       />
     )
   }

app/javascript/gabsocial/features/compose/components/status_visibility_button.js

@@ -42,6 +42,7 @@ class StatusVisibilityButton extends React.PureComponent {
         onClick={this.handleOnClick}
         small={small}
         buttonRef={this.setButton}
+        iconClassName={_s.cIconComposeSensitive}
       />
     )
   }