From 9c2dc06dcccbfb2c739b44680d1a4b227c88f0cf Mon Sep 17 00:00:00 2001 From: hengsin Date: Thu, 16 Mar 2023 15:49:36 +0800 Subject: [PATCH] =?UTF-8?q?IDEMPIERE-4445=20Color=20Picker=20field=20type?= =?UTF-8?q?=20is=20not=20rendered=20in=20grid=20mode=20s=E2=80=A6=20(#1732?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * IDEMPIERE-4445 Color Picker field type is not rendered in grid mode show hex value - fix working with grid view * IDEMPIERE-4445 Color Picker field type is not rendered in grid mode show hex value - change style of display view. --- .../WEB-INF/src/metainfo/zk/lang-addon.xml | 2 +- .../adempiere/webui/editor/WColorEditor.java | 69 +++++++++++++++++-- .../theme/default/css/fragment/grid.css.dsp | 11 +++ 3 files changed, 74 insertions(+), 8 deletions(-) diff --git a/org.adempiere.ui.zk/WEB-INF/src/metainfo/zk/lang-addon.xml b/org.adempiere.ui.zk/WEB-INF/src/metainfo/zk/lang-addon.xml index 9b34325ca7..391d3be888 100644 --- a/org.adempiere.ui.zk/WEB-INF/src/metainfo/zk/lang-addon.xml +++ b/org.adempiere.ui.zk/WEB-INF/src/metainfo/zk/lang-addon.xml @@ -57,6 +57,6 @@ Copyright (C) 2007 Ashley G Ramdass (ADempiere WebUI). - + diff --git a/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/editor/WColorEditor.java b/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/editor/WColorEditor.java index b996e27d67..d27afffc38 100644 --- a/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/editor/WColorEditor.java +++ b/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/editor/WColorEditor.java @@ -29,6 +29,7 @@ package org.adempiere.webui.editor; import java.util.logging.Level; +import org.adempiere.util.GridRowCtx; import org.adempiere.webui.component.EditorBox; import org.adempiere.webui.component.Textbox; import org.adempiere.webui.event.ContextMenuEvent; @@ -41,10 +42,13 @@ import org.compiere.util.Env; import org.compiere.util.Msg; import org.compiere.util.Util; import org.zkoss.zk.au.out.AuScript; +import org.zkoss.zk.ui.Component; import org.zkoss.zk.ui.Executions; import org.zkoss.zk.ui.event.Event; import org.zkoss.zk.ui.event.Events; +import org.zkoss.zk.ui.sys.ComponentCtrl; import org.zkoss.zk.ui.util.Clients; +import org.zkoss.zul.Html; import org.zkoss.zul.Menuitem; /** @@ -101,7 +105,14 @@ public class WColorEditor extends WEditor implements ContextMenuListener colorbox.setClientAttribute("type", "color"); colorbox.setStyle("position:absolute;top:0;left:0;height:0px !important;width:0px !important;" + "border:none !important;margin:0 !important;padding:0 !important;visibility:hidden;"); - getComponent().appendChild(colorbox); + + //append colorbox to getComponent doesn't with with table/grid + if (!tableEditor) { + getComponent().appendChild(colorbox); + } else { + getComponent().getTextbox().addCallback(ComponentCtrl.AFTER_PAGE_ATTACHED, t -> afterPageAttached()); + getComponent().getTextbox().addCallback(ComponentCtrl.AFTER_PAGE_DETACHED, t -> afterPageDetached()); + } colorbox.addEventListener("onInput", e -> { processNewValue((String)e.getData()); @@ -121,6 +132,34 @@ public class WColorEditor extends WEditor implements ContextMenuListener + "}"); } + /** + * Handle after page detached callback. This is use when editor is use within grid/table. + * @return null + */ + private Object afterPageDetached() { + if (colorbox.getPage() != null && colorbox.getParent() != getComponent()) { + colorbox.detach(); + } + + //need to attach callback again as editor is reuse in grid view + getComponent().getTextbox().addCallback(ComponentCtrl.AFTER_PAGE_ATTACHED, t -> afterPageAttached()); + getComponent().getTextbox().addCallback(ComponentCtrl.AFTER_PAGE_DETACHED, t -> afterPageDetached()); + + return null; + } + + /** + * Handle after page attached callback. This is use when editor is use within grid/table. + * @return null + */ + private Object afterPageAttached() { + if (colorbox.getParent() == null) { + colorbox.setPage(this.getComponent().getPage()); + } + fillTextbox(); + return null; + } + private void init() { if (log.isLoggable(Level.INFO)) log.info("Initializing component"); @@ -193,15 +232,23 @@ public class WColorEditor extends WEditor implements ContextMenuListener private void fillTextbox() { String style="background-color: transparent !important;"; if (!Util.isEmpty(oldValue, true)) - style = "background: linear-gradient(to right, rgba(255,0,0,0) 50%, " - + oldValue + " 50%) !important;"; + style = getBackgroundFillStyle(oldValue); String script = "jq('#"+getComponent().getTextbox().getUuid()+"').attr('style','"+style+"');"; - if (Executions.getCurrent() != null) + if (Executions.getCurrent() != null && getComponent().getPage() != null) Clients.response(new AuScript(script)); else if (getComponent().getDesktop() != null) Executions.schedule(getComponent().getDesktop(), e -> Clients.response(new AuScript(script)), new Event("onFillTextBox")); } + /** + * @param color hex color string + * @return background fill style + */ + protected String getBackgroundFillStyle(String color) { + return "background: linear-gradient(to right, rgba(255,0,0,0) 50%, " + + color + " 50%) !important;"; + } + @Override public Object getValue() { @@ -236,7 +283,7 @@ public class WColorEditor extends WEditor implements ContextMenuListener } } - public void openColorPicker() { // TODO color picker is opening at upper left ; better to open it at center of screen + public void openColorPicker() { String uid = colorbox.getUuid(); String script = "(function(){let wgt = zk.Widget.$('#"+uid+"');wgt.$n().click();})()"; Clients.response(new AuScript(script)); @@ -266,11 +313,19 @@ public class WColorEditor extends WEditor implements ContextMenuListener } @Override - public String getDisplayTextForGridView(Object value) { + public String getDisplayTextForGridView(GridRowCtx gridRowCtx, Object value) { if (value == null) { return ""; } else { - return (String)value; + return "
" + + "
" + + "
"; } } + + @Override + public Component getDisplayComponent() { + return new Html(); + } + } diff --git a/org.adempiere.ui.zk/WEB-INF/src/web/theme/default/css/fragment/grid.css.dsp b/org.adempiere.ui.zk/WEB-INF/src/web/theme/default/css/fragment/grid.css.dsp index 269f20a495..9313882c7a 100644 --- a/org.adempiere.ui.zk/WEB-INF/src/web/theme/default/css/fragment/grid.css.dsp +++ b/org.adempiere.ui.zk/WEB-INF/src/web/theme/default/css/fragment/grid.css.dsp @@ -118,3 +118,14 @@ div.z-listbox-body .z-listcell { height: 20px; } +div.grid-view-color-fieldtype-display { + height: 20px; + display: flex; + align-items: center; + justify-content: center; +} + +div.grid-view-color-fieldtype-display > div { + width: 95%; + height: 80%; +}