Change modal that asks which topic you want to reply in; upgrade bootbox.js

app/assets/javascripts/discourse.js

@@ -184,6 +184,9 @@ Discourse = Ember.Application.createWithMixins({
       }
     });
 
+    bootbox.animate(false);
+    bootbox.backdrop(true); // clicking outside a bootbox modal closes it
+
     setInterval(function(){
       Discourse.Formatter.updateRelativeAge($('.relative-date'));
     },60 * 1000);

app/assets/javascripts/discourse/controllers/composer_controller.js

@@ -59,22 +59,17 @@ Discourse.ComposerController = Discourse.Controller.extend({
         message = Em.String.i18n("composer.posting_not_on_topic", {title: this.get('content.topic.title')});
 
         buttons = [{
-          "label": Em.String.i18n("composer.cancel"),
+          "label": Em.String.i18n("composer.reply_original") + "<br/><div class='topic-title'>" + this.get('content.topic.title') + "</div>",
-          "class": "btn"
+          "class": "btn-primary btn-reply-on-original",
-        }];
-
-        buttons.push({
-          "label": Em.String.i18n("composer.reply_original"),
-          "class": "btn-primary",
           "callback": function(){
             _this.save(true);
           }
-        });
+        }];
 
         if(topic) {
           buttons.push({
-            "label": Em.String.i18n("composer.reply_here"),
+            "label": Em.String.i18n("composer.reply_here") + "<br/><div class='topic-title'>" + topic.get('title') + "</div>",
-            "class": "btn-primary",
+            "class": "btn btn-reply-here",
             "callback": function(){
               composer.set('topic', topic);
               composer.set('post', null);
@@ -83,7 +78,13 @@ Discourse.ComposerController = Discourse.Controller.extend({
           });
         }
 
-        bootbox.dialog(message, buttons);
+        buttons.push({
+          "label": Em.String.i18n("composer.cancel"),
+          "class": "cancel",
+          "link": true
+        });
+
+        bootbox.dialog(message, buttons, {"classes": "reply-where-modal"});
         return;
       }
     }

app/assets/javascripts/external/bootbox.js

@@ -1,103 +1,26 @@
 /**
- * bootbox.js v2.3.2
+ * bootbox.js v3.2.0
  *
- * The MIT License
+ * http://bootboxjs.com/license.txt
- *
- * Copyright (C) 2011-2012 by Nick Payne <nick@kurai.co.uk>
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE
  */
-var bootbox = window.bootbox || (function($) {
+var bootbox = window.bootbox || (function(document, $) {
+    /*jshint scripturl:true sub:true */
 
     var _locale        = 'en',
         _defaultLocale = 'en',
-        _animate       = false,
+        _animate       = true,
+        _backdrop      = 'static',
+        _defaultHref   = 'javascript:;',
+        _classes       = '',
+        _btnClasses    = {},
         _icons         = {},
         /* last var should always be the public object we'll return */
         that           = {};
 
+
     /**
-     * standard locales. Please add more according to ISO 639-1 standard. Multiple language variants are
+     * public API
-     * unlikely to be required. If this gets too large it can be split out into separate JS files.
      */
-    var _locales = {
-        'en' : {
-            OK      : 'OK',
-            CANCEL  : 'Cancel',
-            CONFIRM : 'OK'
-        },
-        'fr' : {
-            OK      : 'OK',
-            CANCEL  : 'Annuler',
-            CONFIRM : 'D\'accord'
-        },
-        'de' : {
-            OK      : 'OK',
-            CANCEL  : 'Abbrechen',
-            CONFIRM : 'Akzeptieren'
-        },
-        'es' : {
-            OK      : 'OK',
-            CANCEL  : 'Cancelar',
-            CONFIRM : 'Aceptar'
-        },
-        'br' : {
-            OK      : 'OK',
-            CANCEL  : 'Cancelar',
-            CONFIRM : 'Sim'
-        },
-        'nl' : {
-            OK      : 'OK',
-            CANCEL  : 'Annuleren',
-            CONFIRM : 'Accepteren'
-        },
-        'ru' : {
-            OK      : 'OK',
-            CANCEL  : 'Отмена',
-            CONFIRM : 'Применить'
-        },
-        'it' : {
-            OK      : 'OK',
-            CANCEL  : 'Annulla',
-            CONFIRM : 'Conferma'
-        }
-    };
-
-    function _translate(str, locale) {
-        // we assume if no target locale is probided then we should take it from current setting
-        if (locale == null) {
-            locale = _locale;
-        }
-        if (typeof _locales[locale][str] == 'string') {
-            return _locales[locale][str];
-        }
-
-        // if we couldn't find a lookup then try and fallback to a default translation
-
-        if (locale != _defaultLocale) {
-            return _translate(str, _defaultLocale);
-        }
-
-        // if we can't do anything then bail out with whatever string was passed in - last resort
-        return str;
-    }
-
     that.setLocale = function(locale) {
         for (var i in _locales) {
             if (i == locale) {
@@ -106,23 +29,30 @@ var bootbox = window.bootbox || (function($) {
             }
         }
         throw new Error('Invalid locale: '+locale);
-    }
+    };
 
     that.addLocale = function(locale, translations) {
-        if (typeof _locales[locale] == 'undefined') {
+        if (typeof _locales[locale] === 'undefined') {
             _locales[locale] = {};
         }
         for (var str in translations) {
             _locales[locale][str] = translations[str];
         }
-    }
+    };
 
     that.setIcons = function(icons) {
         _icons = icons;
-        if (typeof _icons !== 'object' || _icons == null) {
+        if (typeof _icons !== 'object' || _icons === null) {
             _icons = {};
         }
+    };
+
+    that.setBtnClasses = function(btnClasses) {
+        _btnClasses = btnClasses;
+        if (typeof _btnClasses !== 'object' || _btnClasses === null) {
+            _btnClasses = {};
         }
+    };
 
     that.alert = function(/*str, label, cb*/) {
         var str   = "",
@@ -151,17 +81,20 @@ var bootbox = window.bootbox || (function($) {
                 break;
             default:
                 throw new Error("Incorrect number of arguments: expected 1-3");
-                break;
         }
 
         return that.dialog(str, {
+            // only button (ok)
             "label"   : label,
             "icon"    : _icons.OK,
+            "class"   : _btnClasses.OK,
             "callback": cb
         }, {
-            "onEscape": cb
+            // ensure that the escape key works; either invoking the user's
+            // callback or true to just close the dialog
+            "onEscape": cb || true
         });
-    }
+    };
 
     that.confirm = function(/*str, labelCancel, labelOk, cb*/) {
         var str         = "",
@@ -198,33 +131,44 @@ var bootbox = window.bootbox || (function($) {
                 break;
             default:
                 throw new Error("Incorrect number of arguments: expected 1-4");
-                break;
         }
 
+        var cancelCallback = function() {
+            if (typeof cb === 'function') {
+                return cb(false);
+            }
+        };
+
+        var confirmCallback = function() {
+            if (typeof cb === 'function') {
+                return cb(true);
+            }
+        };
+
         return that.dialog(str, [{
+            // first button (cancel)
             "label"   : labelCancel,
             "icon"    : _icons.CANCEL,
-            "callback": function() {
+            "class"   : _btnClasses.CANCEL,
-                if (typeof cb == 'function') {
+            "callback": cancelCallback
-                    cb(false);
-                }
-            }
         }, {
+            // second button (confirm)
             "label"   : labelOk,
             "icon"    : _icons.CONFIRM,
-            "callback": function() {
+            "class"   : _btnClasses.CONFIRM,
-                if (typeof cb == 'function') {
+            "callback": confirmCallback
-                    cb(true);
+        }], {
-                }
+            // escape key bindings
-            }
+            "onEscape": cancelCallback
-        }]);
+        });
-    }
+    };
 
-    that.prompt = function(/*str, labelCancel, labelOk, cb*/) {
+    that.prompt = function(/*str, labelCancel, labelOk, cb, defaultVal*/) {
         var str         = "",
             labelCancel = _translate('CANCEL'),
             labelOk     = _translate('CONFIRM'),
-            cb          = null;
+            cb          = null,
+            defaultVal  = "";
 
         switch (arguments.length) {
             case 1:
@@ -253,39 +197,62 @@ var bootbox = window.bootbox || (function($) {
                 labelOk     = arguments[2];
                 cb          = arguments[3];
                 break;
-            default:
+            case 5:
-                throw new Error("Incorrect number of arguments: expected 1-4");
+                str         = arguments[0];
+                labelCancel = arguments[1];
+                labelOk     = arguments[2];
+                cb          = arguments[3];
+                defaultVal  = arguments[4];
                 break;
+            default:
+                throw new Error("Incorrect number of arguments: expected 1-5");
         }
 
         var header = str;
 
         // let's keep a reference to the form object for later
         var form = $("<form></form>");
-        form.append("<input autocomplete=off type=text />");
+        form.append("<input class='input-block-level' autocomplete=off type=text value='" + defaultVal + "' />");
+
+        var cancelCallback = function() {
+            if (typeof cb === 'function') {
+                // yep, native prompts dismiss with null, whereas native
+                // confirms dismiss with false...
+                return cb(null);
+            }
+        };
+
+        var confirmCallback = function() {
+            if (typeof cb === 'function') {
+                return cb(form.find("input[type=text]").val());
+            }
+        };
 
         var div = that.dialog(form, [{
+            // first button (cancel)
             "label"   : labelCancel,
             "icon"    : _icons.CANCEL,
-            "callback": function() {
+            "class"   : _btnClasses.CANCEL,
-                if (typeof cb == 'function') {
+            "callback":  cancelCallback
-                    cb(null);
-                }
-            }
         }, {
+            // second button (confirm)
             "label"   : labelOk,
             "icon"    : _icons.CONFIRM,
-            "callback": function() {
+            "class"   : _btnClasses.CONFIRM,
-                if (typeof cb == 'function') {
+            "callback": confirmCallback
-                    cb(
-                        form.find("input[type=text]").val()
-                    );
-                }
-            }
         }], {
-            "header": header
+            // prompts need a few extra options
+            "header"  : header,
+            // explicitly tell dialog NOT to show the dialog...
+            "show"    : false,
+            "onEscape": cancelCallback
         });
 
+        // ... the reason the prompt needs to be hidden is because we need
+        // to bind our own "shown" handler, after creating the modal but
+        // before any show(n) events are triggered
+        // @see https://github.com/makeusabrew/bootbox/issues/69
+
         div.on("shown", function() {
             form.find("input[type=text]").focus();
 
@@ -297,61 +264,21 @@ var bootbox = window.bootbox || (function($) {
             });
         });
 
+        div.modal("show");
+
         return div;
-    }
-
-    that.modal = function(/*str, label, options*/) {
-        var str;
-        var label;
-        var options;
-
-        var defaultOptions = {
-            "onEscape": null,
-            "keyboard": true,
-            "backdrop": true
     };
 
-        switch (arguments.length) {
-            case 1:
-                str = arguments[0];
-                break;
-            case 2:
-                str = arguments[0];
-                if (typeof arguments[1] == 'object') {
-                    options = arguments[1];
-                } else {
-                    label = arguments[1];
-                }
-                break;
-            case 3:
-                str     = arguments[0];
-                label   = arguments[1];
-                options = arguments[2];
-                break;
-            default:
-                throw new Error("Incorrect number of arguments: expected 1-3");
-                break;
-        }
-
-        defaultOptions['header'] = label;
-
-        if (typeof options == 'object') {
-            options = $.extend(defaultOptions, options);
-        } else {
-            options = defaultOptions;
-        }
-
-        return that.dialog(str, [], options);
-    }
-
     that.dialog = function(str, handlers, options) {
-        var hideSource = null,
+        var buttons    = "",
-            buttons    = "",
+            callbacks  = [];
-            callbacks  = [],
+
-            options    = options || {};
+        if (!options) {
+            options = {};
+        }
 
         // check for single object and convert to array if necessary
-        if (handlers == null) {
+        if (typeof handlers === 'undefined') {
             handlers = [];
         } else if (typeof handlers.length == 'undefined') {
             handlers = [handlers];
@@ -360,6 +287,7 @@ var bootbox = window.bootbox || (function($) {
         var i = handlers.length;
         while (i--) {
             var label    = null,
+                href     = null,
                 _class   = null,
                 icon     = '',
                 callback = null;
@@ -399,6 +327,12 @@ var bootbox = window.bootbox || (function($) {
                 _class = 'btn-primary';
             }
 
+            // See: https://github.com/makeusabrew/bootbox/pull/114
+            // Upgrade to official bootbox release when it gets merged.
+            if (handlers[i]['link'] !== true) {
+                _class = 'btn ' + _class;
+            }
+
             if (handlers[i]['label']) {
                 label = handlers[i]['label'];
             } else {
@@ -409,17 +343,30 @@ var bootbox = window.bootbox || (function($) {
                 icon = "<i class='"+handlers[i]['icon']+"'></i> ";
             }
 
-            buttons += "<a data-handler='"+i+"' class='btn "+_class+"' href='javascript:;'>"+icon+""+label+"</a>";
+            if (handlers[i]['href']) {
+                href = handlers[i]['href'];
+            }
+            else {
+                href = _defaultHref;
+            }
+
+            buttons = "<a data-handler='"+i+"' class='"+_class+"' href='" + href + "'>"+icon+""+label+"</a>" + buttons;
 
             callbacks[i] = callback;
         }
 
-        var parts = ["<div class='bootbox modal'>"];
+        // @see https://github.com/makeusabrew/bootbox/issues/46#issuecomment-8235302
+        // and https://github.com/twitter/bootstrap/issues/4474
+        // for an explanation of the inline overflow: hidden
+        // @see https://github.com/twitter/bootstrap/issues/4854
+        // for an explanation of tabIndex=-1
+
+        var parts = ["<div class='bootbox modal' tabindex='-1' style='overflow:hidden;'>"];
 
         if (options['header']) {
             var closeButton = '';
             if (typeof options['headerCloseButton'] == 'undefined' || options['headerCloseButton']) {
-                closeButton = "<a href='javascript:;' class='close'>&times;</a>";
+                closeButton = "<a href='"+_defaultHref+"' class='close'>&times;</a>";
             }
 
             parts.push("<div class='modal-header'>"+closeButton+"<h3>"+options['header']+"</h3></div>");
@@ -429,7 +376,7 @@ var bootbox = window.bootbox || (function($) {
         parts.push("<div class='modal-body'></div>");
 
         if (buttons) {
-            parts.push("<div class='modal-footer'>"+buttons+"</div>")
+            parts.push("<div class='modal-footer'>"+buttons+"</div>");
         }
 
         parts.push("</div>");
@@ -443,69 +390,270 @@ var bootbox = window.bootbox || (function($) {
             div.addClass("fade");
         }
 
-        // now we've built up the div properly we can inject the content whether it was a string or a jQuery object
+        var optionalClasses = (typeof options.classes === 'undefined') ? _classes : options.classes;
-        $(".modal-body", div).html(str);
+        if (optionalClasses) {
+            div.addClass(optionalClasses);
+        }
 
-        div.bind('hidden', function() {
+        // now we've built up the div properly we can inject the content whether it was a string or a jQuery object
+        div.find(".modal-body").html(str);
+
+        function onCancel(source) {
+            console.log('onCancel');
+            // for now source is unused, but it will be in future
+            var hideModal = null;
+            if (typeof options.onEscape === 'function') {
+                // @see https://github.com/makeusabrew/bootbox/issues/91
+                hideModal = options.onEscape();
+            }
+
+            if (hideModal !== false) {
+                div.modal('hide');
+            }
+        }
+
+        // hook into the modal's keyup trigger to check for the escape key
+        div.on('keyup.dismiss.modal', function(e) {
+            console.log('keyup.dismiss.modal');
+            // any truthy value passed to onEscape will dismiss the dialog
+            // as long as the onEscape function (if defined) doesn't prevent it
+            if (e.which === 27 && options.onEscape !== false) {
+                onCancel('escape');
+            }
+        });
+
+        // handle close buttons too
+        div.on('click', 'a.close', function(e) {
+            e.preventDefault();
+            onCancel('close');
+        });
+
+        // well, *if* we have a primary - give the first dom element focus
+        div.on('shown', function() {
+            div.find("a.btn-primary:first").focus();
+        });
+
+        div.on('hidden', function() {
             div.remove();
         });
 
-        div.bind('hide', function() {
-            if (hideSource == 'escape' &&
-                typeof options.onEscape == 'function') {
-                options.onEscape();
-            }
-        });
-
-        // hook into the modal's keyup trigger to check for the escape key
-        $(document).bind('keyup.modal', function ( e ) {
-            if (e.which == 27) {
-                hideSource = 'escape';
-            }
-        });
-
-        // well, *if* we have a primary - give the last dom element (first displayed) focus
-        div.bind('shown', function() {
-            $("a.btn-primary:last", div).focus();
-        });
-
         // wire up button handlers
-        div.on('click', '.modal-footer a, a.close', function(e) {
+        div.on('click', '.modal-footer a', function(e) {
+
             var handler   = $(this).data("handler"),
                 cb        = callbacks[handler],
                 hideModal = null;
 
-            if (typeof cb == 'function') {
+            // sort of @see https://github.com/makeusabrew/bootbox/pull/68 - heavily adapted
-                hideModal = cb();
+            // if we've got a custom href attribute, all bets are off
+            if (typeof handler                   !== 'undefined' &&
+                typeof handlers[handler]['href'] !== 'undefined') {
+
+                return;
             }
-            if (hideModal !== false){
+
             e.preventDefault();
-                hideSource = 'button';
+
+            if (typeof cb === 'function') {
+                hideModal = cb(e);
+            }
+
+            // the only way hideModal *will* be false is if a callback exists and
+            // returns it as a value. in those situations, don't hide the dialog
+            // @see https://github.com/makeusabrew/bootbox/pull/25
+            if (hideModal !== false) {
                 div.modal("hide");
             }
         });
 
-        if (options.keyboard == null) {
+        // stick the modal right at the bottom of the main body out of the way
-            options.keyboard = (typeof options.onEscape == 'function');
-        }
-
         $("body").append(div);
 
         div.modal({
-            "backdrop" : options.backdrop || true,
+            // unless explicitly overridden take whatever our default backdrop value is
-            "keyboard" : options.keyboard
+            backdrop : (typeof options.backdrop  === 'undefined') ? _backdrop : options.backdrop,
+            // ignore bootstrap's keyboard options; we'll handle this ourselves (more fine-grained control)
+            keyboard : false,
+            // @ see https://github.com/makeusabrew/bootbox/issues/69
+            // we *never* want the modal to be shown before we can bind stuff to it
+            // this method can also take a 'show' option, but we'll only use that
+            // later if we need to
+            show     : false
         });
 
-        return div;
+        // @see https://github.com/makeusabrew/bootbox/issues/64
+        // @see https://github.com/makeusabrew/bootbox/issues/60
+        // ...caused by...
+        // @see https://github.com/twitter/bootstrap/issues/4781
+        div.on("show", function(e) {
+            $(document).off("focusin.modal");
+        });
+
+        if (typeof options.show === 'undefined' || options.show === true) {
+            div.modal("show");
         }
 
+        return div;
+    };
+
+    /**
+     * #modal is deprecated in v3; it can still be used but no guarantees are
+     * made - have never been truly convinced of its merit but perhaps just
+     * needs a tidyup and some TLC
+     */
+    that.modal = function(/*str, label, options*/) {
+        var str;
+        var label;
+        var options;
+
+        var defaultOptions = {
+            "onEscape": null,
+            "keyboard": true,
+            "backdrop": _backdrop
+        };
+
+        switch (arguments.length) {
+            case 1:
+                str = arguments[0];
+                break;
+            case 2:
+                str = arguments[0];
+                if (typeof arguments[1] == 'object') {
+                    options = arguments[1];
+                } else {
+                    label = arguments[1];
+                }
+                break;
+            case 3:
+                str     = arguments[0];
+                label   = arguments[1];
+                options = arguments[2];
+                break;
+            default:
+                throw new Error("Incorrect number of arguments: expected 1-3");
+        }
+
+        defaultOptions['header'] = label;
+
+        if (typeof options == 'object') {
+            options = $.extend(defaultOptions, options);
+        } else {
+            options = defaultOptions;
+        }
+
+        return that.dialog(str, [], options);
+    };
+
+
     that.hideAll = function() {
         $(".bootbox").modal("hide");
-    }
+    };
 
     that.animate = function(animate) {
         _animate = animate;
+    };
+
+    that.backdrop = function(backdrop) {
+        _backdrop = backdrop;
+    };
+
+    that.classes = function(classes) {
+        _classes = classes;
+    };
+
+    /**
+     * private API
+     */
+
+    /**
+     * standard locales. Please add more according to ISO 639-1 standard. Multiple language variants are
+     * unlikely to be required. If this gets too large it can be split out into separate JS files.
+     */
+    var _locales = {
+        'br' : {
+            OK      : 'OK',
+            CANCEL  : 'Cancelar',
+            CONFIRM : 'Sim'
+        },
+        'da' : {
+            OK      : 'OK',
+            CANCEL  : 'Annuller',
+            CONFIRM : 'Accepter'
+        },
+        'de' : {
+            OK      : 'OK',
+            CANCEL  : 'Abbrechen',
+            CONFIRM : 'Akzeptieren'
+        },
+        'en' : {
+            OK      : 'OK',
+            CANCEL  : 'Cancel',
+            CONFIRM : 'OK'
+        },
+        'es' : {
+            OK      : 'OK',
+            CANCEL  : 'Cancelar',
+            CONFIRM : 'Aceptar'
+        },
+        'fr' : {
+            OK      : 'OK',
+            CANCEL  : 'Annuler',
+            CONFIRM : 'D\'accord'
+        },
+        'it' : {
+            OK      : 'OK',
+            CANCEL  : 'Annulla',
+            CONFIRM : 'Conferma'
+        },
+        'nl' : {
+            OK      : 'OK',
+            CANCEL  : 'Annuleren',
+            CONFIRM : 'Accepteren'
+        },
+        'pl' : {
+            OK      : 'OK',
+            CANCEL  : 'Anuluj',
+            CONFIRM : 'Potwierdź'
+        },
+        'ru' : {
+            OK      : 'OK',
+            CANCEL  : 'Отмена',
+            CONFIRM : 'Применить'
+        },
+        'zh_CN' : {
+            OK      : 'OK',
+            CANCEL  : '取消',
+            CONFIRM : '确认'
+        },
+        'zh_TW' : {
+            OK      : 'OK',
+            CANCEL  : '取消',
+            CONFIRM : '確認'
+        }
+    };
+
+    function _translate(str, locale) {
+        // we assume if no target locale is probided then we should take it from current setting
+        if (typeof locale === 'undefined') {
+            locale = _locale;
+        }
+        if (typeof _locales[locale][str] === 'string') {
+            return _locales[locale][str];
+        }
+
+        // if we couldn't find a lookup then try and fallback to a default translation
+
+        if (locale != _defaultLocale) {
+            return _translate(str, _defaultLocale);
+        }
+
+        // if we can't do anything then bail out with whatever string was passed in - last resort
+        return str;
     }
 
     return that;
-})( window.jQuery );
+
+}(document, window.jQuery));
+
+// @see https://github.com/makeusabrew/bootbox/issues/71
+window.bootbox = bootbox;

app/assets/stylesheets/application/modal.css.scss

@@ -229,3 +229,34 @@
     width: 550px;
   }
 }
+
+.reply-where-modal {
+  width: 260px;
+  margin-left: -130px;
+  .modal-footer {
+    .btn {
+      text-align: left;
+      font-size: 16px;
+      width: 200px;
+      margin-bottom: 10px;
+      display: block;
+      margin-left: 0;
+      .topic-title {
+        font-size: 12px;
+        font-weight: normal;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 185px;
+      }
+      &.btn-reply-here {
+        @include linear-gradient(#ddd, #ddd);
+        text-shadow: none;
+        color: $darkish_gray;
+      }
+    }
+    .cancel {
+      text-decoration: underline;
+    }
+  }
+}

config/locales/client.en.yml

@@ -388,7 +388,7 @@ en:
         message: "Authenticating with Mozilla Persona (make sure pop up blockers are not enabled)"
 
     composer:
-      posting_not_on_topic: "You are replying to the topic \"{{title}}\", but you are currently viewing a different topic."
+      posting_not_on_topic: "Which topic do you want to reply to?"
       saving_draft_tip: "saving"
       saved_draft_tip: "saved"
       saved_local_draft_tip: "saved locally"