[IMP] web: add better message in column quick create

This commit add a help message in the column to indicate that pressing
escape will discard the current column creation. Note that some JS had
to be added to make the message disappear when the input is no longer
focused. The reason is that the create column widget may still be visible when
the input is no longer focused (for example, because the user clicked on
the fake records, or clicked on the example link)

addons/web/static/src/js/views/kanban/kanban_column_quick_create.js

@@ -21,6 +21,8 @@ var ColumnQuickCreate = Widget.extend({
         'click .o_kanban_examples': '_onShowExamples',
         'keydown': '_onKeydown',
         'keypress input': '_onKeypress',
+        'blur input': '_onInputBlur',
+        'focus input': '_onInputFocus',
     },
 
     /**
@@ -124,6 +126,27 @@ var ColumnQuickCreate = Widget.extend({
         event.stopPropagation();
         this._add();
     },
+    /**
+     * When the input is not focused, no key event may occur in the column, so
+     * the discard feature will not work by pressing ESC. We simply hide the
+     * help message in that case, so we do not mislead our users.
+     *
+     * @private
+     * @param {KeyboardEvent} event
+     */
+    _onInputBlur: function () {
+        this.$('.o_discard_msg').hide();
+    },
+    /**
+     * When the input is focused, we need to show the discard help message (it
+     * might have been hidden, @see _onInputBlur)
+     *
+     * @private
+     * @param {KeyboardEvent} event
+     */
+    _onInputFocus: function () {
+        this.$('.o_discard_msg').show();
+    },
     /**
      * Cancels quick creation on escape keydown event
      *

addons/web/static/src/xml/kanban.xml

@@ -52,8 +52,9 @@
                     </span>
                 </div>
                 <t t-if="widget.examples">
-                    <span class="btn-link o_kanban_examples">See Examples</span>
+                    <span class="btn-link o_kanban_examples">Examples</span>
                 </t>
+                <span class="o_discard_msg text-muted pull-right">Esc to discard</span>
             </div>
             <div class="o_kanban_muted_record"/>
             <div class="o_kanban_muted_record"/>

addons/web/static/tests/views/kanban_tests.js

@@ -1681,6 +1681,35 @@ QUnit.module('Views', {
         kanban.destroy();
     });
 
+    QUnit.test('hide and display help message (ESC) in kanban quick create', function (assert) {
+        assert.expect(2);
+
+        var kanban = createView({
+            View: KanbanView,
+            model: 'partner',
+            data: this.data,
+            arch: '<kanban>' +
+                        '<field name="product_id"/>' +
+                        '<templates><t t-name="kanban-box">' +
+                            '<div><field name="foo"/></div>' +
+                        '</t></templates>' +
+                    '</kanban>',
+            groupBy: ['product_id'],
+        });
+
+        kanban.$('.o_quick_create_folded').click();
+
+        assert.ok(kanban.$('.o_discard_msg').is(':visible'),
+            'the ESC to discard message is visible');
+
+        // click in the column, but outside the input (to lose focus)
+        kanban.$('.o_kanban_header').click();
+        assert.notOk(kanban.$('.o_discard_msg').is(':visible'),
+            'the ESC to discard message is no longer visible');
+
+        kanban.destroy();
+    });
+
     QUnit.test('delete a column in grouped on m2o', function (assert) {
         assert.expect(28);