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

[IMP] point_of_sale, pos_restaurant: add images on demo categories

Browse Source 
In this commit, we add images on demo categories to make the demo more
realistic but also change a bit the design of the category selector.

closes odoo/odoo#134621

Signed-off-by: David Monnom (moda) <moda@odoo.com>
This commit is contained in:
Adrien Guilliams (adgu)
2023-09-21 14:15:42 +00:00
parent 192c970da7
commit f96ea753f3
15 changed files with 60 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/point_of_sale/data/point_of_sale_demo.xml
+6 -3
View File
@@ -36,13 +36,16 @@
<!-- Resource: pos.category -->
<record id="pos_category_miscellaneous" model="pos.category">
<field name="name">Misc</field>
<field name="name">Misc</field>
<field name="image_128" type="base64" file="point_of_sale/static/img/misc_category.png" />
</record>
<record id="pos_category_desks" model="pos.category">
<field name="name">Desks</field>
<field name="name">Desks</field>
<field name="image_128" type="base64" file="point_of_sale/static/img/desk_category.png" />
</record>
<record id="pos_category_chairs" model="pos.category">
<field name="name">Chairs</field>
<field name="name">Chairs</field>
<field name="image_128" type="base64" file="point_of_sale/static/img/chair_category.png" />
</record>
<record model="pos.config" id="pos_config_main">
addons/point_of_sale/data/point_of_sale_onboarding.xml
+3
View File
@@ -3,12 +3,15 @@
<!-- Resource: pos.category -->
<record id="pos_category_miscellaneous" model="pos.category">
<field name="name">Misc</field>
<field name="image_128" type="base64" file="point_of_sale/static/img/misc_category.png" />
</record>
<record id="pos_category_desks" model="pos.category">
<field name="name">Desks</field>
<field name="image_128" type="base64" file="point_of_sale/static/img/desk_category.png" />
</record>
<record id="pos_category_chairs" model="pos.category">
<field name="name">Chairs</field>
<field name="image_128" type="base64" file="point_of_sale/static/img/chair_category.png" />
</record>
<record model="pos.config" id="pos_config_main">
addons/point_of_sale/static/img/chair_category.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

addons/point_of_sale/static/img/desk_category.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

addons/point_of_sale/static/img/misc_category.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

