From 7cfe50749f89a2e2fdd5bfdcc943210f891e38c9 Mon Sep 17 00:00:00 2001 From: Brieuc-brd Date: Wed, 13 Jul 2022 11:40:08 +0000 Subject: [PATCH] [REF] web: `KanbanView`, review and simplify scss Review, simplify SCSS and adapt legacy code. Part of the overall v16 SCSS optimization/restyle, task-2704984 task-2892062 Part-of: odoo/odoo#96195 --- .../legacy/scss/kanban_examples_dialog.scss | 29 +--- .../static/src/legacy/scss/kanban_view.scss | 7 +- addons/web/static/src/legacy/scss/utils.scss | 10 -- addons/web/static/src/legacy/xml/kanban.xml | 38 ++--- .../views/kanban/kanban_animated_number.xml | 6 +- .../kanban/kanban_column_examples_dialog.xml | 10 +- .../kanban/kanban_column_progressbar.scss | 76 +--------- .../kanban/kanban_column_quick_create.xml | 16 +- .../src/views/kanban/kanban_controller.scss | 142 +----------------- .../kanban/kanban_cover_image_dialog.xml | 6 +- .../src/views/kanban/kanban_dashboard.scss | 5 - .../views/kanban/kanban_examples_dialog.scss | 49 ++---- .../static/src/views/kanban/kanban_record.js | 5 +- .../kanban/kanban_record_quick_create.xml | 8 +- .../src/views/kanban/kanban_renderer.js | 11 +- .../src/views/kanban/kanban_renderer.xml | 53 +++---- 16 files changed, 105 insertions(+), 366 deletions(-) diff --git a/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss b/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss index a5a37166975..8074b31a003 100644 --- a/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss +++ b/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss @@ -45,19 +45,15 @@ // 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%; + flex-basis: 100%; .o_kanban_examples { .o_kanban_examples_group { .o_kanban_examples_ghost { - width: 224px; - margin-bottom: 10px; + width: $o-kanban-small-record-width; } } } @@ -67,31 +63,16 @@ // kanban ghost card .o_kanban_examples { - display: flex; - padding: 0 6px; - .o_kanban_examples_group { - flex: 1 1 100%; - margin: 10px; + flex-basis: 100%; .o_kanban_examples_ghost { - padding: 5px; - margin-top: -1px; - border: thin solid map-get($grays, '300'); - background-color: white; - .o_ghost_content { - height: 12px; - background: map-get($grays, '300'); - &.o_ghost_tag { - display: inline-block; - width: 40%; - margin-top: 10px; - } + &.o_collapse { + margin-top: -1px; } .o_ghost_avatar { height: 20px; width: 20px; - margin-top: 6px; } } } diff --git a/addons/web/static/src/legacy/scss/kanban_view.scss b/addons/web/static/src/legacy/scss/kanban_view.scss index 8777a3d2bb4..4dc3a0af798 100644 --- a/addons/web/static/src/legacy/scss/kanban_view.scss +++ b/addons/web/static/src/legacy/scss/kanban_view.scss @@ -465,7 +465,6 @@ } .o_kanban_quick_add i { - @include o-kanban-icon; margin-left: $o-kanban-inside-hgutter*2; } @@ -481,10 +480,6 @@ @include media-breakpoint-down(md) { visibility: visible; } - - i { - @include o-kanban-icon; - } } } @@ -521,7 +516,7 @@ } .o_column_unfold { - @include o-kanban-icon(1); + display: block; } } diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss index 8979ad3c4fe..e0b543b7a23 100644 --- a/addons/web/static/src/legacy/scss/utils.scss +++ b/addons/web/static/src/legacy/scss/utils.scss @@ -237,14 +237,6 @@ } // ------- Kanban grouped mixins ------- -@mixin o-kanban-icon($base-opacity: 0.5) { - display: block; - text-align: center; - color: $o-main-text-color; - font-size: $font-size-sm; - cursor: pointer; - @include o-hover-opacity($base-opacity); -} @mixin o-kanban-tag-color { @for $size from 1 through length($o-colors) { // Note: the first color is supposed to be invisible if there is a color @@ -285,8 +277,6 @@ transform-origin: left bottom 0; transform: rotate(90deg); overflow: visible; - white-space: nowrap; - font-size: 15px; } // ------- Kanban records mixins ------- diff --git a/addons/web/static/src/legacy/xml/kanban.xml b/addons/web/static/src/legacy/xml/kanban.xml index 7f3e33641fc..4c37a06b5f0 100644 --- a/addons/web/static/src/legacy/xml/kanban.xml +++ b/addons/web/static/src/legacy/xml/kanban.xml @@ -13,10 +13,10 @@ role="feed" t-attf-aria-labelledby="kanban_header_#{widget.id or widget.db_id}">
- - + + - + - +
@@ -57,7 +57,7 @@
Esc to discard - +
@@ -157,9 +157,9 @@
-
+
-
+
@@ -173,23 +173,23 @@
-
-
-
+
+
+
- Avatar + Avatar
-
-
-
+
+
+
-
+
@@ -201,10 +201,10 @@
-
-
-
- Avatar +
+
+
+ Avatar
diff --git a/addons/web/static/src/views/kanban/kanban_animated_number.xml b/addons/web/static/src/views/kanban/kanban_animated_number.xml index bb975d0074c..dd914dbe6e4 100644 --- a/addons/web/static/src/views/kanban/kanban_animated_number.xml +++ b/addons/web/static/src/views/kanban/kanban_animated_number.xml @@ -2,10 +2,10 @@ -
- +
+ - +
diff --git a/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml b/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml index 0b7aea8b3af..ff5f70c62d7 100644 --- a/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml +++ b/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml @@ -3,13 +3,13 @@
-
+
-
+
-
-
-
+
+
+
diff --git a/addons/web/static/src/views/kanban/kanban_column_progressbar.scss b/addons/web/static/src/views/kanban/kanban_column_progressbar.scss index 8ccf768669b..4358e4a8910 100644 --- a/addons/web/static/src/views/kanban/kanban_column_progressbar.scss +++ b/addons/web/static/src/views/kanban/kanban_column_progressbar.scss @@ -10,21 +10,8 @@ border-color: $mix-full; } - .progress-bar.bg-#{$class} { - border: 1px solid white; - } - .oe_kanban_card_#{$class} { order: 1; - margin-bottom: $o-kanban-inside-vgutter*0.5; - - ~ .oe_kanban_card_#{$class} { - margin-top: -$o-kanban-inside-vgutter*0.5 - 1px; - } - - ~ .o_kanban_load_more { - margin-top: -$o-kanban-inside-vgutter*0.5; - } } .o_kanban_load_more { @@ -40,47 +27,14 @@ } } -// 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-header-title-height*0.6; - margin-top: 5px; - } - - &.o_kanban_no_records { - .o_kanban_counter { - opacity: 0.3; - } - } -} - .o_kanban_counter { - position: relative; - display: flex; - align-items: center; transition: opacity 0.3s ease 0s; - margin-bottom: $o-kanban-record-margin*2; > .o_kanban_counter_progress { - width: 76%; height: $font-size-sm; - margin-bottom: 0; - background-color: map-get($grays, '300'); - box-shadow: none; - - .progress-bar { - margin-bottom: 0; - box-shadow: none; - cursor: pointer; - } } > .o_kanban_counter_side { - width: 21%; - margin-left: 3%; - color: $headings-color; - text-align: right; - white-space: nowrap; transform-origin: right center; &.o_kanban_grow { @@ -90,53 +44,25 @@ &.o_kanban_grow_huge { animation: grow_huge 1s ease 0s 1 normal none running; } - - // Target currency icon - > span { - margin-left: 2px; - } } } -.o_column_folded .o_kanban_counter { - display: none; -} .o_kanban_view .o_kanban_group { @include o-kanban-css-filter(success, map-get($theme-colors, 'success')); @include o-kanban-css-filter(warning, map-get($theme-colors, 'warning')); @include o-kanban-css-filter(danger, map-get($theme-colors, 'danger')); @include o-kanban-css-filter(muted, map-get($theme-colors, 'dark')); - - &.o_kanban_group_show { - display: flex; - flex-flow: column nowrap; - - > * { - flex: 0 0 auto; - } - } + @include o-kanban-css-filter(info, map-get($theme-colors, 'info')); } @keyframes grow { - 0% { - transform: scale3d(1, 1, 1); - } 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/views/kanban/kanban_column_quick_create.xml b/addons/web/static/src/views/kanban/kanban_column_quick_create.xml index 936066f9008..3c366ab14cb 100644 --- a/addons/web/static/src/views/kanban/kanban_column_quick_create.xml +++ b/addons/web/static/src/views/kanban/kanban_column_quick_create.xml @@ -3,16 +3,16 @@
-
+
-
-
+
+
- + Esc to discard - + - +
-
+
diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss index e20d627e845..ce90b3baae6 100644 --- a/addons/web/static/src/views/kanban/kanban_controller.scss +++ b/addons/web/static/src/views/kanban/kanban_controller.scss @@ -1,8 +1,5 @@ // ------- Kanban View Layout ------- .o_kanban_renderer { - display: flex; - align-content: stretch; - .dropdown, .o_kanban_manage_button_section { position: inherit; @@ -29,29 +26,15 @@ } .o_kanban_quick_create { - box-shadow: $box-shadow; margin: 0 $o-kanban-record-margin ($o-kanban-record-margin * 2); - .o_form_view { - padding: 0; - .o_group.o_inner_group { - margin: 0; - } - } - - .o_kanban_cancel { - color: map-get($grays, "600"); // to make color uniform in community and enterprise - } - - &.o_disabled { - pointer-events: none; - opacity: 0.7; + .o_form_view .o_group.o_inner_group { + margin: 0; } } .o_kanban_record { position: relative; - display: inline-block; // Force the creation of a block formatting context to clear float items min-width: 150px; margin: 0 0 -1px; @@ -68,13 +51,6 @@ width: $o-kanban-color-border-width; } - .o_kanban_record_details { - display: flex; - flex-direction: column; - justify-content: space-between; - width: 100%; - } - // Inner Sections .o_kanban_record_top, .o_kanban_record_body { @@ -247,7 +223,6 @@ } .o_dragged { - @extend .shadow; transform: rotate(-3deg); transition: transform 0.6s, box-shadow 0.3s; @@ -461,8 +436,6 @@ // Kanban Grouped Layout &.o_kanban_grouped { min-height: 100%; - padding: 0; - background-color: $gray-100; @include media-breakpoint-down(md) { min-height: initial; @@ -471,11 +444,8 @@ scroll-snap-type: x mandatory; } - .o_kanban_record, - .o_kanban_quick_create { + .o_kanban_record { width: 100%; - margin-left: 0; - margin-right: 0; } &.o_kanban_small_column .o_kanban_group:not(.o_column_folded) { @@ -485,29 +455,10 @@ // Kanban Grouped Layout - Column default .o_kanban_group { - flex: 0 0 $o-kanban-default-record-width + 2 * $o-kanban-group-padding; + flex-basis: $o-kanban-default-record-width + 2 * $o-kanban-group-padding; padding: 0 $o-kanban-group-padding $o-kanban-group-padding $o-kanban-group-padding; - background-color: inherit; .o_kanban_header > .o_kanban_header_title { - @include o-kanban-header-title; - - .o_column_title { - flex: 1 1 auto; - @include o-text-overflow; - font-size: 16px; - font-weight: 500; - } - - .o_column_unfold { - display: none; - } - - .o_kanban_quick_add i { - @include o-kanban-icon; - margin-left: $o-kanban-inside-hgutter * 2; - } - &:hover .o_kanban_config, .o_kanban_config.show { visibility: visible; @@ -522,9 +473,6 @@ > .dropdown-menu { cursor: default; } - i { - @include o-kanban-icon; - } } } } @@ -545,22 +493,11 @@ } .o_kanban_header_title { - position: relative; opacity: 0.5; .o_column_title { @include o-kanban-v-title; } - .o_column_unfold { - @include o-kanban-icon(1); - } - } - - > .o_kanban_record, - .o_kanban_quick_add, - .o_kanban_config, - .o_kanban_load_more { - display: none !important; } &:hover, @@ -576,94 +513,42 @@ .o_column_quick_create { flex: 0 0 $o-kanban-small-record-width + 2 * $o-kanban-group-padding; - .o_quick_create_folded { - cursor: pointer; - padding: 12px 16px; - white-space: nowrap; - font-weight: $font-weight-bold; - @include o-hover-opacity(0.7); - @include o-hover-text-color($text-muted, $body-color); - } - .o_quick_create_unfolded { - margin: $border-width ($o-kanban-inside-hgutter * 0.5) 0; padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter; - - @include media-breakpoint-down(md) { - margin: 0; - } - - .o_kanban_header { - height: 50px; - - .o_kanban_examples { - cursor: pointer; - } - - input, - input:focus, - input:hover { - font-size: 16px; - background: transparent; - } - } - - .o_kanban_muted_record { - background: map-get($grays, "300"); - height: 70px; - margin: 10px 0px; - } } } @include media-breakpoint-down(md) { .o_kanban_group, .o_column_quick_create { - flex: 1 0 90%; // don't take full width to give a hint of next/previous column + flex-basis: 90%; // don't take full width to give a hint of next/previous column scroll-snap-align: center; overflow-y: scroll; .o_kanban_header { position: sticky; // keep it visible - top: 0; - z-index: 10; // same as the sticky ControlPanel + z-index: $zindex-sticky; background-color: inherit; } - - .o_kanban_header_title { - margin-top: 0 !important; // avoid sticky glitch when scrolling - } } } // Kanban UN-grouped Layout &.o_kanban_ungrouped { min-height: 100%; - align-content: flex-start; - flex-flow: row wrap; - justify-content: flex-start; - padding: $o-kanban-record-margin ($o-horizontal-padding - $o-kanban-record-margin); .o_kanban_record { - display: flex; - flex: 1 1 auto; width: $o-kanban-default-record-width; margin: ($o-kanban-record-margin * 0.5) $o-kanban-record-margin; @include media-breakpoint-down(md) { margin: 0 0 -1px 0; - flex: 1 0 100%; + flex-basis: 100%; } &.o_kanban_ghost { - height: 0; - border: none; - min-height: 0 !important; // to prevent view writers to override this height - visibility: hidden; - margin-top: 0; - margin-bottom: 0; - padding: 0; + max-height: 0 !important; // to prevent view writers to override this height } } } @@ -686,17 +571,6 @@ // ----------------- Set Cover Dialog ----------------- .modal .o_kanban_cover_container .o_kanban_cover_image { - border: 1px solid $border-color; height: 120px; width: 120px; - cursor: pointer; - - &.o_selected { - border-color: $o-brand-primary; - } - - > img { - @include o-position-absolute(0, 0, 0, 0); - max-height: 100%; - } } diff --git a/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml index f0f72c52228..eb8dcda47f3 100644 --- a/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml +++ b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml @@ -5,11 +5,11 @@
-
Attachment div { position: relative; display: flex; diff --git a/addons/web/static/src/views/kanban/kanban_examples_dialog.scss b/addons/web/static/src/views/kanban/kanban_examples_dialog.scss index 2c56a485ce2..1eecce3eadb 100644 --- a/addons/web/static/src/views/kanban/kanban_examples_dialog.scss +++ b/addons/web/static/src/views/kanban/kanban_examples_dialog.scss @@ -46,54 +46,25 @@ // 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%; + flex-basis: 100%; - .o_kanban_examples { - .o_kanban_examples_group { - .o_kanban_examples_ghost { - width: 224px; - margin-bottom: 10px; - } - } + .o_kanban_examples .o_kanban_examples_group .o_kanban_examples_ghost { + width: $o-kanban-small-record-width; } } } - // kanban ghost card -.o_kanban_examples { - display: flex; - padding: 0 6px; +.o_kanban_examples .o_kanban_examples_group .o_kanban_examples_ghost { + &.o_collapse { + margin-top: -1px; + } - .o_kanban_examples_group { - flex: 1 1 100%; - margin: 10px; - - .o_kanban_examples_ghost { - padding: 5px; - margin-top: -1px; - border: thin solid map-get($grays, '300'); - background-color: white; - .o_ghost_content { - height: 12px; - background: map-get($grays, '300'); - &.o_ghost_tag { - display: inline-block; - width: 40%; - margin-top: 10px; - } - } - .o_ghost_avatar { - height: 20px; - width: 20px; - margin-top: 6px; - } - } + .o_ghost_avatar { + height: 20px; + width: 20px; } } diff --git a/addons/web/static/src/views/kanban/kanban_record.js b/addons/web/static/src/views/kanban/kanban_record.js index 182af1951ac..1359ddf48ca 100644 --- a/addons/web/static/src/views/kanban/kanban_record.js +++ b/addons/web/static/src/views/kanban/kanban_record.js @@ -221,7 +221,7 @@ export class KanbanRecord extends Component { getRecordClasses() { const { archInfo, canResequence, forceGlobalClick, group, record } = this.props; - const classes = ["o_kanban_record"]; + const classes = ["o_kanban_record d-flex"]; if (canResequence) { classes.push("o_record_draggable"); } @@ -239,6 +239,9 @@ export class KanbanRecord extends Component { if (record.model.useSampleModel) { classes.push("o_sample_data_disabled"); } + if (!this.props.list.isGrouped) { + classes.push("flex-grow-1 flex-md-shrink-1 flex-shrink-0"); + } return classes.join(" "); } diff --git a/addons/web/static/src/views/kanban/kanban_record_quick_create.xml b/addons/web/static/src/views/kanban/kanban_record_quick_create.xml index be6c15b8825..82641530d9b 100644 --- a/addons/web/static/src/views/kanban/kanban_record_quick_create.xml +++ b/addons/web/static/src/views/kanban/kanban_record_quick_create.xml @@ -3,11 +3,11 @@
- +
-
diff --git a/addons/web/static/src/views/kanban/kanban_renderer.js b/addons/web/static/src/views/kanban/kanban_renderer.js index 24611b5c2f6..b589999e4a0 100644 --- a/addons/web/static/src/views/kanban/kanban_renderer.js +++ b/addons/web/static/src/views/kanban/kanban_renderer.js @@ -61,11 +61,11 @@ export class KanbanRenderer extends Component { if (group) { dataGroupId = group.dataset.id; } - element.classList.add("o_dragged"); + element.classList.add("o_dragged", "shadow"); }, onGroupEnter: (group) => group.classList.add("o_kanban_hover"), onGroupLeave: (group) => group.classList.remove("o_kanban_hover"), - onStop: (_group, element) => element.classList.remove("o_dragged"), + onStop: (_group, element) => element.classList.remove("o_dragged", "shadow"), onDrop: async ({ element, previous, parent }) => { element.classList.remove("o_record_draggable"); const refId = previous ? previous.dataset.id : null; @@ -89,9 +89,9 @@ export class KanbanRenderer extends Component { // Hooks onStart: (_group, element) => { dataGroupId = element.dataset.id; - element.classList.add("o_dragged"); + element.classList.add("o_dragged", "shadow"); }, - onStop: (_group, element) => element.classList.remove("o_dragged"), + onStop: (_group, element) => element.classList.remove("o_dragged", "shadow"), onDrop: async ({ element, previous }) => { element.classList.remove("o_group_draggable"); const refId = previous ? previous.dataset.id : null; @@ -262,6 +262,9 @@ export class KanbanRenderer extends Component { if (!this.env.isSmall && group.isFolded) { classes.push("o_column_folded"); } + if (this.canResequenceGroups && group.value && !group.isFolded && !group.hasActiveProgressValue) { + classes.push("bg-100"); + } if (group.progressBars.length) { classes.push("o_kanban_has_progressbar"); if (!group.isFolded && group.hasActiveProgressValue) { diff --git a/addons/web/static/src/views/kanban/kanban_renderer.xml b/addons/web/static/src/views/kanban/kanban_renderer.xml index c176f6e907f..bb6f9898e08 100644 --- a/addons/web/static/src/views/kanban/kanban_renderer.xml +++ b/addons/web/static/src/views/kanban/kanban_renderer.xml @@ -2,25 +2,25 @@ -
-
-
-
- +
+
+ - + - + - - + - +
-
-
+
+
@@ -144,16 +145,16 @@ /> -
-
-
-
+
+
+
+
-
-
-
+
+
+
- Avatar + Avatar
@@ -162,7 +163,7 @@ -
+