From 066034c62e87412c1e351fd89d98f3ad706d00a3 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Mon, 19 Aug 2019 20:53:28 +0200
Subject: Refactor character counter to match upstream

---
 .../flavours/glitch/features/compose/components/publisher.js           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'app/javascript/flavours/glitch/features/compose/components/publisher.js')

diff --git a/app/javascript/flavours/glitch/features/compose/components/publisher.js b/app/javascript/flavours/glitch/features/compose/components/publisher.js
index e283b32b9..21400e554 100644
--- a/app/javascript/flavours/glitch/features/compose/components/publisher.js
+++ b/app/javascript/flavours/glitch/features/compose/components/publisher.js
@@ -9,6 +9,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 //  Components.
 import Button from 'flavours/glitch/components/button';
 import Icon from 'flavours/glitch/components/icon';
+import CharacterCounter from './character_counter';
 
 //  Utils.
 import { maxChars } from 'flavours/glitch/util/initial_state';
@@ -49,7 +50,7 @@ class Publisher extends ImmutablePureComponent {
 
     return (
       <div className={computedClass}>
-        <span className='count'>{diff}</span>
+        <CharacterCounter text={countText} max={maxChars} />
         {sideArm && sideArm !== 'none' ? (
           <Button
             className='side_arm'
-- 
cgit 


From a334cbcb200b75dee16896d8860082dc83d7ca3d Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Mon, 19 Aug 2019 21:41:41 +0200
Subject: Move character counter to the options box to match upstream styling

---
 .../features/compose/components/compose_form.js    | 31 ++++++++++++++--------
 .../features/compose/components/publisher.js       |  2 --
 .../glitch/styles/components/composer.scss         | 15 +++++++++--
 3 files changed, 33 insertions(+), 15 deletions(-)

(limited to 'app/javascript/flavours/glitch/features/compose/components/publisher.js')

diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
index 3d9002fe4..37108b0da 100644
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
@@ -15,6 +15,8 @@ import { countableText } from 'flavours/glitch/util/counter';
 import OptionsContainer from '../containers/options_container';
 import Publisher from './publisher';
 import TextareaIcons from './textarea_icons';
+import { maxChars } from 'flavours/glitch/util/initial_state';
+import CharacterCounter from './character_counter';
 
 const messages = defineMessages({
   placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
@@ -298,6 +300,8 @@ class ComposeForm extends ImmutablePureComponent {
 
     let disabledButton = isSubmitting || isUploading || isChangingUpload || (!text.trim().length && !anyMedia);
 
+    const countText = `${spoilerText}${countableText(text)}${advancedOptions && advancedOptions.get('do_not_federate') ? ' 👁️' : ''}`;
+
     return (
       <div className='composer'>
         <WarningContainer />
@@ -347,19 +351,24 @@ class ComposeForm extends ImmutablePureComponent {
           </div>
         </AutosuggestTextarea>
 
-        <OptionsContainer
-          advancedOptions={advancedOptions}
-          disabled={isSubmitting}
-          onChangeVisibility={onChangeVisibility}
-          onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness}
-          onUpload={onPaste}
-          privacy={privacy}
-          sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)}
-          spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}
-        />
+        <div className='composer--options-wrapper'>
+          <OptionsContainer
+            advancedOptions={advancedOptions}
+            disabled={isSubmitting}
+            onChangeVisibility={onChangeVisibility}
+            onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness}
+            onUpload={onPaste}
+            privacy={privacy}
+            sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)}
+            spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}
+          />
+          <div className='compose--counter-wrapper'>
+            <CharacterCounter text={countText} max={maxChars} />
+          </div>
+        </div>
 
         <Publisher
-          countText={`${spoilerText}${countableText(text)}${advancedOptions && advancedOptions.get('do_not_federate') ? ' 👁️' : ''}`}
+          countText={countText}
           disabled={disabledButton}
           onSecondarySubmit={handleSecondarySubmit}
           onSubmit={handleSubmit}
diff --git a/app/javascript/flavours/glitch/features/compose/components/publisher.js b/app/javascript/flavours/glitch/features/compose/components/publisher.js
index 21400e554..f5eafc6fd 100644
--- a/app/javascript/flavours/glitch/features/compose/components/publisher.js
+++ b/app/javascript/flavours/glitch/features/compose/components/publisher.js
@@ -9,7 +9,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 //  Components.
 import Button from 'flavours/glitch/components/button';
 import Icon from 'flavours/glitch/components/icon';
-import CharacterCounter from './character_counter';
 
 //  Utils.
 import { maxChars } from 'flavours/glitch/util/initial_state';
@@ -50,7 +49,6 @@ class Publisher extends ImmutablePureComponent {
 
     return (
       <div className={computedClass}>
-        <CharacterCounter text={countText} max={maxChars} />
         {sideArm && sideArm !== 'none' ? (
           <Button
             className='side_arm'
diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss
index 389f14773..c4fa4f654 100644
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ b/app/javascript/flavours/glitch/styles/components/composer.scss
@@ -501,12 +501,18 @@
   background: $simple-background-color;
 }
 
-.composer--options {
+.composer--options-wrapper {
   padding: 10px;
   background: darken($simple-background-color, 8%);
-  box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05);
   border-radius: 0 0 4px 4px;
   height: 27px;
+  display: flex;
+  justify-content: space-between;
+  flex: 0 0 auto;
+}
+
+.composer--options {
+  display: flex;
   flex: 0 0 auto;
 
   & > * {
@@ -531,6 +537,11 @@
   }
 }
 
+.compose--counter-wrapper {
+  align-self: center;
+  margin-right: 4px;
+}
+
 .composer--options--dropdown {
   &.open {
     & > .value {
-- 
cgit