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

[IMP] Lunch: scss revamp

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

task-2920029

closes odoo/odoo#96027

Signed-off-by: Pierre Paridans (app) <app@odoo.com>
This commit is contained in:
Morgane (morm)
2022-08-30 20:22:04 +02:00
committed by Pierre Paridans
parent 427b984578
commit 24d9019f99
10 changed files with 54 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/lunch/__manifest__.py
-1
View File
@@ -48,7 +48,6 @@ If you want to save your employees' time and avoid them to always have coins in
'lunch/static/src/views/*.js',
'lunch/static/src/scss/lunch_view.scss',
'lunch/static/src/scss/lunch_kanban.scss',
'lunch/static/src/scss/lunch_list.scss',
],
'web.assets_tests': [
'lunch/static/tests/tours/*.js',
addons/lunch/static/src/components/lunch_dashboard.js
+1 -1
View File
@@ -29,7 +29,7 @@ export class LunchOrderLine extends Component {
}
get badgeClass() {
const mapping = {'new': 'bg-warning', 'confirmed': 'bg-success', 'sent': 'bg-info', 'ordered': 'bg-danger'};
const mapping = {'new': 'warning', 'confirmed': 'success', 'sent': 'info', 'ordered': 'danger'};
return mapping[this.line.raw_state];
}
addons/lunch/static/src/components/lunch_dashboard.xml
+15 -15
View File
@@ -9,23 +9,23 @@
</t>
<t t-name="lunch.LunchOrderLine" owl="1">
<div class="d-flex">
<div>
<div class="d-flex align-items-center pe-3">
<div class="btn-group">
<button class="btn btn-sm btn-icon btn-link fa fa-minus-circle p-0" t-if="canEdit" t-on-click="() => this.updateQuantity(-1)"/>
<span t-esc="line.quantity" class="px-1"/>
<span t-esc="line.quantity" class="px-2 py-1"/>
<button class="btn btn-sm btn-icon btn-link fa fa-plus-circle p-0" t-if="canEdit" t-on-click="() => this.updateQuantity(1)"/>
</div>
<span class="flex-grow-1 ps-2">
<span class="flex-grow-1 ps-2 text-700">
<a t-on-click="() => props.openOrderLine(line.product[0], line.id)" t-if="canEdit" role="button" title="Edit order">
<t t-esc="line.product[1]"/>
</a>
<t t-else="" t-esc="line.product[1]"/>
<span t-esc="line.state" t-attf-class="badge ms-2 rounded-pill #{badgeClass}"/>
<span t-esc="line.state" t-attf-class="badge ms-2 rounded-pill text-bg-#{badgeClass} border-#{badgeClass} "/>
</span>
<LunchCurrency currency="props.currency" amount="line.product[2]"/>
</div>
<ul t-if="hasToppings" class="list-unstyled ps-4">
<li t-foreach="line.toppings" t-as="topping" t-key="topping" class="d-flex">
<li t-foreach="line.toppings" t-as="topping" t-key="topping" class="d-flex pe-3">
<span class="flex-grow-1 lunch_topping" t-esc="topping[0]"/>
<LunchCurrency currency="props.currency" amount="topping[1]"/>
</li>
@@ -42,7 +42,7 @@
</t>
<t t-name="lunch.LunchUser" owl="1">
<div class="lunch_user">
<div class="lunch_user pb-1">
<span t-if="!props.isManager" t-esc="props.username"/>
<Many2XAutocomplete
t-else=""
@@ -56,7 +56,7 @@
</t>
<t t-name="lunch.LunchLocation" owl="1">
<div class="lunch_location">
<div class="lunch_location pb-1">
<Many2XAutocomplete
value="props.location"
resModel="'lunch.location'"
@@ -70,7 +70,7 @@
<t t-name="lunch.LunchDashboardOrder" owl="1">
<LunchAlerts alerts="state.infos.alerts"/>
<div class="o_lunch_banner container-fluid py-2">
<div class="o_lunch_banner container-fluid p-4 border-bottom bg-white">
<div class="row h-100">
<div class="col-12 col-md-4">
<div class="row h-100 align-content-center">
@@ -87,26 +87,26 @@
location="location"
onUpdateLunchLocation.bind="onUpdateLunchLocation"/>
<div class="d-flex flex-row">
<div class="d-flex pb-1">
<span class="flex-grow-1">Your Account</span>
<LunchCurrency currency="currency" amount="state.infos.wallet"/>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4" t-if="hasLines">
<h4>
<div class="col-12 col-md-5" t-if="hasLines">
<h4 class="mb-0">
Your Order
<button t-if="state.infos.raw_state != 'confirmed'" class="btn btn-sm btn-icon btn-link fa fa-trash" t-on-click.prevent="emptyCart"/>
</h4>
<ul class="list-unstyled">
<ul class="o_lunch_widget_lines overflow-auto list-unstyled">
<li t-foreach="state.infos.lines" t-as="line" t-key="line.id">
<LunchOrderLine line="line" currency="currency" onUpdateQuantity.bind="onUpdateQuantity" openOrderLine.bind="props.openOrderLine"/>
</li>
</ul>
</div>
<div class="col-12 col-md-4 d-flex flex-column justify-content-between" t-if="hasLines">
<h4 class="d-flex flex-row">
<div class="col-12 col-md-3 d-flex flex-column justify-content-between" t-if="hasLines">
<h4 class="d-flex flex-row mt-1">
<span class="flex-grow-1">
Total
</span>
addons/lunch/static/src/scss/lunch_kanban.scss
+1 -2
View File
@@ -1,7 +1,6 @@
.o_lunch_content {
.o_kanban_renderer {
flex: 1 1 100%;
&.o_kanban_grouped {
&.o_kanban_grouped, &.o_kanban_ungrouped {
min-height: auto; // override min-height: 100%
}
}
addons/lunch/static/src/scss/lunch_list.scss
-11
View File
@@ -1,11 +0,0 @@
.o_lunch_content {
.o_list_button {
width: 1px;
}
.o_lunch_list_view {
td:last-child {
padding-right: 16px;
}
}
}
addons/lunch/static/src/scss/lunch_view.scss
+4 -76
View File
@@ -1,77 +1,5 @@
.o_lunch_content {
display: flex;
flex-direction: column; // display lunch widget above kanban renderer
flex: 1 1 100%; // displayed to the right of the searchPanel
min-width: 0; // prevent grouped kanban from horizontally overflowing
max-width: 100%;
height: 100%;
.o_lunch_banner {
flex: 0 0 auto;
border-bottom: 1px solid #CED4DA;
background-color: white;
}
.o_flex_basis_0 {
flex-basis: 0;
}
.o_lunch_widget {
min-height: 90px;
max-height: 33vh;
overflow-y: auto;
.o_lunch_widget_info.card {
&, .card-title, .card-body {
color: $o-main-text-color;
background-color: inherit !important;
}
.card-title {
font-weight: bold;
margin-bottom: 0;
}
.card-body {
padding: 0.5rem 1rem;
}
.btn-link {
padding: 0;
&.o_lunch_open_wizard {
color: $o-main-text-color;
font-weight: normal;
}
}
}
}
}
.o_lunch_image {
img {
max-width: 128px;
max-height: 128px !important;
}
}
@include media-breakpoint-down(md) {
.o_lunch_content {
details summary {
// Hide the caret. For details see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
list-style-type: none;
&::-webkit-details-marker {
display: none
}
}
.o_lunch_widget {
max-height: 100%
}
}
}
.o_lunch_wizard {
.col-10 {
.o_form_label {
font-weight: normal !important;
}
}
.o_lunch_widget_lines{
//calculation to display the number of lines to show before scrolling
$-entry-height: calc(#{$font-size-base * $line-height-base} + (#{map-get($spacers, 1)} * 2));
max-height: calc(#{$-entry-height} * 4.5); // if we want 4 entries with the 5th row visible
}
addons/lunch/static/src/views/kanban.xml
+1 -1
View File
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="lunch.KanbanRenderer" owl="1">
<div class="o_lunch_content">
<div class="o_lunch_content d-flex flex-column h-100">
<LunchDashboard openOrderLine.bind="openOrderLine"/>
<div class="overflow-auto">
addons/lunch/static/tests/lunch_list_tests.js
+1 -1
View File
@@ -109,7 +109,7 @@ QUnit.module('LunchListView', {
"should have a 'classical list view' column");
assert.hasClass(list.$('.o_legacy_list_view'), 'o_lunch_list_view',
"should have classname 'o_lunch_list_view'");
assert.containsOnce(list, '.o_lunch_content > span > .o_lunch_banner',
assert.containsOnce(list, '.o_lunch_content > .o_lunch_banner',
"should have a 'lunch' banner");
const $alertMessage = list.$('.alert > *');
addons/lunch/views/lunch_orders_views.xml
+22 -22
View File
@@ -224,49 +224,49 @@
</div>
</div>
<div class="o_lunch_wizard">
<div class="row">
<div class="col-2">
<field name="topping_label_1" nolabel="1" attrs="{'invisible': [('available_toppings_1', '=', False)]}" class="fw-bold"/>
<div class="row py-3 py-md-0">
<div class="o_td_label col-3 col-md-2">
<field name="topping_label_1" nolabel="1" attrs="{'invisible': [('available_toppings_1', '=', False)]}" class="o_form_label"/>
</div>
<div class="col-10">
<field name="topping_ids_1" attrs="{'invisible': [('available_toppings_1', '=', False)]}" widget="many2many_checkboxes" nolabel="1" domain="[('topping_category', '=', 1), ('supplier_id', '=', supplier_id)]"/>
<div class="col-9 col-md-10">
<field name="topping_ids_1" attrs="{'invisible': [('available_toppings_1', '=', False)]}" widget="many2many_checkboxes" nolabel="1" domain="[('topping_category', '=', 1), ('supplier_id', '=', supplier_id)]" class="o_field_widget o_quick_editable"/>
</div>
</div>
<div class="row">
<div class="col-2">
<field name="topping_label_2" nolabel="1" attrs="{'invisible': [('available_toppings_2', '=', False)]}" class="fw-bold"/>
<div class="o_td_label col-3 col-md-2">
<field name="topping_label_2" nolabel="1" attrs="{'invisible': [('available_toppings_2', '=', False)]}" class="o_form_label"/>
</div>
<div class="col-10">
<field name="topping_ids_2" attrs="{'invisible': [('available_toppings_2', '=', False)]}" widget="many2many_checkboxes" nolabel="1" domain="[('topping_category', '=', 2), ('supplier_id', '=', supplier_id)]"/>
<div class="col-9 col-md-10">
<field name="topping_ids_2" attrs="{'invisible': [('available_toppings_2', '=', False)]}" widget="many2many_checkboxes" nolabel="1" domain="[('topping_category', '=', 2), ('supplier_id', '=', supplier_id)]" class="o_field_widget o_quick_editable"/>
</div>
</div>
<div class="row">
<div class="col-2">
<field name="topping_label_3" nolabel="1" attrs="{'invisible': [('available_toppings_3', '=', False)]}" class="fw-bold"/>
<div class="o_td_label col-3 col-md-2">
<field name="topping_label_3" nolabel="1" attrs="{'invisible': [('available_toppings_3', '=', False)]}" class="o_form_label"/>
</div>
<div class="col-10">
<field name="topping_ids_3" attrs="{'invisible': [('available_toppings_3', '=', False)]}" widget="many2many_checkboxes" nolabel="1" domain="[('topping_category', '=', 3), ('supplier_id', '=', supplier_id)]"/>
<div class="col-9 col-md-10">
<field name="topping_ids_3" attrs="{'invisible': [('available_toppings_3', '=', False)]}" widget="many2many_checkboxes" nolabel="1" domain="[('topping_category', '=', 3), ('supplier_id', '=', supplier_id)]" class="o_field_widget o_quick_editable"/>
</div>
</div>
<div class="row">
<div class="col-2">
<label for="product_description" class="fw-bold"/>
<div class="o_td_label col-3 col-md-2">
<label for="product_description" class="o_form_label"/>
</div>
<div class="col-10">
<field name="product_description" nolabel="1"/>
<div class="col-9 col-md-10">
<field name="product_description" nolabel="1" class="o_field_widget o_quick_editable"/>
</div>
</div>
<div class="row">
<div class="col-2">
<label for="note" class="fw-bold" />
<div class="o_td_label col-3 col-md-2">
<label for="note" class="o_form_label" />
</div>
<div class="col-10">
<field name="note" nolabel="1" placeholder="Information, allergens, ..." />
<div class="col-9 col-md-10">
<field name="note" nolabel="1" placeholder="Information, allergens, ..." class="o_field_widget o_quick_editable"/>
</div>
</div>
<div class="row" attrs="{'invisible': [('order_deadline_passed', '=', False)]}">
<div class="col">
<div class="col-12">
<div class="alert alert-warning" role="alert">
The orders for this vendor have already been sent.
</div>
addons/lunch/views/lunch_product_views.xml
+9 -7
View File
@@ -119,15 +119,17 @@
<div class="o_kanban_record_top">
<div class="o_kanban_record_headings">
<strong class="o_kanban_record_title">
<div>
<span class="pe-1"><field name="is_favorite" widget="boolean_favorite" nolabel="1"/></span>
<div class="float-end text-odoo">
<div class="d-flex align-items-center justify-content-between">
<div>
<field class="pe-1" name="is_favorite" widget="boolean_favorite" nolabel="1"/>
<strong><span t-esc="record.name.value"/></strong>
</div>
<div class="text-odoo">
<div t-if="record.is_new.raw_value" class="o_lunch_new_product me-1 py-1 border-0 fs-6 badge rounded-pill text-bg-success">
New
</div>
<field name="price" widget="monetary"/>
</div>
<div t-if="record.is_new.raw_value" class="float-end o_lunch_new_product me-1 py-0 border-0 fs-6 badge rounded-pill bg-success">
New
</div>
<strong><span t-esc="record.name.value"/></strong>
</div>
</strong>
<span class="o_kanban_record_subtitle"><span t-esc="record.supplier_id.value"/></span>