From 958342bf165bb9b6982e2eaa49d0c8daec7bbb7a Mon Sep 17 00:00:00 2001 From: jem-odoo Date: Wed, 24 Oct 2018 13:03:30 +0000 Subject: [PATCH] [IMP] web: add example kanban background The background example is a set of random fake column and card, directly inspired from the kanban example modal. We want to toggle this background depending on the kanban state; the background will be displayed when there is no column yet, and the quick create column is shown. To do so, we need to update the state of the kanban when deleting a column to (re)display the background in case of removal of the last column. Now, on column deletion, the entire kanban is updated and so entirely rerender (with aab's benediction). Task-1893021 --- .../src/js/views/kanban/kanban_controller.js | 7 +- .../src/js/views/kanban/kanban_renderer.js | 37 +++++++--- .../src/scss/kanban_examples_dialog.scss | 73 +++++++++++++------ addons/web/static/src/xml/kanban.xml | 28 ++++++- 4 files changed, 104 insertions(+), 41 deletions(-) diff --git a/addons/web/static/src/js/views/kanban/kanban_controller.js b/addons/web/static/src/js/views/kanban/kanban_controller.js index 0f07ea6d565..15c804f5a8e 100644 --- a/addons/web/static/src/js/views/kanban/kanban_controller.js +++ b/addons/web/static/src/js/views/kanban/kanban_controller.js @@ -341,12 +341,7 @@ var KanbanController = BasicController.extend({ this.model .deleteRecords([column.db_id], relatedModelName) .done(function () { - if (column.isEmpty()) { - self.renderer.removeWidget(column); - self._updateButtons(); - } else { - self.reload(); - } + self.update({}, {reload: !column.isEmpty()}); }); }, /** diff --git a/addons/web/static/src/js/views/kanban/kanban_renderer.js b/addons/web/static/src/js/views/kanban/kanban_renderer.js index 316fb9114cd..51d75a167c7 100644 --- a/addons/web/static/src/js/views/kanban/kanban_renderer.js +++ b/addons/web/static/src/js/views/kanban/kanban_renderer.js @@ -166,15 +166,6 @@ var KanbanRenderer = BasicRenderer.extend({ this.quickCreate.toggleFold(); this._toggleNoContentHelper(); }, - /** - * Removes a widget (record if ungrouped, column if grouped) from the view. - * - * @param {Widget} widget the instance of the widget to remove - */ - removeWidget: function (widget) { - this.widgets.splice(this.widgets.indexOf(widget), 1); - widget.destroy(); - }, /** * Updates a given column with its new state. * @@ -275,6 +266,16 @@ var KanbanRenderer = BasicRenderer.extend({ previousCard.focus(); } }, + /** + * Render the Example Ghost Kanban card on the background + * + * @private + * @param {DocumentFragment} fragment + */ + _renderExampleBackground: function (fragment) { + var $background = $(qweb.render('KanbanView.ExamplesBackground')); + $background.appendTo(fragment); + }, /** * Renders empty invisible divs in a document fragment. * @@ -351,9 +352,9 @@ var KanbanRenderer = BasicRenderer.extend({ // Open it directly if there is no column yet if (!self.state.data.length) { self.quickCreate.toggleFold(); + self._renderExampleBackground(fragment); } }); - } } }, @@ -546,6 +547,7 @@ var KanbanRenderer = BasicRenderer.extend({ _onQuickCreateColumnUpdated: function (ev) { ev.stopPropagation(); this._toggleNoContentHelper(); + this._updateExampleBackground(); }, /** * @private @@ -596,6 +598,21 @@ var KanbanRenderer = BasicRenderer.extend({ _onStartQuickCreate: function () { this._toggleNoContentHelper(true); }, + /** + * Hide or display the background example: + * - displayed when quick create column is display and there is no column else + * - hidden otherwise + * + * @private + **/ + _updateExampleBackground: function () { + var $elem = this.$('.o_kanban_example_background_container'); + if (!this.state.data.length && !$elem.length) { + this._renderExampleBackground(this.$el); + } else { + $elem.remove(); + } + }, }); return KanbanRenderer; diff --git a/addons/web/static/src/scss/kanban_examples_dialog.scss b/addons/web/static/src/scss/kanban_examples_dialog.scss index 65eadc9e0b4..2251896e3a0 100644 --- a/addons/web/static/src/scss/kanban_examples_dialog.scss +++ b/addons/web/static/src/scss/kanban_examples_dialog.scss @@ -1,3 +1,4 @@ +// container ghost card in modal .o_kanban_examples_dialog { display: flex; padding: 0px; @@ -37,35 +38,59 @@ padding: 16px 16px 0; text-align: justify; } + } +} + +// container ghost card in background +.o_kanban_example_background_container { + display: flex; + padding: 0px; + opacity: 0.4; + + // content + .o_kanban_example_background { + flex: 1 1 100%; + .o_kanban_examples { - display: flex; - padding: 0 6px; - .o_kanban_examples_group { - flex: 1 1 100%; - margin: 10px; - .o_kanban_examples_ghost { - padding: 5px; - margin-top: -1px; - border: thin solid gray('300'); - background-color: white; - .o_ghost_content { - height: 12px; - background: gray('300'); - &.o_ghost_tag { - display: inline-block; - width: 40%; - margin-top: 10px; - } - } - .o_ghost_avatar { - height: 20px; - width: 20px; - margin-top: 6px; - } + width: 224px; + margin-bottom: 10px; } } } } } + + +// kanban ghost card +.o_kanban_examples { + display: flex; + padding: 0 6px; + + .o_kanban_examples_group { + flex: 1 1 100%; + margin: 10px; + + .o_kanban_examples_ghost { + padding: 5px; + margin-top: -1px; + border: thin solid gray('300'); + background-color: white; + .o_ghost_content { + height: 12px; + background: gray('300'); + &.o_ghost_tag { + display: inline-block; + width: 40%; + margin-top: 10px; + } + } + .o_ghost_avatar { + height: 20px; + width: 20px; + margin-top: 6px; + } + } + } +} diff --git a/addons/web/static/src/xml/kanban.xml b/addons/web/static/src/xml/kanban.xml index 8a37bef9277..06ba6b71eb6 100644 --- a/addons/web/static/src/xml/kanban.xml +++ b/addons/web/static/src/xml/kanban.xml @@ -56,10 +56,10 @@ + Esc to discard - Esc to discard
@@ -167,6 +167,32 @@
+ + +
+
+
+ +
+
Column
+ + + +
+ +
+
+
+ + +
+
+
+ Avatar +
+ + +