[REF] web: inputs, dropdown, popover, tooltips design

task-2818586 Part-of: odoo#116641
ronelsimon · May 12, 2023 · f951b72 · f951b72
1 parent 79f5764
commit f951b72
Show file tree

Hide file tree

Showing 14 changed files with 78 additions and 44 deletions.
diff --git a/addons/project/static/tests/tours/personal_stage_tour.js b/addons/project/static/tests/tours/personal_stage_tour.js
@@ -35,7 +35,7 @@ registry.category("web_tour.tours").add('personal_stage_tour', {
     trigger: '.o_column_quick_create .o_quick_create_folded'
 }, {
     content: "Create a new personal stage",
-    trigger: 'input.form-control.o_input',
+    trigger: 'input.form-control',
     run: 'text Never',
 }, {
     content: "Confirm create",

diff --git a/addons/web/static/src/core/popover/popover.js b/addons/web/static/src/core/popover/popover.js
@@ -34,8 +34,7 @@ export class Popover extends Component {
         }
 
         // reset all arrow classes
-        const arrowEl = el.firstElementChild;
-        arrowEl.className = "popover-arrow";
+        const arrowEl = el.getElementsByClassName('popover-arrow')[0];
         switch (position) {
             case "tm": // top-middle
             case "bm": // bottom-middle

diff --git a/addons/web/static/src/core/popover/popover.xml b/addons/web/static/src/core/popover/popover.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.PopoverWowl" owl="1">
-        <div role="tooltip" class="o_popover popover mw-100 shadow-sm" t-att-class="props.class" t-ref="ref">
+        <div role="tooltip" class="o_popover popover mw-100" t-att-class="props.class" t-ref="ref">
             <div class="popover-arrow"/>
             <t t-slot="default" />
         </div>

diff --git a/addons/web/static/src/core/tooltip/tooltip.scss b/addons/web/static/src/core/tooltip/tooltip.scss
@@ -1,29 +1,49 @@
 .o-tooltip {
-    font-size: small;
-    max-width: 400px;
+    @include reset-text();
+    @include font-size($tooltip-font-size);
 
-    .o-tooltip--string {
-        background-color: $o-tooltip-title-background-color;
-        font-weight: bold;
-        padding: 5px 8px;
+    // Note: Not cross-browser but not such a big deal since it's
+    // needed for minor aesthetic adaptations only.
+    &:has(.o-tooltip--technical) {
+        max-width: $tooltip-max-width * 2;
+
+        .o-tooltip--help {
+            background-color: $info;
+            color: color-contrast($info);
+        }
+
+        .o-tooltip--string, .o-tooltip--help {
+            max-width: MIN($tooltip-max-width, 100%);
+        }
+    }
+
+    .o-tooltip--string, .o-tooltip--technical--title {
+        padding:  map-get($spacers, 1) 0;
+        color: color-contrast($tooltip-bg);
+        font-weight: $font-weight-bold;
+    }
+
+    .o-tooltip--help, .o-tooltip--technical {
+        margin: map-get($spacers, 1) map-get($spacers, 2) map-get($spacers, 2);
     }
 
     .o-tooltip--help {
-        font-size: smaller;
         white-space: pre-line;
-        padding: 8px;
-        margin-bottom: 0px;
+        padding: 0 map-get($spacers, 2);
     }
 
     .o-tooltip--technical {
-        font-size: smaller;
-        padding: 8px;
-        margin: 0 0 0 15px;
-        list-style-type: circle;
+        padding-left: 1.3em;
+        font-family: $o-font-family-monospace;
+        font-size: $o-font-size-base-smaller;
+        list-style-type: disc;
 
         .o-tooltip--technical--title {
-            font-weight: bold;
-            margin-right: 4px;
+            margin-right: map-get($spacers, 1);
         }
     }
+
+    + .popover-arrow {
+        --popover-arrow-color: #{$tooltip-arrow-color};
+    }
 }
diff --git a/addons/web/static/src/core/tooltip/tooltip.xml b/addons/web/static/src/core/tooltip/tooltip.xml
@@ -2,9 +2,9 @@
 <templates xml:space="preserve">
 
     <t t-name="web.Tooltip" owl="1">
-        <div class="o-tooltip px-2 py-1">
+        <div class="o-tooltip tooltip-inner text-start">
             <t t-if="props.template" t-call="{{props.template}}" t-call-context="{ env, ...props.info }"/>
-            <small t-else="" t-esc="props.tooltip"/>
+            <span t-else="" t-esc="props.tooltip"/>
         </div>
     </t>
 

diff --git a/addons/web/static/src/legacy/scss/fields.scss b/addons/web/static/src/legacy/scss/fields.scss
@@ -35,7 +35,7 @@
     border:$input-border-width solid var(--o-input-border-color);
     border-width: 0 0 $input-border-width 0;
     padding: $o-input-padding-y $o-input-padding-x;
-    background-color: var(--o-input-background-color, #{$input-bg});
+    background-color: var(--o-input-background-color, #{$o-view-background-color});
 
     // -- Nested o_input(s)
     .o_input {

diff --git a/addons/web/static/src/legacy/scss/tooltip.scss b/addons/web/static/src/legacy/scss/tooltip.scss
@@ -1,3 +1,9 @@
+$o-tooltip-background-color: $o-view-background-color !default;
+$o-tooltip-color: $o-main-text-color !default;
+$o-tooltip-arrow-color: white !default;
+$o-tooltip-text-color: $o-main-text-color !default;
+$o-tooltip-title-text-color: $o-main-headings-color !default;
+$o-tooltip-title-background-color: $o-view-background-color !default;
 
 .tooltip {
     $arrow-size: 6px;

diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss
@@ -371,12 +371,12 @@
     padding: 15px;
     z-index: 1000;
     text-align: center;
-    color: $o-tooltip-text-color;
+    color: $body-color;
     font-size: 115%;
 
     > p:first-of-type {
         margin-top: 0;
-        color: $o-tooltip-title-text-color;
+        color: $headings-color;
         font-weight: bold;
         font-size: 125%;
     }

diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -222,9 +222,19 @@ $nav-pills-border-radius: 0 !default;
 $nav-pills-link-active-color: $white !default;
 $nav-pills-link-active-bg: $o-brand-primary !default;
 
+// Tooltips
+
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 400px !default;
+$tooltip-color: $o-gray-200 !default;
+$tooltip-opacity: 1 !default;
+
 // Popovers
 
+$popover-bg: $white !default;
+$popover-border-width: 0 !default;
 $popover-border-radius: $border-radius !default;
+$popover-arrow-color: var(--popover-arrow-color, #{$popover-bg}) !default;
 
 // Toasts
 

diff --git a/addons/web/static/src/scss/bootstrap_review_backend.scss b/addons/web/static/src/scss/bootstrap_review_backend.scss
@@ -250,4 +250,11 @@ $-o-bg-colors-custom: null;
 // ============================================================================
 .card-body {
     @extend %-card-body-reviewed; // See bootstrap_review.scss
-}
+}
+
+// Forms
+// ==============================================================================
+.form-control:hover {
+    background-color: $input-focus-bg;
+    border-color: $o-input-hover-border-color;
+}
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
@@ -113,13 +113,6 @@ $o-form-lightsecondary: #ccc !default;
 $o-list-footer-bg-color: #eee !default;
 $o-list-footer-font-weight: bold !default;
 
-$o-tooltip-background-color: $o-view-background-color !default;
-$o-tooltip-color: $o-main-text-color !default;
-$o-tooltip-arrow-color: white !default;
-$o-tooltip-text-color: $o-main-text-color !default;
-$o-tooltip-title-text-color: $o-main-headings-color !default;
-$o-tooltip-title-background-color: $o-view-background-color !default;
-
 // Custom colors generation maps
 $o-text-colors-custom: (
     "action": $o-action,
@@ -147,6 +140,7 @@ $o-input-padding-y: 2px !default;
 $o-input-padding-x: 4px !default;
 
 $o-input-border-required: $o-brand-primary !default;
+$o-input-hover-border-color: $o-gray-300 !default;
 
 // Layout
 //

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
@@ -10,29 +10,27 @@
             </div>
             <div t-else="" class="o_quick_create_unfolded pt-3 px-2 pb-2">
                 <div class="o_kanban_header top-0 pb-3">
-                    <div class="input-group">
+                    <div class="input-group mb-1">
                         <input type="text"
-                            class="form-control o_input bg-transparent fs-4"
+                            class="form-control bg-view"
                             t-attf-placeholder="{{ relatedFieldName }}..."
                             t-ref="autofocus"
                             t-model.trim="state.columnTitle"
                             t-on-focus="() => state.hasInputFocused = true"
                             t-on-blur="() => state.hasInputFocused = false"
                         />
-                        <span class="input-group-append">
-                            <button class="btn btn-primary o_kanban_add" type="button" t-on-click="validate">
-                                Add
-                            </button>
-                        </span>
+                        <button class="btn btn-primary o_kanban_add" type="button" t-on-click="validate">
+                            Add
+                        </button>
                     </div>
                     <small t-if="!env.isSmall and state.hasInputFocused" class="o_discard_msg text-muted float-end">
-                        Esc to discard
+                        <kbd>Esc</kbd> to discard
                     </small>
                     <t t-if="canShowExamples and !env.isSmall">
                         <button type="button" class="btn btn-link o_kanban_examples p-0" t-on-click="showExamples">See examples</button>
                     </t>
                 </div>
-                <div t-foreach="[,,,]" t-as="i" t-key="i_index" class="o_kanban_muted_record mt-3 py-5 bg-300" />
+                <div t-foreach="[,,,]" t-as="i" t-key="i_index" class="o_kanban_muted_record mb-2 py-5 bg-300 opacity-50" />
             </div>
         </div>
     </t>

diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss
@@ -94,7 +94,7 @@ kbd {
         @include o-position-absolute(0);
         transform: translate(-1.5em, 90%);
         font: .7em/1em FontAwesome;
-        color: $primary;
+        color: $link-color;
         content: "\f00c";
       }
 

diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
@@ -6917,7 +6917,7 @@ QUnit.module("Views", (hooks) => {
         );
 
         // leaving column creation mode
-        await triggerEvent(target, ".o_column_quick_create .o_input", "keydown", {
+        await triggerEvent(target, ".o_column_quick_create .form-control", "keydown", {
             key: "Escape",
         });
 
@@ -12244,7 +12244,7 @@ QUnit.module("Views", (hooks) => {
         assert.strictEqual(
             target
                 .querySelector(
-                    ".o_column_quick_create .o_quick_create_unfolded .input-group .o_input"
+                    ".o_column_quick_create .o_quick_create_unfolded .input-group .form-control"
                 )
                 .getAttribute("placeholder"),
             productFieldName + "..."