[ADD] catalog_redesigner: create the catalog re-designer module

catalog_redesigner/__manifest__.py

@@ -0,0 +1,24 @@
+{
+    'name': 'Product Catalog Redesigner',
+    'version': '1.0',
+    'depends': ['product'],
+    'author': 'Shivam Saksham(shsak)',
+    'category': 'Sales',
+    'description': """
+    An module to redesign the catalog in small screens.
+    """,
+    'application': False,
+    'license': 'LGPL-3',
+    'data': [
+        'views/product_views.xml',
+    ],
+    "assets": {
+        "web.assets_backend": [
+            "catalog_redesigner/static/src/js/product_image.js",
+            "catalog_redesigner/static/src/js/image_dialog.js",
+            "catalog_redesigner/static/src/xml/product_image.xml",
+            "catalog_redesigner/static/src/xml/image_dialog.xml",
+            "catalog_redesigner/static/src/scss/styles.scss",
+        ],
+    },
+}

catalog_redesigner/static/src/js/image_dialog.js

@@ -0,0 +1,9 @@
+import { Component } from "@odoo/owl"
+
+export class ImageDialog extends Component {
+    static template = "product_view_kanban_catalog_inherit.image_dialog"
+    static props = {
+        imgSrc: String,
+        close: Function,
+    }
+}

catalog_redesigner/static/src/js/product_image.js

@@ -0,0 +1,30 @@
+import { useService } from "@web/core/utils/hooks"
+import { registry } from "@web/core/registry"
+import { imageField, ImageField } from "@web/views/fields/image/image_field";
+import { ImageDialog } from "./image_dialog"
+
+export class ImageClickEnlarge extends ImageField {
+    static template = "product_view_kanban_catalog_inherit.image_preview"
+
+    setup() {
+        super.setup()
+        this.dialog = useService("dialog")
+    }
+
+    openImageInDialog(e) {
+        if(!this.isMobile){
+            return
+        }
+        e.stopPropagation()
+        this.dialog.add(ImageDialog, {
+            imgSrc: this.getUrl(this.props.name)
+        })
+    }
+}
+
+export const imageDesigner = {
+    ...imageField,
+    component: ImageClickEnlarge
+}
+
+registry.category("fields").add("custom_image_designer", imageDesigner)

catalog_redesigner/static/src/scss/styles.scss

@@ -0,0 +1,7 @@
+@media (max-width: 768px) {
+    .o-responsive-img {
+        width: 150px !important;
+        max-width: 150px !important;
+        max-height: 150px !important;
+    }
+}

catalog_redesigner/static/src/xml/image_dialog.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+
+    <t t-name="product_view_kanban_catalog_inherit.image_dialog">
+        <div role="dialog"
+            class="modal d-flex justify-content-center align-items-center fixed-top w-100">
+            <div class="modal-dialog bg-white d-flex flex-column h-auto">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <i class="fa fa-fw fa-times ms-auto" t-on-click="props.close" title="Close"
+                            aria-label="Close"></i>
+                    </div>
+                    <div class="modal-body">
+                        <img class="m-auto p-4 img-fluid" style="min-width: 300px"
+                            t-att-src="props.imgSrc" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+
+</templates>

catalog_redesigner/static/src/xml/product_image.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+
+    <t t-name="product_view_kanban_catalog_inherit.image_preview" t-inherit="web.ImageField"
+        t-inherit-mode="primary">
+        <xpath expr="//img[@t-att-class='imgClass']" position="attributes">
+            <attribute name="t-on-click">openImageInDialog</attribute>
+            <attribute name="class">ms-auto img-fluid o-responsive-img</attribute>
+        </xpath>
+    </t>
+
+</templates>

catalog_redesigner/views/product_views.xml

@@ -0,0 +1,17 @@
+<odoo>
+    <record id="product_view_kanban_catalog" model="ir.ui.view">
+        <field name="name">product.view.kanban.catalog.inherit.catalog.redesigner</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="widget">custom_image_designer</attribute>
+            </xpath>
+            <xpath expr="//field[@name='product_template_attribute_value_ids']" position="after">
+                <div class="d-sm-none">
+                    <field name="uom_ids" widget="many2many_tags" />
+                </div>
+            </xpath>
+        </field>
+    </record>
+</odoo>