From fbfc0dc63c79f0066bab7ec4b31d651fdd06edce Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Tue, 26 Jul 2022 08:44:00 +0000
Subject: [PATCH] [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);
         }
     }
 }