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

[MERGE][IMP] web, *: Kanban view, review and simplify scss

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

revamped apps/views :
- Kanban
- [hr]
- [maintenance]
- [utm]

Requires:
- https://github.com/odoo/enterprise/pull/29842

task-2892062

--
I confirm I have signed the CLA and read the PR guidelines at www.odoo.com/submit-pr

closes odoo/odoo#96195

Related: odoo/enterprise#29842
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
This commit is contained in:
Odoo's Mergebot
2022-08-30 17:10:15 +02:00
committed by GitHub
parent f957cb2bc0 0187b41ea4
commit 056fb85e33
27 changed files with 242 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/hr/static/src/scss/hr.scss
+2 -62
View File
@@ -1,66 +1,6 @@
.o_web_client .o_hr_employee_kanban {
.o_follow_btn.o_following {
.o_unfollow {
display: none;
}
&:hover {
.o_following {
display: none;
}
.o_unfollow {
display: inline;
}
}
}
.o_employee_summary_icons > span {
white-space: nowrap;
}
.oe_kanban_content.fixed-bottom {
z-index: 100;
}
.hr_activity_container {
margin-bottom: 2px;
margin-right: -3px;
}
.o_hr_employee_kanban_bottom {
//Prevent bottom row from preventing to click on buttons
pointer-events: none;
.oe_kanban_bottom_right {
pointer-events: auto;
}
}
}
.o_kanban_dashboard.o_hr_department_kanban {
&.o_kanban_ungrouped {
.o_kanban_record {
width: 450px;
.o_kanban_primary_bottom.bottom_block {
background-color: unset !important;
}
}
}
.o_kanban_group {
&:not(.o_column_folded) {
width: 350px + 2*$o-kanban-group-padding;
@include media-breakpoint-down(md) {
width: 100%;
}
}
}
}
.hr_presence {
font-size: 0.75em;
vertical-align: middle;
--KanbanRecord-width: 450px;
--KanbanRecord-width-small: 350px;
}
.o_employee_form {
addons/hr/views/hr_department_views.xml
+1 -1
View File
@@ -65,7 +65,7 @@
<field name="name">hr.department.kanban</field>
<field name="model">hr.department</field>
<field name="arch" type="xml">
<kanban class="oe_background_grey o_kanban_dashboard o_hr_department_kanban" sample="1">
<kanban class="oe_background_grey o_kanban_dashboard o_hr_department_kanban o_kanban_small_column" sample="1">
<field name="name"/>
<field name="company_id"/>
<field name="manager_id"/>
addons/hr/views/hr_employee_public_views.xml
+2 -2
View File
@@ -128,7 +128,7 @@
<templates>
<t t-name="kanban-box">
<div class="oe_kanban_global_click o_kanban_record_has_image_fill o_hr_kanban_record">
<field name="image_1024" class="o_kanban_image_fill_left" preview_image="image_128"
<field name="image_1024" class="o_kanban_image_fill_left d-block" preview_image="image_128"
widget="background_image" options="{'zoom': true, 'zoom_delay': 1000}"/>
<div class="oe_kanban_details">
@@ -175,7 +175,7 @@
<li t-if="record.work_email.raw_value"><field name="work_email" /></li>
<li t-if="record.work_phone.raw_value" class="o_force_ltr"><field name="work_phone" /></li>
</ul>
<div class="oe_kanban_content position-absolute fixed-bottom me-2">
<div class="oe_kanban_content position-absolute start-0 bottom-0 end-0 me-2">
<div class="o_kanban_record_bottom">
<div class="oe_kanban_bottom_left"/>
<div class="oe_kanban_bottom_right">
addons/hr/views/hr_employee_views.xml
+9 -9
View File
@@ -65,12 +65,12 @@
<field name="name" placeholder="Employee's Name" required="True" style="font-size: min(4vw, 2.6rem);" />
<field name="last_activity_time" invisible="1"/>
<field name="last_activity" invisible="1"/>
<div id="hr_presence_status" attrs="{'invisible': ['|', ('last_activity', '=', False), ('user_id', '=', False)]}">
<div role="img" class="fa fa-fw fa-circle text-success o_button_icon hr_presence" attrs="{'invisible': [('hr_presence_state', '!=', 'present')]}" aria-label="Available" title="Available"/>
<div role="img" class="fa fa-2xs fa-fw fa-circle text-warning o_button_icon hr_presence" attrs="{'invisible': [('hr_presence_state', '!=', 'to_define')]}" aria-label="Away" title="Away"/>
<div role="img" class="fa fa-2xs fa-fw fa-circle text-danger o_button_icon hr_presence" attrs="{'invisible': [('hr_presence_state', '!=', 'absent')]}" aria-label="Not available" title="Not available"/>
<div id="hr_presence_status" attrs="{'invisible': ['|', ('last_activity', '=', False), ('user_id', '=', False)]}" class="ms-1">
<small role="img" class="fa fa-fw fa-circle text-success o_button_icon hr_presence align-middle fs-6" attrs="{'invisible': [('hr_presence_state', '!=', 'present')]}" aria-label="Available" title="Available"/>
<small role="img" class="fa fa-fw fa-circle text-warning o_button_icon hr_presence align-middle fs-6" attrs="{'invisible': [('hr_presence_state', '!=', 'to_define')]}" aria-label="Away" title="Away"/>
<small role="img" class="fa fa-fw fa-circle text-danger o_button_icon hr_presence align-middle fs-6" attrs="{'invisible': [('hr_presence_state', '!=', 'absent')]}" aria-label="Not available" title="Not available"/>
</div>
<a title="Chat" icon="fa-comments" t-on-click.prevent="() => openChat(props.record.resId)" href="#" class="ml8" invisible="not context.get('chat_icon')" attrs="{'invisible': [('user_id','=', False)]}" role="button"><i class="fa fa-comments"/></a>
<a title="Chat" icon="fa-comments" t-on-click.prevent="() => openChat(props.record.resId)" href="#" class="ml8 o_employee_chat_btn" invisible="not context.get('chat_icon')" attrs="{'invisible': [('user_id','=', False)]}" role="button"><i class="fa fa-comments align-middle fs-6"/></a>
</h1>
<h2>
<field name="job_title" placeholder="Job Position" />
@@ -269,7 +269,7 @@
<templates>
<t t-name="kanban-box">
<div class="oe_kanban_global_click o_kanban_record_has_image_fill o_hr_kanban_record">
<field name="image_1024" class="o_kanban_image_fill_left" preview_image="image_128"
<field name="image_1024" class="o_kanban_image_fill_left d-block" preview_image="image_128"
widget="background_image" options="{'zoom': true, 'zoom_delay': 1000}"/>
<div class="oe_kanban_details">
@@ -324,12 +324,12 @@
<li t-if="record.work_phone.raw_value" class="o_force_ltr"><field name="work_phone" /></li>
</ul>
</div>
<div class="oe_kanban_content position-absolute fixed-bottom me-2 o_hr_employee_kanban_bottom">
<div class="oe_kanban_content o_hr_employee_kanban_bottom position-absolute bottom-0 start-0 end-0 me-2 pe-none">
<div class="o_kanban_record_bottom">
<div class="oe_kanban_bottom_left"/>
<div class="oe_kanban_bottom_right float-end">
<div class="oe_kanban_bottom_right float-end pe-auto">
<a title="Chat" icon="fa-comments" href="#" t-on-click.prevent="() => props.record.openChat(props.record.resId)" class="ml8" attrs="{'invisible': [('user_id','=', False)]}" role="button"><i class="fa fa-comments"/></a>
<div class="hr_activity_container">
<div class="hr_activity_container mb-1 me-n1">
<field name="activity_ids" widget="kanban_activity"/>
</div>
</div>
addons/maintenance/static/src/scss/maintenance_team_dashboard.scss
+2 -4
View File
@@ -1,5 +1,3 @@
.o_kanban_renderer.o_kanban_ungrouped.o_kanban_dashboard.o_maintenance_team_kanban {
.o_kanban_record {
width: 420px;
}
.o_kanban_renderer.o_maintenance_team_kanban {
--KanbanRecord-width: 420px;
}
addons/utm/static/src/scss/utm_views.scss
+6 -19
View File
@@ -1,27 +1,14 @@
.o_utm_kanban {
.o_kanban_group {
padding: 0 ($grid-gutter-width * .25) $grid-gutter-width;
&:not(.o_column_folded) {
width: 380px;
}
}
.o_kanban_renderer.o_utm_kanban {
--KanbanRecord-width: #{380px - 2 * ($grid-gutter-width * .25)};
--KanbanGroup-padding-h: #{$grid-gutter-width * .25};
--KanbanGroup-padding-bottom: #{$grid-gutter-width};
#o_utm_actions {
margin: 0 ($o-kanban-dashboard-hpadding * -.5);
margin: 0 calc(var(--KanbanRecord-padding-h) * -1);
> a {
border-color: rgba($border-color, .5);
padding: ($o-kanban-dashboard-hpadding * .25) ($o-kanban-dashboard-hpadding * .5);
padding: var(--KanbanRecord-gap-inner-v) var(--KanbanRecord-padding-h);
white-space: nowrap;
}
> :first-child {
border-left: 0;
}
> :last-child {
border-right: 0;
}
}
}
addons/utm/views/utm_campaign_views.xml
+1 -1
View File
@@ -107,7 +107,7 @@
</div>
<div class="o_kanban_record_body">
<field name="tag_ids" widget="many2many_tags" options="{'color_field': 'color'}"/>
<ul id="o_utm_actions" class="list-group list-group-horizontal"/>
<ul id="o_utm_actions" class="list-group list-group-horizontal my-0"/>
</div>
<div class="o_kanban_record_bottom h5 mt-2 mb-0">
<div id="utm_statistics" class="d-flex flex-grow-1 text-600 mt-1"/>
addons/web/static/src/legacy/scss/kanban_dashboard.scss
+1
View File
@@ -19,6 +19,7 @@
// ------- Generic layout adaptations -------
.container {
width: 100%;
max-width: none;
}
// ------- Dropdown toggle & menu -------
addons/web/static/src/legacy/scss/kanban_examples_dialog.scss
+5 -24
View File
@@ -45,19 +45,15 @@
// container ghost card in background
.o_kanban_example_background_container {
display: flex;
padding: 0px;
opacity: 0.4;
// content
.o_kanban_example_background {
flex: 1 1 100%;
flex-basis: 100%;
.o_kanban_examples {
.o_kanban_examples_group {
.o_kanban_examples_ghost {
width: 224px;
margin-bottom: 10px;
width: $o-kanban-small-record-width;
}
}
}
@@ -67,31 +63,16 @@
// kanban ghost card
.o_kanban_examples {
display: flex;
padding: 0 6px;
.o_kanban_examples_group {
flex: 1 1 100%;
margin: 10px;
flex-basis: 100%;
.o_kanban_examples_ghost {
padding: 5px;
margin-top: -1px;
border: thin solid map-get($grays, '300');
background-color: white;
.o_ghost_content {
height: 12px;
background: map-get($grays, '300');
&.o_ghost_tag {
display: inline-block;
width: 40%;
margin-top: 10px;
}
&.o_collapse {
margin-top: -1px;
}
.o_ghost_avatar {
height: 20px;
width: 20px;
margin-top: 6px;
}
}
}
addons/web/static/src/legacy/scss/kanban_view.scss
+1 -6
View File
@@ -465,7 +465,6 @@
}
.o_kanban_quick_add i {
@include o-kanban-icon;
margin-left: $o-kanban-inside-hgutter*2;
}
@@ -481,10 +480,6 @@
@include media-breakpoint-down(md) {
visibility: visible;
}
i {
@include o-kanban-icon;
}
}
}
@@ -521,7 +516,7 @@
}
.o_column_unfold {
@include o-kanban-icon(1);
display: block;
}
}
addons/web/static/src/legacy/scss/primary_variables.scss
-22
View File
@@ -145,28 +145,6 @@ $o-datepicker-week-color: #8f8f8f !default;
$o-card-body-bg-opacity: 0.9 !default;
// Kanban
$o-kanban-default-record-width: 300px !default;
$o-kanban-small-record-width: 240px !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: 8px !default;
$o-kanban-inside-hgutter: 8px !default;
$o-kanban-color-border-width: 2px !default;
$o-kanban-inner-hmargin: 5px !default;
$o-kanban-progressbar-height: 20px !default;
$o-kanban-mobile-tabs-height: 40px !default;
$o-kanban-mobile-empty-height: $o-kanban-image-width !default;
// ------- Kanban dashboard variables -------
// Used to manage spacing in complex dropdown menu
$o-kanban-dashboard-dropdown-complex-gap: 5px !default;
// Border-radius
$o-border-radius: .25rem !default;
addons/web/static/src/legacy/scss/secondary_variables.scss
-14
View File
@@ -33,17 +33,3 @@ $o-datepicker-week-bg-color: lighten($o-datepicker-week-color, 30%) !default;
// is the minimal width of the default form view design for md/lg sizes
$o-form-sheet-min-width: 990px !default;
$o-form-separator-color: invert($o-view-background-color, 10%) !default;
// Kanban
$o-kanban-record-margin: $o-horizontal-padding / 2 !default;
$o-kanban-group-padding: $o-horizontal-padding !default; // Cannot be higher than this
$o-kanban-inside-hgutter-mobile: $o-horizontal-padding !default;
// ------- Kanban dashboard variables -------
// Since rows and containers are used inside cards, we're
// forced to set the padding relative to the grid system.
$o-kanban-dashboard-hpadding: $o-horizontal-padding !default;
$o-kanban-dashboard-vpadding: $o-horizontal-padding / 2 !default;
addons/web/static/src/legacy/scss/utils.scss
+1 -11
View File
@@ -237,14 +237,6 @@
}
// ------- Kanban grouped mixins -------
@mixin o-kanban-icon($base-opacity: 0.5) {
display: block;
text-align: center;
color: $o-main-text-color;
font-size: $font-size-sm;
cursor: pointer;
@include o-hover-opacity($base-opacity);
}
@mixin o-kanban-tag-color {
@for $size from 1 through length($o-colors) {
// Note: the first color is supposed to be invisible if there is a color
@@ -285,8 +277,6 @@
transform-origin: left bottom 0;
transform: rotate(90deg);
overflow: visible;
white-space: nowrap;
font-size: 15px;
}
// ------- Kanban records mixins -------
@@ -299,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/legacy/xml/kanban.xml
+19 -19
View File
@@ -13,10 +13,10 @@
role="feed" t-attf-aria-labelledby="kanban_header_#{widget.id or widget.db_id}">
<div class="o_kanban_header">
<div class="o_kanban_header_title">
<span t-attf-id="#kanban_header_#{widget.id or widget.db_id}" class="o_column_title"><t t-esc="widget.title"/></span>
<span class="o_column_unfold"><i class="fa fa-arrows-h" role="img" aria-label="Unfold" title="Unfold"/></span>
<span t-attf-id="#kanban_header_#{widget.id or widget.db_id}" class="o_column_title" t-attf-class="{{ !widget.isMobile and widget.folded ? 'fs-4 overflow-visible' : '' }}"><t t-esc="widget.title"/></span>
<button class="o_column_unfold btn btn-link 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>
<span class="o_kanban_config dropdown">
<a class="dropdown-toggle o-no-caret" data-bs-toggle="dropdown" href="#"><i class="fa fa-gear" role="img" aria-label="Settings" title="Settings"/></a>
<a class="dropdown-toggle o-no-caret" data-bs-toggle="dropdown" href="#"><i class="fa fa-gear d-block text-center text-700 small opacity-50 opacity-100-hover cursor-pointer" role="img" aria-label="Settings" title="Settings"/></a>
<div class="dropdown-menu cursor-default" role="menu">
<a t-if="!widget.isMobile" role="menuitem" class="dropdown-item o_kanban_toggle_fold" href="#">Fold</a>
<t t-if="widget.grouped_by_m2o">
@@ -29,7 +29,7 @@
</t>
</div>
</span>
<span t-if="widget.quick_create" class="o_kanban_quick_add"><i class="fa fa-plus" role="img" aria-label="Quick add" title="Quick add"/></span>
<a t-if="widget.quick_create" class="o_kanban_quick_add"><i class="fa fa-plus d-block small text-center text-700 opacity-50 opacity-100-hover cursor-pointer" role="img" aria-label="Quick add" title="Quick add"/></a>
</div>
</div>
<div t-if="widget.loadMoreCount > 0" class="o_kanban_load_more">
@@ -57,7 +57,7 @@
</div>
<span t-if="!widget.isMobile" class="o_discard_msg text-muted float-end">Esc to discard</span>
<t t-if="widget.examples &amp;&amp; !widget.isMobile">
<button type="button" class="btn btn-link o_kanban_examples">See examples</button>
<button type="button" class="btn btn-link o_kanban_examples p-0">See examples</button>
</t>
</div>
<div class="o_kanban_muted_record"/>
@@ -157,9 +157,9 @@
<div t-if="example.description" class="o_kanban_examples_description">
<t t-out="example.description"/>
</div>
<div class="o_kanban_examples">
<div class="o_kanban_examples d-flex p-2">
<t t-foreach="example.columns" t-as="column">
<div class="o_kanban_examples_group">
<div class="o_kanban_examples_group flex-grow-1 m-3">
<h6><b><t t-esc="column"/></b></h6>
<t t-foreach="_.random(1,4)">
<t t-call="KanbanView.ExamplesDialog.RecordGhost"/>
@@ -173,23 +173,23 @@
</div>
</div>
<t t-name="KanbanView.ExamplesDialog.RecordGhost">
<div class="o_kanban_examples_ghost">
<div class="o_ghost_content"/>
<div class="o_ghost_content o_ghost_tag"/>
<div class="o_kanban_examples_ghost o_collapse p-2 border bg-white">
<div class="o_ghost_content pb-3 bg-300"/>
<div class="o_ghost_content o_ghost_tag d-inline-block w-50 mt-3 pb-3 bg-300"/>
<t t-if="example.bullets and _.random(0, 5) > 3">
<t t-out="_.sample(example.bullets)"/>
</t>
<img class="float-end o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
<img class="float-end o_ghost_avatar mt-2" src="/base/static/img/avatar.png" alt="Avatar"/>
</div>
</t>
<!-- Kanban Example Background -->
<t t-name="KanbanView.ExamplesBackground">
<div class="o_kanban_example_background_container">
<div class="o_kanban_example_background">
<div class="o_kanban_examples">
<div class="o_kanban_example_background_container d-flex opacity-50">
<div class="o_kanban_example_background flex-grow-1">
<div class="o_kanban_examples d-flex p-2">
<t t-foreach="ghostColumns" t-as="column">
<div class="o_kanban_examples_group">
<div class="o_kanban_examples_group flex-grow-1 m-3">
<h6><b><t t-esc="column"/></b></h6>
<t t-foreach="_.random(2,6)">
<t t-call="KanbanView.ExamplesBackground.RecordGhost"/>
@@ -201,10 +201,10 @@
</div>
</t>
<t t-name="KanbanView.ExamplesBackground.RecordGhost">
<div class="o_kanban_examples_ghost">
<div class="o_ghost_content"/>
<div class="o_ghost_content o_ghost_tag"/>
<img class="float-end o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
<div class="o_kanban_examples_ghost mb-3 p-2 border bg-white">
<div class="o_ghost_content pb-3 bg-300"/>
<div class="o_ghost_content o_ghost_tag d-inline-block w-50 mt-3 pb-3 bg-300"/>
<img class="float-end o_ghost_avatar mt-2" src="/base/static/img/avatar.png" alt="Avatar"/>
</div>
</t>
addons/web/static/src/views/kanban/kanban.variables.scss
+25
View File
@@ -0,0 +1,25 @@
$o-kanban-default-record-width: 300px !default;
$o-kanban-small-record-width: 240px !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: 8px !default;
$o-kanban-inside-hgutter: 8px !default;
$o-kanban-color-border-width: 2px !default;
$o-kanban-inner-hmargin: 5px !default;
$o-kanban-progressbar-height: 20px !default;
$o-kanban-mobile-tabs-height: 40px !default;
$o-kanban-mobile-empty-height: $o-kanban-image-width !default;
$o-kanban-record-margin: $o-horizontal-padding / 2 !default;
$o-kanban-group-padding: $o-horizontal-padding !default; // Cannot be higher than this
$o-kanban-inside-hgutter-mobile: $o-horizontal-padding !default;
// ------- Kanban dashboard variables -------
// Used to manage spacing in complex dropdown menu
$o-kanban-dashboard-dropdown-complex-gap: 5px !default;
// Since rows and containers are used inside cards, we're
// forced to set the padding relative to the grid system.
$o-kanban-dashboard-hpadding: $o-horizontal-padding !default;
$o-kanban-dashboard-vpadding: $o-horizontal-padding / 2 !default;
addons/web/static/src/views/kanban/kanban_animated_number.xml
+3 -3
View File
@@ -2,10 +2,10 @@
<templates xml:space="preserve">
<t t-name="web.KanbanAnimatedNumber" owl="1">
<div class="o_kanban_counter_side" t-att-class="state.value !== props.value and props.animationClass" t-att-title="props.title">
<span t-if="props.currency and props.currency.position === 'before'" t-esc="props.currency.symbol" />
<div class="o_kanban_counter_side ms-2 text-900 text-nowrap" t-att-class="state.value !== props.value and props.animationClass" t-att-title="props.title">
<span t-if="props.currency and props.currency.position === 'before'" t-esc="props.currency.symbol" class="ms-1"/>
<b t-esc="format(state.value)" />
<span t-if="props.currency and props.currency.position === 'after'" t-esc="props.currency.symbol" />
<span t-if="props.currency and props.currency.position === 'after'" t-esc="props.currency.symbol" class="ms-1"/>
</div>
</t>
addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml
+5 -5
View File
@@ -3,13 +3,13 @@
<t t-name="web.KanbanExamplesNotebookTemplate" owl="1">
<div t-if="props.description" class="o_kanban_examples_description" t-out="props.description"/>
<div class="o_kanban_examples">
<div class="o_kanban_examples d-flex p-2">
<t t-foreach="columns" t-as="column" t-key="column.title">
<div class="o_kanban_examples_group">
<div class="o_kanban_examples_group flex-grow-1 m-3">
<h6><b t-esc="column.title"/></h6>
<div t-foreach="column.records" t-as="record" t-key="record.id" class="o_kanban_examples_ghost">
<div class="o_ghost_content"/>
<div class="o_ghost_content o_ghost_tag"/>
<div t-foreach="column.records" t-as="record" t-key="record.id" class="o_kanban_examples_ghost p-2 border bg-white" t-att-class="{ 'o_collapse': record_index > 0 }">
<div class="o_ghost_content pb-3 bg-300"/>
<div class="o_ghost_content o_ghost_tag d-inline-block w-50 mt-3 pb-3 bg-300"/>
<span class="ms-2" t-if="record.bullet" t-out="record.bullet"/>
</div>
</div>
addons/web/static/src/views/kanban/kanban_column_progressbar.scss
+2 -76
View File
@@ -10,26 +10,13 @@
border-color: $mix-full;
}
.progress-bar.bg-#{$class} {
border: 1px solid white;
}
.oe_kanban_card_#{$class} {
order: 1;
margin-bottom: $o-kanban-inside-vgutter*0.5;
~ .oe_kanban_card_#{$class} {
margin-top: -$o-kanban-inside-vgutter*0.5 - 1px;
}
~ .o_kanban_load_more {
margin-top: -$o-kanban-inside-vgutter*0.5;
}
}
.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}) {
@@ -40,47 +27,14 @@
}
}
// If columns has the progressbar, adapt the layout
.o_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_kanban_counter {
opacity: 0.3;
}
}
}
.o_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_counter_side {
width: 21%;
margin-left: 3%;
color: $headings-color;
text-align: right;
white-space: nowrap;
transform-origin: right center;
&.o_kanban_grow {
@@ -90,53 +44,25 @@
&.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_kanban_counter {
display: none;
}
.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'));
&.o_kanban_group_show {
display: flex;
flex-flow: column nowrap;
> * {
flex: 0 0 auto;
}
}
@include o-kanban-css-filter(info, map-get($theme-colors, 'info'));
}
@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_quick_create.xml
+8 -8
View File
@@ -3,16 +3,16 @@
<t t-name="web.KanbanColumnQuickCreate" owl="1">
<div class="o_column_quick_create" t-ref="root">
<div t-if="props.folded" class="o_quick_create_folded" t-on-click="unfold">
<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="props.groupByFieldString"/>
</button>
</div>
<div t-else="" class="o_quick_create_unfolded">
<div class="o_kanban_header">
<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">
<input type="text"
class="form-control o_input"
class="form-control o_input bg-transparent fs-4"
t-attf-placeholder="{{ props.groupByFieldString }}..."
t-ref="autofocus"
t-model.trim="state.columnTitle"
@@ -25,14 +25,14 @@
</button>
</span>
</div>
<span t-if="!env.isSmall and state.hasInputFocused" class="o_discard_msg text-muted float-end">
<small t-if="!env.isSmall and state.hasInputFocused" class="o_discard_msg text-muted float-end">
Esc to discard
</span>
</small>
<t t-if="props.exampleData and !env.isSmall">
<button type="button" class="btn btn-link o_kanban_examples" t-on-click="showExamples">See examples</button>
<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" />
<div t-foreach="[,,,]" t-as="i" t-key="i_index" class="o_kanban_muted_record mt-3 py-5 bg-300" />
</div>
</div>
</t>
addons/web/static/src/views/kanban/kanban_controller.scss
+73 -194
View File
@@ -1,7 +1,25 @@
// ------- Kanban View Layout -------
.o_kanban_renderer {
display: flex;
align-content: stretch;
// ----------------------------------------------------------------------------
// 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 {
@@ -9,49 +27,27 @@
}
@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 {
box-shadow: $box-shadow;
margin: 0 $o-kanban-record-margin ($o-kanban-record-margin * 2);
margin-bottom: calc(var(--KanbanRecord-margin-h) * 2);
.o_form_view {
padding: 0;
.o_group.o_inner_group {
margin: 0;
}
}
.o_kanban_cancel {
color: map-get($grays, "600"); // to make color uniform in community and enterprise
}
&.o_disabled {
pointer-events: none;
opacity: 0.7;
.o_form_view .o_group.o_inner_group {
margin: 0;
}
}
.o_kanban_record {
position: relative;
display: inline-block; // Force the creation of a block formatting context to clear float items
min-width: 150px;
margin: 0 0 -1px;
@@ -60,25 +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;
}
.o_kanban_record_details {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
}
// 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,
@@ -114,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;
@@ -172,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;
@@ -198,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;
@@ -208,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
@@ -247,7 +231,6 @@
}
.o_dragged {
@extend .shadow;
transform: rotate(-3deg);
transition: transform 0.6s, box-shadow 0.3s;
@@ -266,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;
}
}
@@ -299,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;
@@ -354,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,
@@ -373,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);
}
}
}
@@ -406,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));
}
}
@@ -424,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;
@@ -461,8 +445,6 @@
// Kanban Grouped Layout
&.o_kanban_grouped {
min-height: 100%;
padding: 0;
background-color: $gray-100;
@include media-breakpoint-down(md) {
min-height: initial;
@@ -471,43 +453,21 @@
scroll-snap-type: x mandatory;
}
.o_kanban_record,
.o_kanban_quick_create {
.o_kanban_record {
width: 100%;
margin-left: 0;
margin-right: 0;
}
&.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: 0 0 $o-kanban-default-record-width + 2 * $o-kanban-group-padding;
padding: 0 $o-kanban-group-padding $o-kanban-group-padding $o-kanban-group-padding;
background-color: inherit;
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 {
@include o-kanban-header-title;
.o_column_title {
flex: 1 1 auto;
@include o-text-overflow;
font-size: 16px;
font-weight: 500;
}
.o_column_unfold {
display: none;
}
.o_kanban_quick_add i {
@include o-kanban-icon;
margin-left: $o-kanban-inside-hgutter * 2;
}
&:hover .o_kanban_config,
.o_kanban_config.show {
visibility: visible;
@@ -522,9 +482,6 @@
> .dropdown-menu {
cursor: default;
}
i {
@include o-kanban-icon;
}
}
}
}
@@ -545,22 +502,11 @@
}
.o_kanban_header_title {
position: relative;
opacity: 0.5;
.o_column_title {
@include o-kanban-v-title;
}
.o_column_unfold {
@include o-kanban-icon(1);
}
}
> .o_kanban_record,
.o_kanban_quick_add,
.o_kanban_config,
.o_kanban_load_more {
display: none !important;
}
&:hover,
@@ -574,96 +520,40 @@
// 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_folded {
cursor: pointer;
padding: 12px 16px;
white-space: nowrap;
font-weight: $font-weight-bold;
@include o-hover-opacity(0.7);
@include o-hover-text-color($text-muted, $body-color);
}
.o_quick_create_unfolded {
margin: $border-width ($o-kanban-inside-hgutter * 0.5) 0;
padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter;
@include media-breakpoint-down(md) {
margin: 0;
}
.o_kanban_header {
height: 50px;
.o_kanban_examples {
cursor: pointer;
}
input,
input:focus,
input:hover {
font-size: 16px;
background: transparent;
}
}
.o_kanban_muted_record {
background: map-get($grays, "300");
height: 70px;
margin: 10px 0px;
}
}
flex: 0 0 calc(var(--KanbanRecord--small-width) + (2 * var(--KanbanGroup-padding-h)));
}
@include media-breakpoint-down(md) {
.o_kanban_group,
.o_column_quick_create {
flex: 1 0 90%; // don't take full width to give a hint of next/previous column
flex-basis: 90%; // don't take full width to give a hint of next/previous column
scroll-snap-align: center;
overflow-y: scroll;
.o_kanban_header {
position: sticky; // keep it visible
top: 0;
z-index: 10; // same as the sticky ControlPanel
z-index: $zindex-sticky;
background-color: inherit;
}
.o_kanban_header_title {
margin-top: 0 !important; // avoid sticky glitch when scrolling
}
}
}
// Kanban UN-grouped Layout
&.o_kanban_ungrouped {
min-height: 100%;
align-content: flex-start;
flex-flow: row wrap;
justify-content: flex-start;
padding: $o-kanban-record-margin ($o-horizontal-padding - $o-kanban-record-margin);
padding: var(--KanbanRecord-margin-v) var(--KanbanRecord-margin-h);
.o_kanban_record {
display: flex;
flex: 1 1 auto;
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;
flex: 1 0 100%;
flex-basis: 100%;
}
&.o_kanban_ghost {
height: 0;
border: none;
min-height: 0 !important; // to prevent view writers to override this height
visibility: hidden;
margin-top: 0;
margin-bottom: 0;
padding: 0;
max-height: 0 !important; // to prevent view writers to override this height
}
}
}
@@ -686,17 +576,6 @@
// ----------------- Set Cover Dialog -----------------
.modal .o_kanban_cover_container .o_kanban_cover_image {
border: 1px solid $border-color;
height: 120px;
width: 120px;
cursor: pointer;
&.o_selected {
border-color: $o-brand-primary;
}
> img {
@include o-position-absolute(0, 0, 0, 0);
max-height: 100%;
}
}
addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml
+3 -3
View File
@@ -5,11 +5,11 @@
<Dialog title="'Set a Cover Image'" size="'lg'">
<div t-if="attachments.length" class="o_kanban_cover_container bg-100">
<t t-foreach="attachments" t-as="attachment" t-key="attachment.id">
<div class="o_kanban_cover_image position-relative d-inline-block m-2 bg-white" t-att-class="{
o_selected: state.selectedAttachmentId === attachment.id,
<div class="o_kanban_cover_image position-relative d-inline-block m-2 border bg-white o_cursor_pointer" t-att-class="{
'o_selected border-primary': state.selectedAttachmentId === attachment.id,
}">
<img t-attf-src="/web/image/{{attachment.id}}?unique=1"
class="m-auto mw-100"
class="position-absolute start-0 end-0 top-0 bottom-0 mw-100 mh-100 m-auto"
alt="Attachment"
t-on-click="() => this.selectAttachment(attachment, false)"
t-on-dblclick="() => this.selectAttachment(attachment, true)"
addons/web/static/src/views/kanban/kanban_dashboard.scss
+19 -12
View File
@@ -1,15 +1,18 @@
.o_kanban_dashboard:not(.o_legacy_kanban_view) {
&:not(.o_kanban_grouped) {
// correctly display the no_content_helper in dashboards
flex-flow: row wrap;
}
// ----------------------------------------------------------------------------
// 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;
@@ -18,6 +21,7 @@
// ------- Generic layout adaptations -------
.container {
width: 100%;
max-width: none;
}
// ------- Dropdown toggle & menu -------
@@ -128,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
@@ -163,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;
@@ -184,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);
}
}
}
@@ -202,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
+10 -39
View File
@@ -46,54 +46,25 @@
// container ghost card in background
.o_kanban_example_background_container {
display: flex;
padding: 0px;
opacity: 0.4;
// content
.o_kanban_example_background {
flex: 1 1 100%;
flex-basis: 100%;
.o_kanban_examples {
.o_kanban_examples_group {
.o_kanban_examples_ghost {
width: 224px;
margin-bottom: 10px;
}
}
.o_kanban_examples .o_kanban_examples_group .o_kanban_examples_ghost {
width: var(--KanbanRecord--small-width);
}
}
}
// kanban ghost card
.o_kanban_examples {
display: flex;
padding: 0 6px;
.o_kanban_examples .o_kanban_examples_group .o_kanban_examples_ghost {
&.o_collapse {
margin-top: -1px;
}
.o_kanban_examples_group {
flex: 1 1 100%;
margin: 10px;
.o_kanban_examples_ghost {
padding: 5px;
margin-top: -1px;
border: thin solid map-get($grays, '300');
background-color: white;
.o_ghost_content {
height: 12px;
background: map-get($grays, '300');
&.o_ghost_tag {
display: inline-block;
width: 40%;
margin-top: 10px;
}
}
.o_ghost_avatar {
height: 20px;
width: 20px;
margin-top: 6px;
}
}
.o_ghost_avatar {
height: 20px;
width: 20px;
}
}
addons/web/static/src/views/kanban/kanban_record.js
+4 -1
View File
@@ -221,7 +221,7 @@ export class KanbanRecord extends Component {
getRecordClasses() {
const { archInfo, canResequence, forceGlobalClick, group, record } = this.props;
const classes = ["o_kanban_record"];
const classes = ["o_kanban_record d-flex"];
if (canResequence) {
classes.push("o_record_draggable");
}
@@ -239,6 +239,9 @@ export class KanbanRecord extends Component {
if (record.model.useSampleModel) {
classes.push("o_sample_data_disabled");
}
if (!this.props.list.isGrouped) {
classes.push("flex-grow-1 flex-md-shrink-1 flex-shrink-0");
}
return classes.join(" ");
}
addons/web/static/src/views/kanban/kanban_record_quick_create.xml
+4 -4
View File
@@ -3,11 +3,11 @@
<t t-name="web.KanbanRecordQuickCreate" owl="1">
<div
class="o_kanban_quick_create"
t-att-class="{ o_disabled: state.disabled }"
class="o_kanban_quick_create shadow"
t-att-class="{ o_disabled: state.disabled, 'w-100 mx-0': props.listIsGrouped }"
t-ref="root"
>
<FormRenderer class="'o_form_view o_xxs_form_view'" record="props.record" archInfo="props.archInfo" />
<FormRenderer class="'o_form_view o_xxs_form_view p-0'" record="props.record" archInfo="props.archInfo" />
<div class="d-flex">
<button class="btn btn-primary o_kanban_add me-1 text_truncate" t-on-click="() => this.validate('add')">
Add
@@ -15,7 +15,7 @@
<button class="btn btn-primary o_kanban_edit me-1 text_truncate" t-on-click="() => this.validate('edit')">
Edit
</button>
<button class="btn btn-secondary o_kanban_cancel ms-auto" t-on-click="() => this.cancel(true)">
<button class="btn btn-secondary o_kanban_cancel ms-auto text-600" t-on-click="() => this.cancel(true)">
<i class="fa fa-trash" />
</button>
</div>
addons/web/static/src/views/kanban/kanban_renderer.js
+7 -4
View File
@@ -61,11 +61,11 @@ export class KanbanRenderer extends Component {
if (group) {
dataGroupId = group.dataset.id;
}
element.classList.add("o_dragged");
element.classList.add("o_dragged", "shadow");
},
onGroupEnter: (group) => group.classList.add("o_kanban_hover"),
onGroupLeave: (group) => group.classList.remove("o_kanban_hover"),
onStop: (_group, element) => element.classList.remove("o_dragged"),
onStop: (_group, element) => element.classList.remove("o_dragged", "shadow"),
onDrop: async ({ element, previous, parent }) => {
element.classList.remove("o_record_draggable");
const refId = previous ? previous.dataset.id : null;
@@ -89,9 +89,9 @@ export class KanbanRenderer extends Component {
// Hooks
onStart: (_group, element) => {
dataGroupId = element.dataset.id;
element.classList.add("o_dragged");
element.classList.add("o_dragged", "shadow");
},
onStop: (_group, element) => element.classList.remove("o_dragged"),
onStop: (_group, element) => element.classList.remove("o_dragged", "shadow"),
onDrop: async ({ element, previous }) => {
element.classList.remove("o_group_draggable");
const refId = previous ? previous.dataset.id : null;
@@ -262,6 +262,9 @@ export class KanbanRenderer extends Component {
if (!this.env.isSmall && group.isFolded) {
classes.push("o_column_folded");
}
if (this.canResequenceGroups && group.value && !group.isFolded && !group.hasActiveProgressValue) {
classes.push("bg-100");
}
if (group.progressBars.length) {
classes.push("o_kanban_has_progressbar");
if (!group.isFolded && group.hasActiveProgressValue) {
addons/web/static/src/views/kanban/kanban_renderer.xml
+29 -27
View File
@@ -2,25 +2,25 @@
<templates xml:space="preserve">
<t t-name="web.KanbanRenderer" owl="1">
<div class="o_kanban_renderer o_renderer"
t-attf-class="o_kanban_{{ props.list.isGrouped ? '' : 'un' }}grouped {{ props.archInfo.className or '' }}"
<div class="o_kanban_renderer o_renderer d-flex"
t-attf-class="{{ props.list.isGrouped ? 'o_kanban_grouped align-content-stretch' : 'o_kanban_ungrouped align-content-start flex-wrap justify-content-start' }} {{ props.archInfo.className or '' }}"
t-ref="root"
>
<t t-foreach="getGroupsOrRecords()" t-as="groupOrRecord" t-key="groupOrRecord.key">
<t t-if="groupOrRecord.group">
<t t-set="group" t-value="groupOrRecord.group" />
<div class="o_kanban_group"
<div class="o_kanban_group flex-shrink-0 flex-grow-1 flex-md-grow-0"
t-att-class="getGroupClasses(group)"
t-att-data-id="(canResequenceRecords or canResequenceGroups) and group.id"
t-on-click="(ev) => this.onGroupClick(group, ev)"
>
<div class="o_kanban_header">
<div class="o_kanban_header_title" t-att="tooltipAttributes(group)">
<span class="o_column_title" t-esc="getGroupName(group)"/>
<div class="o_kanban_header top-0" t-attf-class="{{ !env.isSmall and group.isFolded ? 'pt-3' : 'py-3' }}">
<div class="o_kanban_header_title position-relative d-flex align-items-center lh-lg text-900" t-att="tooltipAttributes(group)">
<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="getGroupName(group)"/>
<t t-if="env.isSmall or !group.isFolded">
<Dropdown class="'o_kanban_config'" togglerClass="'btn p-0'">
<Dropdown class="'o_kanban_config'" togglerClass="'btn p-0 border-0'">
<t t-set-slot="toggler">
<i class="fa fa-gear" role="img" aria-label="Settings" title="Settings" />
<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" />
</t>
<DropdownItem t-if="!env.isSmall" class="{
'o_kanban_toggle_fold': true,
@@ -47,21 +47,21 @@
</DropdownItem>
</t>
</Dropdown>
<span t-if="props.list.canQuickCreate()" class="o_kanban_quick_add" t-on-click="() => this.quickCreate(group)">
<i class="fa fa-plus" role="img" aria-label="Quick add" title="Quick add" />
</span>
<button t-if="props.list.canQuickCreate()" class="o_kanban_quick_add btn p-0 border-0 fs-6 shadow-none" t-on-click="() => this.quickCreate(group)">
<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>
<span t-else="" class="o_column_unfold">
<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" />
</span>
</button>
</div>
<div t-if="(env.isSmall or !group.isFolded) and group.progressBars.length" class="o_kanban_counter">
<div class="o_kanban_counter_progress progress">
<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 }">
<div class="o_kanban_counter_progress progress w-75 bg-300">
<t t-foreach="group.progressBars" t-as="progressBar" t-key="progressBar.value">
<div t-if="progressBar.count"
role="progressbar"
class="progress-bar o_bar_has_records"
t-att-class="{ 'progress-bar-animated progress-bar-striped': group.progressValue.active === progressBar.value }"
class="progress-bar o_bar_has_records cursor-pointer"
t-att-class="{ 'progress-bar-animated progress-bar-striped': group.progressValue.active === progressBar.value, 'border border-white': !group.isFolded and group.hasActiveProgressValue }"
t-attf-class="bg-{{ progressBar.color }}"
t-attf-style="width: {{ progressBar.count / (group.count or 1) * 100 }}%;"
aria-valuemin="0"
@@ -91,6 +91,7 @@
archInfo="props.list.quickCreateInfo"
onCancel="force => group.list.cancelQuickCreate(force)"
onValidate="mode => this.validateQuickCreate(mode, group)"
listIsGrouped="props.list.isGrouped"
/>
</t>
<t t-else="">
@@ -144,16 +145,17 @@
/>
</t>
<!-- Kanban Example Background -->
<div t-if="props.list.groups.length === 0" class="o_kanban_example_background_container">
<div class="o_kanban_example_background">
<div class="o_kanban_examples">
<div t-foreach="ghostColumns" t-as="column" t-key="column" class="o_kanban_examples_group">
<div t-if="props.list.groups.length === 0" class="o_kanban_example_background_container d-flex opacity-50">
<div class="o_kanban_example_background flex-grow-1">
<div class="o_kanban_examples d-flex p-2">
<div t-foreach="ghostColumns" t-as="column" t-key="column" class="o_kanban_examples_group flex-grow-1 m-3">
<h6><b t-esc="column.name"/></h6>
<div t-foreach="column.cards" t-as="card" t-key="card_index" class="o_kanban_examples_ghost">
<div class="o_ghost_content"/>
<div class="o_ghost_content o_ghost_tag"/>
<!-- FIXME WOWL example avatar is white on white (also in legacy) -->
<img class="float-end o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
<div t-foreach="column.cards" t-as="card" t-key="card_index" class="o_kanban_examples_ghost d-flex flex-wrap justify-content-between mb-3 p-2 border bg-white">
<div class="o_ghost_content w-100 pb-3 bg-300"/>
<div class="o_ghost_content o_ghost_tag d-inline-block w-50 mt-3 pb-3 bg-300"/>
<span class="mt-2 rounded-circle bg-300">
<img class="o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
</span>
</div>
</div>
</div>
@@ -162,7 +164,7 @@
</t>
<t t-else="">
<!-- kanban ghost cards are used to properly space last elements. -->
<div t-foreach="[,,,,,,]" t-as="i" t-key="i_index" class="o_kanban_record o_kanban_ghost" />
<div t-foreach="[,,,,,,]" t-as="i" t-key="i_index" class="o_kanban_record o_kanban_ghost flex-grow-1 flex-md-shrink-1 flex-shrink-0 my-0" />
</t>
<t t-if="showNoContentHelper">
<t t-if="props.noContentHelp" t-call="web.ActionHelper">