WIP <Compose> Refactor; SCSS ed.

app/javascript/flavours/glitch/features/composer/options/index.js

@@ -236,7 +236,12 @@ export default class ComposerOptions extends React.PureComponent {
           }}
         >
           {({ scale }) => (
-            <div style={{ transform: `scale(${scale})` }}>
+            <div
+              style={{
+                display: hasMedia ? null : 'none',
+                transform: `scale(${scale})`,
+              }}
+            >
               <IconButton
                 active={sensitive}
                 className='sensitive'

app/javascript/flavours/glitch/features/composer/publisher/index.js

@@ -49,6 +49,7 @@ export default function ComposerPublisher ({
       <span class='count'>{diff}</span>
       {sideArm && sideArm !== 'none' ? (
         <Button
+          className='side_arm'
           text={
             <span>
               <Icon
@@ -67,7 +68,7 @@ export default function ComposerPublisher ({
         />
       ) : null}
       <Button
-        className='compose-form__publish__primary'
+        className='primary'
         text={function () {
           switch (true) {
           case !!sideArm && sideArm !== 'none':

app/javascript/flavours/glitch/features/composer/reply/index.js

@@ -70,24 +70,31 @@ export default class ComposerReply extends React.PureComponent {
       <article className='composer--reply'>
         <header>
           <IconButton
+            className='cancel'
             icon='times'
             onClick={click}
             title={intl.formatMessage(messages.cancel)}
           />
           {account ? (
             <a
+              className='account'
               href={account.get('url')}
               onClick={clickAccount}
             >
               <Avatar
                 account={account}
+                className='avatar'
                 size={24}
               />
-              <DisplayName account={account} />
+              <DisplayName
+                account={account}
+                className='display_name'
+              />
             </a>
           ) : null}
         </header>
         <div
+          className='content'
           dangerouslySetInnerHTML={{ __html: content || '' }}
           style={{ direction: isRtl(content) ? 'rtl' : 'ltr' }}
         />

app/javascript/flavours/glitch/features/composer/textarea/index.js

@@ -246,12 +246,13 @@ export default class ComposerTextarea extends React.Component {
 
     //  The result.
     return (
-      <div className='autosuggest-textarea'>
+      <div className='composer--textarea'>
         <label>
           <span {...hiddenComponent}><FormattedMessage {...messages.placeholder} /></span>
           <Textarea
             aria-autocomplete='list'
             autoFocus={autoFocus}
+            className='textarea'
             disabled={disabled}
             inputRef={refTextarea}
             onBlur={blur}

app/javascript/flavours/glitch/features/composer/textarea/suggestions/index.js

@@ -1,5 +1,4 @@
 //  Package imports.
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -14,10 +13,13 @@ export default function ComposerTextareaSuggestions ({
   suggestions,
   value,
 }) {
-  const computedClass = classNames('comoser--textarea--suggestions', { hidden: hidden || suggestions.isEmpty() });
 
+  //  The result.
   return (
-    <div className={computedClass}>
+    <div
+      className='composer--textarea--suggestions'
+      hidden={hidden || suggestions.isEmpty()}
+    >
       {!hidden ? suggestions.map(
         (suggestion, index) => (
           <ComposerTextareaSuggestionsItem

app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js

@@ -50,10 +50,10 @@ export default class ComposerTextareaSuggestionsItem extends React.Component {
     //  The result.
     return (
       <div
-        role='button'
-        tabIndex='0'
         className={computedClass}
         onMouseDown={click}
+        role='button'
+        tabIndex='0'
       >
         { //  If the suggestion is an object, then we render an emoji.
           //  Otherwise, we render an account.

app/javascript/flavours/glitch/features/composer/upload_form/item/index.js

@@ -139,6 +139,7 @@ export default class ComposerUploadFormItem extends React.PureComponent {
               }}
             >
               <IconButton
+                className='close'
                 icon='times'
                 onClick={remove}
                 size={36}

app/javascript/flavours/glitch/features/drawer/account/index.js

@@ -22,7 +22,7 @@ const messages = defineMessages({
 });
 
 //  The component.
-export default function DrawerPagerAccount ({ account }) {
+export default function DrawerAccount ({ account }) {
 
   //  We need an account to render.
   if (!account) {
@@ -67,4 +67,4 @@ export default function DrawerPagerAccount ({ account }) {
   );
 }
 
-DrawerPagerAccount.propTypes = { account: ImmutablePropTypes.map };
+DrawerAccount.propTypes = { account: ImmutablePropTypes.map };

app/javascript/flavours/glitch/features/drawer/index.js

@@ -4,7 +4,6 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 //  Actions.
-import { changeComposing } from 'flavours/glitch/actions/compose';
 import { openModal } from 'flavours/glitch/actions/modal';
 import {
   changeSearch,
@@ -14,8 +13,9 @@ import {
 } from 'flavours/glitch/actions/search';
 
 //  Components.
+import Composer from 'flavours/glitch/features/composer';
+import DrawerAccount from './account';
 import DrawerHeader from './header';
-import DrawerPager from './pager';
 import DrawerResults from './results';
 import DrawerSearch from './search';
 
@@ -27,7 +27,6 @@ import { wrap } from 'flavours/glitch/util/redux_helpers';
 const mapStateToProps = state => ({
   account: state.getIn(['accounts', me]),
   columns: state.getIn(['settings', 'columns']),
-  isComposing: state.getIn(['compose', 'is_composing']),
   results: state.getIn(['search', 'results']),
   searchHidden: state.getIn(['search', 'hidden']),
   searchValue: state.getIn(['search', 'value']),
@@ -39,12 +38,6 @@ const mapDispatchToProps = dispatch => ({
   change (value) {
     dispatch(changeSearch(value));
   },
-  changeComposingOff () {
-    dispatch(changeComposing(false));
-  },
-  changeComposingOn () {
-    dispatch(changeComposing(true));
-  },
   clear () {
     dispatch(clearSearch());
   },
@@ -72,8 +65,6 @@ class Drawer extends React.Component {
     const {
       dispatch: {
         change,
-        changeComposingOff,
-        changeComposingOn,
         clear,
         openSettings,
         show,
@@ -84,7 +75,6 @@ class Drawer extends React.Component {
       state: {
         account,
         columns,
-        isComposing,
         results,
         searchHidden,
         searchValue,
@@ -111,16 +101,14 @@ class Drawer extends React.Component {
           submitted={submitted}
           value={searchValue}
         />
-        <DrawerPager
-          account={account}
-          active={isComposing}
-          onBlur={changeComposingOff}
-          onFocus={changeComposingOn}
-        />
-        <DrawerResults
-          results={results}
-          visible={submitted && !searchHidden}
-        />
+        <div className='contents'>
+          <DrawerAccount account={account} />
+          <Composer />
+          <DrawerResults
+            results={results}
+            visible={submitted && !searchHidden}
+          />
+        </div>
       </div>
     );
   }
@@ -135,7 +123,6 @@ Drawer.propTypes = {
   state: PropTypes.shape({
     account: ImmutablePropTypes.map,
     columns: ImmutablePropTypes.list,
-    isComposing: PropTypes.bool,
     results: ImmutablePropTypes.map,
     searchHidden: PropTypes.bool,
     searchValue: PropTypes.string,

app/javascript/flavours/glitch/features/drawer/pager/index.js

@@ -1,43 +0,0 @@
-//  Package imports.
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-//  Components.
-import IconButton from 'flavours/glitch/components/icon_button';
-import Composer from 'flavours/glitch/features/composer';
-import DrawerPagerAccount from './account';
-
-//  The component.
-export default function DrawerPager ({
-  account,
-  active,
-  onClose,
-  onFocus,
-}) {
-  const computedClass = classNames('drawer--pager', { active });
-
-  //  The result.
-  return (
-    <div
-      className={computedClass}
-      onFocus={onFocus}
-    >
-      <DrawerPagerAccount account={account} />
-      <IconButton
-        icon='close'
-        onClick={onClose}
-        title=''
-      />
-      <Composer />
-    </div>
-  );
-}
-
-DrawerPager.propTypes = {
-  account: ImmutablePropTypes.map,
-  active: PropTypes.bool,
-  onClose: PropTypes.func,
-  onFocus: PropTypes.func,
-};

app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js

@@ -7,13 +7,11 @@ import ReactSwipeableViews from 'react-swipeable-views';
 import classNames from 'classnames';
 import Permalink from 'flavours/glitch/components/permalink';
 import { WrappedComponent as RawComposer } from 'flavours/glitch/features/composer';
-import DrawerPagerAccount from 'flavours/glitch/features/drawer/pager/account';
+import DrawerAccount from 'flavours/glitch/features/drawer/account';
 import DrawerSearch from 'flavours/glitch/features/drawer/search';
 import ColumnHeader from './column_header';
 import { me } from 'flavours/glitch/util/initial_state';
 
-const noop = () => { };
-
 const messages = defineMessages({
   home_title: { id: 'column.home', defaultMessage: 'Home' },
   notifications_title: { id: 'column.notifications', defaultMessage: 'Notifications' },
@@ -49,7 +47,7 @@ const PageTwo = ({ intl, myAccount }) => (
   <div className='onboarding-modal__page onboarding-modal__page-two'>
     <div className='figure non-interactive'>
       <div className='pseudo-drawer'>
-        <DrawerPagerAccount account={myAccount} />
+        <DrawerAccount account={myAccount} />
         <RawComposer
           intl={intl}
           state={composerState}
@@ -72,7 +70,7 @@ const PageThree = ({ intl, myAccount }) => (
       <DrawerSearch intl={intl} />
 
       <div className='pseudo-drawer'>
-        <DrawerPagerAccount account={myAccount} />
+        <DrawerAccount account={myAccount} />
       </div>
     </div>