[REF] project: set new kanban layout for project kanban
New kanban design is basically new LESS to override the old one. In the next version, we will work on a better and uniform layout (which will allow better LESS). Here, we already set a better layout for project, as an example.
This commit is contained in:
stefanorigano
@@ -1,106 +1,110 @@
|
||||
.o_kanban_view.o_kanban_dashboard.o_project_kanban {
|
||||
|
||||
.o_kanban_record {
|
||||
.o-flex-display();
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.o_project_kanban_main {
|
||||
.o-flex(0, 0, auto);
|
||||
padding: @odoo-horizontal-padding;
|
||||
width: 70%; // for IE11 overflow issue
|
||||
|
||||
// give space for manage section at the bottom
|
||||
margin-bottom: @odoo-horizontal-padding/2 + 19px;
|
||||
|
||||
.o_kanban_card_content {
|
||||
font-size: 12px;
|
||||
.o_primary {
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
|
||||
.o_project_kanban_manage {
|
||||
.o_left {
|
||||
.o-position-absolute(@bottom: 0, @left: 0);
|
||||
padding: @odoo-horizontal-padding/2 @odoo-horizontal-padding;
|
||||
}
|
||||
.o_right {
|
||||
.o-position-absolute(@bottom: 0, @right: 30%);
|
||||
padding: @odoo-horizontal-padding/2 @odoo-horizontal-padding;
|
||||
}
|
||||
.o_kanban_manage_toggle_button {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.o_kanban_card_manage_pane .o_kanban_card_manage_title {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.o_project_kanban_boxes {
|
||||
width: 30%;
|
||||
.o-flex(0, 0, auto);
|
||||
|
||||
.o-flex-display();
|
||||
.o-flex-flow(column, nowrap);
|
||||
|
||||
> a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.o_value {
|
||||
font-size: x-large;
|
||||
color: white;
|
||||
display: block;
|
||||
}
|
||||
.o_label {
|
||||
color: white;
|
||||
}
|
||||
.o_needaction{
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
color: white;
|
||||
font-size: small;
|
||||
opacity: 0.5;
|
||||
&:hover{
|
||||
opacity:1;
|
||||
}
|
||||
&::before {
|
||||
content: "\f086";
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
}
|
||||
}
|
||||
|
||||
.o_project_kanban_box {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 0 0 0 0;
|
||||
.o-flex(1, 1, auto);
|
||||
.o-flex-display();
|
||||
.o-flex-flow(column, nowrap);
|
||||
.o-justify-content(center);
|
||||
}
|
||||
.o_project_kanban_box:nth-child(even) {
|
||||
background-color: grey;
|
||||
}
|
||||
.o_project_kanban_box:nth-child(odd) {
|
||||
background-color: @odoo-brand-optional;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_kanban_task_cover_image {
|
||||
.o-columns(200px, 4);
|
||||
> img {
|
||||
cursor: pointer;
|
||||
margin-bottom: 1em;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&.o_selected {
|
||||
border-color: @odoo-brand-secondary;
|
||||
box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .o_kanban_view.o_kanban_dashboard.o_project_kanban {
|
||||
//
|
||||
// .o_kanban_record {
|
||||
// .o-flex-display();
|
||||
// .o-flex-flow(column, nowrap);
|
||||
// position: relative;
|
||||
// }
|
||||
//
|
||||
// .o_project_kanban_main {
|
||||
// .o-flex(0, 0, auto);
|
||||
// // padding: @odoo-horizontal-padding;
|
||||
// // width: 70%; // for IE11 overflow issue
|
||||
//
|
||||
// // give space for manage section at the bottom
|
||||
// // margin-bottom: @odoo-horizontal-padding/2 + 19px;
|
||||
//
|
||||
// .o_kanban_card_content {
|
||||
// font-size: 12px;
|
||||
// .o_kanban_primary_left {
|
||||
// margin-left: 30px;
|
||||
// }
|
||||
// .o_primary {
|
||||
// font-size: larger;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .o_project_kanban_manage {
|
||||
// .o_left {
|
||||
// // .o-position-absolute(@bottom: 0, @left: 0);
|
||||
// padding: @odoo-horizontal-padding/2 @odoo-horizontal-padding;
|
||||
// }
|
||||
// .o_right {
|
||||
// // .o-position-absolute(@bottom: 0, @right: 30%);
|
||||
// padding: @odoo-horizontal-padding/2 @odoo-horizontal-padding;
|
||||
// }
|
||||
// .o_kanban_manage_toggle_button {
|
||||
// font-size: 18px;
|
||||
// }
|
||||
// }
|
||||
// .o_kanban_card_manage_pane .o_kanban_card_manage_title {
|
||||
// margin: 0;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .o_project_kanban_boxes {
|
||||
// // width: 30%;
|
||||
// .o-flex(0, 0, auto);
|
||||
//
|
||||
// .o-flex-display();
|
||||
// .o-flex-flow(column, nowrap);
|
||||
//
|
||||
// > a:hover {
|
||||
// text-decoration: none;
|
||||
// }
|
||||
//
|
||||
// .o_value {
|
||||
// font-size: x-large;
|
||||
// color: white;
|
||||
// display: block;
|
||||
// }
|
||||
// .o_label {
|
||||
// color: white;
|
||||
// }
|
||||
// .o_needaction{
|
||||
// position: absolute;
|
||||
// top: 5px;
|
||||
// right: 5px;
|
||||
// color: white;
|
||||
// font-size: small;
|
||||
// opacity: 0.5;
|
||||
// &:hover{
|
||||
// opacity:1;
|
||||
// }
|
||||
// &::before {
|
||||
// content: "\f086";
|
||||
// font: normal normal normal 14px/1 FontAwesome;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .o_project_kanban_box {
|
||||
// position: relative;
|
||||
// text-align: center;
|
||||
// padding: 0 0 0 0;
|
||||
// .o-flex(1, 1, auto);
|
||||
// .o-flex-display();
|
||||
// .o-flex-flow(column, nowrap);
|
||||
// .o-justify-content(center);
|
||||
// }
|
||||
// .o_project_kanban_box:nth-child(even) {
|
||||
// background-color: grey;
|
||||
// }
|
||||
// .o_project_kanban_box:nth-child(odd) {
|
||||
// background-color: @odoo-brand-optional;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .o_kanban_task_cover_image {
|
||||
// .o-columns(200px, 4);
|
||||
// > img {
|
||||
// cursor: pointer;
|
||||
// margin-bottom: 1em;
|
||||
// border: 1px solid transparent;
|
||||
//
|
||||
// &.o_selected {
|
||||
// border-color: @odoo-brand-secondary;
|
||||
// box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -266,7 +266,7 @@
|
||||
<field name="alias_domain"/>
|
||||
<templates>
|
||||
<t t-name="kanban-box">
|
||||
<div t-attf-class="#{kanban_color(record.color.raw_value)} oe_kanban_global_click">
|
||||
<div t-attf-class="#{kanban_color(record.color.raw_value)} oe_kanban_global_click o_has_icon">
|
||||
<div class="o_project_kanban_main">
|
||||
<div class="o_kanban_card_content o_visible">
|
||||
<div class="o_kanban_primary_left">
|
||||
@@ -477,47 +477,52 @@ action = model.activate_sample_project()
|
||||
<templates>
|
||||
<t t-name="kanban-box">
|
||||
<div t-attf-class="oe_kanban_color_#{kanban_getcolor(record.color.raw_value)} oe_kanban_card oe_kanban_global_click">
|
||||
|
||||
<div class="o_dropdown_kanban dropdown" groups="base.group_user">
|
||||
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#" >
|
||||
<span class="fa fa-bars fa-lg"/>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
||||
<t t-if="widget.editable"><li><a type="set_cover">Set Cover Image</a></li></t>
|
||||
<t t-if="widget.editable"><li><a type="edit">Edit Task</a></li></t>
|
||||
<t t-if="widget.deletable"><li><a type="delete">Delete</a></li></t>
|
||||
<li><ul class="oe_kanban_colorpicker" data-field="color"/></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="oe_kanban_content">
|
||||
<div>
|
||||
<field name="tag_ids" widget="many2many_tags" options="{'color_field': 'color'}"/>
|
||||
</div>
|
||||
<div>
|
||||
<strong><field name="name"/></strong>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
<field name="project_id" invisible="context.get('default_project_id', False)"/>
|
||||
<t t-if="record.date_deadline.raw_value and record.date_deadline.raw_value lt (new Date())" t-set="red">oe_kanban_text_red</t>
|
||||
<span t-attf-class="#{red || ''}"><i><field name="date_deadline"/></i></span>
|
||||
<t t-if="record.email_from.raw_value"><span><field name="email_from"/></span></t>
|
||||
</div>
|
||||
<div class="oe_kanban_bottom_left">
|
||||
<field name="priority" widget="priority"/>
|
||||
<t t-if="record.message_needaction_counter.raw_value">
|
||||
<span class='oe_kanban_mail_new' title='Unread Messages'><i class='fa fa-comments'/><t t-raw="record.message_needaction_counter.raw_value"/></span>
|
||||
</t>
|
||||
</div>
|
||||
<div class="oe_kanban_bottom_right">
|
||||
<img t-att-src="kanban_image('res.users', 'image_small', record.user_id.raw_value)" t-att-title="record.user_id.value" width="24" height="24" class="oe_kanban_avatar pull-right"/>
|
||||
<div class="pull-left mr4">
|
||||
<field name="activity_ids" widget="kanban_activity"/>
|
||||
<field name="kanban_state" widget="state_selection" groups="base.group_user"/>
|
||||
<div class="o_kanban_record_top">
|
||||
<div class="o_kanban_record_headings">
|
||||
<strong class="o_kanban_record_title"><field name="name"/></strong><br/>
|
||||
<small class="o_kanban_record_subtitle text-muted">
|
||||
<field name="project_id" invisible="context.get('default_project_id', False)"/>
|
||||
<t t-if="record.date_deadline.raw_value and record.date_deadline.raw_value lt (new Date())" t-set="red">oe_kanban_text_red</t>
|
||||
<span t-attf-class="#{red || ''}"><i><field name="date_deadline"/></i></span>
|
||||
<t t-if="record.email_from.raw_value"><span><field name="email_from"/></span></t>
|
||||
</small>
|
||||
</div>
|
||||
<div class="o_dropdown_kanban dropdown" groups="base.group_user">
|
||||
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#" >
|
||||
<span class="fa fa-ellipsis-v" aria-hidden="true"/>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
||||
<li t-if="widget.editable"><a type="set_cover">Set Cover Image</a></li>
|
||||
<li t-if="widget.editable"><a type="edit">Edit Task</a></li>
|
||||
<li t-if="widget.deletable"><a type="delete">Delete</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Record's Colour</li>
|
||||
<li>
|
||||
<ul class="oe_kanban_colorpicker" data-field="color"/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="o_kanban_record_body">
|
||||
<field name="tag_ids" widget="many2many_tags" options="{'color_field': 'color'}"/>
|
||||
<div t-if="record.displayed_image_id.value">
|
||||
<field name="displayed_image_id" widget="attachment_image"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="o_kanban_record_bottom">
|
||||
<div class="oe_kanban_bottom_left">
|
||||
<field name="priority" widget="priority"/>
|
||||
<field name="activity_ids" widget="kanban_activity"/>
|
||||
<t t-if="record.message_needaction_counter.raw_value">
|
||||
<span class='oe_kanban_mail_new' title='Unread Messages'><i class='fa fa-comments'/><t t-raw="record.message_needaction_counter.raw_value"/></span>
|
||||
</t>
|
||||
</div>
|
||||
<div class="oe_kanban_bottom_right">
|
||||
<field name="kanban_state" widget="state_selection" groups="base.group_user"/>
|
||||
<img t-att-src="kanban_image('res.users', 'image_small', record.user_id.raw_value)" t-att-title="record.user_id.value" width="24" height="24" class="oe_kanban_avatar"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div t-if="record.displayed_image_id.value">
|
||||
<field name="displayed_image_id" widget="attachment_image"/>
|
||||
</div>
|
||||
<div class="oe_clear"></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user