poll-widget: Change "Edit question" UI to edit-pencil button.

This changes the "Edit question" UI to be just an edit-pencil button
rather than a large "Edit question" button for a poll.
Fixes part of zulip#11010.

Author: ishanrai05

static/js/poll_widget.js

@@ -186,9 +186,10 @@ exports.activate = function (opts) {
         var widget_data = poll_data.get_widget_data();
         var html = templates.render('poll-widget-results', widget_data);
         elem.find('ul.poll-widget').html(html);
-
         elem.find('.poll-question-header').text(widget_data.question);
         if (!is_my_poll) {
+            // We hide the edit pencil button for non-senders
+            elem.find('.poll-edit-question').hide();
             if (widget_data.question !== '') {
                 // For the non-senders, we hide the question input bar
                 // when we have a question assigned to the poll
@@ -199,14 +200,78 @@ exports.activate = function (opts) {
                 elem.find('button.poll-question').attr('disabled', true);
                 elem.find('input.poll-question').attr('disabled', true);
             }
+        } else {
+            // Hide the edit pencil icon if the question is still not
+            // assigned for the senders
+            if (widget_data.question === '') {
+                elem.find('.poll-edit-question').hide();
+            } else {
+                elem.find('.poll-edit-question').show();
+            }
         }
         if (widget_data.question !== '') {
-            elem.find('button.poll-question').text(i18n.t('Edit question'));
+            // As soon as a poll-question is assigined
+            // we change the "Add Question" button to a check button
+            elem.find('button.poll-question').empty().addClass('fa fa-check poll-question-check');
+            // The d-none class keeps the cancel editing question button hidden
+            // as long as "Add Question" button is displayed
+            elem.find('button.poll-question-remove').removeClass('d-none');
+            // We hide the whole question bar if question is assigned
+            elem.find('.poll-question-bar').hide();
             elem.find('.poll-comment-bar').show();
         } else {
             elem.find('.poll-comment-bar').hide();
+            elem.find('.poll-edit-question').hide();
         }
+        if (is_my_poll) {
+            // We disable the check button if the input field is empty
+            // and enable it as soon as something is entered in input field
+            elem.find('input.poll-question').on('keyup', function () {
+                if (elem.find('input.poll-question').val().length > 0) {
+                    elem.find('button.poll-question').removeAttr('disabled');
+                } else {
+                    elem.find('button.poll-question').attr('disabled', true);
 
+                }
+            });
+            // However doing above leaves the check button disabled
+            // for the next time when someone is trying to enter a question if
+            // someone empties the input field and clicks on cancel edit button.
+            // We fix this by checking if there is text in input field if
+            // edit question pencil icon is clicked and enable the button if
+            // there is text in input field.
+            elem.find('.poll-edit-question').on('click', function () {
+                if (elem.find('input.poll-question').val().length > 0) {
+                    elem.find('button.poll-question').removeAttr('disabled');
+                }
+            });
+        }
+        elem.find(".poll-edit-question").on('click', function () {
+            // As soon as edit question button is clicked
+            // we hide the Question and the edit question pencil button
+            // and display the input box for editing the question
+            elem.find('.poll-question-header').hide();
+            elem.find('.poll-question-bar').show();
+            elem.find('.poll-edit-question').hide();
+            elem.find('input.poll-question').empty().val(widget_data.question).select();
+        });
+
+        elem.find("button.poll-question").on('click', function () {
+            if (widget_data.question !== '') {
+                // we display the question and hide the input box for editing
+                elem.find(".poll-question-bar").hide();
+                elem.find('.poll-question-header').show();
+            }
+        });
+
+        elem.find("button.poll-question-remove").on('click', function () {
+            // On clicking the cross i.e. cancel editing button
+            // we display the previos question as it is
+            // and hide the input box and buttons for editing
+            elem.find('.poll-question-bar').hide();
+            elem.find('.poll-edit-question').show();
+            elem.find('.poll-question-header').show();
+        });
         elem.find("button.poll-vote").on('click', function (e) {
             e.stopPropagation();
             var key = $(e.target).attr('data-key');

static/styles/widgets.scss

@@ -105,3 +105,35 @@ button.poll-question:hover {
     color: hsl(1, 45%, 50%);
     font-size: 12px;
 }
+
+.d-none {
+    display: none;
+}
+
+.poll-question-check,
+.poll-question-remove {
+    width: 28px !important;
+    height: 28px;
+    border-radius: 3px;
+    border: 1px solid hsl(0, 0%, 80%);
+    background-color: hsl(0, 0%, 100%);
+}
+
+.poll-question-check:hover,
+.poll-question-remove:hover {
+    border-color: hsl(0, 0%, 60%);
+}
+
+.poll-edit-question {
+    opacity: 0.4;
+    display: inline-block;
+    margin-left: 5px;
+}
+
+.poll-edit-question:hover {
+    opacity: 1.0;
+}
+
+.poll-question-header {
+    display: inline-block;
+}

static/templates/widgets/poll-widget.handlebars

@@ -1,10 +1,11 @@
 <div class="poll-widget">
-    <h4 class="poll-question-header"></h4>
+    <h4 class="poll-question-header"></h4><i class="fa fa-pencil poll-edit-question"></i>
     <ul class="poll-widget">
     </ul>
     <div class="poll-question-bar">
         <input type="text" class="poll-question" placeholder="{{t 'Question'}}" />
         <button class="poll-question">{{t "Add question" }}</button>
+        <button class="poll-question-remove d-none"><i class="fa fa-remove"></i></button>
     </div>
     <div class="poll-comment-bar">
         <input type="text" class="poll-comment" placeholder="{{t 'New choice'}}" />