From 75e1f5387d1f4a0cc778335bed0ce5a4496bda91 Mon Sep 17 00:00:00 2001 From: hujiaying Date: Wed, 9 Oct 2024 16:01:12 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9coustom=5Fmany2many=5Fcheckbo?= =?UTF-8?q?xes=E7=BB=84=E4=BB=B6=E7=9A=84=E5=B1=95=E7=A4=BA=E6=96=B9?= =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E6=8E=A7=E5=88=B6=E5=9B=BE=E7=89=87=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E5=A4=A7=E5=B0=8F=EF=BC=8C=E4=BF=AE=E6=94=B9=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E9=A2=84=E8=A7=88=E5=9B=BE=E5=B1=95=E7=A4=BA=E7=9A=84?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../custom_many2many_checkboxes.css | 118 +++++++++++++----- .../custom_many2many_checkboxes.js | 66 ++++++---- .../custom_many2many_checkboxes.xml | 19 ++- 3 files changed, 139 insertions(+), 64 deletions(-) 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 df6cdfb6..edaa2bb4 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,41 +1,99 @@ -.zoomed { - position: fixed !important; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) scale(10); + +.processing-capabilities-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 10px; + width: 100%; } -.many2many_flex { - display: flex; +.grid-item { + display: flex; + align-items: center; } -.many2many_flex>div { - margin-right: 15px; - display: flex; - flex-direction: column; - align-items: center; +.item-content { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} +/*控制图片大小*/ +.item-icon { + width: 50px; + height: 50px; + margin-bottom: 5px; } -.many2many_flex>div>:nth-child(2) { - position: relative; +.item-label { + font-size: 12px; + word-break: break-word; } -.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; +@media (max-width: 1200px) { + .processing-capabilities-grid { + grid-template-columns: repeat(4, 1fr); + } } -.img_close { - opacity: 1; - transform: scale(0.1); - cursor: pointer; +@media (max-width: 768px) { + .processing-capabilities-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 480px) { + .processing-capabilities-grid { + grid-template-columns: repeat(2, 1fr); + } +} +.image-preview-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.9); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + opacity: 0; + transition: opacity 0.3s ease; +} + +.image-preview-container.show { + opacity: 1; +} + +.image-preview { + max-width: 90%; + max-height: 90%; + object-fit: contain; + box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); + border-radius: 5px; + transform: scale(0.9); + transition: transform 0.3s ease; +} + +.image-preview-container.show .image-preview { + transform: scale(1); +} + +.image-preview-close { + position: absolute; + top: 20px; + right: 30px; + color: #fff; + font-size: 40px; + font-weight: bold; + transition: 0.3s; + cursor: pointer; + opacity: 0.7; +} + +.image-preview-close:hover, +.image-preview-close:focus { + opacity: 1; + text-decoration: none; + 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 a3053b72..dee78c5f 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 @@ -4,35 +4,57 @@ import {Many2ManyCheckboxesField} from "@web/views/fields/many2many_checkboxes/m import {registry} from "@web/core/registry"; export class MyCustomWidget extends Many2ManyCheckboxesField { - // 你可以重写或者添加一些方法和属性 - // 例如，你可以重写setup方法来添加一些事件监听器或者初始化一些变量 setup() { - super.setup(); // 调用父类的setup方法 - // 你自己的代码 + super.setup(); } - onImageClick(event) { - // 放大图片逻辑 - // 获取图片元素 - const img = event.target; - const close = img.nextSibling; + onImageClick(event, src) { + event.preventDefault(); + event.stopPropagation(); - // 实现放大图片逻辑 - // 比如使用 CSS 放大 - img.parentElement.classList.add('zoomed'); - close.classList.add('img_close'); - } + // 创建预览框 + const previewContainer = document.createElement('div'); + previewContainer.className = 'image-preview-container'; - onCloseClick(event) { - const close = event.target; - const img = close.previousSibling; - img.parentElement.classList.remove('zoomed'); - close.classList.remove('img_close'); + const previewImg = document.createElement('img'); + previewImg.src = src; + previewImg.className = 'image-preview'; + // 设置放大的预览图片大小 + previewImg.style.width = '600px'; + previewImg.style.height = 'auto'; // 保持宽高比 + + const closeButton = document.createElement('span'); + closeButton.innerHTML = '×'; + closeButton.className = 'image-preview-close'; + + previewContainer.appendChild(previewImg); + previewContainer.appendChild(closeButton); + document.body.appendChild(previewContainer); + + // 添加关闭预览的事件监听器 + const closePreview = () => { + previewContainer.classList.remove('show'); + setTimeout(() => { + document.body.removeChild(previewContainer); + }, 300); + }; + + closeButton.addEventListener('click', closePreview); + + // 点击预览框外部也可以关闭 + previewContainer.addEventListener('click', (e) => { + if (e.target === previewContainer) { + closePreview(); + } + }); + + // 使用 setTimeout 来触发过渡效果 + setTimeout(() => { + previewContainer.classList.add('show'); + }, 10); } } MyCustomWidget.template = "jikimo_frontend.MyCustomWidget"; -// MyCustomWidget.supportedTypes = ['many2many']; - -registry.category("fields").add("custom_many2many_checkboxes", MyCustomWidget); +registry.category("fields").add("custom_many2many_checkboxes", MyCustomWidget); \ No newline at end of file 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 bebae03b..9bb8797d 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,27 +2,22 @@ -
+
-
+
- - +
+ + +
-
- - -
×
-
-
-
- + \ No newline at end of file