From 083170bec755920b80c64f9cca2cc419831f66c8 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Fri, 29 Dec 2017 14:55:06 -0800
Subject: WIP <Compose> Refactor; SCSS ed.

---
 .../flavours/glitch/features/composer/options/index.js           | 7 ++++++-
 .../flavours/glitch/features/composer/publisher/index.js         | 3 ++-
 app/javascript/flavours/glitch/features/composer/reply/index.js  | 9 ++++++++-
 .../flavours/glitch/features/composer/textarea/index.js          | 3 ++-
 .../glitch/features/composer/textarea/suggestions/index.js       | 8 +++++---
 .../glitch/features/composer/textarea/suggestions/item/index.js  | 4 ++--
 .../flavours/glitch/features/composer/upload_form/item/index.js  | 1 +
 7 files changed, 26 insertions(+), 9 deletions(-)

(limited to 'app/javascript/flavours/glitch/features/composer')

diff --git a/app/javascript/flavours/glitch/features/composer/options/index.js b/app/javascript/flavours/glitch/features/composer/options/index.js
index ee633e865..ea998a421 100644
--- a/app/javascript/flavours/glitch/features/composer/options/index.js
+++ b/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'
diff --git a/app/javascript/flavours/glitch/features/composer/publisher/index.js b/app/javascript/flavours/glitch/features/composer/publisher/index.js
index 85de80a9f..79337100f 100644
--- a/app/javascript/flavours/glitch/features/composer/publisher/index.js
+++ b/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':
diff --git a/app/javascript/flavours/glitch/features/composer/reply/index.js b/app/javascript/flavours/glitch/features/composer/reply/index.js
index 2823415d2..4a52cddb4 100644
--- a/app/javascript/flavours/glitch/features/composer/reply/index.js
+++ b/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' }}
         />
diff --git a/app/javascript/flavours/glitch/features/composer/textarea/index.js b/app/javascript/flavours/glitch/features/composer/textarea/index.js
index ad0a35d7f..2299757df 100644
--- a/app/javascript/flavours/glitch/features/composer/textarea/index.js
+++ b/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}
diff --git a/app/javascript/flavours/glitch/features/composer/textarea/suggestions/index.js b/app/javascript/flavours/glitch/features/composer/textarea/suggestions/index.js
index b90696910..65ed2c18a 100644
--- a/app/javascript/flavours/glitch/features/composer/textarea/suggestions/index.js
+++ b/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
diff --git a/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js b/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js
index 08c99ed0e..b78f99ee9 100644
--- a/app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js
+++ b/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.
diff --git a/app/javascript/flavours/glitch/features/composer/upload_form/item/index.js b/app/javascript/flavours/glitch/features/composer/upload_form/item/index.js
index bd67e7227..cbec5ecd9 100644
--- a/app/javascript/flavours/glitch/features/composer/upload_form/item/index.js
+++ b/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}
-- 
cgit