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) {
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-bottom: none;
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 {
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}) {
addons/web/static/src/views/kanban/kanban_controller.scss
+67 -62
View File
@@ -1,32 +1,45 @@
// ------- Kanban View Layout -------
.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,
.o_kanban_manage_button_section {
position: inherit;
}
@include media-breakpoint-down(md) {
--KanbanRecord-padding-h: #{$o-kanban-inside-hgutter * 2};
padding: 0px !important;
}
.o_kanban_record > div,
.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;
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 {
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 {
margin: 0;
@@ -43,18 +56,23 @@
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 -------
// Records colours
> div::after {
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;
}
// Inner Sections
.o_kanban_record_top,
.o_kanban_record_body {
margin-bottom: $o-kanban-inner-hmargin;
margin-bottom: var(--KanbanRecord-gap-v);
}
.o_kanban_record_top,
@@ -90,7 +108,7 @@
.o_kanban_record_subtitle {
display: block;
margin-top: $o-kanban-inner-hmargin * 0.5;
margin-top: calc(var(--KanbanRecord-gap-v) * 0.5);
i.fa[role="img"] {
margin-right: 2px;
@@ -148,15 +166,15 @@
.o_kanban_image_fill_left {
position: relative;
margin-right: $o-kanban-inside-hgutter * 2;
margin-right: var(--KanbanRecord-padding-h);
@include media-breakpoint-up(sm) {
margin: {
top: $o-kanban-inside-vgutter * -1;
bottom: $o-kanban-inside-vgutter * -1;
left: $o-kanban-inside-hgutter * -1;
top: calc(var(--KanbanRecord-padding-v) * -1);
bottom: calc(var(--KanbanRecord-padding-v) * -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;
background: {
size: cover;
@@ -174,9 +192,9 @@
// Eg. In partners list we use to fill user picture only, keeping the
// default design for company logos.
.o_kanban_image {
margin-right: $o-kanban-inside-hgutter * 2;
flex: 0 0 $o-kanban-image-width;
min-height: $o-kanban-image-width;
margin-right: var(--KanbanRecord-padding-h);
flex: 0 0 var(--KanbanRecord__image-width);
min-height: var(--KanbanRecord__image-width);
align-self: center;
background: {
size: cover;
@@ -184,19 +202,9 @@
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) {
flex-basis: $o-kanban-image-fill-width;
min-height: $o-kanban-image-fill-width;
flex-basis: var(--KanbanRecord__image--fill-width);
min-height: var(--KanbanRecord__image--fill-width);
}
// Reset immedialy after div padding
@@ -241,21 +249,25 @@
// ------- v11 Layout + generic layouts (~v10) -------
// Kanban Record - Dropdown
.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;
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) {
visibility: visible;
}
.dropdown-toggle {
@include o-kanban-dropdown;
@include o-kanban-dropdown(var(--KanbanRecord-padding-h));
}
&.show .dropdown-toggle {
@include o-kanban-dropdown-open;
}
.dropdown-menu {
margin-top: -2px;
margin-top: -1px;
min-width: 11rem;
}
}
@@ -274,7 +286,7 @@
.o_field_many2many_tags,
.o_kanban_tags {
display: block;
margin-bottom: $o-kanban-inner-hmargin;
margin-bottom: var(--KanbanRecord-gap-v);
line-height: 1.2;
word-break: break-all;
@@ -329,16 +341,12 @@
> button,
> a {
@include o-position-absolute(
$right: $o-kanban-record-margin,
$bottom: $o-kanban-record-margin
$right: var(--KanbanRecord-padding-h),
$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_edit,
.oe_kanban_global_click,
@@ -348,6 +356,10 @@
&:focus-within {
outline: thin solid mix(map-get($theme-colors, "primary"), map-get($grays, "400"));
outline-offset: -1px;
&:after {
transform: translateX($border-width);
}
}
}
@@ -381,13 +393,10 @@
.o_kanban_image {
float: left;
width: $o-kanban-image-width;
width: var(--KanbanRecord__image-width);
+ div {
padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter;
@include media-breakpoint-down(md) {
padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter-mobile;
}
padding-left: calc(var(--KanbanRecord__image-width) + var(--KanbanRecord-padding-h));
}
}
@@ -399,7 +408,7 @@
min-width: 0;
ul {
margin-bottom: $o-kanban-inner-hmargin * 0.5;
margin-bottom: calc(var(--KanbanRecord-gap-v) * 0.5);
padding-left: 0;
list-style: none;
font-size: $font-size-sm;
@@ -449,14 +458,14 @@
}
&.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
.o_kanban_group {
flex-basis: $o-kanban-default-record-width + 2 * $o-kanban-group-padding;
padding: 0 $o-kanban-group-padding $o-kanban-group-padding $o-kanban-group-padding;
flex-basis: calc(var(--KanbanRecord-width) + (2 * var(--KanbanGroup-padding-h)));
padding: 0 var(--KanbanGroup-padding-h) var(--KanbanGroup-padding-bottom);
.o_kanban_header > .o_kanban_header_title {
&:hover .o_kanban_config,
@@ -511,11 +520,7 @@
// Kanban Grouped Layout - "Create new column" column
.o_column_quick_create {
flex: 0 0 $o-kanban-small-record-width + 2 * $o-kanban-group-padding;
.o_quick_create_unfolded {
padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter;
}
flex: 0 0 calc(var(--KanbanRecord--small-width) + (2 * var(--KanbanGroup-padding-h)));
}
@include media-breakpoint-down(md) {
@@ -536,11 +541,11 @@
// Kanban UN-grouped Layout
&.o_kanban_ungrouped {
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 {
width: $o-kanban-default-record-width;
margin: ($o-kanban-record-margin * 0.5) $o-kanban-record-margin;
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;
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) {
// ----------------------------------------------------------------------------
// 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 {
position: relative;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
padding: $o-kanban-dashboard-vpadding $o-kanban-dashboard-hpadding;
@include media-breakpoint-down(md) {
margin-bottom: 10px;
@@ -124,7 +132,7 @@
// Provide enough room for the dropdown-toggle
.o_primary {
padding-right: $o-kanban-dashboard-hpadding*2;
padding-right: calc(var(--KanbanRecord-padding-h) * 2);
}
// Uniform titles
@@ -159,7 +167,7 @@
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
margin-top: $o-kanban-dashboard-vpadding * 2;
margin-top: calc(var(--KanbanRecord-padding-v) * 2);
padding-right: 0;
padding-left: 0;
@@ -180,14 +188,14 @@
}
.o_kanban_primary_bottom {
margin-top: $o-kanban-dashboard-vpadding;
margin-bottom: -$o-kanban-dashboard-vpadding;
margin-top: var(--KanbanRecord-padding-v);
margin-bottom: calc(var(--KanbanRecord-padding-v) * -1);
&.bottom_block {
border-top: 1px solid map-get($grays, '300');
background-color: map-get($grays, '200');
padding-top: $o-kanban-dashboard-vpadding;
padding-bottom: $o-kanban-dashboard-vpadding;
padding-top: var(--KanbanRecord-padding-v);
padding-bottom: var(--KanbanRecord-padding-v);
}
}
}
@@ -198,7 +206,10 @@
}
.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;
}
addons/web/static/src/views/kanban/kanban_examples_dialog.scss
+1 -1
View File
@@ -52,7 +52,7 @@
flex-basis: 100%;
.o_kanban_examples .o_kanban_examples_group .o_kanban_examples_ghost {
width: $o-kanban-small-record-width;
width: var(--KanbanRecord--small-width);
}
}
}