From b234a85ecbc201457bd172eff4eb1fc191c42deb Mon Sep 17 00:00:00 2001
From: Lubomír Sedlář <lsedlar@redhat.com>
Date: Dec 01 2016 11:12:12 +0000
Subject: Add tooltip to disabled quick reply button


When in preview mode or there is some text in the box, instead of
overwriting the value we display a tooltip to tell user what to do to
choose another reply.

---

diff --git a/pagure/static/quick_reply.js b/pagure/static/quick_reply.js
index 6546c96..b310ee5 100644
--- a/pagure/static/quick_reply.js
+++ b/pagure/static/quick_reply.js
@@ -1,14 +1,32 @@
 $(document).ready(function() {
+  const MSG = 'Turn off preview and clear the input field to use a different quick reply.';
+
+  let in_preview = false;
+  function update_button() {
+    const has_text = $("#comment").val() !== "";
+    $('.qr-btn').toggleClass('disabled', in_preview || has_text);
+    if (in_preview || has_text) {
+      $('.qr').attr('data-original-title', MSG);
+    } else {
+      $('.qr').attr('data-original-title', '');
+    }
+  }
+
   $('.qr-reply').on('click', function (e) {
     let tgt = $('#comment');
     if (!tgt.val()) {
-      tgt.val($(this).attr('data-qr'));
+      tgt.val($(this).attr('data-qr')).focus();
     }
     $('.qr .dropdown-toggle').dropdown('toggle');
+    update_button();
     return false;
   });
   // Disable selecting replies when in preview mode.
   $('#previewinmarkdown').on('click', function () {
-    $('.qr-btn').toggleClass('disabled');
+    in_preview = !in_preview;
+    update_button();
   });
+  $('#comment').on('input propertychange', update_button);
+  $('[data-toggle="tooltip"]').tooltip();
+  update_button();
 });
diff --git a/pagure/templates/quick_reply.html b/pagure/templates/quick_reply.html
index b207de7..6c16ce7 100644
--- a/pagure/templates/quick_reply.html
+++ b/pagure/templates/quick_reply.html
@@ -1,4 +1,4 @@
-<div class="btn-group qr pull-xs-right">
+<div class="btn-group qr pull-xs-right" data-toggle="tooltip" data-placement="bottom" title="">
   <button type="button" class="btn btn-secondary btn-sm dropdown-toggle qr-btn" data-toggle="dropdown">
     <span class="oi" data-glyph="copywriting"></span> <span class="caret"></span>
   </button>