Replace post reply button with reply and quote buttons (#1546)

frontend/src/components/posting/edit.js

@@ -85,7 +85,7 @@ export default class extends Form {
     this.setState((prevState, props) => {
       if (prevState.post.length > 0) {
         return {
-          post: prevState.post + "\n\n" + newPost,
+          post: prevState.post.trim() + "\n\n" + newPost,
         }
       }
 

frontend/src/components/posting/reply.js

@@ -51,7 +51,8 @@ export default class extends Form {
     const context = this.props.context
     const newContext = nextProps.context
 
-    if (context && newContext && context.reply === newContext.reply) return
+    // User clicked "reply" instead of "quote"
+    if (context && newContext && !newContext.reply) return
 
     ajax
       .get(nextProps.config, nextProps.context || null)
@@ -82,7 +83,7 @@ export default class extends Form {
     this.setState((prevState, props) => {
       if (prevState.post.length > 0) {
         return {
-          post: prevState.post + "\n\n" + newPost,
+          post: prevState.post.trim() + "\n\n" + newPost,
         }
       }
 

frontend/src/components/posts-list/post/footer.js

@@ -19,6 +19,7 @@ export default function (props) {
       />
       <LikesCompact likes={props.post.likes} {...props} />
       <Reply {...props} />
+      <Quote {...props} />
       <Edit {...props} />
     </div>
   )
@@ -54,7 +55,7 @@ export class MarkAsBestAnswer extends React.Component {
         type="button"
       >
         <span className="material-icon">check_box</span>
-        {gettext("Best answer")}
+        {pgettext("post control", "Best answer")}
       </button>
     )
   }
@@ -232,6 +233,34 @@ export class Reply extends React.Component {
       thread: this.props.thread,
       config: this.props.thread.api.editor,
       submit: this.props.thread.api.posts.index,
+    })
+  }
+
+  render() {
+    if (this.props.post.acl.can_reply) {
+      return (
+        <button
+          className="btn btn-default btn-sm pull-right"
+          type="button"
+          onClick={this.onClick}
+        >
+          {pgettext("post control", "Reply")}
+        </button>
+      )
+    } else {
+      return null
+    }
+  }
+}
+
+export class Quote extends React.Component {
+  onClick = () => {
+    posting.open({
+      mode: "QUOTE",
+
+      thread: this.props.thread,
+      config: this.props.thread.api.editor,
+      submit: this.props.thread.api.posts.index,
 
       context: {
         reply: this.props.post.id,
@@ -243,11 +272,11 @@ export class Reply extends React.Component {
     if (this.props.post.acl.can_reply) {
       return (
         <button
-          className="btn btn-primary btn-sm pull-right"
+          className="btn btn-default btn-sm pull-right"
           type="button"
           onClick={this.onClick}
         >
-          {gettext("Reply")}
+          {pgettext("post control", "Quote")}
         </button>
       )
     } else {
@@ -276,7 +305,7 @@ export class Edit extends React.Component {
           type="button"
           onClick={this.onClick}
         >
-          {gettext("Edit")}
+          {pgettext("post control", "Edit")}
         </button>
       )
     } else {

frontend/src/services/posting.js

@@ -19,6 +19,7 @@ export class Posting {
     this._isClosing = false
 
     this._beforeunloadSet = false
+    this._props = null
   }
 
   isOpen() {
@@ -27,13 +28,17 @@ export class Posting {
 
   setBeforeUnload() {
     if (!this._beforeunloadSet) {
-      window.addEventListener("beforeunload", this.beforeUnload, { capture: true })
+      window.addEventListener("beforeunload", this.beforeUnload, {
+        capture: true,
+      })
       this._beforeunloadSet = true
     }
   }
 
   unsetBeforeUnload() {
-    window.removeEventListener("beforeunload", this.beforeUnload, { capture: true })
+    window.removeEventListener("beforeunload", this.beforeUnload, {
+      capture: true,
+    })
     this._beforeunloadSet = false
   }
 
@@ -44,9 +49,23 @@ export class Posting {
 
   open(props) {
     if (this._isOpen === false) {
-      this._mode = props.mode
+      if (props.mode === "QUOTE") {
+        this._mode = "REPLY"
+      } else {
+        this._mode = props.mode
+      }
+
       this._isOpen = props.submit
-      this._realOpen(props)
+      this._realOpen(
+        Object.assign({}, props, {mode: this._mode})
+      )
+    } else if (props.mode === "QUOTE") {
+      this._realOpen(
+        Object.assign({}, this._props, {
+          config: props.config,
+          context: props.context,
+        })
+      )
     } else if (this._isOpen !== props.submit) {
       let message = gettext(
         "You are already working on other message. Do you want to discard it?"
@@ -66,13 +85,15 @@ export class Posting {
   _realOpen(props) {
     mount(<PostingComponent {...props} />, this._mount.id)
 
+    this._props = props
     this._mount.classList.add("show")
     this._observer.observe(this._mount)
     this.setBeforeUnload()
   }
 
   close = () => {
     this.unsetBeforeUnload()
+    this._props = null
 
     if (this._isOpen && !this._isClosing) {
       this._isClosing = true

misago/templates/misago/thread/posts/post/footer.html

@@ -22,13 +22,16 @@
       </p>
     {% endif %}
     {% if post.acl.can_reply %}
-      <button type="button" class="btn btn-primary pull-right" disabled="disabled">
-        {% trans "Reply" %}
+      <button type="button" class="btn btn-default btn-sm pull-right" disabled="disabled">
+        {% trans "Reply" context "post control" %}
+      </button>
+      <button type="button" class="btn btn-default btn-sm pull-right" disabled="disabled">
+        {% trans "Quote" context "post control" %}
       </button>
     {% endif %}
     {% if post.acl.can_edit %}
-      <button type="button" class="btn btn-default pull-right" disabled="disabled">
-        {% trans "Edit" %}
+      <button type="button" class="hidden-xs  btn btn-default btn-sm pull-right" disabled="disabled">
+        {% trans "Edit" context "post control" %}
       </button>
     {% endif %}
   </div>