18.0 redesign catalog view ajka

Redesign_Catalog_view/__init__.py

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

Redesign_Catalog_view/__manifest__.py

@@ -0,0 +1,20 @@
+{
+    'name': 'Product Image Popup',
+    'version': '1.0',
+    'category': 'Sales',
+    'license': 'LGPL-3',
+    'depends': ['base', 'product', 'web'],
+    'data': [
+        'views/product_catalog_kanban.xml',
+    ],
+    'assets': {
+        'web.assets_backend': [
+            'Redesign_Catalog_view/static/src/**/*',
+        ],
+        'web.assets_frontend': [
+            'Redesign_Catalog_view/static/src/**/*',
+        ],
+    },
+    'installable': True,
+    'application': True,
+}

Redesign_Catalog_view/models/__init__.py

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

Redesign_Catalog_view/models/product_image_popup.py

@@ -0,0 +1,7 @@
+from odoo import models
+
+
+class ProductImagePopup(models.Model):
+    _inherit = 'product.product'
+
+    pass

Redesign_Catalog_view/static/src/css/product_image_model.scss

@@ -0,0 +1,101 @@
+/* Responsive product image on product card */
+@media (max-width: 768px) {
+    .o_product_image_custom img {
+        max-width: 150px !important;
+        max-height: 150px !important;
+        width: 150px !important;
+        height: 150px !important;
+    }
+}
+
+/* Full-screen image viewer modal */
+@media (max-width: 768px){
+.full-image-dialog {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(4px);
+    padding: 1rem;
+}
+
+/* Container for the image and controls */
+.image-container {
+    position: relative;
+    width: 70vw;
+    height: 70vh;
+    max-width: 95vw;
+    max-height: 95vh;
+    overflow: hidden;
+    border-radius: 12px;
+    background-color: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Zoomable image */
+.full-size-image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    transition: transform 0.3s ease-in-out;
+}
+
+/* Zoom control buttons */
+.zoom-controls {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    display: flex;
+    gap: 10px;
+    z-index: 2;
+}
+
+/* Zoom buttons styling */
+.zoom-btn {
+    background-color: rgba(255, 255, 255, 0.8);
+    border: none;
+    width: 32px;
+    height: 32px;
+    font-size: 18px;
+    font-weight: bold;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s;
+}
+
+.zoom-btn:hover {
+    background-color: rgba(255, 255, 255, 1);
+}
+
+/* Close button styling */
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: rgba(255, 255, 255, 0.9);
+    border: none;
+    width: 30px;
+    height: 30px;
+    font-size: 20px;
+    font-weight: bold;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    transition: background 0.2s ease;
+}
+
+.close-btn:hover {
+    background-color: rgba(255, 255, 255, 1);
+}
+}

Redesign_Catalog_view/static/src/js/product_catalog_kanban.js

@@ -0,0 +1,64 @@
+import { Component, useState } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+import { Dialog } from "@web/core/dialog/dialog";
+import { registry } from "@web/core/registry";
+import { ProductCatalogKanbanRecord } from "@product/product_catalog/kanban_record";
+import { ProductCatalogKanbanRenderer } from "@product/product_catalog/kanban_renderer";
+import { productCatalogKanbanView } from "@product/product_catalog/kanban_view";
+
+class ImageDialog extends Component {
+    static template = "product_catalog_redesign.ImageDialog";
+    static components = { Dialog };
+    static props = ["imageUrl","close"];
+
+    setup() {
+        this.state = useState({ zoom: 1 });
+        this.updateZoom = this.updateZoom.bind(this);
+    }
+
+    updateZoom(value) {
+        this.state.zoom = Math.max(0.5, Math.min(3, this.state.zoom + value));
+    }
+}
+
+class ProductCatalogKanbanRecordInherited extends ProductCatalogKanbanRecord {
+    setup() {
+        super.setup();
+        this.dialogService = useService("dialog");
+    }
+
+    onGlobalClick(ev) {
+
+        const imageElement = ev.target.closest(".o_product_image_custom img");
+        if (imageElement) {
+            this.dialogService.add(ImageDialog, {
+                imageUrl: imageElement.src,
+            });
+            return;
+        }
+
+        if (ev.target.closest(".o_product_catalog_cancel_global_click")) {
+            return;
+        }
+        if (this.productCatalogData.quantity === 0) {
+            this.addProduct();
+        } else {
+            this.increaseQuantity();
+        }
+
+    }
+}
+
+class InheritProductCatalogKanbanRenderer extends ProductCatalogKanbanRenderer {
+    static components = {
+        ...ProductCatalogKanbanRenderer.components,
+        KanbanRecord: ProductCatalogKanbanRecordInherited,
+    };
+}
+
+export const InheritProductCatalogKanbanView = {
+    ...productCatalogKanbanView,
+    Renderer: InheritProductCatalogKanbanRenderer,
+};
+
+registry.category("views").add("product_kanban_catalog_inherit", InheritProductCatalogKanbanView);

Redesign_Catalog_view/static/src/xml/product_catalog_templates.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="product_catalog_redesign.ImageDialog">
+        <div class="full-image-dialog" >
+             <button class="close-btn" t-on-click="props.close">×</button>
+                <div class="image-container">
+                    <img t-att-src="props.imageUrl"
+                         class="full-size-image"
+                         t-att-style="'transform: scale(' + state.zoom + ');'"/>
+                    <div class="zoom-controls">
+                        <button class="zoom-btn" t-on-click="() => updateZoom(0.1)">+</button>
+                        <button class="zoom-btn" t-on-click="() => updateZoom(-0.1)">-</button>
+                    </div>
+                </div>
+        </div>
+    </t>
+</templates>

Redesign_Catalog_view/views/product_catalog_kanban.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <record id="product_view_kanban_catalog_inherit_porduct_catalog_redesign" model="ir.ui.view">
+        <field name="name">product.product.view.kanban.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_custom</attribute>
+            </xpath>         
+            <xpath expr="//kanban" position="attributes">
+                <attribute name="js_class" add="product_kanban_catalog_inherit" remove="product_kanban_catalog"/>
+            </xpath>
+        </field>
+    </record>  
+</odoo>