[REF] web,account: listView & kanbanView design

task-2818586

Part-of: odoo/odoo#116641
This commit is contained in:
stefanorigano (SRI)
2023-05-12 22:59:14 +02:00
committed by Pierre Paridans
parent fb8c6f652d
commit c964329add
19 changed files with 152 additions and 148 deletions
@@ -38,16 +38,6 @@
width: 450px;
}
}
.o_kanban_group {
&:not(.o_column_folded) {
width: 450px + 2*$o-kanban-group-padding;
@include media-breakpoint-down(md) {
width: 100%;
}
}
}
}
// Style for the widget "dashboard_graph"
+9 -19
View File
@@ -261,18 +261,10 @@
border-left-color: nth($o-colors, $size);
&:after {
background-color: nth($o-colors, $size);
outline: 1px solid nth($o-colors, $size);
}
}
}
}
@mixin o-kanban-slim-col {
position: relative;
flex: 0 0 auto;
margin: 0;
padding: 0 floor($o-kanban-group-padding * 0.7);
cursor: pointer;
}
@mixin o-kanban-header-title {
display: flex;
align-items: center;
@@ -280,15 +272,9 @@
line-height: 2.2;
color: $headings-color;
}
@mixin o-kanban-v-title {
@include o-position-absolute($o-kanban-inside-vgutter * 2, $left: floor(-$o-kanban-inside-vgutter * 1.2));
transform-origin: left bottom 0;
transform: rotate(90deg);
overflow: visible;
}
// ------- Kanban records mixins -------
@mixin o-kanban-record-title($font-size: 1em) {
@mixin o-kanban-record-title($font-size: $h5-font-size) {
color: $headings-color;
font-size: $font-size;
font-weight: 500;
@@ -296,10 +282,8 @@
margin-top: 0;
}
@mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) {
margin: -1px -1px 1px;
margin: 1px 1px 0 0;
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;
@include o-hover-text-color($body-color, $headings-color);
@@ -311,8 +295,14 @@
@mixin o-kanban-dropdown-open {
position: relative;
background: $dropdown-bg;
border-color: $border-color;
z-index: $zindex-dropdown + 1;
&:before {
@include o-position-absolute(100%, 0, auto, 0);
height: $dropdown-border-radius;
background-color: $dropdown-bg;
content: "";
}
}
@mixin o-kanban-colorpicker {
max-width: 150px;
+2 -1
View File
@@ -133,8 +133,9 @@ $headings-color: $o-main-headings-color !default;
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-bg: transparent !default;
$table-striped-color: inherit !default;
$table-striped-bg-factor: .01 !default;
$table-striped-bg-factor: 0.01 !default;
$table-hover-bg-factor: .055 !default;
$table-border-color: $gray-200 !default;
$table-group-separator-color: $gray-200 !default;
@@ -110,7 +110,7 @@ $o-shadow-color: #303030 !default;
$o-form-lightsecondary: #ccc !default;
$o-list-footer-bg-color: #eee !default;
$o-list-footer-bg-color: transparent !default;
$o-list-footer-font-weight: bold !default;
// Custom colors generation maps
@@ -907,6 +907,9 @@
// One2Many List views
.o_field_widget .o_list_renderer {
--ListRenderer-thead-bg-color: #{$o-view-background-color};
--ListRenderer-tfoot-bg-color: #{$o-view-background-color};
margin-bottom: 10px;
> tfoot > tr > td {
@@ -1,12 +1,12 @@
$o-kanban-background: $o-gray-200 !default;
$o-kanban-default-record-width: 300px !default;
$o-kanban-small-record-width: 240px !default;
$o-kanban-background: $o-gray-100 !default;
$o-kanban-default-record-width: 320px !default;
$o-kanban-small-record-width: 300px !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: $o-spacer * 0.5 !default;
$o-kanban-inside-hgutter: $o-spacer * 0.5 !default;
$o-kanban-color-border-width: 2px !default;
$o-kanban-color-border-width: 3px !default;
$o-kanban-inner-hmargin: 5px !default;
$o-kanban-progressbar-height: 20px !default;
$o-kanban-mobile-tabs-height: 40px !default;
@@ -1,14 +1,10 @@
@mixin o-kanban-css-filter($class, $accent-color) {
// Provide CSS reordering and highlight
&.o_kanban_group_show_#{$class} {
$mix-soft: mix($accent-color, $o-webclient-background-color, 5%);
$mix-full: mix($accent-color, $o-webclient-background-color);
--KanbanGroup-background: #{mix($accent-color, $o-kanban-background, 5%)};
&,
.o_kanban_header {
background-color: $mix-soft;
border-color: $mix-full;
}
outline: $border-width solid $o-view-background-color;
box-shadow: inset 2px 0 0 $accent-color, inset -2px 0 0 $accent-color;
.oe_kanban_card_#{$class} {
order: 1;
@@ -22,7 +18,6 @@
.o_kanban_record:not(.oe_kanban_card_#{$class}) {
order: 3;
@include o-hover-opacity(0.5);
box-shadow: none;
}
}
}
@@ -34,6 +29,10 @@
> .o_column_progress {
height: $font-size-sm;
.bg-200 {
--background-color: RGBA(#{to-rgb($o-gray-300)}, var(--bg-opacity, 1))
}
}
}
@@ -43,5 +42,6 @@
@include o-kanban-css-filter(danger, map-get($theme-colors, "danger"));
@include o-kanban-css-filter(muted, map-get($theme-colors, "dark"));
@include o-kanban-css-filter(info, map-get($theme-colors, "info"));
@include o-kanban-css-filter(purple, purple);
}
}
@@ -3,12 +3,12 @@
<t t-name="web.KanbanColumnQuickCreate" owl="1">
<div class="o_column_quick_create flex-shrink-0 flex-grow-1 flex-md-grow-0" t-ref="root">
<div t-if="props.folded" class="o_quick_create_folded m-3 text-nowrap fw-bold opacity-75 opacity-100-hover" t-on-click="unfold">
<button class="o_kanban_add_column btn btn-outline-secondary w-100">
<i class="fa fa-plus me-2" role="img" aria-label="Add column" title="Add column"/><t t-out="relatedFieldName"/>
<div t-if="props.folded" class="o_quick_create_folded position-sticky z-index-1 my-3 text-nowrap" t-on-click="unfold">
<button class="o_kanban_add_column btn btn-light w-100" aria-label="Add column" data-tooltip="Add column">
<i class="fa fa-plus me-2" role="img"/><t t-out="relatedFieldName"/>
</button>
</div>
<div t-else="" class="o_quick_create_unfolded pt-3 px-2 pb-2">
<div t-else="" class="o_quick_create_unfolded pt-3 pb-2">
<div class="o_kanban_header top-0 pb-3">
<div class="input-group mb-1">
<input type="text"
@@ -24,7 +24,7 @@
</button>
</div>
<small t-if="!env.isSmall and state.hasInputFocused" class="o_discard_msg text-muted float-end">
<kbd>Esc</kbd> to discard
Press <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>
@@ -11,6 +11,9 @@
// Default KanbanView values
--Kanban-background: #{$o-kanban-background};
--Kanban-padding: 0;
--KanbanGroup-background: var(--Kanban-background);
--KanbanGroup-padding-h: #{$o-kanban-group-padding};
--KanbanGroup-padding-bottom: #{$o-kanban-group-padding};
@@ -28,22 +31,23 @@
--KanbanRecord__dropdown-gap: #{$border-width};
--KanbanColumn__highlight-background: #{rgba($o-info, 0.05)};
--KanbanColumn__highlight-border: #{$o-info};
--KanbanColumn__highlight-background: #{tint-color($o-action, 90%)};
--KanbanColumn__highlight-border: #{$o-action};
--o-view-nocontent-zindex: 1;
// ----------------------------------------------------------------------------
border-top: $border-width solid var(--Kanban-background);
background: var(--Kanban-background);
padding: var(--Kanban-padding);
@include media-breakpoint-down(md) {
--KanbanRecord-padding-h: #{$o-kanban-inside-hgutter * 2};
padding: 0px !important;
}
.o_kanban_record > div:not(.o_dropdown_kanban),
.o_kanban_quick_create {
border: 1px solid $border-color;
border: $border-width solid $border-color;
background-color: $o-view-background-color;
}
@@ -60,7 +64,7 @@
.o_kanban_record {
position: relative;
min-width: 150px;
margin: 0 0 -1px;
margin: 0 0 (-$border-width);
> div:not(.o_dropdown_kanban) {
padding: var(--KanbanRecord-padding-v) var(--KanbanRecord-padding-h);
@@ -68,16 +72,11 @@
height: 100%;
}
&:focus,
&:focus-within {
margin-bottom: 0; // 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($border-width * 2, auto, $border-width * 2, $border-width);
@include o-position-absolute(0, auto, 0, 0);
width: $o-kanban-color-border-width;
}
@@ -370,10 +369,10 @@
cursor: pointer;
}
&:focus,
&:focus-visible,
&:focus-within {
@include global-click-selector {
outline: thin solid mix(map-get($theme-colors, "primary"), map-get($grays, "400"));
outline: thin solid mix($o-main-link-color, map-get($grays, "300"));
outline-offset: -1px;
&:after {
@@ -450,23 +449,29 @@
// Kanban Grouped Layout
&.o_kanban_grouped {
--KanbanGroup-width: calc(var(--KanbanRecord--small-width) + (2 * var(--KanbanGroup-padding-h)));
min-height: 100%;
@include media-breakpoint-down(md) {
--KanbanGroup-width: 90%; // don't take full width to give a hint of next/previous column on smaller screens
min-height: initial;
height: 100%;
overflow: scroll hidden !important;
scroll-snap-type: x mandatory;
}
@include media-breakpoint-up(lg) {
--KanbanGroup-width: calc(var(--KanbanRecord-width) + (2 * var(--KanbanGroup-padding-h)));
}
.o_kanban_record {
width: 100%;
}
--KanbanGroup-width: 90%; // don't take full width to give a hint of next/previous column on smaller screens
@include media-breakpoint-up(md) {
--KanbanGroup-width: calc(var(--KanbanRecord-width) + (2 * var(--KanbanGroup-padding-h)));
.o_kanban_group {
background: var(--KanbanGroup-background);
}
.o_kanban_group,
@@ -481,8 +486,6 @@
// Kanban Grouped Layout - Column default
.o_kanban_group {
padding: 0 var(--KanbanGroup-padding-h) var(--KanbanGroup-padding-bottom);
.o_kanban_header > .o_kanban_header_title {
&:hover .o_kanban_config,
.o_kanban_config.show {
@@ -513,15 +516,15 @@
}
}
.o_kanban_group .o_kanban_header,
.o_quick_create_folded {
position: sticky; // keep it visible
z-index: 1;
.o_kanban_group, .o_column_quick_create {
padding: 0 var(--KanbanGroup-padding-h) var(--KanbanGroup-padding-bottom);
}
.o_kanban_group .o_kanban_header, .o_quick_create_folded {
background: inherit;
}
.o_kanban_group:not(.o_column_folded) .o_kanban_header {
background-color: $o-webclient-background-color;
.dropdown-item {
max-width: calc(var(--KanbanRecord-width) * 0.75);
text-overflow: ellipsis;
@@ -530,7 +533,7 @@
}
.o_quick_create_folded {
top: 1rem;
top: map-get($spacers, 3);
}
.o_column_quick_create,
@@ -540,39 +543,58 @@
}
.o_group_draggable .o_column_title {
cursor: move;
cursor: grab;
&:active {
cursor: grabbing;
}
}
// Kanban Grouped Layout - Column Folded
.o_kanban_group.o_column_folded {
// don't fill the width of record for a folded column
.o_kanban_record.o_draggable {
display: none !important;
}
// don't visually fold on smaller screens (aka. mobile)
@include media-breakpoint-up(md) {
@include o-kanban-slim-col;
--KanbanGroup-padding-h: 0;
background-color: var(--KanbanGroup-grouped-bg, #{$gray-200});
&, .o_column_unfold {
cursor: col-resize;
}
& + .o_kanban_group.o_column_folded {
margin-left: 1px;
}
.o_kanban_header_title {
opacity: 0.5;
.o_kanban_header {
padding: 0 floor($o-kanban-group-padding * 0.7);
}
.o_column_title {
@include o-kanban-v-title;
button.o_column_unfold {
padding: 0 .15rem;
.fa-caret-left {
margin-right: 0.2rem;
}
}
&:hover,
&.o_kanban_hover {
.o_kanban_header_title {
opacity: 1;
&:hover button.o_column_unfold {
padding: 0;
.fa-caret-left {
margin-right: 0.5rem;
}
}
.o_column_title {
@include o-position-absolute(map-get($spacers, 4));
transform-origin: left bottom 0;
transform: rotate(90deg);
overflow: visible;
}
}
}
@@ -587,14 +609,17 @@
// Kanban UN-grouped Layout
&.o_kanban_ungrouped {
min-height: 100%;
padding: var(--KanbanRecord-margin-v) var(--KanbanRecord-margin-h);
@include media-breakpoint-up(md) {
--Kanban-padding: var(--KanbanRecord-margin-v) var(--KanbanRecord-margin-h);
}
.o_kanban_record {
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 0 #{-$border-width};
margin: 0 0 #{-$border-width};
flex-basis: 100%;
}
@@ -64,7 +64,7 @@ export class KanbanHeader extends Component {
}
get groupName() {
const { groupByField, count, displayName, isFolded } = this.group;
const { groupByField, displayName } = this.group;
let name = displayName;
if (groupByField.type === "boolean") {
name = name ? this.env._t("Yes") : this.env._t("No");
@@ -78,7 +78,7 @@ export class KanbanHeader extends Component {
name = this.env._t("None");
}
}
return !this.env.isSmall && isFolded ? `${name} (${count})` : name;
return name;
}
get groupAggregate() {
@@ -2,13 +2,20 @@
<templates xml:space="preserve">
<t t-name="web.KanbanHeader" owl="1">
<div class="o_kanban_header top-0" t-ref="root" t-attf-class="{{ !env.isSmall and group.isFolded ? 'pt-3' : 'py-3' }}">
<div class="o_kanban_header_title position-relative d-flex align-items-baseline lh-lg text-900" t-on-mouseenter="onTitleMouseEnter" t-on-mouseleave="onTitleMouseLeave">
<span class="o_column_title flex-grow-1 d-inline-block mw-100 text-truncate fs-4 fw-bold align-top" t-att-class="{ 'overflow-visible': !env.isSmall and group.isFolded }" t-esc="groupName"/>
<div class="o_kanban_header position-sticky top-0 z-index-1" t-ref="root" t-attf-class="{{ !env.isSmall and group.isFolded ? 'pt-2' : 'py-3' }}">
<div class="o_kanban_header_title position-relative d-flex lh-lg" t-on-mouseenter="onTitleMouseEnter" t-on-mouseleave="onTitleMouseLeave">
<div t-if="!env.isSmall and group.isFolded" class="o_column_title d-flex align-items-center pt-1 fs-4 lh-1 text-nowrap opacity-50 opacity-100-hover">
<t t-esc="groupName"></t>
<span class="badge text-bg-500 rounded-pill ms-2" t-esc="group.count"></span>
</div>
<span t-if="!env.isSmall and !group.isFolded"
t-esc="groupName"
class="o_column_title flex-grow-1 d-inline-block mw-100 text-truncate fs-4 fw-bold align-top text-900"
/>
<t t-if="env.isSmall or !group.isFolded">
<Dropdown class="'o_kanban_config'" togglerClass="'btn p-0 border-0'" position="'bottom-end'" container="() => this.rootRef.el">
<Dropdown class="'o_kanban_config'" togglerClass="'btn px-2'" position="'bottom-end'" container="() => this.rootRef.el">
<t t-set-slot="toggler">
<i class="fa fa-gear fa-stack d-block text-center text-700 small opacity-50 opacity-100-hover cursor-pointer" role="img" aria-label="Settings" title="Settings" />
<i class="fa fa-gear opacity-50 opacity-100-hover" role="img" aria-label="Settings" title="Settings"/>
</t>
<DropdownItem t-if="!env.isSmall" class="{
'o_kanban_toggle_fold': true,
@@ -35,12 +42,13 @@
</DropdownItem>
</t>
</Dropdown>
<button t-if="canQuickCreate()" class="o_kanban_quick_add btn p-0 border-0 fs-6 shadow-none" t-on-click="() => this.quickCreate()">
<i class="fa fa-plus fa-stack d-block small text-end text-700 opacity-50 opacity-100-hover cursor-pointer" role="img" aria-label="Quick add" title="Quick add" />
<button t-if="canQuickCreate()" class="o_kanban_quick_add btn pe-2 me-n2" t-on-click="() => this.quickCreate()">
<i class="fa fa-plus opacity-75 opacity-100-hover" role="img" aria-label="Quick add" title="Quick add"/>
</button>
</t>
<button t-else="" class="o_column_unfold btn btn-link d-block mt-0 mt-md-2 p-0 border-0 small text-center text-700 cursor-pointer">
<i class="fa fa-arrows-h" role="img" aria-label="Unfold" title="Unfold" />
<button t-else="" class="o_column_unfold btn d-flex align-items-center justify-content-between flex-nowrap pt-2 pb-3 transition-base">
<i class="fa fa-caret-left lh-lg transition-base" role="img" aria-label="Unfold" title="Unfold" />
<i class="fa fa-caret-right lh-lg" role="img" aria-label="Unfold" title="Unfold" />
</button>
</div>
<div t-if="(env.isSmall or !group.isFolded) and group.progressBars.length" class="o_kanban_counter position-relative d-flex align-items-center justify-content-between" t-att-class="{ 'opacity-25': !group.count }">
@@ -17,7 +17,7 @@
<t t-if="showMenu">
<Dropdown class="'o_dropdown_kanban bg-transparent position-absolute end-0'"
menuClass="'dropdown-menu'"
togglerClass="'btn o-no-caret mt-0'"
togglerClass="'btn o-no-caret rounded-0'"
position="'bottom-end'"
title="'Dropdown menu'">
<t t-set-slot="toggler">
@@ -16,7 +16,7 @@
<button class="btn btn-primary o_kanban_add me-1" t-on-click="() => this.validate('add')">
Add
</button>
<button class="btn btn-primary o_kanban_edit me-1" t-on-click="() => this.validate('edit')">
<button class="btn btn-secondary o_kanban_edit me-1" t-on-click="() => this.validate('edit')">
Edit
</button>
<span class="flex-grow-1"></span>
@@ -295,10 +295,7 @@ export class KanbanRenderer extends Component {
classes.push("o_kanban_no_records");
}
if (!this.env.isSmall && group.isFolded) {
classes.push("o_column_folded");
}
if (!group.isFolded) {
classes.push("bg-100");
classes.push("o_column_folded", "flex-basis-0");
}
if (group.progressBars.length) {
classes.push("o_kanban_has_progressbar");
@@ -12,6 +12,7 @@
<t t-set="isGroupProcessing" t-value="isProcessing(group.id)" />
<div class="o_kanban_group flex-shrink-0 flex-grow-1 flex-md-grow-0"
t-att-class="getGroupClasses(group, isGroupProcessing)"
t-attf-class="{{ !env.isSmall and group.isFolded ? 'opacity-trigger-hover' : '' }}"
t-att-data-id="group.id"
t-on-click="(ev) => this.onGroupClick(group, ev)"
>
@@ -1,11 +1,10 @@
// ------- List renderer -------
.o_list_renderer {
--ListRenderer-table-padding-h: #{$table-cell-padding-x-sm};
--ListRenderer-thead-padding-v: #{$table-cell-padding-y * 1.25};
--ListRenderer-thead-bg-color: #{$gray-200};
--ListRenderer-table-padding-y: #{$table-cell-padding-x-sm};
--ListRenderer-thead-padding-y: #{map-get($spacers, 4)};
--ListRenderer-thead-bg-color: #{$o-webclient-background-color};
--ListRenderer-thead-border-end-color: #{$border-color};
--ListRenderer-thead-shadow: linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent);
--ListRenderer-tfoot-bg-color: #{$o-list-footer-bg-color};
// sticky header on desktop
@include media-breakpoint-up(md) {
@@ -14,26 +13,23 @@
.o_list_table thead {
@include o-position-sticky(0);
z-index: 1;
&:after {
@include o-position-absolute($left: 0, $right: 0);
height: map-get($spacers, 3);
border-top: $border-width solid $border-color;
background-image: var(--ListRenderer-thead-shadow);
transform: translateY(-#{$border-width}); // Compensate rendering misplacement
-moz-transform: translateY(0); // Firefox doesn't need rendering adjustments
pointer-events: none;
content: '';
}
}
}
th, td {
// This fixes a bug that was hidding part of cell borders on Firefox.
background-clip: padding-box;
}
.o_list_view & {
--ListRenderer-table-padding-h: #{$o-horizontal-padding};
--ListRenderer-thead-padding-y: #{$table-cell-padding-y-sm};
--ListRenderer-table-padding-y: #{$o-horizontal-padding};
}
.o_list_table {
background-color: $o-view-background-color;
--table-bg: #{$o-view-background-color};
// We need this to be collapse because we want to add a border on the rows
// for sale order/invoice lines of type section.
border-collapse: collapse;
@@ -41,11 +37,11 @@
> thead, > tbody, > tfoot {
> tr > :first-child {
padding-left: var(--ListRenderer-table-padding-h);
padding-left: var(--ListRenderer-table-padding-y);
}
> tr > :last-child {
padding-right: var(--ListRenderer-table-padding-h);
padding-right: var(--ListRenderer-table-padding-y);
}
> tr > :empty {
@@ -53,16 +49,14 @@
}
}
:not(.o_field_x2many_list) > & thead, tfoot {
tr > :not(:empty) {
padding-top: var(--ListRenderer-thead-padding-v);
padding-bottom: var(--ListRenderer-thead-padding-v);
}
}
thead {
background-color: var(--ListRenderer-thead-bg-color);
color: $headings-color;
th {
padding-top: var(--ListRenderer-thead-padding-y);
background-color: transparent;
color: $headings-color;
}
}
// Override BS default
@@ -120,15 +114,10 @@
}
tfoot {
// cursor: default;
color: $o-list-footer-color;
background-color: $o-list-footer-bg-color;
font-weight: $o-list-footer-font-weight;
border-top: 1px solid $table-border-color;
border-bottom: 1px solid $table-border-color;
> tr > td {
color: $o-list-footer-color;
background-color: $o-list-footer-bg-color;
font-weight: $o-list-footer-font-weight;
@include o-text-overflow(table-cell);
}
}
@@ -448,7 +437,7 @@
// first-child will be hidden so add left padding to second child
& + * {
padding-left: var(--ListRenderer-table-padding-h);
padding-left: var(--ListRenderer-table-padding-y);
}
}
}
@@ -14,7 +14,7 @@
<thead>
<tr>
<th t-if="hasSelectors" class="o_list_record_selector o_list_controller align-middle pe-1 cursor-pointer" tabindex="-1" t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)" t-on-click.stop="toggleSelection">
<CheckBox disabled="!!props.list.editedRecord or props.list.model.useSampleModel" value="selectAll" className="'d-flex'" onChange.bind="toggleSelection"/>
<CheckBox disabled="!!props.list.editedRecord or props.list.model.useSampleModel" value="selectAll" className="'d-flex m-0'" onChange.bind="toggleSelection"/>
</th>
<t t-foreach="state.columns" t-as="column" t-key="column.id">
<th t-if="column.type === 'field'"
@@ -2,7 +2,7 @@
<templates xml:space="preserve">
<t t-name="web.AnimatedNumber" owl="1">
<div class="o_animated_number ms-2 text-900 text-nowrap" t-att-class="state.value !== props.value and props.animationClass" t-att-title="props.title">
<div class="o_animated_number ms-2 text-900 text-nowrap cursor-default" t-att-class="state.value !== props.value and props.animationClass" t-att-title="props.title">
<t t-slot="prefix"/>
<span t-if="props.currency and props.currency.position === 'before'" t-esc="props.currency.symbol" class="ms-1"/>
<b t-esc="format(state.value)" />
@@ -461,7 +461,7 @@ QUnit.module("Views", (hooks) => {
assert.hasClass(
target.querySelector(".o_kanban_group"),
"bg-100",
"bg-200",
"o_kanban_group should have a background"
);
assert.hasClass(target.querySelector(".o_kanban_view"), "o_kanban_test");
@@ -12718,8 +12718,8 @@ QUnit.module("Views", (hooks) => {
assert.strictEqual(content.scrollLeft, 20);
assert.containsOnce(target, ".o_kanban_record.o_dragged");
// next 20 frames
await advanceFrame(20);
// next 40 frames
await advanceFrame(40);
// Should be at the end of the content
assert.strictEqual(content.clientWidth + content.scrollLeft, content.scrollWidth);
@@ -12739,8 +12739,8 @@ QUnit.module("Views", (hooks) => {
assert.containsOnce(target, ".o_kanban_record.o_dragged");
// next 20 frames
await advanceFrame(20);
// next 40 frames
await advanceFrame(40);
assert.strictEqual(content.scrollLeft, 0);