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

[FIX] web: Fix color of filtered kanban records

Browse Source 
This commit changes the style rules on grouped kanban records to apply
an outline on focus and a transparency effect when the progress bar
filter does not match the class of the record.

The rules on both kanban_column_progressbar files (legacy & new) have
also been wrapped in global kanban renderer classes to avoid styling
leaks.

closes odoo/odoo#99712

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
This commit is contained in:
Julien Mougenot
2022-09-08 01:07:51 +02:00
parent c674b40c02
commit c877cab866
3 changed files with 160 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/legacy/scss/kanban_column_progressbar.scss
+94 -92
View File
@@ -1,5 +1,28 @@
@keyframes legacy-kanban-counter-grow {
0% {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.1, 1.1, 1.1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@mixin o-kanban-css-filter($class, $accent-color) {
@keyframes legacy-kanban-counter-grow-huge {
0% {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.3, 1.3, 1.3);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@mixin o-legacy-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%);
@@ -40,104 +63,83 @@
}
}
// If columns has the progressbar, adapt the layout
.o_legacy_kanban_view .o_kanban_group.o_kanban_has_progressbar {
> .o_kanban_header .o_kanban_header_title {
height: $o-kanban-header-title-height*0.6;
margin-top: 5px;
}
&.o_kanban_no_records {
.o_legacy_kanban_counter {
opacity: 0.3;
.o_legacy_kanban_view {
// If columns has the progressbar, adapt the layout
.o_kanban_group.o_kanban_has_progressbar {
> .o_kanban_header .o_kanban_header_title {
height: $o-kanban-header-title-height*0.6;
margin-top: 5px;
}
}
}
.o_legacy_kanban_counter {
position: relative;
display: flex;
align-items: center;
transition: opacity 0.3s ease 0s;
margin-bottom: $o-kanban-record-margin*2;
> .o_kanban_counter_progress {
width: 76%;
height: $font-size-sm;
margin-bottom: 0;
background-color: map-get($grays, '300');
box-shadow: none;
.progress-bar {
margin-bottom: 0;
box-shadow: none;
cursor: pointer;
&.o_kanban_no_records {
.o_legacy_kanban_counter {
opacity: 0.3;
}
}
}
> .o_kanban_counter_side {
width: 21%;
margin-left: 3%;
color: $headings-color;
text-align: right;
white-space: nowrap;
transform-origin: right center;
&.o_kanban_grow {
animation: grow 1s ease 0s 1 normal none running;
}
&.o_kanban_grow_huge {
animation: grow_huge 1s ease 0s 1 normal none running;
}
// Target currency icon
> span {
margin-left: 2px;
}
}
}
.o_column_folded .o_legacy_kanban_counter {
display: none;
}
.o_legacy_kanban_view .o_kanban_group {
@include o-kanban-css-filter(success, map-get($theme-colors, 'success'));
@include o-kanban-css-filter(warning, map-get($theme-colors, 'warning'));
@include o-kanban-css-filter(danger, map-get($theme-colors, 'danger'));
@include o-kanban-css-filter(info, map-get($theme-colors, 'info'));
@include o-kanban-css-filter(muted, map-get($theme-colors, 'dark'));
&.o_kanban_group_show {
.o_legacy_kanban_counter {
position: relative;
display: flex;
flex-flow: column nowrap;
align-items: center;
transition: opacity 0.3s ease 0s;
margin-bottom: $o-kanban-record-margin*2;
> * {
flex: 0 0 auto;
> .o_kanban_counter_progress {
width: 76%;
height: $font-size-sm;
margin-bottom: 0;
background-color: map-get($grays, '300');
box-shadow: none;
.progress-bar {
margin-bottom: 0;
box-shadow: none;
cursor: pointer;
}
}
> .o_kanban_counter_side {
width: 21%;
margin-left: 3%;
color: $headings-color;
text-align: right;
white-space: nowrap;
transform-origin: right center;
&.o_kanban_grow {
animation: legacy-kanban-counter-grow 1s ease 0s 1 normal none running;
}
&.o_kanban_grow_huge {
animation: legacy-kanban-counter-grow-huge 1s ease 0s 1 normal none running;
}
// Target currency icon
> span {
margin-left: 2px;
}
}
}
.o_column_folded .o_legacy_kanban_counter {
display: none;
}
.o_kanban_group {
@include o-legacy-kanban-css-filter(success, map-get($theme-colors, 'success'));
@include o-legacy-kanban-css-filter(warning, map-get($theme-colors, 'warning'));
@include o-legacy-kanban-css-filter(danger, map-get($theme-colors, 'danger'));
@include o-legacy-kanban-css-filter(info, map-get($theme-colors, 'info'));
@include o-legacy-kanban-css-filter(muted, map-get($theme-colors, 'dark'));
&.o_kanban_group_show {
display: flex;
flex-flow: column nowrap;
> * {
flex: 0 0 auto;
}
}
}
}
@keyframes grow {
0% {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.1, 1.1, 1.1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@keyframes grow_huge {
0% {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.3, 1.3, 1.3);
}
100% {
transform: scale3d(1, 1, 1);
}
}
addons/web/static/src/views/kanban/kanban_column_progressbar.scss
+45 -33
View File
@@ -1,3 +1,14 @@
@keyframes kanban-counter-grow {
30% {
transform: scale3d(1.1, 1.1, 1.1);
}
}
@keyframes kanban-counter-grow-huge {
30% {
transform: scale3d(1.3, 1.3, 1.3);
}
}
@mixin o-kanban-css-filter($class, $accent-color) {
// Provide CSS reordering and highlight
@@ -5,7 +16,8 @@
$mix-soft: mix($accent-color, $o-webclient-background-color, 5%);
$mix-full: mix($accent-color, $o-webclient-background-color);
&, .o_kanban_header {
&,
.o_kanban_header {
background-color: $mix-soft;
border-color: $mix-full;
}
@@ -27,42 +39,42 @@
}
}
.o_kanban_counter {
transition: opacity 0.3s ease 0s;
.o_kanban_renderer {
> .o_kanban_counter_progress {
height: $font-size-sm;
}
.o_kanban_counter {
transition: opacity 0.3s ease 0s;
> .o_kanban_counter_side {
transform-origin: right center;
&.o_kanban_grow {
animation: grow 1s ease 0s 1 normal none running;
> .o_kanban_counter_progress {
height: $font-size-sm;
}
&.o_kanban_grow_huge {
animation: grow_huge 1s ease 0s 1 normal none running;
> .o_kanban_counter_side {
transform-origin: right center;
&.o_kanban_grow {
animation: kanban-counter-grow 1s ease 0s 1 normal none running;
}
&.o_kanban_grow_huge {
animation: kanban-counter-grow-huge 1s ease 0s 1 normal none running;
}
}
}
.o_kanban_group {
@include o-kanban-css-filter(success, map-get($theme-colors, "success"));
@include o-kanban-css-filter(warning, map-get($theme-colors, "warning"));
@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"));
&.o_kanban_group_show {
display: flex;
flex-flow: column nowrap;
> * {
flex: 0 0 auto;
}
}
}
}
.o_kanban_view .o_kanban_group {
@include o-kanban-css-filter(success, map-get($theme-colors, 'success'));
@include o-kanban-css-filter(warning, map-get($theme-colors, 'warning'));
@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'));
}
@keyframes grow {
30% {
transform: scale3d(1.1, 1.1, 1.1);
}
}
@keyframes grow_huge {
30% {
transform: scale3d(1.3, 1.3, 1.3);
}
}
addons/web/static/src/views/kanban/kanban_controller.scss
+21 -9
View File
@@ -20,7 +20,7 @@
--KanbanRecord__dropdown-gap: #{$border-width};
--KanbanColumn__highlight-background: #{rgba($o-info, .05)};
--KanbanColumn__highlight-background: #{rgba($o-info, 0.05)};
--KanbanColumn__highlight-border: #{$o-info};
// ----------------------------------------------------------------------------
@@ -351,13 +351,22 @@
}
}
&.oe_kanban_global_click,
&.oe_kanban_global_click_edit,
.oe_kanban_global_click,
.oe_kanban_global_click_edit {
@mixin global-click-selector {
&.oe_kanban_global_click,
&.oe_kanban_global_click_edit,
.oe_kanban_global_click,
.oe_kanban_global_click_edit {
@content;
}
}
@include global-click-selector {
cursor: pointer;
&:focus,
&:focus-within {
}
&:focus,
&:focus-within {
@include global-click-selector {
outline: thin solid mix(map-get($theme-colors, "primary"), map-get($grays, "400"));
outline-offset: -1px;
@@ -400,7 +409,9 @@
width: var(--KanbanRecord__image-width);
+ div {
padding-left: calc(var(--KanbanRecord__image-width) + var(--KanbanRecord-padding-h));
padding-left: calc(
var(--KanbanRecord__image-width) + var(--KanbanRecord-padding-h)
);
}
}
@@ -490,7 +501,8 @@
}
&.o_kanban_hover {
background-color: var(--KanbanColumn__highlight-background);
box-shadow: -1px 0px 0px 0px var(--KanbanColumn__highlight-border) inset, 1px 0px 0px 0px var(--KanbanColumn__highlight-border) inset;
box-shadow: -1px 0px 0px 0px var(--KanbanColumn__highlight-border) inset,
1px 0px 0px 0px var(--KanbanColumn__highlight-border) inset;
}
}