diff options
Diffstat (limited to 'addons/web')
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 @@ -167,15 +167,6 @@ var KanbanRenderer = BasicRenderer.extend({ 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. * * @param {string} localID the column id @@ -276,6 +267,16 @@ var KanbanRenderer = BasicRenderer.extend({ } }, /** + * 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. * * @private @@ -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; } - .o_kanban_examples { - display: flex; - padding: 0 6px; + } +} - .o_kanban_examples_group { - flex: 1 1 100%; - margin: 10px; +// 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 { + .o_kanban_examples_group { .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 @@ <button class="btn btn-primary o_kanban_add" type="button">Add</button> </span> </div> + <span class="o_discard_msg text-muted float-right">Esc to discard</span> <t t-if="widget.examples"> <button type="button" class="btn btn-link o_kanban_examples">See examples</button> </t> - <span class="o_discard_msg text-muted float-right">Esc to discard</span> </div> <div class="o_kanban_muted_record"/> <div class="o_kanban_muted_record"/> @@ -167,6 +167,32 @@ </div> </t> +<!-- Kanban Example Background --> +<t t-name="KanbanView.ExamplesBackground"> + <div class="o_kanban_example_background_container"> + <div class="o_kanban_example_background"> + <div class="o_kanban_examples"> + <t t-foreach="_.range(1,5)" t-as="num"> + <div class="o_kanban_examples_group"> + <h6><b>Column <t t-esc="num"/></b></h6> + <t t-foreach="_.random(2,6)"> + <t t-call="KanbanView.ExamplesBackground.RecordGhost"/> + </t> + </div> + </t> + </div> + </div> + </div> +</t> +<t t-name="KanbanView.ExamplesBackground.RecordGhost"> + <div class="o_kanban_examples_ghost"> + <div class="o_ghost_content"/> + <div class="o_ghost_content o_ghost_tag"/> + <img class="float-right o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/> + </div> +</t> + + <!-- Mobile templates --> <t t-name="KanbanView.MobileTabs"> <div class="o_kanban_mobile_tabs"> |