ComposeForm: add back original character counter, commented out for now

app/soapbox/features/compose/components/compose_form.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import CharacterCounter from './character_counter';
+// import TextCharacterCounter from './text_character_counter';
+import VisualCharacterCounter from './visual_character_counter';
 import Button from '../../../components/button';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
@@ -351,7 +352,12 @@ export default class ComposeForm extends ImmutablePureComponent {
               <SpoilerButtonContainer />
               <MarkdownButtonContainer />
             </div>
-            {maxTootChars && <div className='character-counter__wrapper'><CharacterCounter max={maxTootChars} text={text} /></div>}
+            {maxTootChars && (
+              <div className='compose-form__counter'>
+                {/* <TextCharacterCounter max={maxTootChars} text={text} /> */}
+                <VisualCharacterCounter max={maxTootChars} text={text} />
+              </div>
+            )}
             <div className='compose-form__publish'>
               <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block /></div>
             </div>

app/soapbox/features/compose/components/text_character_counter.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { length } from 'stringz';
+
+export default class TextCharacterCounter extends React.PureComponent {
+
+  static propTypes = {
+    text: PropTypes.string.isRequired,
+    max: PropTypes.number.isRequired,
+  };
+
+  checkRemainingText(diff) {
+    if (diff < 0) {
+      return <span className='character-counter character-counter--over'>{diff}</span>;
+    }
+
+    return <span className='character-counter'>{diff}</span>;
+  }
+
+  render() {
+    const diff = this.props.max - length(this.props.text);
+    return this.checkRemainingText(diff);
+  }
+
+}

app/soapbox/features/compose/components/visual_character_counter.js

@@ -13,7 +13,7 @@ const messages = defineMessages({
  * @param {string} props.text - text to use to measure
  * @param {number} props.max - max text allowed
  */
-class CharacterCounter extends React.PureComponent {
+class VisualCharacterCounter extends React.PureComponent {
 
   render() {
     const { intl, text, max } = this.props;
@@ -22,21 +22,23 @@ class CharacterCounter extends React.PureComponent {
     const progress = textLength / max;
 
     return (
-      <ProgressCircle
+      <div className='visual-character-counter'>
-        title={intl.formatMessage(messages.title, { chars: textLength, maxChars: max })}
+        <ProgressCircle
-        progress={progress}
+          title={intl.formatMessage(messages.title, { chars: textLength, maxChars: max })}
-        radius={10}
+          progress={progress}
-        stroke={3}
+          radius={10}
-      />
+          stroke={3}
+        />
+      </div>
     );
   }
 
 }
 
-CharacterCounter.propTypes = {
+VisualCharacterCounter.propTypes = {
   intl: PropTypes.object.isRequired,
   text: PropTypes.string.isRequired,
   max: PropTypes.number.isRequired,
 };
 
-export default injectIntl(CharacterCounter);
+export default injectIntl(VisualCharacterCounter);

app/styles/components/compose-form.scss

@@ -27,7 +27,7 @@
     }
   }
 
-  .compose-form__warning {
+  &__warning {
     color: var(--primary-text-color);
     margin-bottom: 10px;
     background: var(--brand-color--faint);
@@ -66,7 +66,7 @@
     right: 5px;
   }
 
-  .compose-form__autosuggest-wrapper {
+  &__autosuggest-wrapper {
     position: relative;
   }
 
@@ -195,7 +195,7 @@
     color: var(--primary-text-color--faint);
   }
 
-  .compose-form__modifiers {
+  &__modifiers {
     color: var(--primary-text-color);
     font-family: inherit;
     font-size: 14px;
@@ -327,7 +327,7 @@
     }
   } // end .compose-form .compose-form__modifiers
 
-  .compose-form__buttons-wrapper {
+  &__buttons-wrapper {
     padding: 10px;
     background: var(--background-color);
     display: flex;
@@ -380,13 +380,23 @@
       }
     }
 
-    .character-counter__wrapper {
+    .character-counter {
-      align-self: center;
+      display: block;
-      margin: 0 10px 0 auto;
+      cursor: default;
+      font-family: var(--font-sans-serif), sans-serif;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--primary-text-color--faint);
+      &.character-counter--over { color: $warning-red; }
+    }
+
+    .character-counter,
+    .visual-character-counter {
+      margin-right: 10px;
     }
   }
 
-  .compose-form__publish {
+  &__publish {
     display: flex;
     justify-content: flex-end;
     min-width: 0;
@@ -396,6 +406,13 @@
       overflow: hidden;
     }
   }
+
+  &__counter {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    margin-left: auto;
+  }
 } // end .compose-form
 
 // Icon tweaks