addons/point_of_sale/static/src/app/generic_components/category_selector/category_selector.xml
+20 -16
View File
@@ -1,23 +1,27 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates id="template" xml:space="preserve">
<t t-name="point_of_sale.CategorySelector">
<div t-attf-class="{{props.class}} d-flex overflow-auto">
<div t-foreach="props.categories" t-as="category" t-key="category.id"
class="d-flex align-items-center">
<i t-if="category.separator"
t-attf-class="px-2 fa {{category.separator}}"
aria-hidden="true"/>
<button class="category-button btn btn-light h-100 fw-bolder"
t-on-click="() => props.onClick(category.id)">
<div t-if="category.imageUrl"
class="category-img">
<img t-att-src="category.imageUrl" alt="Category" />
</div>
<i t-if="category.icon"
t-attf-class="fa {{category.icon}}"
<div t-attf-class="{{props.class}} d-flex overflow-auto w-100 flex-grow-1">
<div class="d-flex flex-fill gap-3 align-content-start p-2 bg-view overflow-auto">
<div t-foreach="props.categories" t-as="category" t-key="category.id"
class="d-flex align-items-center">
<i t-if="category.separator"
t-attf-class="px-2 fa {{category.separator}}"
aria-hidden="true"/>
<t t-esc="category.name" />
</button>
<button
class="category-button btn btn-light d-flex flex-column align-items-center justify-content-center category-item p-1 overflow-hidden h-100"
t-on-click="() => props.onClick(category.id)">
<img t-if="category.imageUrl"
class="rounded h-75"
t-att-src="category.imageUrl"
alt="Category" />
<i t-if="category.icon"
t-attf-class="fa {{category.icon}}"
aria-hidden="true"/>
<span t-if="category.name" class="w-100 text-center fs-5" t-esc="category.name" />
</button>
</div>
</div>
</div>
</t>
addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.scss
+3
View File
@@ -0,0 +1,3 @@
.h-12 {
height: 12%;
}
addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.xml
+3 -3
View File
@@ -2,7 +2,7 @@
<templates id="template" xml:space="preserve">
<t t-name="point_of_sale.ProductsWidgetControlPanel">
<div class="products-widget-control d-flex bg-view shadow-sm" t-ref="products-widget-control">
<div class="products-widget-control d-flex bg-view shadow-sm" t-att-class="{'h-12': categoriesHasImages}" t-ref="products-widget-control">
<CategorySelector
categories="getCategories()"
onClick="(id) => this.pos.setSelectedCategoryId(id)"
@@ -14,8 +14,8 @@
<i t-attf-class="fa {{state.mobileSearchBarIsShown ? 'fa-arrow-right' : 'fa-search'}}"/>
</button>
<t t-if="!state.isMobile || state.mobileSearchBarIsShown">
<div class="input-group h-100">
<div class="pos-search-bar form-control d-flex align-items-center py-1 bg-view border-0 rounded-0 border-start">
<div class="input-group border-bottom p-2 m-2" t-att-class="{'h-50': categoriesHasImages}">
<div class="pos-search-bar form-control d-flex align-items-center py-1 bg-view border-0 rounded-0">
<i class="oi oi-search me-2"/>
<input class="flex-grow-1 w-auto h-100 border-0 px-2 me-4" t-model="this.pos.searchProductWord" placeholder="Search Products..." type="text" autofocus="autofocus" t-on-keyup="updateSearch" />
<i t-if="this.pos.searchProductWord" class="fa fa-times position-absolute end-0 me-2 pe-1 cursor-pointer" t-on-click="_clearSearch"/>
addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.js
+9
View File
@@ -57,6 +57,15 @@ export class ProductsWidget extends Component {
};
});
}
get categoriesHasImages() {
const categories = this.getCategories();
for (const category of categories) {
if (category.imageUrl) {
return true;
}
}
return false;
}
get posHasValidProduct() {
return this.pos.posHasValidProduct();
}
addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss
+8
View File
@@ -7,3 +7,11 @@
grid-template-columns: repeat(3, 1fr);
}
}
.button-no-demo {
color: #017e84 !important;
}
.h-12 {
height: 12%;
}
addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.xml
+3 -3
View File
@@ -3,13 +3,13 @@
<t t-name="point_of_sale.ProductsWidget">
<div class="products-widget d-flex flex-column flex-grow-1 overflow-auto">
<div class="products-widget-control d-flex bg-view shadow-sm">
<div class="products-widget-control d-flex bg-view shadow-sm" t-att-class="{'h-12': categoriesHasImages}">
<CategorySelector
categories="getCategories()"
onClick="(id) => this.pos.setSelectedCategoryId(id)"
/>
<Input tModel="[pos, 'searchProductWord']"
class="'ms-auto'"
class="'ms-auto p-2 m-2'"
isSmall="ui.isSmall"
placeholder="'Search products...'"
icon="{type: 'fa', value: 'fa-search'}"
@@ -38,7 +38,7 @@
</t>
<t t-else="">
<div t-if="!state.loadingDemo">
<p class="text-large">No products available. Explore <a role="button" class="fw-bold text-muted" t-on-click="loadDemoDataProducts">demo data</a> or <a role="button" class="fw-bold text-muted" t-on-click="createNewProducts">create your own</a></p>
<p class="text-large">No products available. Explore <a role="button" class="button-no-demo fw-bolder" t-on-click="loadDemoDataProducts">demo data</a> or <a role="button" class="button-no-demo fw-bolder" t-on-click="createNewProducts">create your own</a>.</p>
</div>
<div t-else="" class="block-top-header position-absolute top-0 start-0 bg-black opacity-50 w-100 h-100 z-1000">
<div class="d-flex h-100 w-100 text-white flex-row align-items-center justify-content-center">
addons/pos_restaurant/data/pos_restaurant_demo.xml
+3 -1
View File
@@ -2,6 +2,7 @@
<data noupdate="1">
<record id="drinks" model="pos.category">
<field name="name">Drinks</field>
<field name="image_128" type="base64" file="pos_restaurant/static/img/drink_category.png" />
</record>
<record id="product_category_pos_food" model="product.category">
@@ -10,7 +11,8 @@
</record>
<record id="food" model="pos.category">
<field name="name">Food</field>
<field name="name">Food</field>
<field name="image_128" type="base64" file="pos_restaurant/static/img/food_category.png" />
</record>
<!-- Food -->
addons/pos_restaurant/data/pos_restaurant_onboarding.xml
+2
View File
@@ -2,11 +2,13 @@
<record id="drinks" model="pos.category">
<field name="name">Drinks</field>
<field name="image_128" type="base64" file="pos_restaurant/static/img/drink_category.png" />
</record>
<record id="product_category_pos_food" model="product.category">
<field name="parent_id" ref="point_of_sale.product_category_pos"/>
<field name="name">Food</field>
<field name="image_128" type="base64" file="pos_restaurant/static/img/food_category.png" />
</record>
<record id="food" model="pos.category">
addons/pos_restaurant/static/img/drink_category.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

addons/pos_restaurant/static/img/food_category.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB