Another large update for all components

reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate group page components.

app/javascript/gabsocial/features/status/components/detailed_status/detailed_status.js

@@ -3,15 +3,17 @@ import { FormattedDate, FormattedNumber } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import classNames from 'classnames';
-import Avatar from '../../../components/avatar';
-import DisplayName from '../../../components/display_name';
-import StatusContent from '../../../components/status_content';
-import MediaGallery from '../../../components/media_gallery';
-import Card from './card';
-import Video from '../../video';
-import scheduleIdleTask from '../../../utils/schedule_idle_task';
-import Icon from '../../../components/icon';
-import Poll from '../../../components/poll';
+import Avatar from '../../../../components/avatar';
+import DisplayName from '../../../../components/display_name';
+import StatusContent from '../../../../components/status_content';
+import MediaGallery from '../../../../components/media_gallery';
+import Card from '../card';
+import Video from '../../../video';
+import scheduleIdleTask from '../../../../utils/schedule_idle_task';
+import Icon from '../../../../components/icon';
+import Poll from '../../../../components/poll';
+
+import './detailed_status.scss';
 
 export default class DetailedStatus extends ImmutablePureComponent {
 

app/javascript/gabsocial/features/status/components/detailed_status/index.js

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

app/javascript/gabsocial/features/status/components/detailed_status_action_bar/detailed_status_action_bar.js

@@ -1,14 +1,16 @@
-import { openModal } from '../../../actions/modal';
-import IconButton from '../../../components/icon_button';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
+import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl } from 'react-intl';
-import { me, isStaff } from '../../../initial_state';
+import DropdownMenuContainer from '../../../../containers/dropdown_menu_container';
+import { openModal } from '../../../../actions/modal';
+import IconButton from '../../../../components/icon_button';
+import { me, isStaff } from '../../../../initial_state';
+
+import './detailed_status_action_bar.scss';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
   redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' },
-  direct: { id: 'status.direct', defaultMessage: 'Direct message @{name}' },
   mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
   reply: { id: 'status.reply', defaultMessage: 'Reply' },
   reblog: { id: 'status.reblog', defaultMessage: 'Repost' },
@@ -36,10 +38,9 @@ const mapDispatchToProps = (dispatch) => ({
   },
 });
 
-
 export default @connect(null, mapDispatchToProps)
 @injectIntl
-class ActionBar extends PureComponent {
+class ActionBar extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
@@ -51,7 +52,6 @@ class ActionBar extends PureComponent {
     onReblog: PropTypes.func.isRequired,
     onFavourite: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
-    onDirect: PropTypes.func.isRequired,
     onMention: PropTypes.func.isRequired,
     onMute: PropTypes.func,
     onMuteConversation: PropTypes.func,
@@ -95,10 +95,6 @@ class ActionBar extends PureComponent {
     this.props.onDelete(this.props.status, this.context.router.history, true);
   }
 
-  handleDirectClick = () => {
-    this.props.onDirect(this.props.status.get('account'), this.context.router.history);
-  }
-
   handleMentionClick = () => {
     this.props.onMention(this.props.status.get('account'), this.context.router.history);
   }
@@ -135,7 +131,7 @@ class ActionBar extends PureComponent {
   }
 
   handleCopy = () => {
-    const url      = this.props.status.get('url');
+    const url = this.props.status.get('url');
     const textarea = document.createElement('textarea');
 
     textarea.textContent    = url;
@@ -183,7 +179,6 @@ class ActionBar extends PureComponent {
       menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick });
     } else {
       menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
-      //menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick });
       menu.push(null);
       menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
       menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });
@@ -196,7 +191,7 @@ class ActionBar extends PureComponent {
     }
 
     const shareButton = ('share' in navigator) && status.get('visibility') === 'public' && (
-      <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShare} /></div>
+      <div className='detailed-status-action-bar__button'><IconButton title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShare} /></div>
     );
 
     let replyIcon;
@@ -213,13 +208,20 @@ class ActionBar extends PureComponent {
     let reblog_disabled = (status.get('visibility') === 'direct' || status.get('visibility') === 'private');
 
     return (
-      <div className='detailed-status__action-bar'>
-        <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div>
-        <div className='detailed-status__button'><IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
-        <div className='detailed-status__button'><IconButton className='star-icon' active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
+      <div className='detailed-status-action-bar'>
+        <div className='detailed-status-action-bar__button'>
+          <IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} />
+        </div>
+        <div className='detailed-status-action-bar__button'>
+          <IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
+        </div>
+        <div className='detailed-status-action-bar__button'>
+          <IconButton className='star-icon' active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
+        </div>
+
         {shareButton}
 
-        <div className='detailed-status__action-bar-dropdown'>
+        <div className='detailed-status-action-bar__dropdown'>
           <DropdownMenuContainer size={18} icon='ellipsis-h' items={menu} direction='left' title='More' />
         </div>
       </div>

app/javascript/gabsocial/features/status/components/detailed_status_action_bar/detailed_status_action_bar.scss

@@ -0,0 +1,20 @@
+.detailed-status-action-bar {
+  display: flex;
+  flex-direction: row;
+  padding: 10px 0;
+  background: lighten($ui-base-color, 4%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+  &__button {
+    flex: 1 1 auto;
+    text-align: center;
+  }
+
+  &__dropdown {
+    flex: 1 1 auto;
+    position: relative;
+
+    @include flex(center, center);
+  }
+}

app/javascript/gabsocial/features/status/components/detailed_status_action_bar/index.js

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