From b76c192f3349fcf7fa60fd918702e41993c2d2c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?WEB=E8=AE=B8=E4=BD=95=E5=93=B2=5Cxuhez?=
 <xuhezhe@jikimo.com>
Date: Fri, 8 Sep 2023 16:31:06 +0800
Subject: [PATCH] =?UTF-8?q?many2many=E5=9B=BE=E6=96=87=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E5=8F=8A=E7=82=B9=E5=87=BB=E4=BA=A4=E4=BA=92=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jikimo_frontend/__manifest__.py               |  2 +-
 .../custom_many2many_checkboxes.css           | 39 ++++++++++++++++-
 .../custom_many2many_checkboxes.js            | 43 ++++++++++++-------
 .../custom_many2many_checkboxes.xml           | 17 ++++----
 4 files changed, 74 insertions(+), 27 deletions(-)

diff --git a/jikimo_frontend/__manifest__.py b/jikimo_frontend/__manifest__.py
index fc3c7549..716bc918 100644
--- a/jikimo_frontend/__manifest__.py
+++ b/jikimo_frontend/__manifest__.py
@@ -22,7 +22,7 @@
         ],
         'web.assets_backend': [
             'jikimo_frontend/static/src/fields/custom_many2many_checkboxes/*',
-            'jikimo_frontend/static/src/scss/test.scss',
+            'jikimo_frontend/static/src/scss/custom_style.scss',
         ],
 
     },
diff --git a/jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.css b/jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.css
index de17fabb..df6cdfb6 100644
--- a/jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.css
+++ b/jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.css
@@ -1,6 +1,41 @@
 .zoomed {
-  position: fixed;
+  position: fixed !important;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%) scale(20);
+  transform: translate(-50%, -50%) scale(10);
 }
+
+.many2many_flex {
+  display: flex;
+}
+
+.many2many_flex>div {
+  margin-right: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.many2many_flex>div>:nth-child(2) {
+  position: relative;
+}
+
+.close {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: -8.8px;
+  right: -8.8px;
+  color: #fff;
+  background-color: #000;
+  opacity: 0;
+  text-align: center;
+  line-height: 20px;
+  font-size: 18px;
+}
+
+.img_close {
+  opacity: 1;
+  transform: scale(0.1);
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.js b/jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.js
index f3cadea1..3b0799cc 100644
--- a/jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.js
+++ b/jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.js
@@ -1,25 +1,36 @@
 /** @odoo-module **/
 
-import { Many2ManyCheckboxesField } from "@web/views/fields/many2many_checkboxes/many2many_checkboxes_field";
-import { registry } from "@web/core/registry";
+import {Many2ManyCheckboxesField} from "@web/views/fields/many2many_checkboxes/many2many_checkboxes_field";
+import {registry} from "@web/core/registry";
 
 export class MyCustomWidget extends Many2ManyCheckboxesField {
-  // 你可以重写或者添加一些方法和属性
-  // 例如，你可以重写setup方法来添加一些事件监听器或者初始化一些变量
-  setup() {
-    super.setup(); // 调用父类的setup方法
-    // 你自己的代码
-  }
-  onImageClick(event) {
-    // 放大图片逻辑
-    // 获取图片元素
-    const img = event.target;
+    // 你可以重写或者添加一些方法和属性
+    // 例如，你可以重写setup方法来添加一些事件监听器或者初始化一些变量
+    setup() {
+        super.setup(); // 调用父类的setup方法
+        // 你自己的代码
+    }
 
-    // 实现放大图片逻辑
-    // 比如使用 CSS 放大
-    img.classList.add('zoomed');
-  }
+    onImageClick(event) {
+        // 放大图片逻辑
+        // 获取图片元素
+        const img = event.target;
+        const close = img.nextSibling
+
+        // 实现放大图片逻辑
+        // 比如使用 CSS 放大
+        img.parentElement.classList.add('zoomed');
+        close.classList.add('img_close')
+    }
+
+    onCloseClick(event) {
+        const close = event.target;
+        const img = close.previousSibling
+        img.parentElement.classList.remove('zoomed')
+        close.classList.remove('img_close')
+    }
 }
+
 MyCustomWidget.template = "sf_plan.MyCustomWidget"
 // MyCustomWidget.supportedTypes = ['many2many'];
 
diff --git a/jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.xml b/jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.xml
index 91eaff59..dedcfb11 100644
--- a/jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.xml
+++ b/jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.xml
@@ -2,24 +2,25 @@
 <templates xml:space="preserve">
 
     <t t-name="sf_plan.MyCustomWidget" owl="1">
-        <div aria-atomic="true">
+        <div aria-atomic="true" class="many2many_flex">
             <t t-foreach="items" t-as="item" t-key="item[0]">
                 <div>
                     <CheckBox
-                        value="isSelected(item)"
-                        disabled="props.readonly"
-                        onChange="(ev) => this.onChange(item[0], ev)"
+                            value="isSelected(item)"
+                            disabled="props.readonly"
+                            onChange="(ev) => this.onChange(item[0], ev)"
                     >
                         <t t-esc="item[1]"/>
 
                     </CheckBox>
-
-                </div>
-                <div t-on-click="onImageClick">
+                    <div t-on-dblclick="onImageClick">
                     <t>
-                        <img t-att-src="item[2]" width="20" height="20"/>
+                        <img t-att-src="item[2]" width="50" height="50"/>
+                        <div class="close" t-on-click="onCloseClick">×</div>
                     </t>
                 </div>
+                </div>
+
             </t>
         </div>
     </t>