[ADD] redesign_catalog: product image popup on mobile and package typ…

product_catalog/__init__.py

@@ -0,0 +1 @@
+from . import models

product_catalog/__manifest__.py

@@ -0,0 +1,18 @@
+{
+    "name": "Product Catalog Redesign",
+    "version": "1.0",
+    "category": "Sales",
+    "depends": ["product", "sale_management"],
+    "data": ["views/product_catalog_view.xml"],
+    "application": True,
+    "assets": {
+        "web.assets_backend": [
+            "product_catalog/static/src/scss/product_catalog.scss",
+            "product_catalog/static/src/js/product_catalog.js",
+            "product_catalog/static/src/js/image_preview/image_preview.xml",
+            "product_catalog/static/src/js/screen_container/screen_container.xml",
+        ],
+    },
+    "license": "LGPL-3",
+    "installable": True,
+}

product_catalog/models/__init__.py

@@ -0,0 +1 @@
+from . import product_catalog_inherit

product_catalog/models/product_catalog_inherit.py

@@ -0,0 +1,14 @@
+from odoo import fields, models
+
+
+class ProductCatalogInherited(models.Model):
+    _inherit = "product.template"
+
+    package_field = fields.Selection(
+        [
+            ("carton", "Carton"),
+            ("bulk", "Bulk"),
+            ("studio", "Studio"),
+        ],
+        string="Package Field",
+    )

product_catalog/static/src/js/image_preview/image_preview.xml

@@ -0,0 +1,8 @@
+<templates>
+
+    <t t-name="product_kanban_inherit.image_preview" t-inherit="web.ImageField" t-inherit-mode="primary">
+        <xpath expr="//img[@loading='lazy']" position="attributes">
+            <attribute name="t-on-click.stop">openImageFullScreen</attribute>
+        </xpath>
+    </t>
+</templates>

product_catalog/static/src/js/product_catalog.js

@@ -0,0 +1,34 @@
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { ImageField } from "@web/views/fields/image/image_field";
+import { Component } from "@odoo/owl";
+
+export class FullScreenImage extends Component {
+    static template = "product_kanban_inherit.popup_container";
+    static props = {
+        src: { type: String },
+        close: Function,
+    };
+}
+
+export class ImagePreviewField extends ImageField {
+    static template = "product_kanban_inherit.image_preview";
+
+    setup() {
+        super.setup();
+        this.dialog = useService("dialog");
+    }
+
+    openImageFullScreen() {
+        if (this.env.isSmall) {
+            this.dialog.add(FullScreenImage, {
+                src: this.getUrl(this.props.name),
+            });
+        }
+    }
+}
+
+export const imageClickEnlarge = {
+    component: ImagePreviewField,
+};
+registry.category("fields").add("image_preview_1", imageClickEnlarge);

product_catalog/static/src/js/screen_container/screen_container.xml

@@ -0,0 +1,19 @@
+<templates>
+
+    <t t-name="product_kanban_inherit.popup_container">
+        <div class="modal d-flex justify-content-center align-items-center fixed-top w-100">
+            <div class="o-FileViewer d-flex flex-column align-items-center w-100" tabindex="0">
+                <div class="o-FileViewer-header position-absolute top-0 w-100 p-3 text-end">
+                    <i class="fa fa-times text-white h2" role="button" t-on-click="props.close" title="Close" aria-label="Close" style="cursor: pointer;"></i>
+                </div>
+                <div class="o-FileViewer-main d-flex justify-content-center align-items-center 
+                        position-absolute top-0 bottom-0 start-0 end-0" t-on-click="props.close">
+                    <div class="o-FileViewer-zoomer d-flex justify-content-center align-items-center 
+                            position-absolute w-100 h-100">
+                        <img class="o-FileViewer-view transition-base rounded shadow" draggable="false" alt="Viewer" t-att-src="props.src" loading="lazy" style="width: 100vw; height: 100vh; object-fit: contain;" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+</templates>

product_catalog/static/src/scss/product_catalog.scss

@@ -0,0 +1,10 @@
+@media (max-width: 768px) {
+    .o_product_image {
+        div {
+            img {
+                max-width: 164px !important;
+                max-height: 164px !important;
+            }
+        }
+    }
+}

product_catalog/views/product_catalog_view.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <record id="inherit_product_view_kanban_catalog" model="ir.ui.view">
+        <field name="name">product.view.kanban.catalog.inherit</field>
+        <field name="model">product.product</field>
+        <field name="inherit_id" ref="product.product_view_kanban_catalog" />
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='image_128']" position="attributes">
+                <attribute name="class">ms-auto o_product_image</attribute>
+                <attribute name="widget">image_preview_1</attribute>
+            </xpath>
+            <xpath expr="//field[@name='product_template_attribute_value_ids']" position="after">
+                <span>Package Type: <field name="package_field"/>
+                </span>
+            </xpath>
+        </field>
+    </record>
+
+    <record id="product_template_form_view_extend" model="ir.ui.view">
+        <field name="name">product.template.form.inherit.kit</field>
+        <field name="model">product.template</field>
+        <field name="inherit_id" ref="product.product_template_form_view" />
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='type']" position="after">
+                <field name="package_field" widget='selection' />
+            </xpath>
+        </field>
+    </record>
+</odoo>