[REF] web,project,hr_holidays: buttons design

task-2818586 Part-of: odoo#116641
ronelsimon · May 12, 2023 · 24e89ba · 24e89ba
1 parent 46b762a
commit 24e89ba
Show file tree

Hide file tree

Showing 10 changed files with 180 additions and 139 deletions.
diff --git a/addons/hr_holidays/static/src/scss/accrual_plan_level.scss b/addons/hr_holidays/static/src/scss/accrual_plan_level.scss
@@ -64,7 +64,7 @@ $o-hr-holidays-border-color: map-get($grays, '300');
                     width: 90px;
                     padding: 3px 0px;
                     border-radius: 3px;
-                    background-color: $o-btn-secondary-bg;
+                    background-color: $o-gray-200;
                     box-shadow: 0 1px 2px rgba(0,0,0,.1);
                 }
 
@@ -75,7 +75,7 @@ $o-hr-holidays-border-color: map-get($grays, '300');
                     margin-right: 2px;
                     width: 500px;
                     border-radius: 3px;
-                    background-color: $o-btn-secondary-bg;
+                    background-color: $o-gray-200;
                     box-shadow: 0 1px 2px rgba(0,0,0,.1);
 
                     // Triangle
@@ -85,7 +85,7 @@ $o-hr-holidays-border-color: map-get($grays, '300');
                         margin-left: 10px;
                         width: 14px;
                         height: 14px;
-                        background-color: $o-btn-secondary-bg;
+                        background-color: $o-gray-200;
                         border-bottom: 1px solid $o-hr-holidays-border-color;
                         transform: rotate(45deg);
                     }
@@ -98,12 +98,12 @@ $o-hr-holidays-border-color: map-get($grays, '300');
                         height: 12px;
                         border: 2px solid $o-brand-primary;
                         border-radius: 10px;
-                        background: $o-btn-secondary-bg;
+                        background: $o-gray-200;
                     }
 
                     .content {
                         position: relative;
-                        background-color: $o-btn-secondary-bg;
+                        background-color: $o-gray-200;
                         padding: 5px 7px;
                         font-size: 14px;
                     }

diff --git a/...roject/static/src/components/project_task_state_selection/project_task_state_selection.js b/...roject/static/src/components/project_task_state_selection/project_task_state_selection.js
@@ -33,12 +33,12 @@ export class ProjectTaskStateSelection extends StateSelectionField {
             "04_waiting_normal": "",
         };
         this.colorButton = {
-            "01_in_progress": "btn-light border-2 border-dark",
-            "03_approved": "btn-light border-2 border-success",
-            "02_changes_requested": "btn-light border-2 border-warning",
-            "1_done": "btn-success",
-            "1_canceled": "btn-danger",
-            "04_waiting_normal": "btn-light border-2 border-dark",
+            "01_in_progress": "btn-outline-secondary",
+            "03_approved": "btn-outline-success",
+            "02_changes_requested": "btn-outline-warning",
+            "1_done": "btn-outline-success",
+            "1_canceled": "btn-outline-danger",
+            "04_waiting_normal": "btn-outline-secondary",
         };
         if (this.props.viewType != 'form') {
             super.setup();

diff --git a/...oject/static/src/components/project_task_state_selection/project_task_state_selection.xml b/...oject/static/src/components/project_task_state_selection/project_task_state_selection.xml
@@ -27,7 +27,8 @@
                     <i t-attf-class="{{ stateIcon(currentValue) }} {{ statusColor(currentValue) }} {{ ['1_done', '1_canceled'].includes(currentValue) and isView(['kanban']) ? 'opacity-50' : '' }}"></i>
                 </button>
                 <button t-else="" class="o_state_button btn oe_highlight rounded-pill" style="white-space: nowrap;" tabindex="-1"
-                    t-att-class="currentValue == '1_done' ? 'btn-success' : 'btn-light border-2 border-dark'"
+                    t-attf-class="#{currentValue == '1_done' ? 'btn-success' : 'btn-outline-secondary'}"
+                    t-att-class="{'bg-view border' : state.isStateButtonHighlighted}"
                     t-on-click="toggleState" t-on-mouseenter="onMouseEnterStateButton"
                     t-on-mouseleave="onMouseLeaveStateButton">
                     <div class="d-flex align-items-center">
@@ -61,7 +62,7 @@
                     </span>
                 </t>
                 <t t-elif="currentValue != '1_done' and currentValue != '1_canceled'">
-                    <span t-attf-class="{{ statusColor(currentValue) }} o_status_label" t-out="label"/>
+                    <span t-attf-class="o_status_label" t-out="label"/>
                 </t>
                 <t t-else="">
                     <span class="o_status_label" t-out="label"/>

diff --git a/addons/web/static/src/scss/bootstrap_review.scss b/addons/web/static/src/scss/bootstrap_review.scss
@@ -121,37 +121,3 @@
         }
     }
 }
