From cc29f25b87d44daf5da2d3ef702ea29a333630b5 Mon Sep 17 00:00:00 2001
From: Fire Demon <firedemon@creature.cafe>
Date: Sat, 15 Aug 2020 21:41:55 -0500
Subject: [UI] Non-destructive conversion of reply to non-reply, add clear
 button

---
 .../glitch/features/compose/components/compose_form.js |  6 ++++++
 .../glitch/features/compose/components/publisher.js    | 18 +++++++++++++++++-
 .../compose/containers/compose_form_container.js       |  5 +++++
 app/javascript/flavours/glitch/reducers/compose.js     |  7 +++++--
 .../glitch/styles/monsterfork/components/composer.scss | 11 +++++++++++
 .../glitch/styles/monsterfork/components/index.scss    |  3 ++-
 app/javascript/mastodon/locales/en-MP.json             |  1 +
 7 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/styles/monsterfork/components/composer.scss

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 adaf063ee..aa97f864a 100644
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
@@ -151,6 +151,10 @@ class ComposeForm extends ImmutablePureComponent {
     this.handleSubmit(sideArm === 'none' ? null : sideArm);
   }
 
+  handleClearAll = () => {
+    this.props.onClearAll();
+  }
+
   //  Selects a suggestion from the autofill.
   onSuggestionSelected = (tokenStart, token, value) => {
     this.props.onSuggestionSelected(tokenStart, token, value, ['text']);
@@ -258,6 +262,7 @@ class ComposeForm extends ImmutablePureComponent {
       handleSecondarySubmit,
       handleSelect,
       handleSubmit,
+      handleClearAll,
       handleRefTextarea,
     } = this;
     const {
@@ -360,6 +365,7 @@ class ComposeForm extends ImmutablePureComponent {
           disabled={disabledButton}
           onSecondarySubmit={handleSecondarySubmit}
           onSubmit={handleSubmit}
+          onClearAll={handleClearAll}
           privacy={privacy}
           privacyWarning={privacyWarning}
           sideArm={sideArm}
diff --git a/app/javascript/flavours/glitch/features/compose/components/publisher.js b/app/javascript/flavours/glitch/features/compose/components/publisher.js
index 107c7fa91..08318ab6d 100644
--- a/app/javascript/flavours/glitch/features/compose/components/publisher.js
+++ b/app/javascript/flavours/glitch/features/compose/components/publisher.js
@@ -23,6 +23,10 @@ const messages = defineMessages({
     defaultMessage: '{publish}!',
     id: 'compose_form.publish_loud',
   },
+  clear: {
+    defaultMessage: 'Clear',
+    id: 'compose_form.clear',
+  },
 });
 
 export default @injectIntl
@@ -34,6 +38,7 @@ class Publisher extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
     onSecondarySubmit: PropTypes.func,
     onSubmit: PropTypes.func,
+    onClearAll: PropTypes.func,
     privacy: PropTypes.oneOf(['direct', 'private', 'unlisted', 'public']),
     privacyWarning: PropTypes.bool,
     sideArm: PropTypes.oneOf(['none', 'direct', 'private', 'unlisted', 'public']),
@@ -45,7 +50,7 @@ class Publisher extends ImmutablePureComponent {
   };
 
   render () {
-    const { countText, disabled, intl, onSecondarySubmit, privacy, privacyWarning, sideArm, sideArmWarning } = this.props;
+    const { countText, disabled, intl, onClearAll, onSecondarySubmit, privacy, privacyWarning, sideArm, sideArmWarning } = this.props;
 
     const diff = maxChars - length(countText || '');
     const computedClass = classNames('composer--publisher', {
@@ -55,6 +60,17 @@ class Publisher extends ImmutablePureComponent {
 
     return (
       <div className={computedClass}>
+        <Button
+          className='clear'
+          onClick={onClearAll}
+          style={{ padding: null }}
+          title={intl.formatMessage(messages.clear)}
+          text={
+            <span>
+              <Icon id='trash-o' />
+            </span>
+          }
+        />
         {sideArm && sideArm !== 'none' ? (
           <Button
             className={classNames('side_arm', {privacy_warning: sideArmWarning})}
diff --git a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
index aec383161..cf953ec3d 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
@@ -12,6 +12,7 @@ import {
   selectComposeSuggestion,
   submitCompose,
   uploadCompose,
+  resetCompose,
 } from 'flavours/glitch/actions/compose';
 import {
   openModal,
@@ -84,6 +85,10 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     dispatch(submitCompose(routerHistory));
   },
 
+  onClearAll() {
+    dispatch(resetCompose());
+  },
+
   onClearSuggestions() {
     dispatch(clearComposeSuggestions());
   },
diff --git a/app/javascript/flavours/glitch/reducers/compose.js b/app/javascript/flavours/glitch/reducers/compose.js
index d305bc236..da9124523 100644
--- a/app/javascript/flavours/glitch/reducers/compose.js
+++ b/app/javascript/flavours/glitch/reducers/compose.js
@@ -407,8 +407,11 @@ export default function compose(state = initialState, action) {
       }
     });
   case COMPOSE_REPLY_CANCEL:
-    state = state.setIn(['advanced_options', 'threaded_mode'], false);
-  // eslint-disable-next-line no-fallthrough
+    return state.withMutations(map => {
+      map.set('id', null);
+      map.set('in_reply_to', null);
+      map.set('idempotencyKey', uuid());
+    });
   case COMPOSE_RESET:
     return state.withMutations(map => {
       map.set('id', null);
diff --git a/app/javascript/flavours/glitch/styles/monsterfork/components/composer.scss b/app/javascript/flavours/glitch/styles/monsterfork/components/composer.scss
new file mode 100644
index 000000000..ba347b1cc
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/monsterfork/components/composer.scss
@@ -0,0 +1,11 @@
+.composer--publisher {
+  .clear {
+    background: darken($ui-base-color, 8%);
+    color: $secondary-text-color;
+    margin: 0 2px;
+    padding: 0;
+    width: 36px;
+    text-align: center;
+    float: left;
+  }
+}
diff --git a/app/javascript/flavours/glitch/styles/monsterfork/components/index.scss b/app/javascript/flavours/glitch/styles/monsterfork/components/index.scss
index c40ec2392..84da74f82 100644
--- a/app/javascript/flavours/glitch/styles/monsterfork/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/monsterfork/components/index.scss
@@ -1,2 +1,3 @@
+@import 'composer';
 @import 'status';
-@import 'formatting';
\ No newline at end of file
+@import 'formatting';
diff --git a/app/javascript/mastodon/locales/en-MP.json b/app/javascript/mastodon/locales/en-MP.json
index 2e1fe2393..31c798215 100644
--- a/app/javascript/mastodon/locales/en-MP.json
+++ b/app/javascript/mastodon/locales/en-MP.json
@@ -21,6 +21,7 @@
   "column.public": "Fediverse",
   "column.toot": "Roars & Growls",
   "community.column_settings.remote_only": "Rowdy tavern mode",
+  "compose_form.clear": "Clear",
   "compose_form.direct_message_warning": "This roar will only be sent to the mentioned creatures.",
   "compose_form.hashtag_warning": "This roar won't be listed under any hashtag as it is unlisted. Only public roars can be searched by hashtag.",
   "compose_form.lock_disclaimer": "Your account is not {locked}. Anyone can follow you to view your follower-only posts.",
-- 
cgit