[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)

3 files changed, 54 insertions, 1 deletions

diff --git a/addons/web/static/src/js/views/kanban/kanban_column_quick_create.js b/addons/web/static/src/js/views/kanban/kanban_column_quick_create.js
index 78191d3ab75..afeeb4203ad 100644
--- a/addons/web/static/src/js/views/kanban/kanban_column_quick_create.js
+++ b/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',
     },
 
     /**
@@ -125,6 +127,27 @@ var ColumnQuickCreate = Widget.extend({
         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
      *
      * @private
diff --git a/addons/web/static/src/xml/kanban.xml b/addons/web/static/src/xml/kanban.xml
index d06a39081e5..23af895b8ea 100644
--- a/addons/web/static/src/xml/kanban.xml
+++ b/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"/>
diff --git a/addons/web/static/tests/views/kanban_tests.js b/addons/web/static/tests/views/kanban_tests.js
index aa1a9e93e4a..a73eaed2e1a 100644
--- a/addons/web/static/tests/views/kanban_tests.js
+++ b/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);