-
-// Generating bootstrap color buttons was disabled (see import_bootstrap.scss).
-// We do it ourself here with a tweak: we introduce btn-fill-* (working as the
-// normal btn-* classes (in opposition to btn-outline-* classes). We then map
-// the btn-* classes to either btn-fill-* or btn-outline-* classes depending on
-// the configuration. We also allow to define a border-color different than the
-// background color.
-$o-btn-bg-colors: () !default;
-$o-btn-border-colors: () !default;
-@each $color, $value in $theme-colors {
-    $-bg-color: map-get($o-btn-bg-colors, $color) or $value;
-    $-border-color: map-get($o-btn-border-colors, $color) or $-bg-color;
-    .btn-fill-#{$color} {
-        @include button-variant($-bg-color, $-border-color);
-    }
-}
-@each $color, $value in $theme-colors {
-    $-bg-color: map-get($o-btn-bg-colors, $color) or $value;
-    $-border-color: map-get($o-btn-border-colors, $color) or $-bg-color;
-    .btn-outline-#{$color} {
-        @include button-outline-variant($-border-color);
-    }
-}
-$o-btn-outline-defaults: () !default;
-@each $color, $value in $theme-colors {
-    .btn-#{$color} {
-        @if index($o-btn-outline-defaults, $color) {
-            @extend .btn-outline-#{$color};
-        } @else {
-            @extend .btn-fill-#{$color};
-        }
-    }
-}
-
diff --git a/addons/web/static/src/scss/bootstrap_review_backend.scss b/addons/web/static/src/scss/bootstrap_review_backend.scss
@@ -3,6 +3,83 @@
 /// ==============================================================================
 
 
+// Buttons
+// ============================================================================
+// Generating bootstrap color buttons was disabled (see import_bootstrap.scss).
+// We do it ourself here generating each btn design type individually.
+
+// 1. Render buttons defined in '$o-btns-bs-override' and '$o-btns-bs-outline-override'
+//    maps.
+@each $-name, $-value in $o-btns-bs-override {
+    .btn-#{$-name} {
+        @include button-variant(
+            o-safe-get($-value, background),
+            o-safe-get($-value, border),
+            o-safe-get($-value, color),
+            o-safe-get($-value, hover-background),
+            o-safe-get($-value, hover-border),
+            o-safe-get($-value, hover-color),
+            o-safe-get($-value, active-background),
+            o-safe-get($-value, active-border),
+            o-safe-get($-value, active-color),
+        );
+    }
+}
+
+@each $-name, $-value in $o-btns-bs-outline-override {
+    .btn-outline-#{$-name} {
+        @include button-variant(
+            o-safe-get($-value, background),
+            o-safe-get($-value, border),
+            o-safe-get($-value, color),
+            o-safe-get($-value, hover-background),
+            o-safe-get($-value, hover-border),
+            o-safe-get($-value, hover-color),
+            o-safe-get($-value, active-background),
+            o-safe-get($-value, active-border),
+            o-safe-get($-value, active-color),
+        );
+    }
+}
+
+// 2. Render '$theme-colors' buttons excluding the ones already generated
+//    using the custom maps.
+@each $-name, $-color in $theme-colors {
+    @if (not map-get($o-btns-bs-override, $-name)) {
+        .btn-#{$-name} {
+            @include button-variant($-color, $-color);
+        }
+    }
+    @if (not map-get($o-btns-bs-outline-override, $-name)) {
+        .btn-outline-#{$-name} {
+            @include button-outline-variant($-color);
+        }
+    }
+}
+
+// 3. Render custom buttons.
+@each $-name, $-color in $o-btn-custom {
+    .btn-#{$-name} {
+        @include button-variant($-color, $-color);
+    }
+}
+
+// Button group
+// ============================================================================
+.btn-group {
+    > .btn, .btn-group {
+        // Ensure that active buttons will always be rendered on top, including
+        // hovered ones.
+        &:active, &.active, &:active:hover, &.active:hover {
+            z-index: 2;
+        }
+
+        &:not(:first-child) {
+            margin-left: $btn-border-width;
+        }
+    }
+}
+
 // Bootstrap '$theme-colors' text-x and bg-x classes generation
 // ============================================================================
 // Bootstrap's default behavior is to generate classes directly from its

diff --git a/addons/web/static/src/scss/bootstrap_review_frontend.scss b/addons/web/static/src/scss/bootstrap_review_frontend.scss
@@ -20,6 +20,39 @@
     @extend %-card-body-reviewed; // See bootstrap_review.scss
 }
 
