From eb9628967819b1bdebdce7dd13713c3e988c6dfd Mon Sep 17 00:00:00 2001 From: stefanorigano Date: Tue, 26 Sep 2017 11:24:27 +0200 Subject: [PATCH] [FIX] web: review and fix kanban design - Folded column design - Adapt progressbar header layout - Remove custom opacity mixin (use default o-hover-opacity) - Remove columns' border (increase padding-right) - Decrease counter opacity if no records - Refine counter animations - ... --- .../src/js/views/kanban/kanban_column.js | 1 + .../views/kanban/kanban_column_progressbar.js | 6 ++- .../src/less/kanban_column_progressbar.less | 51 +++++++++++++++---- addons/web/static/src/less/kanban_view.less | 34 +++++-------- addons/web/static/src/xml/kanban.xml | 2 +- 5 files changed, 61 insertions(+), 33 deletions(-) diff --git a/addons/web/static/src/js/views/kanban/kanban_column.js b/addons/web/static/src/js/views/kanban/kanban_column.js index 2a019ab0c74..ddfc16eaca2 100644 --- a/addons/web/static/src/js/views/kanban/kanban_column.js +++ b/addons/web/static/src/js/views/kanban/kanban_column.js @@ -140,6 +140,7 @@ var KanbanColumn = Widget.extend({ } }); if (this.barOptions) { + this.$el.addClass('o_kanban_has_progressbar'); this.progressBar = new KanbanColumnProgressBar(this, this.barOptions, this.data); defs.push(this.progressBar.appendTo(this.$header)); } diff --git a/addons/web/static/src/js/views/kanban/kanban_column_progressbar.js b/addons/web/static/src/js/views/kanban/kanban_column_progressbar.js index 3ff5c8edbac..721e300da7b 100644 --- a/addons/web/static/src/js/views/kanban/kanban_column_progressbar.js +++ b/addons/web/static/src/js/views/kanban/kanban_column_progressbar.js @@ -174,18 +174,20 @@ var KanbanColumnProgressBar = Widget.extend({ // Display and animate the counter number var start = this.prevTotalCounterValue; var end = this.totalCounterValue; + var animationClass = start > 999 ? 'o_kanban_grow' : 'o_kanban_grow_huge'; + if (start !== undefined && end > start && this.ANIMATE) { $({currentValue: start}).animate({currentValue: end}, { duration: 1000, start: function () { - self.$counter.addClass('o_kanban_grow'); + self.$counter.addClass(animationClass); }, step: function () { self.$number.html(_getCounterHTML(this.currentValue)); }, complete: function () { self.$number.html(_getCounterHTML(this.currentValue)); - self.$counter.removeClass('o_kanban_grow'); + self.$counter.removeClass(animationClass); }, }); } else { diff --git a/addons/web/static/src/less/kanban_column_progressbar.less b/addons/web/static/src/less/kanban_column_progressbar.less index 865943567ae..86fe0853de2 100644 --- a/addons/web/static/src/less/kanban_column_progressbar.less +++ b/addons/web/static/src/less/kanban_column_progressbar.less @@ -1,3 +1,4 @@ +@o-kanban-counter-header-height: @o-kanban-header-title-height*0.6; .o-kanban-css-filter(@class, @accent-color) { // Provide CSS reordering and highlight @@ -34,12 +35,22 @@ .o_kanban_record:not(.oe_kanban_card_@{class}) { order: 3; - opacity: 0.5; + .o-hover-opacity(0.5); box-shadow: none; + } + } +} - &:hover { - opacity: 1; - } +// If columns has the progressbar, adapt the layout +.o_kanban_view .o_kanban_group.o_kanban_has_progressbar { + > .o_kanban_header .o_kanban_header_title { + height: @o-kanban-counter-header-height; + margin-top: 5px; + } + + &.o_kanban_no_records { + .o_kanban_counter { + opacity: 0.3; } } } @@ -48,12 +59,12 @@ position: relative; .o-flex-display(); .o-align-items(center); - height: 30px; + .o-transition(opacity, 0.3s); margin-bottom: @o-kanban-record-margin*2; > .o_kanban_counter_progress { width: 76%; - height: @font-size-base; + height: @font-size-small; margin-bottom: 0; background-color: @gray-lighter-dark; box-shadow: none; @@ -80,9 +91,19 @@ margin-left: 3%; color: @headings-color; text-align: right; + .o-transform-origin(right, center); &.o_kanban_grow { - .o-animation(grow, 400ms, ease-in, 200ms); + .o-animation(grow, 1s, ease); + } + + &.o_kanban_grow_huge { + .o-animation(grow_huge, 1s, ease); + } + + // Target currency icon + > span { + margin-left: 2px; } } } @@ -109,8 +130,20 @@ 0% { transform: scale3d(1, 1, 1); } - 50% { - transform: scale3d(1.5, 1.5, 1.5); + 30% { + transform: scale3d(1.1, 1.1, 1.1); + } + 100% { + transform: scale3d(1, 1, 1); + } +} + +@keyframes grow_huge { + 0% { + transform: scale3d(1, 1, 1); + } + 30% { + transform: scale3d(1.3, 1.3, 1.3); } 100% { transform: scale3d(1, 1, 1); diff --git a/addons/web/static/src/less/kanban_view.less b/addons/web/static/src/less/kanban_view.less index 33baa09cc33..4bf8bdc08ad 100644 --- a/addons/web/static/src/less/kanban_view.less +++ b/addons/web/static/src/less/kanban_view.less @@ -4,6 +4,8 @@ @o-kanban-default-record-width: 300px; @o-kanban-small-record-width: 240px; +@o-kanban-header-title-height: 50px; + @o-kanban-image-width: 64px; @o-kanban-inside-vgutter: 8px; @o-kanban-inside-hgutter: 8px; @@ -15,18 +17,12 @@ // ------- Kanban grouped mixins ------- .o-kanban-icon(@base-opacity: 0.5) { display: block; - line-height: 50px; + line-height: @o-kanban-header-title-height; text-align: center; color: @odoo-main-text-color; - font-size: 15px; + font-size: @font-size-small; cursor: pointer; - .o-kanban-hover-effect(@base-opacity); -} -.o-kanban-hover-effect(@base-opacity) when (@base-opacity < 1) { - opacity: @base-opacity; - &:hover { - opacity: 1; - } + .o-hover-opacity(@base-opacity); } .o-kanban-tag-color(@size) when (@size >= 0) { .o-kanban-tag-color(@size - 1); @@ -44,22 +40,23 @@ position: relative; .o-flex(0, 0, auto); margin: 0; - padding: 0 @o-kanban-group-padding * 0.5; + padding: 0 floor(@o-kanban-group-padding * 0.7); cursor: pointer; } .o-kanban-header-title() { .o-flex-display(); - height: 50px; + .o-align-items(center); + height: @o-kanban-header-title-height; line-height: 2.2; color: @headings-color; } .o-kanban-v-title() { - .o-position-absolute(@o-kanban-inside-vgutter * 2, @left: -@o-kanban-inside-vgutter * 1.3); + .o-position-absolute(@o-kanban-inside-vgutter * 2, @left: floor(-@o-kanban-inside-vgutter * 1.2)); .o-transform-origin(left, bottom, @z: 0); .o-transform(rotate(90deg)); overflow: visible; white-space: nowrap; - font-size: 16px; + font-size: 15px; } // ------- Kanban records mixins ------- @@ -164,7 +161,7 @@ margin: 2px 0 8px; padding: 3px 6px; color: @headings-color; - font-weight: bold; + font-weight: 500; } } @@ -307,7 +304,7 @@ font-weight: 500; background-color: transparent; .o-kanban-tag-color(12); - .o-kanban-hover-effect(0.7); + .o-hover-opacity(0.7); span { display: inline-block; @@ -449,18 +446,13 @@ // Kanban Grouped Layout - Column default .o_kanban_group { .o-flex(0, 0, auto); - padding: 0 @o-kanban-group-padding @o-kanban-group-padding; - border: 1px solid @gray-lighter-dark; - background-color: @gray-lighter; - border-width: 0 1px; - margin-left: -1px; + padding: 0 @o-kanban-group-padding*2 @o-kanban-group-padding @o-kanban-group-padding; .o_kanban_header > .o_kanban_header_title { .o-kanban-header-title(); .o_column_title { .o-flex(1, 1, auto); - padding-top: 5px; .o-text-overflow(); font-size: 16px; font-weight: 500; diff --git a/addons/web/static/src/xml/kanban.xml b/addons/web/static/src/xml/kanban.xml index 22a04bbf070..1cf5e6d34ec 100644 --- a/addons/web/static/src/xml/kanban.xml +++ b/addons/web/static/src/xml/kanban.xml @@ -9,7 +9,7 @@ -
+