From dba33909aa71ea14e4a6a455e669adebb19d66a9 Mon Sep 17 00:00:00 2001 From: Brieuc-brd Date: Tue, 26 Jul 2022 08:44:10 +0000 Subject: [PATCH 1/7] [MOV] web: move `KanbanView` variables into the component folder This commit moves the kanban variables from primary_variables.scss to the KanbanView folder. Part of the overall v16 SCSS optimization/restyle, task-2704984 task-2892062 Part-of: odoo/odoo#96195 --- .../src/legacy/scss/primary_variables.scss | 22 ---------------- .../src/legacy/scss/secondary_variables.scss | 14 ----------- .../src/views/kanban/kanban.variables.scss | 25 +++++++++++++++++++ 3 files changed, 25 insertions(+), 36 deletions(-) create mode 100644 addons/web/static/src/views/kanban/kanban.variables.scss diff --git a/addons/web/static/src/legacy/scss/primary_variables.scss b/addons/web/static/src/legacy/scss/primary_variables.scss index ec8b3d010f8..89cc734decb 100644 --- a/addons/web/static/src/legacy/scss/primary_variables.scss +++ b/addons/web/static/src/legacy/scss/primary_variables.scss @@ -145,28 +145,6 @@ $o-datepicker-week-color: #8f8f8f !default; $o-card-body-bg-opacity: 0.9 !default; -// Kanban - -$o-kanban-default-record-width: 300px !default; -$o-kanban-small-record-width: 240px !default; - -$o-kanban-header-title-height: 50px !default; - -$o-kanban-image-width: 64px !default; -$o-kanban-image-fill-width: 95px !default; -$o-kanban-inside-vgutter: 8px !default; -$o-kanban-inside-hgutter: 8px !default; -$o-kanban-color-border-width: 2px !default; -$o-kanban-inner-hmargin: 5px !default; -$o-kanban-progressbar-height: 20px !default; - -$o-kanban-mobile-tabs-height: 40px !default; -$o-kanban-mobile-empty-height: $o-kanban-image-width !default; -// ------- Kanban dashboard variables ------- - -// Used to manage spacing in complex dropdown menu -$o-kanban-dashboard-dropdown-complex-gap: 5px !default; - // Border-radius $o-border-radius: .25rem !default; diff --git a/addons/web/static/src/legacy/scss/secondary_variables.scss b/addons/web/static/src/legacy/scss/secondary_variables.scss index d6f4964e377..fe6743f80e6 100644 --- a/addons/web/static/src/legacy/scss/secondary_variables.scss +++ b/addons/web/static/src/legacy/scss/secondary_variables.scss @@ -33,17 +33,3 @@ $o-datepicker-week-bg-color: lighten($o-datepicker-week-color, 30%) !default; // is the minimal width of the default form view design for md/lg sizes $o-form-sheet-min-width: 990px !default; $o-form-separator-color: invert($o-view-background-color, 10%) !default; - -// Kanban - -$o-kanban-record-margin: $o-horizontal-padding / 2 !default; -$o-kanban-group-padding: $o-horizontal-padding !default; // Cannot be higher than this - -$o-kanban-inside-hgutter-mobile: $o-horizontal-padding !default; - -// ------- Kanban dashboard variables ------- - -// Since rows and containers are used inside cards, we're -// forced to set the padding relative to the grid system. -$o-kanban-dashboard-hpadding: $o-horizontal-padding !default; -$o-kanban-dashboard-vpadding: $o-horizontal-padding / 2 !default; diff --git a/addons/web/static/src/views/kanban/kanban.variables.scss b/addons/web/static/src/views/kanban/kanban.variables.scss new file mode 100644 index 00000000000..71d7f0eb0bd --- /dev/null +++ b/addons/web/static/src/views/kanban/kanban.variables.scss @@ -0,0 +1,25 @@ +$o-kanban-default-record-width: 300px !default; +$o-kanban-small-record-width: 240px !default; +$o-kanban-header-title-height: 50px !default; +$o-kanban-image-width: 64px !default; +$o-kanban-image-fill-width: 95px !default; +$o-kanban-inside-vgutter: 8px !default; +$o-kanban-inside-hgutter: 8px !default; +$o-kanban-color-border-width: 2px !default; +$o-kanban-inner-hmargin: 5px !default; +$o-kanban-progressbar-height: 20px !default; +$o-kanban-mobile-tabs-height: 40px !default; +$o-kanban-mobile-empty-height: $o-kanban-image-width !default; +$o-kanban-record-margin: $o-horizontal-padding / 2 !default; +$o-kanban-group-padding: $o-horizontal-padding !default; // Cannot be higher than this +$o-kanban-inside-hgutter-mobile: $o-horizontal-padding !default; + +// ------- Kanban dashboard variables ------- + +// Used to manage spacing in complex dropdown menu +$o-kanban-dashboard-dropdown-complex-gap: 5px !default; + +// Since rows and containers are used inside cards, we're +// forced to set the padding relative to the grid system. +$o-kanban-dashboard-hpadding: $o-horizontal-padding !default; +$o-kanban-dashboard-vpadding: $o-horizontal-padding / 2 !default; From 7cfe50749f89a2e2fdd5bfdcc943210f891e38c9 Mon Sep 17 00:00:00 2001 From: Brieuc-brd Date: Wed, 13 Jul 2022 11:40:08 +0000 Subject: [PATCH 2/7] [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 @@ -
+
From ee46a9fda928f3d5d73f5c20561cd5749a2adf25 Mon Sep 17 00:00:00 2001 From: Brieuc-brd Date: Thu, 14 Jul 2022 11:56:09 +0000 Subject: [PATCH 3/7] [FIX] web: `KanbanView`, layout issues Prior to this commit there were some layout issues in KanbanView: 1. The `o_kanban_header` z-index was not high enough and some icons in the record element could hide it partially. 2. The `o_ghost_avatar` was not visible (white on white). 3. `.container` elements placed inside a record had their width constrained by the grid system. This commit "fix the issue" setting their max-width to 'none'. Note on point 3: To have '.container' max-width limited by the current resolution is not a bug but the default grid-system behavior. This commit provides a temporary workaround since 'container-fluid' classes should have been used instead. task-2892062 Part-of: odoo/odoo#96195 --- addons/web/static/src/legacy/scss/kanban_dashboard.scss | 1 + addons/web/static/src/views/kanban/kanban_dashboard.scss | 1 + addons/web/static/src/views/kanban/kanban_renderer.xml | 5 +++-- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/addons/web/static/src/legacy/scss/kanban_dashboard.scss b/addons/web/static/src/legacy/scss/kanban_dashboard.scss index db7a6665a0d..8e01d2afb9a 100644 --- a/addons/web/static/src/legacy/scss/kanban_dashboard.scss +++ b/addons/web/static/src/legacy/scss/kanban_dashboard.scss @@ -19,6 +19,7 @@ // ------- Generic layout adaptations ------- .container { width: 100%; + max-width: none; } // ------- Dropdown toggle & menu ------- diff --git a/addons/web/static/src/views/kanban/kanban_dashboard.scss b/addons/web/static/src/views/kanban/kanban_dashboard.scss index 6a52b70b7b4..778cc7f88be 100644 --- a/addons/web/static/src/views/kanban/kanban_dashboard.scss +++ b/addons/web/static/src/views/kanban/kanban_dashboard.scss @@ -13,6 +13,7 @@ // ------- Generic layout adaptations ------- .container { width: 100%; + max-width: none; } // ------- Dropdown toggle & menu ------- diff --git a/addons/web/static/src/views/kanban/kanban_renderer.xml b/addons/web/static/src/views/kanban/kanban_renderer.xml index bb6f9898e08..8dce78bde96 100644 --- a/addons/web/static/src/views/kanban/kanban_renderer.xml +++ b/addons/web/static/src/views/kanban/kanban_renderer.xml @@ -153,8 +153,9 @@
- - Avatar + + Avatar +
From fbfc0dc63c79f0066bab7ec4b31d651fdd06edce Mon Sep 17 00:00:00 2001 From: Brieuc-brd Date: Tue, 26 Jul 2022 08:44:00 +0000 Subject: [PATCH 4/7] [IMP] web: `KanbanView`, introduce css variables This commit introduces css variables to facilitate the customization of the view. Part of the overall v16 SCSS optimization/restyle, task-2704984 task-2892062 Part-of: odoo/odoo#96195 --- addons/web/static/src/legacy/scss/utils.scss | 2 +- .../kanban/kanban_column_progressbar.scss | 2 +- .../src/views/kanban/kanban_controller.scss | 129 +++++++++--------- .../src/views/kanban/kanban_dashboard.scss | 27 ++-- .../views/kanban/kanban_examples_dialog.scss | 2 +- 5 files changed, 89 insertions(+), 73 deletions(-) diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss index e0b543b7a23..01a8ecfdc59 100644 --- a/addons/web/static/src/legacy/scss/utils.scss +++ b/addons/web/static/src/legacy/scss/utils.scss @@ -289,7 +289,7 @@ } @mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) { margin: -1px -1px 1px; - padding: $padding-base/2 $padding-base; + padding: if(type-of($padding-base) == 'string', calc(#{$padding-base}/2) $padding-base, $padding-base/2 $padding-base); border: 1px solid transparent; border-bottom: none; vertical-align: top; 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 4358e4a8910..ccfef788aed 100644 --- a/addons/web/static/src/views/kanban/kanban_column_progressbar.scss +++ b/addons/web/static/src/views/kanban/kanban_column_progressbar.scss @@ -16,7 +16,7 @@ .o_kanban_load_more { order: 2; - padding: $o-kanban-inside-vgutter*0.5 0 $o-kanban-inside-vgutter; + padding: var(--KanbanRecord-padding-v) 0; } .o_kanban_record:not(.oe_kanban_card_#{$class}) { diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss index ce90b3baae6..941a0e5d046 100644 --- a/addons/web/static/src/views/kanban/kanban_controller.scss +++ b/addons/web/static/src/views/kanban/kanban_controller.scss @@ -1,32 +1,45 @@ // ------- Kanban View Layout ------- .o_kanban_renderer { + // ---------------------------------------------------------------------------- + // Default KanbanView values + + --KanbanGroup-padding-h: #{$o-kanban-group-padding}; + --KanbanGroup-padding-bottom: #{$o-kanban-group-padding}; + + --KanbanRecord-width: #{$o-kanban-default-record-width}; + --KanbanRecord-margin-v: #{$o-kanban-record-margin}; + --KanbanRecord-margin-h: #{$o-kanban-record-margin}; + --KanbanRecord-padding-v: #{$o-kanban-inside-vgutter}; + --KanbanRecord-padding-h: #{$o-kanban-inside-hgutter}; + --KanbanRecord-gap-v: #{$o-kanban-inner-hmargin}; + + --KanbanRecord--small-width: #{$o-kanban-small-record-width}; + + --KanbanRecord__image-width: #{$o-kanban-image-width}; + --KanbanRecord__image--fill-width: #{$o-kanban-image-fill-width}; + + --KanbanRecord__dropdown-gap: #{$border-width}; + // ---------------------------------------------------------------------------- + .dropdown, .o_kanban_manage_button_section { position: inherit; } @include media-breakpoint-down(md) { + --KanbanRecord-padding-h: #{$o-kanban-inside-hgutter * 2}; padding: 0px !important; } .o_kanban_record > div, .o_kanban_quick_create { - padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter; + padding: var(--KanbanRecord-padding-v) var(--KanbanRecord-padding-h); border: 1px solid $border-color; background-color: $o-view-background-color; - - @include media-breakpoint-down(md) { - padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter-mobile; - } - &:focus, - &:focus-within { - z-index: 1; // show the shadow on top of the previous & next cards in grouped mode - outline: none; - } } .o_kanban_quick_create { - margin: 0 $o-kanban-record-margin ($o-kanban-record-margin * 2); + margin-bottom: calc(var(--KanbanRecord-margin-h) * 2); .o_form_view .o_group.o_inner_group { margin: 0; @@ -43,18 +56,23 @@ height: 100%; } + &:focus, + &:focus-within { + z-index: 1; // show the shadow on top of the previous & next cards in grouped mode + } + // ------- Kanban Record, v11 Layout ------- // Records colours > div::after { content: ""; - @include o-position-absolute(0, auto, 0, 0); + @include o-position-absolute($border-width * 2, auto, $border-width * 2, $border-width); width: $o-kanban-color-border-width; } // Inner Sections .o_kanban_record_top, .o_kanban_record_body { - margin-bottom: $o-kanban-inner-hmargin; + margin-bottom: var(--KanbanRecord-gap-v); } .o_kanban_record_top, @@ -90,7 +108,7 @@ .o_kanban_record_subtitle { display: block; - margin-top: $o-kanban-inner-hmargin * 0.5; + margin-top: calc(var(--KanbanRecord-gap-v) * 0.5); i.fa[role="img"] { margin-right: 2px; @@ -148,15 +166,15 @@ .o_kanban_image_fill_left { position: relative; - margin-right: $o-kanban-inside-hgutter * 2; + margin-right: var(--KanbanRecord-padding-h); @include media-breakpoint-up(sm) { margin: { - top: $o-kanban-inside-vgutter * -1; - bottom: $o-kanban-inside-vgutter * -1; - left: $o-kanban-inside-hgutter * -1; + top: calc(var(--KanbanRecord-padding-v) * -1); + bottom: calc(var(--KanbanRecord-padding-v) * -1); + left: calc(var(--KanbanRecord-padding-h) * -1); } } - flex: 1 0 $o-kanban-image-fill-width; + flex: 1 0 var(--KanbanRecord__image--fill-width); min-height: 95px; background: { size: cover; @@ -174,9 +192,9 @@ // Eg. In partners list we use to fill user picture only, keeping the // default design for company logos. .o_kanban_image { - margin-right: $o-kanban-inside-hgutter * 2; - flex: 0 0 $o-kanban-image-width; - min-height: $o-kanban-image-width; + margin-right: var(--KanbanRecord-padding-h); + flex: 0 0 var(--KanbanRecord__image-width); + min-height: var(--KanbanRecord__image-width); align-self: center; background: { size: cover; @@ -184,19 +202,9 @@ position: center; } - // On medium screen size, align 'o_kanban_image' to 'o_kanban_image_fill_left' elements. - @include media-breakpoint-up(md) { - $fill-notfill-gap: ($o-kanban-image-fill-width - $o-kanban-inside-hgutter * 2) - - $o-kanban-image-width; - margin: { - left: $fill-notfill-gap * 0.5; - right: $fill-notfill-gap * 2; - } - } - @include media-breakpoint-down(md) { - flex-basis: $o-kanban-image-fill-width; - min-height: $o-kanban-image-fill-width; + flex-basis: var(--KanbanRecord__image--fill-width); + min-height: var(--KanbanRecord__image--fill-width); } // Reset immedialy after div padding @@ -241,21 +249,25 @@ // ------- v11 Layout + generic layouts (~v10) ------- // Kanban Record - Dropdown .o_dropdown_kanban { - @include o-position-absolute($o-kanban-inside-vgutter, $o-kanban-inside-hgutter); + @include o-position-absolute( + calc(var(--KanbanRecord-padding-v) + var(--KanbanRecord__dropdown-gap)), + calc(var(--KanbanRecord-padding-h) + var(--KanbanRecord__dropdown-gap)) + ); visibility: hidden; - margin: (-$o-kanban-inside-vgutter) (-$o-kanban-inside-hgutter) 0 0; + margin: calc(var(--KanbanRecord-padding-v) * -1) + calc(var(--KanbanRecord-padding-h) * -1) 0 0; @include media-breakpoint-down(md) { visibility: visible; } .dropdown-toggle { - @include o-kanban-dropdown; + @include o-kanban-dropdown(var(--KanbanRecord-padding-h)); } &.show .dropdown-toggle { @include o-kanban-dropdown-open; } .dropdown-menu { - margin-top: -2px; + margin-top: -1px; min-width: 11rem; } } @@ -274,7 +286,7 @@ .o_field_many2many_tags, .o_kanban_tags { display: block; - margin-bottom: $o-kanban-inner-hmargin; + margin-bottom: var(--KanbanRecord-gap-v); line-height: 1.2; word-break: break-all; @@ -329,16 +341,12 @@ > button, > a { @include o-position-absolute( - $right: $o-kanban-record-margin, - $bottom: $o-kanban-record-margin + $right: var(--KanbanRecord-padding-h), + $bottom: var(--KanbanRecord-padding-v) ); - @include media-breakpoint-down(md) { - right: $o-kanban-inside-hgutter-mobile; - } } } - // Kanban Record - Utility classes &.oe_kanban_global_click, &.oe_kanban_global_click_edit, .oe_kanban_global_click, @@ -348,6 +356,10 @@ &:focus-within { outline: thin solid mix(map-get($theme-colors, "primary"), map-get($grays, "400")); outline-offset: -1px; + + &:after { + transform: translateX($border-width); + } } } @@ -381,13 +393,10 @@ .o_kanban_image { float: left; - width: $o-kanban-image-width; + width: var(--KanbanRecord__image-width); + div { - padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter; - @include media-breakpoint-down(md) { - padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter-mobile; - } + padding-left: calc(var(--KanbanRecord__image-width) + var(--KanbanRecord-padding-h)); } } @@ -399,7 +408,7 @@ min-width: 0; ul { - margin-bottom: $o-kanban-inner-hmargin * 0.5; + margin-bottom: calc(var(--KanbanRecord-gap-v) * 0.5); padding-left: 0; list-style: none; font-size: $font-size-sm; @@ -449,14 +458,14 @@ } &.o_kanban_small_column .o_kanban_group:not(.o_column_folded) { - flex-basis: $o-kanban-small-record-width + 2 * $o-kanban-group-padding; + flex-basis: calc(var(--KanbanRecord--small-width) + (2 * var(--KanbanGroup-padding-h))); } } // Kanban Grouped Layout - Column default .o_kanban_group { - 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; + flex-basis: calc(var(--KanbanRecord-width) + (2 * var(--KanbanGroup-padding-h))); + padding: 0 var(--KanbanGroup-padding-h) var(--KanbanGroup-padding-bottom); .o_kanban_header > .o_kanban_header_title { &:hover .o_kanban_config, @@ -511,11 +520,7 @@ // Kanban Grouped Layout - "Create new column" column .o_column_quick_create { - flex: 0 0 $o-kanban-small-record-width + 2 * $o-kanban-group-padding; - - .o_quick_create_unfolded { - padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter; - } + flex: 0 0 calc(var(--KanbanRecord--small-width) + (2 * var(--KanbanGroup-padding-h))); } @include media-breakpoint-down(md) { @@ -536,11 +541,11 @@ // Kanban UN-grouped Layout &.o_kanban_ungrouped { min-height: 100%; - padding: $o-kanban-record-margin ($o-horizontal-padding - $o-kanban-record-margin); + padding: var(--KanbanRecord-margin-v) var(--KanbanRecord-margin-h); .o_kanban_record { - width: $o-kanban-default-record-width; - margin: ($o-kanban-record-margin * 0.5) $o-kanban-record-margin; + width: var(--KanbanRecord-width); + margin: calc(var(--KanbanRecord-margin-v) * 0.5) var(--KanbanRecord-margin-h); @include media-breakpoint-down(md) { margin: 0 0 -1px 0; diff --git a/addons/web/static/src/views/kanban/kanban_dashboard.scss b/addons/web/static/src/views/kanban/kanban_dashboard.scss index 778cc7f88be..9a2d158e077 100644 --- a/addons/web/static/src/views/kanban/kanban_dashboard.scss +++ b/addons/web/static/src/views/kanban/kanban_dashboard.scss @@ -1,10 +1,18 @@ .o_kanban_dashboard:not(.o_legacy_kanban_view) { + // ---------------------------------------------------------------------------- + // Customize kanbanView default values + + --KanbanRecord-padding-v: #{$o-kanban-dashboard-vpadding}; + --KanbanRecord-padding-h: #{$o-kanban-dashboard-hpadding}; + + --KanbanRecord__dropdown-gap: 0px; + // ---------------------------------------------------------------------------- + .o_kanban_record > div { position: relative; display: flex; flex-flow: column nowrap; justify-content: space-between; - padding: $o-kanban-dashboard-vpadding $o-kanban-dashboard-hpadding; @include media-breakpoint-down(md) { margin-bottom: 10px; @@ -124,7 +132,7 @@ // Provide enough room for the dropdown-toggle .o_primary { - padding-right: $o-kanban-dashboard-hpadding*2; + padding-right: calc(var(--KanbanRecord-padding-h) * 2); } // Uniform titles @@ -159,7 +167,7 @@ display: flex; flex-flow: column nowrap; justify-content: space-between; - margin-top: $o-kanban-dashboard-vpadding * 2; + margin-top: calc(var(--KanbanRecord-padding-v) * 2); padding-right: 0; padding-left: 0; @@ -180,14 +188,14 @@ } .o_kanban_primary_bottom { - margin-top: $o-kanban-dashboard-vpadding; - margin-bottom: -$o-kanban-dashboard-vpadding; + margin-top: var(--KanbanRecord-padding-v); + margin-bottom: calc(var(--KanbanRecord-padding-v) * -1); &.bottom_block { border-top: 1px solid map-get($grays, '300'); background-color: map-get($grays, '200'); - padding-top: $o-kanban-dashboard-vpadding; - padding-bottom: $o-kanban-dashboard-vpadding; + padding-top: var(--KanbanRecord-padding-v); + padding-bottom: var(--KanbanRecord-padding-v); } } } @@ -198,7 +206,10 @@ } .o_favorite { - @include o-position-absolute(3px, $left: 0); + @include o-position-absolute( + $top: var(--KanbanRecord-padding-v), + $left: calc(var(--KanbanRecord-padding-h) - #{$o-horizontal-padding}) + ); padding: $o-kanban-record-margin; } 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 1eecce3eadb..9e50f0de314 100644 --- a/addons/web/static/src/views/kanban/kanban_examples_dialog.scss +++ b/addons/web/static/src/views/kanban/kanban_examples_dialog.scss @@ -52,7 +52,7 @@ flex-basis: 100%; .o_kanban_examples .o_kanban_examples_group .o_kanban_examples_ghost { - width: $o-kanban-small-record-width; + width: var(--KanbanRecord--small-width); } } } From bfe9792d45e99aef5a2e23fcda4a05e59cb9d6cd Mon Sep 17 00:00:00 2001 From: Brieuc-brd Date: Mon, 1 Aug 2022 08:26:39 +0000 Subject: [PATCH 5/7] [REF] hr: review and simplify scss Part of the overall v16 SCSS optimization/restyle, task-2704984 task-2892062 Part-of: odoo/odoo#96195 --- addons/hr/static/src/scss/hr.scss | 64 +------------------- addons/hr/views/hr_department_views.xml | 2 +- addons/hr/views/hr_employee_public_views.xml | 4 +- addons/hr/views/hr_employee_views.xml | 18 +++--- 4 files changed, 14 insertions(+), 74 deletions(-) diff --git a/addons/hr/static/src/scss/hr.scss b/addons/hr/static/src/scss/hr.scss index cb523c3fb7c..8a6e99f89ad 100644 --- a/addons/hr/static/src/scss/hr.scss +++ b/addons/hr/static/src/scss/hr.scss @@ -1,66 +1,6 @@ -.o_web_client .o_hr_employee_kanban { - - .o_follow_btn.o_following { - .o_unfollow { - display: none; - } - - &:hover { - .o_following { - display: none; - } - .o_unfollow { - display: inline; - } - } - } - - .o_employee_summary_icons > span { - white-space: nowrap; - } - - .oe_kanban_content.fixed-bottom { - z-index: 100; - } - - .hr_activity_container { - margin-bottom: 2px; - margin-right: -3px; - } - - .o_hr_employee_kanban_bottom { - //Prevent bottom row from preventing to click on buttons - pointer-events: none; - .oe_kanban_bottom_right { - pointer-events: auto; - } - } - -} - .o_kanban_dashboard.o_hr_department_kanban { - &.o_kanban_ungrouped { - .o_kanban_record { - width: 450px; - .o_kanban_primary_bottom.bottom_block { - background-color: unset !important; - } - } - } - .o_kanban_group { - &:not(.o_column_folded) { - width: 350px + 2*$o-kanban-group-padding; - - @include media-breakpoint-down(md) { - width: 100%; - } - } - } -} - -.hr_presence { - font-size: 0.75em; - vertical-align: middle; + --KanbanRecord-width: 450px; + --KanbanRecord-width-small: 350px; } .o_employee_form { diff --git a/addons/hr/views/hr_department_views.xml b/addons/hr/views/hr_department_views.xml index 907ac938544..7efcbc405e8 100644 --- a/addons/hr/views/hr_department_views.xml +++ b/addons/hr/views/hr_department_views.xml @@ -65,7 +65,7 @@ hr.department.kanban hr.department - + diff --git a/addons/hr/views/hr_employee_public_views.xml b/addons/hr/views/hr_employee_public_views.xml index 640e1d692f3..0d4459bdc3c 100644 --- a/addons/hr/views/hr_employee_public_views.xml +++ b/addons/hr/views/hr_employee_public_views.xml @@ -128,7 +128,7 @@
-
@@ -175,7 +175,7 @@
    • -
    +
    diff --git a/addons/hr/views/hr_employee_views.xml b/addons/hr/views/hr_employee_views.xml index fca3f40be0c..5aa89fa0735 100644 --- a/addons/hr/views/hr_employee_views.xml +++ b/addons/hr/views/hr_employee_views.xml @@ -65,12 +65,12 @@ -
    -