+// Generating bootstrap color buttons was disabled (see import_bootstrap.scss).
+// We do it ourself here with a tweak: we introduce btn-fill-* (working as the
+// normal btn-* classes (in opposition to btn-outline-* classes). We then map
+// the btn-* classes to either btn-fill-* or btn-outline-* classes depending on
+// the configuration. We also allow to define a border-color different than the
+// background color.
+$o-btn-bg-colors: () !default;
+$o-btn-border-colors: () !default;
+@each $color, $value in $theme-colors {
+    $-bg-color: map-get($o-btn-bg-colors, $color) or $value;
+    $-border-color: map-get($o-btn-border-colors, $color) or $-bg-color;
+    .btn-fill-#{$color} {
+        @include button-variant($-bg-color, $-border-color);
+    }
+}
+@each $color, $value in $theme-colors {
+    $-bg-color: map-get($o-btn-bg-colors, $color) or $value;
+    $-border-color: map-get($o-btn-border-colors, $color) or $-bg-color;
+    .btn-outline-#{$color} {
+        @include button-outline-variant($-border-color);
+    }
+}
+$o-btn-outline-defaults: () !default;
+@each $color, $value in $theme-colors {
+    .btn-#{$color} {
+        @if index($o-btn-outline-defaults, $color) {
+            @extend .btn-outline-#{$color};
+        } @else {
+            @extend .btn-fill-#{$color};
+        }
+    }
+}
+
 // Compensate navbar brand padding if no visible border
 @if alpha($navbar-dark-toggler-border-color) < 0.001 {
     .navbar-dark .navbar-toggler {

diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
@@ -132,6 +132,10 @@ $o-bg-colors-custom: (
     "favourite": $o-main-favorite-color,
 ) !default;
 
+$o-btn-custom: (
+    "favourite": $o-main-favorite-color,
+) !default;
+
 // Components (BS)
 
 $o-border-color: $o-gray-300 !default;
@@ -222,11 +226,52 @@ $o-border-radius-sm: .2rem !default;
 // touch
 $o-touch-btn-padding: 7px 14px !default;
 
-// Buttons
-$o-btn-secondary-bg: $o-white !default;
-$o-btn-secondary-hover-bg: $o-gray-100 !default;
-$o-btn-secondary-hover-border: $o-gray-200 !default;
-
-$o-btn-light-bg: $o-white !default;
-$o-btn-light-border: $o-btn-light-bg !default;
-$o-btn-light-background-hover: $o-gray-100 !default;
+// == Buttons
+// Map of customized values for each button. If a button's design is defined
+// here, the relative values will take priority over default BS ones.
+// Notice: each map's entry is passed directly to the Bootstrap mixin, meaning
+// that all states must be defined, there can't be omissions.
+$o-btns-bs-override: () !default;
+$o-btns-bs-override: map-merge((
+    "primary": (
+        background: $o-brand-primary,
+        border: $o-brand-primary,
+        color: $o-white,
+
+        hover-background: darken($o-brand-primary, 10%),
+        hover-border: darken($o-brand-primary, 20%),
+        hover-color: $o-white,
+
+        active-background: darken($o-brand-primary, 20%),
+        active-border: darken($o-brand-primary, 20%),
+        active-color: $o-white,
+    ),
+    "secondary": (
+        background: $o-gray-300,
+        border: $o-gray-300,
+        color: $o-gray-800,
+
+        hover-background: $o-gray-400,
+        hover-border: $o-gray-400,
+        hover-color: $o-gray-900,
+
+        active-background: mix($o-action, $o-gray-100, 20%),
+        active-border:  $o-action,
+        active-color: $o-gray-900,
+    ),
+    "light": (
+        background: $o-white,
+        border: $o-white,
+        color: $o-gray-700,
+
+        hover-background: $o-gray-100,
+        hover-border: $o-gray-100,
+        hover-color: $o-gray-900,
+
+        active-background: $o-component-active-bg,
+        active-border:  $o-component-active-border,
+        active-color: $o-component-active-color,
+    ),
+), $o-btns-bs-override);
+
+$o-btns-bs-outline-override: () !default;
diff --git a/addons/web/static/src/views/fields/statusbar/statusbar_field.scss b/addons/web/static/src/views/fields/statusbar/statusbar_field.scss
@@ -1,4 +1,6 @@
 .o_field_statusbar {
+    $-btn-secondary-design: map-get($o-btns-bs-override, "secondary");
+
     > .o_statusbar_status {
         display: flex;
         align-content: space-around;
@@ -12,6 +14,7 @@
             position: relative;
             padding-left: $o-statusbar-arrow-width*2;
             border-width: 0;
+            border-radius: 0;
             font-size: $font-size-sm;
 
             &:first-child {

diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss
@@ -356,16 +356,6 @@
         }
     }
 
-    .o_statusbar_status .o_arrow_button:not(.disabled) {
-        @extend .btn-light;
-
-        &:hover, &:focus, &:active {
-            &:after {
-                border-left-color: $o-btn-light-background-hover;
-            }
-        }
-    }
-
     // Title
     .oe_title {
         color: $headings-color;