Progress

2020-04-01 23:17:21 -04:00
parent 1a33759e19
commit 80d41b8d94
50 changed files with 1771 additions and 610 deletions
--- a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
@@ -27,7 +27,7 @@ export default class ComposeExtraButton extends PureComponent {
    } = this.props

    const btnClasses = cx({
-      backgroundSubtle_onHover: 1,
+      backgroundSubtle_onHover: !active,
      backgroundColorBrandLight: active,
      py10: !small,
      px10: !small,
--- a/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
@@ -16,7 +16,6 @@ import EmojiPickerButton from '../../components/emoji_picker_button'
 import PollFormContainer from '../../containers/poll_form_container'
 import SchedulePostButton from '../schedule_post_button'
 import QuotedStatusPreviewContainer from '../../containers/quoted_status_preview_container'
-import Icon from '../../../../components/icon'
 import Button from '../../../../components/button'
 import Avatar from '../../../../components/avatar'
 import { isMobile } from '../../../../utils/is_mobile'
@@ -238,7 +237,13 @@ class ComposeForm extends ImmutablePureComponent {
    const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > maxPostCharacterCount || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
    const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth)

-    const containerClasses = cx({
+    const parentContainerClasses = cx({
+      default: 1,
+      flexRow: !shouldCondense,
+      pb10: !shouldCondense,
+    })
+
+    const childContainerClasses = cx({
      default: 1,
      flexNormal: 1,
      flexRow: shouldCondense,
@@ -252,111 +257,114 @@ class ComposeForm extends ImmutablePureComponent {
      flexRow: 1,
      alignItemsCenter: 1,
      mt10: !shouldCondense,
+      px15: !shouldCondense,
    })

    const contentWarningClasses = cx({
      default: 1,
-      pt5: 1,
-      pb10: 1,
+      px15: 1,
+      py10: 1,
      borderBottom1PX: 1,
      borderColorSecondary: 1,
-      mb10: 1,
      displayNone: !spoiler
    })

    return (
-      <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
-        {
-          shouldCondense &&
-          <div className={[_s.default, _s.mr10, _s.mt5]}>
-            <Avatar account={account} size='28' />
-          </div>
-        }
+      <div className={parentContainerClasses}>
+        <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
+          {
+            shouldCondense &&
+            <div className={[_s.default, _s.mr10, _s.mt5].join(' ')}>
+              <Avatar account={account} size='28' />
+            </div>
+          }

-        <div
-          className={containerClasses}
-          ref={this.setForm}
-          onClick={this.handleClick}
-        >
-
-          <div className={contentWarningClasses}>
-            <AutosuggestTextbox
-              placeholder={intl.formatMessage(messages.spoiler_placeholder)}
-              value={this.props.spoilerText}
-              onChange={this.handleChangeSpoilerText}
-              onKeyDown={this.handleKeyDown}
-              disabled={!this.props.spoiler}
-              ref={this.setSpoilerText}
-              suggestions={this.props.suggestions}
-              onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-              onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-              onSuggestionSelected={this.onSpoilerSuggestionSelected}
-              searchTokens={[':']}
-              id='cw-spoiler-input'
-            />
-          </div>
-
-          <AutosuggestTextbox
-            ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
-            placeholder={intl.formatMessage(messages.placeholder)}
-            disabled={disabled}
-            value={this.props.text}
-            onChange={this.handleChange}
-            suggestions={this.props.suggestions}
-            onKeyDown={this.handleKeyDown}
-            onFocus={this.handleComposeFocus}
-            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-            onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-            onSuggestionSelected={this.onSuggestionSelected}
-            onPaste={onPaste}
-            autoFocus={shouldAutoFocus}
-            small={shouldCondense}
-            textarea
+          <div
+            className={childContainerClasses}
+            ref={this.setForm}
+            onClick={this.handleClick}
          >

-            <div className='compose-form__modifiers'>
-              <UploadForm replyToId={replyToId} />
-              {
-                !edit &&
-                <PollFormContainer replyToId={replyToId} />
-              }
+            <div className={contentWarningClasses}>
+              <AutosuggestTextbox
+                placeholder={intl.formatMessage(messages.spoiler_placeholder)}
+                value={this.props.spoilerText}
+                onChange={this.handleChangeSpoilerText}
+                onKeyDown={this.handleKeyDown}
+                disabled={!this.props.spoiler}
+                ref={this.setSpoilerText}
+                suggestions={this.props.suggestions}
+                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                onSuggestionSelected={this.onSpoilerSuggestionSelected}
+                searchTokens={[':']}
+                prependIcon='warning'
+                id='cw-spoiler-input'
+              />
            </div>

-          </AutosuggestTextbox>
+            <AutosuggestTextbox
+              ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
+              placeholder={intl.formatMessage(messages.placeholder)}
+              disabled={disabled}
+              value={this.props.text}
+              onChange={this.handleChange}
+              suggestions={this.props.suggestions}
+              onKeyDown={this.handleKeyDown}
+              onFocus={this.handleComposeFocus}
+              onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+              onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+              onSuggestionSelected={this.onSuggestionSelected}
+              onPaste={onPaste}
+              autoFocus={shouldAutoFocus}
+              small={shouldCondense}
+              textarea
+            >

-          { /* quoteOfId && <QuotedStatusPreviewContainer id={quoteOfId} /> */}
+              <div className={[_s.default, _s.px15].join(' ')}>
+                <UploadForm replyToId={replyToId} />
+                {
+                  !edit &&
+                  <PollFormContainer replyToId={replyToId} />
+                }
+              </div>

-          <div className={actionsContainerClasses}>
-            <div className={[_s.default, _s.flexRow, _s.marginRightAuto].join(' ')}>
-              <RichTextEditorButton small={shouldCondense} />
-              <UploadButton small={shouldCondense} />
-              {
-                !edit && <PollButton small={shouldCondense} />
-              }
+            </AutosuggestTextbox>
+
+            { /* quoteOfId && <QuotedStatusPreviewContainer id={quoteOfId} /> */}
+
+            <div className={actionsContainerClasses}>
+              <div className={[_s.default, _s.flexRow, _s.marginRightAuto].join(' ')}>
+                <RichTextEditorButton small={shouldCondense} />
+                <UploadButton small={shouldCondense} />
+                {
+                  !edit && <PollButton small={shouldCondense} />
+                }
+                {
+                  !shouldCondense &&
+                  <StatusVisibilityButton small={shouldCondense} />
+                }
+                <SpoilerButton small={shouldCondense} />
+                <SchedulePostButton small={shouldCondense} />
+                <GifSelectorButton small={shouldCondense} />
+                <EmojiPickerButton small={shouldCondense} />
+              </div>
+
+              <CharacterCounter max={maxPostCharacterCount} text={text} small={shouldCondense} />
+              
              {
                !shouldCondense &&
-                <StatusVisibilityButton small={shouldCondense} />
+                <Button
+                  className={[_s.fontSize15PX, _s.px15].join(' ')}
+                  onClick={this.handleSubmit}
+                  disabled={disabledButton}
+                >
+                  {intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
+                </Button>
              }
-              <SpoilerButton small={shouldCondense} />
-              <SchedulePostButton small={shouldCondense} />
-              <GifSelectorButton small={shouldCondense} />
-              <EmojiPickerButton small={shouldCondense} />
            </div>

-            <CharacterCounter max={maxPostCharacterCount} text={text} small={shouldCondense} />
-            
-            {
-              !shouldCondense &&
-              <Button
-                className={[_s.fontSize15PX, _s.px15].join(' ')}
-                onClick={this.handleSubmit}
-                disabled={disabledButton}
-              >
-                {intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
-              </Button>
-            }
          </div>
-
        </div>
      </div>
    )
--- a/app/javascript/gabsocial/features/compose/components/emoji_picker_button.js
+++ b/app/javascript/gabsocial/features/compose/components/emoji_picker_button.js
@@ -7,8 +7,7 @@ const messages = defineMessages({
 })

 const mapStateToProps = state => ({
-  // unavailable: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 0),
-  // active: state.getIn(['compose', 'poll']) !== null,
+  active: state.get('popover').popoverType === 'EMOJI_PICKER',
 })

 const mapDispatchToProps = dispatch => ({
@@ -33,7 +32,8 @@ class EmojiPickerButton extends PureComponent {
    small: PropTypes.bool,
  }

-  handleClick = () => {
+  handleClick = (e) => {
+    e.preventDefault()
    this.props.onClick(this.button)
  }

@@ -44,13 +44,11 @@ class EmojiPickerButton extends PureComponent {
  render() {
    const { active, small, intl } = this.props

-    const title = intl.formatMessage(messages.emoji)
-
    return (
      <ComposeExtraButton
+        title={intl.formatMessage(messages.emoji)}
        onClick={this.handleClick}
        icon='happy'
-        title={title}
        small={small}
        active={active}
        buttonRef={this.setButton}
--- a/app/javascript/gabsocial/features/compose/components/gif_selector_button.js
+++ b/app/javascript/gabsocial/features/compose/components/gif_selector_button.js
@@ -1,6 +1,6 @@
 import { injectIntl, defineMessages } from 'react-intl'
-import { changeComposeSpoilerness } from '../../../actions/compose'
 import ComposeExtraButton from './compose_extra_button'
+import { openModal } from '../../../actions/modal'

 const messages = defineMessages({
  marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
@@ -9,13 +9,13 @@ const messages = defineMessages({
 })

 const mapStateToProps = (state) => ({
-  active: state.getIn(['compose', 'spoiler']),
+  active: !!state.getIn(['compose', 'gif']) || state.get('modal').modalType === 'GIF_PICKER',
 })

-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({

-  onClick () {
-    dispatch(changeComposeSpoilerness())
+  onClick() {
+    dispatch(openModal('GIF_PICKER'))
  },

 })
@@ -23,29 +23,35 @@ const mapDispatchToProps = dispatch => ({
 export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
-class SpoilerButton extends PureComponent {
+class GifSelectorButton extends PureComponent {

  static propTypes = {
-    active: PropTypes.bool,
    intl: PropTypes.object.isRequired,
+    onClick: PropTypes.func.isRequired,
+    active: PropTypes.bool,
    small: PropTypes.bool,
  }

  handleClick = (e) => {
    e.preventDefault()
-    this.props.onClick()
+    this.props.onClick(this.button)
  }

-  render () {
-    const { active, intl, small } = this.props
+  setButton = (n) => {
+    this.button = n
+  }
+
+  render() {
+    const { active, small, intl } = this.props

    return (
      <ComposeExtraButton
        title={intl.formatMessage(messages.title)}
-        icon='gif'
        onClick={this.handleClick}
+        icon='gif'
        small={small}
        active={active}
+        buttonRef={this.setButton}
      />
    )
  }
--- a/app/javascript/gabsocial/features/compose/components/rich_text_editor_button.js
+++ b/app/javascript/gabsocial/features/compose/components/rich_text_editor_button.js
@@ -1,5 +1,5 @@
 import { injectIntl, defineMessages } from 'react-intl'
-import { changeComposeSpoilerness } from '../../../actions/compose'
+import { changeRichTextEditorControlsVisibility } from '../../../actions/compose'
 import ComposeExtraButton from './compose_extra_button'

 const messages = defineMessages({
@@ -9,13 +9,13 @@ const messages = defineMessages({
 })

 const mapStateToProps = (state) => ({
-  active: state.getIn(['compose', 'spoiler']),
+  active: state.getIn(['compose', 'rte_controls_visible']),
 })

 const mapDispatchToProps = dispatch => ({

-  onClick () {
-    dispatch(changeComposeSpoilerness())
+  onClick (status) {
+    dispatch(changeRichTextEditorControlsVisibility(status))
  },

 })
@@ -23,7 +23,7 @@ const mapDispatchToProps = dispatch => ({
 export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
-class SpoilerButton extends PureComponent {
+class RichTextEditorButton extends PureComponent {

  static propTypes = {
    active: PropTypes.bool,