Progress

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

@@ -5,7 +5,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import classNames from 'classnames/bind'
 import CharacterCounter from '../../../../components/character_counter'
 import UploadForm from '../upload_form'
-import ReplyIndicatorContainer from '../../containers/reply_indicator_container'
 import AutosuggestTextbox from '../../../../components/autosuggest_textbox'
 import PollButton from '../../components/poll_button'
 import UploadButton from '../media_upload_button'
@@ -255,12 +254,6 @@ class ComposeForm extends ImmutablePureComponent {
       mt10: !shouldCondense,
     })
 
-    const avatarContainerClasses = cx({
-      default: 1,
-      mr10: 1,
-      mt5: shouldCondense,
-    })
-
     const contentWarningClasses = cx({
       default: 1,
       pt5: 1,
@@ -271,13 +264,14 @@ class ComposeForm extends ImmutablePureComponent {
       displayNone: !spoiler
     })
 
-    const avatarSize = shouldCondense ? 28 : 46
-
     return (
       <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
-        <div className={avatarContainerClasses}>
-          <Avatar account={account} size={avatarSize} />
-        </div>
+        {
+          shouldCondense &&
+          <div className={[_s.default, _s.mr10, _s.mt5]}>
+            <Avatar account={account} size='28' />
+          </div>
+        }
 
         <div
           className={containerClasses}
@@ -285,8 +279,6 @@ class ComposeForm extends ImmutablePureComponent {
           onClick={this.handleClick}
         >
 
-          { /* !shouldCondense && <ReplyIndicatorContainer /> */}
-
           <div className={contentWarningClasses}>
             <AutosuggestTextbox
               placeholder={intl.formatMessage(messages.spoiler_placeholder)}
@@ -301,7 +293,6 @@ class ComposeForm extends ImmutablePureComponent {
               onSuggestionSelected={this.onSpoilerSuggestionSelected}
               searchTokens={[':']}
               id='cw-spoiler-input'
-              className='spoiler-input__input'
             />
           </div>
 

app/javascript/gabsocial/features/compose/components/reply_indicator/index.js

@@ -1 +0,0 @@
-export { default } from './reply_indicator'

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

@@ -1,64 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { NavLink } from 'react-router-dom';
-import Avatar from '../../../../components/avatar';
-import Button from '../../../../components/button';
-import DisplayName from '../../../../components/display_name';
-import { isRtl } from '../../../../utils/rtl';
-
-const messages = defineMessages({
-  cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
-});
-
-export default
-@injectIntl
-class ReplyIndicator extends ImmutablePureComponent {
-
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
-  static propTypes = {
-    status: ImmutablePropTypes.map,
-    onCancel: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onCancel();
-  }
-
-  render () {
-    const { status, intl } = this.props;
-
-    if (!status) {
-      return null;
-    }
-
-    const content = { __html: status.get('contentHtml') };
-    const style = {
-      direction: isRtl(status.get('search_index')) ? 'rtl' : 'ltr',
-    };
-
-    return (
-      <div className='reply-indicator'>
-        <div className='reply-indicator__header'>
-          <div className='reply-indicator__cancel'>
-            <Button title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} inverted />
-          </div>
-
-          <NavLink to={`/${status.getIn(['account', 'acct'])}`} className='reply-indicator__display-name'>
-            <div className='reply-indicator__display-avatar'>
-              <Avatar account={status.get('account')} size={24} />
-            </div>
-            <DisplayName account={status.get('account')} />
-          </NavLink>
-        </div>
-
-        <div className='reply-indicator-content' style={style} dangerouslySetInnerHTML={content} />
-      </div>
-    );
-  }
-
-}

app/javascript/gabsocial/features/compose/components/reply_indicator/reply_indicator.scss

@@ -1,137 +0,0 @@
-.reply-indicator {
-  border-radius: 4px;
-  margin-bottom: 10px;
-  background: $gab-background-base-light;
-  padding: 10px;
-  min-height: 23px;
-  overflow-y: auto;
-  flex: 0 2 auto;
-  max-height: 500px;
-
-  @media screen and (min-width: 320px) and (max-width: 375px) {
-    max-height: 220px;
-  }
-
-  @media screen and (max-width: 320px) {
-    max-height: 130px;
-  }
-
-  &__header {
-    margin-bottom: 5px;
-    overflow: hidden;
-  }
-
-  &__cancel {
-    float: right;
-    line-height: 24px;
-  }
-
-  &__display-name {
-    color: $inverted-text-color;
-    display: block;
-    max-width: 100%;
-    line-height: 24px;
-    overflow: hidden;
-    padding-right: 25px;
-    text-decoration: none;
-
-    &:hover strong {
-      text-decoration: underline;
-    }
-  }
-
-  &__display-avatar {
-    float: left;
-    margin-right: 5px;
-  }
-}
-
-.reply-indicator-content {
-  position: relative;
-  padding-top: 2px;
-  color: $primary-text-color;
-
-  @include text-sizing(15px, 400, 20px);
-  @include text-overflow(normal, break-word);
-
-  &:focus {
-    outline: 0;
-  }
-
-  &.status__content--with-spoiler {
-    white-space: normal;
-
-    .status__content__text {
-      white-space: pre-wrap;
-    }
-  }
-
-  .emojione {
-    margin: -3px 0 0;
-
-    @include size(20px);
-  }
-
-  p {
-    margin-bottom: 20px;
-    white-space: pre-wrap;
-
-    &:last-child {
-      margin-bottom: 2px;
-    }
-  }
-
-  a {
-    color: $gab-brand-default;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-
-      .fa {
-        color: lighten($dark-text-color, 7%);
-      }
-    }
-
-    &.mention {
-      &:hover {
-        text-decoration: none;
-
-        span {
-          text-decoration: underline;
-        }
-      }
-    }
-
-    .fa {
-      color: $dark-text-color;
-    }
-  }
-
-  .status__content__spoiler-link {
-    background: $action-button-color;
-
-    &:hover {
-      background: lighten($action-button-color, 7%);
-      text-decoration: none;
-    }
-
-    &::-moz-focus-inner {
-      border: 0;
-    }
-
-    &::-moz-focus-inner,
-    &:focus,
-    &:active {
-      outline: 0 !important;
-    }
-  }
-
-  .status__content__text {
-    display: none;
-
-    &.status__content__text--visible {
-      display: block;
-    }
-  }
-}