pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
task-2818586

Part-of: odoo/odoo#116641
This commit is contained in:
stefanorigano (SRI)
2023-05-12 22:59:13 +02:00
committed by Pierre Paridans
parent 79f57643ce
commit f951b72716
14 changed files with 78 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/project/static/tests/tours/personal_stage_tour.js
+1 -1
View File
@@ -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",
addons/web/static/src/core/popover/popover.js
+1 -2
View File
@@ -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
addons/web/static/src/core/popover/popover.xml
+1 -1
View File
@@ -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>
addons/web/static/src/core/tooltip/tooltip.scss
+35 -15
View File
@@ -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};
}
}
addons/web/static/src/core/tooltip/tooltip.xml
+2 -2
View File
@@ -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>
addons/web/static/src/legacy/scss/fields.scss
+1 -1
View File
@@ -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 {
addons/web/static/src/legacy/scss/tooltip.scss
+6
View File
@@ -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;
addons/web/static/src/legacy/scss/utils.scss
+2 -2
View File
@@ -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%;
}
addons/web/static/src/scss/bootstrap_overridden.scss
Vendored
+10
View File
@@ -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
addons/web/static/src/scss/bootstrap_review_backend.scss
Vendored
+8 -1
View File
@@ -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;
}
addons/web/static/src/scss/primary_variables.scss
+1 -7
View File
@@ -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
//
addons/web/static/src/views/kanban/kanban_column_quick_create.xml
+7 -9
View File
@@ -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>
addons/web/static/src/webclient/webclient.scss
+1 -1
View File
@@ -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";
}
addons/web/static/tests/views/kanban_view_tests.js
+2 -2
View File
@@ -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 + "..."