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

[IMP] web: KanbanView, introduce css variables

Browse Source 
This commit introduces css variables to facilitate the customization of
the view.

Part of the overall v16 SCSS optimization/restyle, task-2704984

task-2892062

Part-of: odoo/odoo#96195
This commit is contained in:
Brieuc-brd
2022-08-30 17:10:14 +02:00
parent ee46a9fda9
commit fbfc0dc63c
5 changed files with 89 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/legacy/scss/utils.scss
+1 -1
View File
@@ -289,7 +289,7 @@
} }
@mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) { @mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) {
margin: -1px -1px 1px; margin: -1px -1px 1px;
padding: $padding-base/2 $padding-base; padding: if(type-of($padding-base) == 'string', calc(#{$padding-base}/2) $padding-base, $padding-base/2 $padding-base);
border: 1px solid transparent; border: 1px solid transparent;
border-bottom: none; border-bottom: none;
vertical-align: top; vertical-align: top;
addons/web/static/src/views/kanban/kanban_column_progressbar.scss
+1 -1
View File
@@ -16,7 +16,7 @@
.o_kanban_load_more { .o_kanban_load_more {
order: 2; order: 2;
padding: $o-kanban-inside-vgutter*0.5 0 $o-kanban-inside-vgutter; padding: var(--KanbanRecord-padding-v) 0;
} }
.o_kanban_record:not(.oe_kanban_card_#{$class}) { .o_kanban_record:not(.oe_kanban_card_#{$class}) {
addons/web/static/src/views/kanban/kanban_controller.scss
+67 -62
View File
@@ -1,32 +1,45 @@
// ------- Kanban View Layout ------- // ------- Kanban View Layout -------
.o_kanban_renderer { .o_kanban_renderer {
// ----------------------------------------------------------------------------
// Default KanbanView values
--KanbanGroup-padding-h: #{$o-kanban-group-padding};
--KanbanGroup-padding-bottom: #{$o-kanban-group-padding};
--KanbanRecord-width: #{$o-kanban-default-record-width};
--KanbanRecord-margin-v: #{$o-kanban-record-margin};
--KanbanRecord-margin-h: #{$o-kanban-record-margin};
--KanbanRecord-padding-v: #{$o-kanban-inside-vgutter};
--KanbanRecord-padding-h: #{$o-kanban-inside-hgutter};
--KanbanRecord-gap-v: #{$o-kanban-inner-hmargin};
--KanbanRecord--small-width: #{$o-kanban-small-record-width};
--KanbanRecord__image-width: #{$o-kanban-image-width};
--KanbanRecord__image--fill-width: #{$o-kanban-image-fill-width};
--KanbanRecord__dropdown-gap: #{$border-width};
// ----------------------------------------------------------------------------
.dropdown, .dropdown,
.o_kanban_manage_button_section { .o_kanban_manage_button_section {
position: inherit; position: inherit;
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
--KanbanRecord-padding-h: #{$o-kanban-inside-hgutter * 2};
padding: 0px !important; padding: 0px !important;
} }
.o_kanban_record > div, .o_kanban_record > div,
.o_kanban_quick_create { .o_kanban_quick_create {
padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter; padding: var(--KanbanRecord-padding-v) var(--KanbanRecord-padding-h);
border: 1px solid $border-color; border: 1px solid $border-color;
background-color: $o-view-background-color; background-color: $o-view-background-color;
@include media-breakpoint-down(md) {
padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter-mobile;
}
&:focus,
&:focus-within {
z-index: 1; // show the shadow on top of the previous & next cards in grouped mode
outline: none;
}
} }
.o_kanban_quick_create { .o_kanban_quick_create {
margin: 0 $o-kanban-record-margin ($o-kanban-record-margin * 2); margin-bottom: calc(var(--KanbanRecord-margin-h) * 2);
.o_form_view .o_group.o_inner_group { .o_form_view .o_group.o_inner_group {
margin: 0; margin: 0;
@@ -43,18 +56,23 @@
height: 100%; height: 100%;
} }
&:focus,
&:focus-within {
z-index: 1; // show the shadow on top of the previous & next cards in grouped mode
}
// ------- Kanban Record, v11 Layout ------- // ------- Kanban Record, v11 Layout -------
// Records colours // Records colours
> div::after { > div::after {
content: ""; content: "";
@include o-position-absolute(0, auto, 0, 0); @include o-position-absolute($border-width * 2, auto, $border-width * 2, $border-width);
width: $o-kanban-color-border-width; width: $o-kanban-color-border-width;
} }
// Inner Sections // Inner Sections
.o_kanban_record_top, .o_kanban_record_top,
.o_kanban_record_body { .o_kanban_record_body {
margin-bottom: $o-kanban-inner-hmargin; margin-bottom: var(--KanbanRecord-gap-v);
} }
.o_kanban_record_top, .o_kanban_record_top,
@@ -90,7 +108,7 @@
.o_kanban_record_subtitle { .o_kanban_record_subtitle {
display: block; display: block;
margin-top: $o-kanban-inner-hmargin * 0.5; margin-top: calc(var(--KanbanRecord-gap-v) * 0.5);
i.fa[role="img"] { i.fa[role="img"] {
margin-right: 2px; margin-right: 2px;
@@ -148,15 +166,15 @@
.o_kanban_image_fill_left { .o_kanban_image_fill_left {
position: relative; position: relative;
margin-right: $o-kanban-inside-hgutter * 2; margin-right: var(--KanbanRecord-padding-h);
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
margin: { margin: {
top: $o-kanban-inside-vgutter * -1; top: calc(var(--KanbanRecord-padding-v) * -1);
bottom: $o-kanban-inside-vgutter * -1; bottom: calc(var(--KanbanRecord-padding-v) * -1);
left: $o-kanban-inside-hgutter * -1; left: calc(var(--KanbanRecord-padding-h) * -1);
} }
} }
flex: 1 0 $o-kanban-image-fill-width; flex: 1 0 var(--KanbanRecord__image--fill-width);
min-height: 95px; min-height: 95px;
background: { background: {
size: cover; size: cover;
@@ -174,9 +192,9 @@
// Eg. In partners list we use to fill user picture only, keeping the // Eg. In partners list we use to fill user picture only, keeping the
// default design for company logos. // default design for company logos.
.o_kanban_image { .o_kanban_image {
margin-right: $o-kanban-inside-hgutter * 2; margin-right: var(--KanbanRecord-padding-h);
flex: 0 0 $o-kanban-image-width; flex: 0 0 var(--KanbanRecord__image-width);
min-height: $o-kanban-image-width; min-height: var(--KanbanRecord__image-width);
align-self: center; align-self: center;
background: { background: {
size: cover; size: cover;
@@ -184,19 +202,9 @@
position: center; position: center;
} }
// On medium screen size, align 'o_kanban_image' to 'o_kanban_image_fill_left' elements.
@include media-breakpoint-up(md) {
$fill-notfill-gap: ($o-kanban-image-fill-width - $o-kanban-inside-hgutter * 2) -
$o-kanban-image-width;
margin: {
left: $fill-notfill-gap * 0.5;
right: $fill-notfill-gap * 2;
}
}
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
flex-basis: $o-kanban-image-fill-width; flex-basis: var(--KanbanRecord__image--fill-width);
min-height: $o-kanban-image-fill-width; min-height: var(--KanbanRecord__image--fill-width);
} }
// Reset immedialy after div padding // Reset immedialy after div padding
@@ -241,21 +249,25 @@
// ------- v11 Layout + generic layouts (~v10) ------- // ------- v11 Layout + generic layouts (~v10) -------
// Kanban Record - Dropdown // Kanban Record - Dropdown
.o_dropdown_kanban { .o_dropdown_kanban {
@include o-position-absolute($o-kanban-inside-vgutter, $o-kanban-inside-hgutter); @include o-position-absolute(
calc(var(--KanbanRecord-padding-v) + var(--KanbanRecord__dropdown-gap)),
calc(var(--KanbanRecord-padding-h) + var(--KanbanRecord__dropdown-gap))
);
visibility: hidden; visibility: hidden;
margin: (-$o-kanban-inside-vgutter) (-$o-kanban-inside-hgutter) 0 0; margin: calc(var(--KanbanRecord-padding-v) * -1)
calc(var(--KanbanRecord-padding-h) * -1) 0 0;
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
visibility: visible; visibility: visible;
} }
.dropdown-toggle { .dropdown-toggle {
@include o-kanban-dropdown; @include o-kanban-dropdown(var(--KanbanRecord-padding-h));
} }
&.show .dropdown-toggle { &.show .dropdown-toggle {
@include o-kanban-dropdown-open; @include o-kanban-dropdown-open;
} }
.dropdown-menu { .dropdown-menu {
margin-top: -2px; margin-top: -1px;
min-width: 11rem; min-width: 11rem;
} }
} }
@@ -274,7 +286,7 @@
.o_field_many2many_tags, .o_field_many2many_tags,
.o_kanban_tags { .o_kanban_tags {
display: block; display: block;
margin-bottom: $o-kanban-inner-hmargin; margin-bottom: var(--KanbanRecord-gap-v);
line-height: 1.2; line-height: 1.2;
word-break: break-all; word-break: break-all;
@@ -329,16 +341,12 @@
> button, > button,
> a { > a {
@include o-position-absolute( @include o-position-absolute(
$right: $o-kanban-record-margin, $right: var(--KanbanRecord-padding-h),
$bottom: $o-kanban-record-margin $bottom: var(--KanbanRecord-padding-v)
); );
@include media-breakpoint-down(md) {
right: $o-kanban-inside-hgutter-mobile;
}
} }
} }
// Kanban Record - Utility classes
&.oe_kanban_global_click, &.oe_kanban_global_click,
&.oe_kanban_global_click_edit, &.oe_kanban_global_click_edit,
.oe_kanban_global_click, .oe_kanban_global_click,
@@ -348,6 +356,10 @@
&:focus-within { &:focus-within {
outline: thin solid mix(map-get($theme-colors, "primary"), map-get($grays, "400")); outline: thin solid mix(map-get($theme-colors, "primary"), map-get($grays, "400"));
outline-offset: -1px; outline-offset: -1px;
&:after {
transform: translateX($border-width);
}
} }
} }
@@ -381,13 +393,10 @@
.o_kanban_image { .o_kanban_image {
float: left; float: left;
width: $o-kanban-image-width; width: var(--KanbanRecord__image-width);
+ div { + div {
padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter; padding-left: calc(var(--KanbanRecord__image-width) + var(--KanbanRecord-padding-h));
@include media-breakpoint-down(md) {
padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter-mobile;
}
} }
} }
@@ -399,7 +408,7 @@
min-width: 0; min-width: 0;
ul { ul {
margin-bottom: $o-kanban-inner-hmargin * 0.5; margin-bottom: calc(var(--KanbanRecord-gap-v) * 0.5);
padding-left: 0; padding-left: 0;
list-style: none; list-style: none;
font-size: $font-size-sm; font-size: $font-size-sm;
@@ -449,14 +458,14 @@
} }
&.o_kanban_small_column .o_kanban_group:not(.o_column_folded) { &.o_kanban_small_column .o_kanban_group:not(.o_column_folded) {
flex-basis: $o-kanban-small-record-width + 2 * $o-kanban-group-padding; flex-basis: calc(var(--KanbanRecord--small-width) + (2 * var(--KanbanGroup-padding-h)));
} }
} }
// Kanban Grouped Layout - Column default // Kanban Grouped Layout - Column default
.o_kanban_group { .o_kanban_group {
flex-basis: $o-kanban-default-record-width + 2 * $o-kanban-group-padding; flex-basis: calc(var(--KanbanRecord-width) + (2 * var(--KanbanGroup-padding-h)));
padding: 0 $o-kanban-group-padding $o-kanban-group-padding $o-kanban-group-padding; padding: 0 var(--KanbanGroup-padding-h) var(--KanbanGroup-padding-bottom);
.o_kanban_header > .o_kanban_header_title { .o_kanban_header > .o_kanban_header_title {
&:hover .o_kanban_config, &:hover .o_kanban_config,
@@ -511,11 +520,7 @@
// Kanban Grouped Layout - "Create new column" column // Kanban Grouped Layout - "Create new column" column
.o_column_quick_create { .o_column_quick_create {
flex: 0 0 $o-kanban-small-record-width + 2 * $o-kanban-group-padding; flex: 0 0 calc(var(--KanbanRecord--small-width) + (2 * var(--KanbanGroup-padding-h)));
.o_quick_create_unfolded {
padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter;
}
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
@@ -536,11 +541,11 @@
// Kanban UN-grouped Layout // Kanban UN-grouped Layout
&.o_kanban_ungrouped { &.o_kanban_ungrouped {
min-height: 100%; min-height: 100%;
padding: $o-kanban-record-margin ($o-horizontal-padding - $o-kanban-record-margin); padding: var(--KanbanRecord-margin-v) var(--KanbanRecord-margin-h);
.o_kanban_record { .o_kanban_record {
width: $o-kanban-default-record-width; width: var(--KanbanRecord-width);
margin: ($o-kanban-record-margin * 0.5) $o-kanban-record-margin; margin: calc(var(--KanbanRecord-margin-v) * 0.5) var(--KanbanRecord-margin-h);
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
margin: 0 0 -1px 0; margin: 0 0 -1px 0;
addons/web/static/src/views/kanban/kanban_dashboard.scss
+19 -8
View File
@@ -1,10 +1,18 @@
.o_kanban_dashboard:not(.o_legacy_kanban_view) { .o_kanban_dashboard:not(.o_legacy_kanban_view) {
// ----------------------------------------------------------------------------
// Customize kanbanView default values
--KanbanRecord-padding-v: #{$o-kanban-dashboard-vpadding};
--KanbanRecord-padding-h: #{$o-kanban-dashboard-hpadding};
--KanbanRecord__dropdown-gap: 0px;
// ----------------------------------------------------------------------------
.o_kanban_record > div { .o_kanban_record > div {
position: relative; position: relative;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: space-between; justify-content: space-between;
padding: $o-kanban-dashboard-vpadding $o-kanban-dashboard-hpadding;
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
margin-bottom: 10px; margin-bottom: 10px;
@@ -124,7 +132,7 @@
// Provide enough room for the dropdown-toggle // Provide enough room for the dropdown-toggle
.o_primary { .o_primary {
padding-right: $o-kanban-dashboard-hpadding*2; padding-right: calc(var(--KanbanRecord-padding-h) * 2);
} }
// Uniform titles // Uniform titles
@@ -159,7 +167,7 @@
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: space-between; justify-content: space-between;
margin-top: $o-kanban-dashboard-vpadding * 2; margin-top: calc(var(--KanbanRecord-padding-v) * 2);
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
@@ -180,14 +188,14 @@
} }
.o_kanban_primary_bottom { .o_kanban_primary_bottom {
margin-top: $o-kanban-dashboard-vpadding; margin-top: var(--KanbanRecord-padding-v);
margin-bottom: -$o-kanban-dashboard-vpadding; margin-bottom: calc(var(--KanbanRecord-padding-v) * -1);
&.bottom_block { &.bottom_block {
border-top: 1px solid map-get($grays, '300'); border-top: 1px solid map-get($grays, '300');
background-color: map-get($grays, '200'); background-color: map-get($grays, '200');
padding-top: $o-kanban-dashboard-vpadding; padding-top: var(--KanbanRecord-padding-v);
padding-bottom: $o-kanban-dashboard-vpadding; padding-bottom: var(--KanbanRecord-padding-v);
} }
} }
} }
@@ -198,7 +206,10 @@
} }
.o_favorite { .o_favorite {
@include o-position-absolute(3px, $left: 0); @include o-position-absolute(
$top: var(--KanbanRecord-padding-v),
$left: calc(var(--KanbanRecord-padding-h) - #{$o-horizontal-padding})
);
padding: $o-kanban-record-margin; padding: $o-kanban-record-margin;
} }
addons/web/static/src/views/kanban/kanban_examples_dialog.scss
+1 -1
View File
@@ -52,7 +52,7 @@
flex-basis: 100%; flex-basis: 100%;
.o_kanban_examples .o_kanban_examples_group .o_kanban_examples_ghost { .o_kanban_examples .o_kanban_examples_group .o_kanban_examples_ghost {
width: $o-kanban-small-record-width; width: var(--KanbanRecord--small-width);
} }
} }
} }