Progress

2020-04-23 02:13:29 -04:00
parent fed036be08
commit e2e7e8c0af
177 changed files with 1231 additions and 1326 deletions
--- a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
@@ -47,13 +47,12 @@ export default class ComposeExtraButton extends PureComponent {
        <Button
          className={btnClasses}
          title={title}
-          disabled={disabled}
+          isDisabled={disabled}
          onClick={onClick}
          backgroundColor='none'
          iconClassName={iconClasses}
          icon={icon}
-          iconWidth={iconSize}
-          iconHeight={iconSize}
+          iconSize={iconSize}
        />
        {children}
      </div>
--- a/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
@@ -43,10 +43,6 @@ class ComposeForm extends ImmutablePureComponent {
    composeFocused: false,
  }

-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
  static propTypes = {
    intl: PropTypes.object.isRequired,
    edit: PropTypes.bool,
@@ -81,6 +77,7 @@ class ComposeForm extends ImmutablePureComponent {
    scheduledAt: PropTypes.instanceOf(Date),
    setScheduledAt: PropTypes.func.isRequired,
    replyToId: PropTypes.string,
+    reduxReplyToId: PropTypes.string,
    hasPoll: PropTypes.bool,
  };

@@ -141,7 +138,7 @@ class ComposeForm extends ImmutablePureComponent {
      return;
    }

-    this.props.onSubmit(this.context.router ? this.context.router.history : null, this.props.group);
+    this.props.onSubmit(this.props.group, this.props.replyToId);
  }

  onSuggestionsClearRequested = () => {
@@ -234,15 +231,18 @@ class ComposeForm extends ImmutablePureComponent {
      scheduledAt,
      spoiler,
      replyToId,
+      reduxReplyToId,
      hasPoll,
      isUploading,
      isMatch,
+      isChangingUpload,
+      isSubmitting,
    } = this.props
-    const disabled = this.props.isSubmitting;
+    const disabled = isSubmitting
    const text = [this.props.spoilerText, countableText(this.props.text)].join('');
-    const disabledButton = disabled || isUploading || this.props.isChangingUpload || length(text) > maxPostCharacterCount || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
+    const disabledButton = disabled || isUploading || isChangingUpload || length(text) > maxPostCharacterCount || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
    const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth)
-
+    
    const parentContainerClasses = cx({
      default: 1,
      width100PC: 1,
@@ -272,6 +272,12 @@ class ComposeForm extends ImmutablePureComponent {
      marginLeftAuto: shouldCondense,
    })

+    const commentPublishBtnClasses = cx({
+      default: 1,
+      justifyContentCenter: 1,
+      displayNone: length(this.props.text) === 0 || anyMedia,
+    })
+
    return (
      <div className={parentContainerClasses}>
        <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
@@ -288,6 +294,16 @@ class ComposeForm extends ImmutablePureComponent {
            onClick={this.handleClick}
          >

+            {
+              !!reduxReplyToId && !shouldCondense &&
+              <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
+                <StatusContainer
+                  id={reduxReplyToId}
+                  isChild
+                />
+              </div>
+            }
+
            {
              !!spoiler &&
              <div className={[_s.default, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
@@ -311,7 +327,7 @@ class ComposeForm extends ImmutablePureComponent {

            <AutosuggestTextbox
              ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
-              placeholder={intl.formatMessage(shouldCondense ? messages.commentPlaceholder : messages.placeholder)}
+              placeholder={intl.formatMessage((shouldCondense || !!reduxReplyToId) ? messages.commentPlaceholder : messages.placeholder)}
              disabled={disabled}
              value={this.props.text}
              onChange={this.handleChange}
@@ -350,7 +366,7 @@ class ComposeForm extends ImmutablePureComponent {
            }

            {
-              quoteOfId &&
+              !!quoteOfId &&
              <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
                <StatusContainer
                  id={quoteOfId}
@@ -386,10 +402,10 @@ class ComposeForm extends ImmutablePureComponent {
                <EmojiPickerButton small={shouldCondense} isMatch={isMatch} />

                {
-                  shouldCondense /* && (hasPoll || anyMedia || text) */ &&
-                  <div className={[_s.default, _s.justifyContentCenter].join(' ')}>
+                  shouldCondense &&
+                  <div className={commentPublishBtnClasses}>
                    <Button
-                      narrow
+                      isNarrow
                      onClick={this.handleSubmit}
                      disabled={disabledButton}
                      className={_s.px10}
@@ -405,12 +421,11 @@ class ComposeForm extends ImmutablePureComponent {
                <CharacterCounter max={maxPostCharacterCount} text={text} />
              }

-              { /* : todo : show send on shouldCondense if any text */
-                !shouldCondense &&
+              {
+                !shouldCondense && !disabledButton &&
                <Button
                  className={[_s.fontSize15PX, _s.px15].join(' ')}
                  onClick={this.handleSubmit}
-                  disabled={disabledButton}
                >
                  {intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
                </Button>
--- a/app/javascript/gabsocial/features/compose/components/media_upload_item.js
+++ b/app/javascript/gabsocial/features/compose/components/media_upload_item.js
@@ -32,8 +32,8 @@ const mapDispatchToProps = (dispatch) => ({
    dispatch(changeUploadCompose(id, { description }));
  },

-  onSubmit (router) {
-    dispatch(submitCompose(router));
+  onSubmit () {
+    dispatch(submitCompose());
  },

 });
@@ -69,7 +69,7 @@ class Upload extends ImmutablePureComponent {

  handleSubmit = () => {
    this.handleInputBlur()
-    this.props.onSubmit(this.context.router.history)
+    this.props.onSubmit()
  }

  handleUndoClick = e => {
@@ -117,7 +117,7 @@ class Upload extends ImmutablePureComponent {

    const descriptionContainerClasses = cx({
      default: 1,
-      positionAbsolute: 1,
+      posAbs: 1,
      right0: 1,
      bottom0: 1,
      left0: 1,
@@ -149,10 +149,9 @@ class Upload extends ImmutablePureComponent {
            title={intl.formatMessage(messages.delete)}
            onClick={this.handleUndoClick}
            icon='close'
-            iconWidth='10px'
-            iconHeight='10px'
+            iconSize='10px'
            iconClassName={_s.inherit}
-            className={[_s.top0, _s.right0, _s.positionAbsolute, _s.mr5, _s.mt5, _s.px10].join(' ')}
+            className={[_s.top0, _s.right0, _s.posAbs, _s.mr5, _s.mt5, _s.px10].join(' ')}
          />

          <div className={descriptionContainerClasses}>
--- a/app/javascript/gabsocial/features/compose/components/poll_form.js
+++ b/app/javascript/gabsocial/features/compose/components/poll_form.js
@@ -34,16 +34,15 @@ class PollFormOption extends ImmutablePureComponent {
    onFetchSuggestions: PropTypes.func.isRequired,
    onSuggestionSelected: PropTypes.func.isRequired,
    intl: PropTypes.object.isRequired,
-  };
+  }

  handleOptionTitleChange = e => {
    this.props.onChange(this.props.index, e.target.value);
-  };
+  }

  handleOptionRemove = () => {
    this.props.onRemove(this.props.index);
-  };
-
+  }

  handleToggleMultiple = e => {
    this.props.onToggleMultiple();
@@ -103,13 +102,11 @@ class PollFormOption extends ImmutablePureComponent {
        {
          index > 1 &&
          <Button
-            narrow
-            circle
+            isNarrow
            backgroundColor='none'
            className={[_s.ml5, _s.justifyContentCenter].join(' ')}
            icon='close'
-            iconWidth='8px'
-            iconHeight='8px'
+            iconSize='8px'
            iconClassName={_s.fillColorSecondary}
            disabled={index <= 1}
            title={intl.formatMessage(messages.remove_option)}
@@ -117,7 +114,7 @@ class PollFormOption extends ImmutablePureComponent {
          />
        }
      </li>
-    );
+    )
  }

 }
@@ -139,19 +136,15 @@ class PollForm extends ImmutablePureComponent {
    onFetchSuggestions: PropTypes.func.isRequired,
    onSuggestionSelected: PropTypes.func.isRequired,
    intl: PropTypes.object.isRequired,
-  };
+  }

-  handleAddOption = () => {
-    this.props.onAddOption('');
-  };
-
-  handleSelectDuration = e => {
-    this.props.onChangeSettings(e.target.value, this.props.isMultiple);
-  };
+  handleSelectDuration = (e) => {
+    this.props.onChangeSettings(e.target.value, this.props.isMultiple)
+  }

  handleToggleMultiple = () => {
-    this.props.onChangeSettings(this.props.expiresIn, !this.props.isMultiple);
-  };
+    this.props.onChangeSettings(this.props.expiresIn, !this.props.isMultiple)
+  }

  render() {
    const {
@@ -161,8 +154,9 @@ class PollForm extends ImmutablePureComponent {
      onChangeOption,
      onRemoveOption,
      intl,
+      onAddOption,
      ...otherProps
-    } = this.props;
+    } = this.props

    if (!options) return null

@@ -189,14 +183,13 @@ class PollForm extends ImmutablePureComponent {
          {
            options.size < 4 && (
              <Button
-                outline
+                isOutline
                backgroundColor='none'
                color='brand'
                className={[_s.alignItemsCenter, _s.mr10].join(' ')}
-                onClick={this.handleAddOption}
+                onClick={onAddOption}
                icon='add'
-                iconWidth='14px'
-                iconHeight='14px'
+                iconSize='14px'
                iconClassName={_s.mr5}
              >
                <Text color='inherit'>
--- a/app/javascript/gabsocial/features/compose/components/search_results/search_results.js
+++ b/app/javascript/gabsocial/features/compose/components/search_results/search_results.js
@@ -12,6 +12,8 @@ import Button from '../../../../components/button'
 import Text from '../../../../components/text'
 import Account from '../../../../components/account'

+// : todo :
+
 export default class SearchResults extends ImmutablePureComponent {

  static propTypes = {
@@ -51,7 +53,7 @@ export default class SearchResults extends ImmutablePureComponent {
            </Heading>
            <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
              <Button
-                text
+                isText
                backgroundColor='none'
                color='brand'
                to='/search/people'
--- a/app/javascript/gabsocial/features/compose/components/status_visibility_button.js
+++ b/app/javascript/gabsocial/features/compose/components/status_visibility_button.js
@@ -24,7 +24,6 @@ export default
 class StatusVisibilityButton extends PureComponent {

  static propTypes = {
-    onClick: PropTypes.func.isRequired,
    intl: PropTypes.object.isRequired,
    small: PropTypes.bool,
    onOpenPopover: PropTypes.func.isRequired,
--- a/app/javascript/gabsocial/features/compose/components/upload_form.js
+++ b/app/javascript/gabsocial/features/compose/components/upload_form.js
@@ -7,7 +7,7 @@ import SensitiveMediaButton from './sensitive_media_button'
 const mapStateToProps = (state) => ({
  mediaIds: state.getIn(['compose', 'media_attachments']).map(item => item.get('id')),
  isUploading: state.getIn(['compose', 'is_uploading']),
-  uploadProgress: state.getIn(['compose', 'progress']),
+  uploadProgress: state.getIn(['compose', 'progress'], 0),
 });

 export default