Progress

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

@@ -33,6 +33,7 @@ export default class ComposeExtraButton extends PureComponent {
       px10: !small,
       py5: small,
       px5: small,
+      mr2: !children,
     })
 
     const iconClasses = cx({
@@ -42,18 +43,27 @@ export default class ComposeExtraButton extends PureComponent {
 
     const iconSize = !!small ? '14px' : '16px'
 
+    const button = (
+      <Button
+        className={btnClasses}
+        title={title}
+        isDisabled={disabled}
+        onClick={onClick}
+        backgroundColor='none'
+        iconClassName={iconClasses}
+        icon={icon}
+        iconSize={iconSize}
+        buttonRef={!children ? buttonRef : undefined}
+      />
+    )
+
+    if (!children) {
+      return button
+    }
+
     return (
       <div className={[_s.default, _s.mr2].join(' ')} ref={buttonRef}>
-        <Button
-          className={btnClasses}
-          title={title}
-          isDisabled={disabled}
-          onClick={onClick}
-          backgroundColor='none'
-          iconClassName={iconClasses}
-          icon={icon}
-          iconSize={iconSize}
-        />
+        {button}
         {children}
       </div>
     )

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

@@ -3,7 +3,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { length } from 'stringz'
 import { isMobile } from '../../../utils/is_mobile'
-import { countableText } from '../util/counter'
+import { countableText } from '../../ui/util/counter'
 import {
   CX,
   MAX_POST_CHARACTER_COUNT,
@@ -239,7 +239,7 @@ class ComposeForm extends ImmutablePureComponent {
     } = this.props
     const disabled = isSubmitting
     const text = [this.props.spoilerText, countableText(this.props.text)].join('');
-    const disabledButton = disabled || isUploading || isChangingUpload || length(text) > MAX_POST_CHARACTER_COUNT || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
+    const disabledButton = disabled || isUploading || isChangingUpload || length(text) > MAX_POST_CHARACTER_COUNT || (length(text) !== 0 && length(text.trim()) === 0 && !anyMedia);
     const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth)
     
     const parentContainerClasses = CX({
@@ -406,7 +406,7 @@ class ComposeForm extends ImmutablePureComponent {
                     <Button
                       isNarrow
                       onClick={this.handleSubmit}
-                      disabled={disabledButton}
+                      isDisabled={disabledButton}
                       className={_s.px10}
                     >
                       {intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
@@ -421,8 +421,12 @@ class ComposeForm extends ImmutablePureComponent {
               }
 
               {
-                !shouldCondense && !disabledButton &&
+                !shouldCondense &&
                 <Button
+                  isOutline
+                  isDisabled={disabledButton}
+                  backgroundColor='none'
+                  color='brand'
                   className={[_s.fontSize15PX, _s.px15].join(' ')}
                   onClick={this.handleSubmit}
                 >

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

@@ -1,118 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import { FormattedMessage } from 'react-intl'
-import { withRouter } from 'react-router-dom';
-import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestions';
-import HashtagItem from '../../../components/hashtag_item'
-import Icon from '../../../components/icon'
-import { WhoToFollowPanel } from '../../../components/panel'
-// import TrendsPanel from '../../ui/components/trends_panel'
-import GroupListItem from '../../../components/group_list_item'
-import Block from '../../../components/block'
-import Heading from '../../../components/heading'
-import Button from '../../../components/button'
-import Text from '../../../components/text'
-import Account from '../../../components/account'
-
-const mapStateToProps = (state) => ({
-  results: state.getIn(['search', 'results']),
-  suggestions: state.getIn(['suggestions', 'items']),
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  fetchSuggestions: () => dispatch(fetchSuggestions()),
-  dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
-});
-
-export default
-@withRouter
-@connect(mapStateToProps, mapDispatchToProps)
-class SearchResults extends ImmutablePureComponent {
-
-  static propTypes = {
-    results: ImmutablePropTypes.map.isRequired,
-    location: PropTypes.object,
-  }
-
-  state = {
-    isSmallScreen: (window.innerWidth <= 895),
-  }
-
-  render () {
-    const { results, location } = this.props
-    const { isSmallScreen } = this.state
-
-    if (results.isEmpty() && isSmallScreen) {
-      return (
-        <div />
-      )
-    }
-
-    const pathname = location.pathname || ''
-    const showPeople = pathname === '/search/people'
-    const showHashtags = pathname === '/search/hashtags'
-    const showGroups = pathname === '/search/groups'
-    const isTop = !showPeople && !showHashtags && !showGroups
-
-    let accounts, statuses, hashtags, groups
-
-    if (results.get('accounts') && results.get('accounts').size > 0 && (isTop || showPeople)) {
-      const size = isTop ? Math.min(results.get('accounts').size, 5) : results.get('accounts').size;
-      accounts = (
-        <div className={[_s.default, _s.py15].join(' ')}>
-          <div className={[_s.default, _s.flexRow, _s.mb15, _s.px15].join(' ')}>
-            <Heading size='h2'>
-              People
-            </Heading>
-            <div className={[_s.default, _s.mlAuto].join(' ')}>
-              <Button
-                isText
-                backgroundColor='none'
-                color='brand'
-                to='/search/people'
-              >
-                <Text size='small' color='inherit' weight='bold'>
-                  See All
-                </Text>
-              </Button>
-            </div>
-          </div>
-
-          {
-            results.get('accounts').slice(0, size).map(accountId => <Account compact key={accountId} id={accountId} />)
-          }
-        </div>
-      );
-    }
-
-    if (results.get('groups') && results.get('groups').size > 0 && (isTop || showGroups)) {
-      const size = isTop ? Math.min(results.get('groups').size, 5) : results.get('groups').size;
-      groups = (
-        <div className='search-results__section'>
-          <h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.groups' defaultMessage='Groups' /></h5>
-          {results.get('groups').slice(0, size).map(group => <GroupListItem key={`search-${group.get('name')}`} group={group} />)}
-        </div>
-      );
-    }
-
-    if (results.get('hashtags') && results.get('hashtags').size > 0 && (isTop || showHashtags)) {
-      const size = isTop ? Math.min(results.get('hashtags').size, 5) : results.get('hashtags').size;
-      hashtags = (
-        <div className='search-results__section'>
-          <h5><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
-          {results.get('hashtags').slice(0, size).map(hashtag => <HashtagItem key={hashtag.get('name')} hashtag={hashtag} />)}
-        </div>
-      );
-    }
-
-    return (
-      <Block>
-        {accounts}
-        {groups}
-        {statuses}
-        {hashtags}
-      </Block>
-    )
-  }
-
-}