IDEMPIERE-5563 - Font Icons not implemented on HTML Report column menu (#1689)

* IDEMPIERE-5563 - Font Icons not implemented on HTML Report column menu

* IDEMPIERE-5563 - Font Icons not implemented on HTML Report column menu

* IDEMPIERE-5563 - pr1689 patch

org.adempiere.base/src/org/compiere/print/IHTMLExtension.java

@@ -18,23 +18,55 @@ import org.apache.ecs.xhtml.a;
 import org.apache.ecs.xhtml.body;
 
 /**
- * 
+ * Extension interface for HTML report
  * @author hengsin
- *
  */
 public interface IHTMLExtension {
 
+	/**
+	 * @return css class prefix for report element
+	 */
 	public String getClassPrefix();
 	
+	/**
+	 * @return url to report css
+	 */
 	public String getStyleURL();
 	
+	/**
+	 * @return url to report js
+	 */
 	public String getScriptURL();
 	
+	/**
+	 * Apply customization to row
+	 * @param row
+	 * @param printData
+	 */
 	public void extendRowElement(ConcreteElement row, PrintData printData);
 	
+	/**
+	 * Apply customization to ID element
+	 * @param row
+	 * @param columnElement
+	 * @param href link for ID column
+	 * @param dataElement
+	 */
 	public void extendIDColumn(int row, ConcreteElement columnElement, a href, PrintDataElement dataElement);
 	
+	/**
+	 * Add attributes to reportBody
+	 * @param reportBody
+	 */
 	public void setWebAttribute (body reportBody);
 	
+	/**
+	 * @return absolute path to css style file
+	 */
 	public String getFullPathStyle ();
+
+	/**
+	 * @return one or more links for web font
+	 */
+	String getWebFontLinks();
 }

org.adempiere.base/src/org/compiere/print/ReportEngine.java

@@ -766,6 +766,11 @@ queued-job-count = 0  (class javax.print.attribute.standard.QueuedJobCount)
 				doc.getBody().setNeedClosingTag(false);
 				doc.appendHead("<meta charset=\"UTF-8\" />");
 				
+				if (extension != null && !Util.isEmpty(extension.getWebFontLinks(), true))
+				{
+					doc.appendHead(extension.getWebFontLinks());
+				}
+
 				if (extension != null && extension.getStyleURL() != null)
 				{
 					// maybe cache style content with key is path

org.adempiere.ui.zk/WEB-INF/src/metainfo/zk/lang-addon.xml

@@ -48,7 +48,7 @@ Copyright (C) 2007 Ashley G Ramdass (ADempiere WebUI).
 	<javascript-module name="jawwa.atmosphere" version="202205100600"/>
 	<javascript-module name="adempiere.local.storage" version="202205100600"/>
 	<javascript-module name="html2canvas" version="1.3.1"/>
-	<javascript-module name="org.idempiere.commons" version="202206300300"/>
+	<javascript-module name="org.idempiere.commons" version="202303021810"/>
 	<javascript-module name="jquery.maskedinput" version="1.4.1" />
 	<javascript-module name="photobooth"	version="0.7-rsd3" />
 	<javascript-module name="chosenbox" version="202205100600"/>

org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/report/HTMLExtension.java

@@ -34,9 +34,8 @@ import org.compiere.util.Msg;
 import org.zkoss.zk.ui.Executions;
 
 /**
- * 
+ * Default implementation for HTML report extension
  * @author hengsin
- *
  */
 public class HTMLExtension implements IHTMLExtension {
 
@@ -46,6 +45,11 @@ public class HTMLExtension implements IHTMLExtension {
 	private String styleURL;
 	private String contextPath;
 
+	/**
+	 * @param contextPath
+	 * @param classPrefix
+	 * @param componentId
+	 */
 	public HTMLExtension(String contextPath, String classPrefix, String componentId) {
 
 		String theme = MSysConfig.getValue(MSysConfig.HTML_REPORT_THEME, "/", Env.getAD_Client_ID(Env.getCtx()));
@@ -67,15 +71,27 @@ public class HTMLExtension implements IHTMLExtension {
 		this.contextPath = contextPath;
 	}
 	
+	@Override
+	public String getWebFontLinks() {
+		StringBuilder builder = new StringBuilder();
+		builder.append("<link rel=\"stylesheet\" href=\"")
+			.append(contextPath)
+			.append("/css/font-awesome.css.dsp")
+			.append("\">");
+		return builder.toString();
+	}
+
+	@Override
 	public void extendIDColumn(int row, ConcreteElement columnElement, a href,
 			PrintDataElement dataElement) {
-		href.addAttribute("onclick", "parent.idempiere.showColumnMenu(document, event, '" + dataElement.getColumnName() + "', " + row + ")");		
+		href.addAttribute("onclick", "parent.idempiere.showColumnMenu(document, event, '" + dataElement.getColumnName() + "', " + row + ", " + ThemeManager.isUseFontIconForImage() + ")");		
 		href.addAttribute ("componentId", componentId);
 		href.addAttribute ("foreignColumnName", dataElement.getForeignColumnName());
 		href.addAttribute ("value", dataElement.getValueAsString());
 		href.addAttribute ("displayValue", dataElement.getValueDisplay(Env.getLanguage(Env.getCtx())));
 	}
 
+	@Override
 	public void extendRowElement(ConcreteElement row, PrintData printData) {
 		PrintDataElement pkey = printData.getPKey();
 		if (pkey != null)
@@ -87,68 +103,86 @@ public class HTMLExtension implements IHTMLExtension {
 		}
 	}
 
+	@Override
 	public String getClassPrefix() {
 		return classPrefix;
 	}
 
+	@Override
 	public String getScriptURL() {
 		return scriptURL;
 	}
 
+	@Override
 	public String getStyleURL() {
 		return styleURL;
 	}
 
+	@Override
 	public void setWebAttribute (body reportBody){
 		// set attribute value for create menu context
-		StringBuilder windowImageURL = new StringBuilder();
+		StringBuilder windowIconAttr = new StringBuilder();
-		String windowIco = ThemeManager.getThemeResource("images/mWindow.png");
+		if(ThemeManager.isUseFontIconForImage()) {
-		if (windowIco.startsWith("~./")) {
+			windowIconAttr.append("z-icon-Window");
-			if (Executions.getCurrent() != null) {
-				windowImageURL.append(Executions.encodeURL(windowIco));
-			}
-		} else {
-			windowImageURL.append(contextPath);
-			if (!windowIco.startsWith("/") && !contextPath.endsWith("/"))
-				windowImageURL.append("/");
-			windowImageURL.append(windowIco);
 		}
-		StringBuilder reportImageURL = new StringBuilder();
+		else {
-		String reportIco = ThemeManager.getThemeResource("images/mReport.png");
+			String windowIco = ThemeManager.getThemeResource("images/mWindow.png");
-		if (reportIco.startsWith("~./")) {
+			if (windowIco.startsWith("~./")) {
-			if (Executions.getCurrent() != null) {
+				if (Executions.getCurrent() != null) {
-				reportImageURL.append(Executions.encodeURL(reportIco));
+					windowIconAttr.append(Executions.encodeURL(windowIco));
+				}
+			} else {
+				windowIconAttr.append(contextPath);
+				if (!windowIco.startsWith("/") && !contextPath.endsWith("/"))
+					windowIconAttr.append("/");
+				windowIconAttr.append(windowIco);
 			}
-		} else {
-			reportImageURL.append(contextPath);
-			if (!reportIco.startsWith("/") && !contextPath.endsWith("/"))
-				reportImageURL.append("/");
-			reportImageURL.append(reportIco);
 		}
-
+		StringBuilder reportIconAttr = new StringBuilder();
-		StringBuilder drillAssistantImageURL = new StringBuilder();
+		if(ThemeManager.isUseFontIconForImage()) {
-		String drillAssistantIco = ThemeManager.getThemeResource("images/Zoom16.png");
+			reportIconAttr.append("z-icon-Report");
-		if (drillAssistantIco.startsWith("~./")) {
+		}
-			if (Executions.getCurrent() != null) {
+		else {
-				drillAssistantImageURL.append(Executions.encodeURL(drillAssistantIco));
+			String reportIco = ThemeManager.getThemeResource("images/mReport.png");
+			if (reportIco.startsWith("~./")) {
+				if (Executions.getCurrent() != null) {
+					reportIconAttr.append(Executions.encodeURL(reportIco));
+				}
+			} else {
+				reportIconAttr.append(contextPath);
+				if (!reportIco.startsWith("/") && !contextPath.endsWith("/"))
+					reportIconAttr.append("/");
+				reportIconAttr.append(reportIco);
 			}
-		} else {
-			drillAssistantImageURL.append(contextPath);
-			if (!drillAssistantIco.startsWith("/") && !contextPath.endsWith("/"))
-				drillAssistantImageURL.append("/");
-			drillAssistantImageURL.append(drillAssistantIco);
 		}
-
+		StringBuilder drillAssistantIconAttr = new StringBuilder();
-		reportBody.addAttribute("windowIco",windowImageURL.toString());
+		if(ThemeManager.isUseFontIconForImage()) {
-		reportBody.addAttribute("reportIco", reportImageURL.toString());
+			drillAssistantIconAttr.append("z-icon-Zoom");
+		}
+		else {
+			String drillAssistantIco = ThemeManager.getThemeResource("images/Zoom16.png");
+			if (drillAssistantIco.startsWith("~./")) {
+				if (Executions.getCurrent() != null) {
+					drillAssistantIconAttr.append(Executions.encodeURL(drillAssistantIco));
+				}
+			} else {
+				drillAssistantIconAttr.append(contextPath);
+				if (!drillAssistantIco.startsWith("/") && !contextPath.endsWith("/"))
+					drillAssistantIconAttr.append("/");
+				drillAssistantIconAttr.append(drillAssistantIco);
+			}
+		}
+		reportBody.addAttribute("windowIco",windowIconAttr.toString());
+		reportBody.addAttribute("reportIco", reportIconAttr.toString());
 		reportBody.addAttribute ("reportLabel", Msg.getMsg(AEnv.getLanguage(Env.getCtx()), "Report").replace("&", ""));
 		reportBody.addAttribute ("windowLabel", Msg.getMsg(AEnv.getLanguage(Env.getCtx()), "Window"));
 		
-		reportBody.addAttribute("drillAssistantIco", drillAssistantImageURL.toString());
+		reportBody.addAttribute("drillAssistantIco", drillAssistantIconAttr.toString());
 		reportBody.addAttribute ("drillAssistantLabel", Msg.getMsg(AEnv.getLanguage(Env.getCtx()), "DrillAssistant").replace("&", ""));
 
 	}
-	
+
+	@Override
 	public String getFullPathStyle() {
 		String theme = MSysConfig.getValue(MSysConfig.HTML_REPORT_THEME, "/", Env.getAD_Client_ID(Env.getCtx()));
 		if (! theme.startsWith("/"))

org.adempiere.ui.zk/WEB-INF/src/web/js/org/idempiere/commons/report.js

@@ -29,8 +29,8 @@ window.idempiere.drillDown = function(cmpid, column, value){
 	zAu.send(event);
 };
 
-window.idempiere.showColumnMenu = function(doc, e, columnName, row) {
+window.idempiere.showColumnMenu = function(doc, e, columnName, row, isUseFontIcons) {
-	let d = idempiere.getMenu (doc, e.target.getAttribute ("componentId"), e.target.getAttribute ("foreignColumnName"), e.target.getAttribute ("value"), e.target.getAttribute ("displayValue"));
+	let d = idempiere.getMenu (doc, e.target.getAttribute ("componentId"), e.target.getAttribute ("foreignColumnName"), e.target.getAttribute ("value"), e.target.getAttribute ("displayValue"), isUseFontIcons);
 	
 	let posx = 0;
 	let posy = 0;
@@ -56,7 +56,7 @@ window.idempiere.showColumnMenu = function(doc, e, columnName, row) {
 	setTimeout(f, 3000);
 };
 
-window.idempiere.getMenu = function(doc, componentId, foreignColumnName, value, displayValue){
+window.idempiere.getMenu = function(doc, componentId, foreignColumnName, value, displayValue, isUseFontIcons){
 	doc.contextMenu = null;
 	if (componentId != null){	
 		//menu div
@@ -73,80 +73,111 @@ window.idempiere.getMenu = function(doc, componentId, foreignColumnName, value,
 		let windowMenu = doc.createElement("div");
 		windowMenu.style.padding = "3px";
 		windowMenu.style.verticalAlign = "middle";
-		windowMenu.setAttribute("onmouseover", "this.style.backgroundColor = 'lightgray'");
+		windowMenu.setAttribute("onmouseover", "this.style.backgroundColor = 'lightgray';this.style.color = 'rgb(0,0,200)'");
-		windowMenu.setAttribute("onmouseout", "this.style.backgroundColor = 'white'");									
+		windowMenu.setAttribute("onmouseout", "this.style.backgroundColor = 'white';this.style.color = 'rgb(0,0,0)'");
 		
 		let href = doc.createElement("a");
 		href.style.fontSize = "11px";
+		href.style.color = "inherit";
 		href.style.textDecoration = "none";
+		href.style.textDecorationColor = "inherit";
 		href.style.verticalAlign = "middle";
 		href.href = "javascript:void(0)";
 		href.setAttribute("onclick", "parent.idempiere.zoom('" + componentId + "','" + foreignColumnName + "','" + value + "')");
-		
+
-		windowMenu.appendChild(href);
-		menu.appendChild(windowMenu);				
-		
 		let windowIco = doc.body.getAttribute ("windowIco");
 		if (typeof windowIco === 'string' && windowIco.length > 0) {
-			let image = doc.createElement("img"); 
+			if(isUseFontIcons) {
-			image.src = windowIco;
+				let icon = doc.createElement("span");
-			image.setAttribute("align", "middle");
+				icon.classList.add(windowIco);
-			href.appendChild(image);
+				icon.classList.add("font-icon")
+				windowMenu.appendChild(icon);
+			}
+			else {
+				let image = doc.createElement("img"); 
+				image.src = windowIco;
+				image.setAttribute("align", "middle");
+				href.appendChild(image);
+			}
 		}
 		href.appendChild(doc.createTextNode(doc.body.getAttribute ("windowLabel")));
 		
+		windowMenu.appendChild(href);
+		menu.appendChild(windowMenu);
+
 		//report menu item
 		let report = doc.createElement("div");			
 		report.style.padding = "3px";
 		report.style.verticalAlign = "middle";
 		
-		report.setAttribute("onmouseover", "this.style.backgroundColor = 'lightgray'");
+		report.setAttribute("onmouseover", "this.style.backgroundColor = 'lightgray';this.style.color = 'rgb(0,0,200)'");
-		report.setAttribute("onmouseout", "this.style.backgroundColor = 'white'");									
+		report.setAttribute("onmouseout", "this.style.backgroundColor = 'white';this.style.color = 'rgb(0,0,0)'");
 		
 		let reportHref = doc.createElement("a");
 		reportHref.href = "javascript:void(0)";	
+		reportHref.style.color = "inherit";
 		reportHref.style.textDecoration = "none";
+		reportHref.style.textDecorationColor = "inherit";
 		reportHref.style.fontSize = "11px";
 		reportHref.style.verticalAlign = "middle";
 		reportHref.setAttribute("onclick", "parent.idempiere.drillDown('" + componentId + "','" + foreignColumnName + "','" + value + "')");
 		
-		report.appendChild(reportHref);
-		menu.appendChild(report);
 		let reportIco = doc.body.getAttribute ("reportIco");
 		if (typeof reportIco === 'string' && reportIco.length > 0) {
-			let reportimage = doc.createElement("img"); 
+			if(isUseFontIcons) {
-			reportimage.src = reportIco;
+				let icon = doc.createElement("span");
-			reportimage.setAttribute("align", "middle");
+				icon.classList.add(reportIco);
-			reportHref.appendChild(reportimage);
+				icon.classList.add("font-icon")
+				report.appendChild(icon);
+			}
+			else {
+				let reportimage = doc.createElement("img"); 
+				reportimage.src = reportIco;
+				reportimage.setAttribute("align", "middle");
+				reportHref.appendChild(reportimage);
+			}
 		}
 		reportHref.appendChild(doc.createTextNode(doc.body.getAttribute ("reportLabel")));
 
+		report.appendChild(reportHref);
+		menu.appendChild(report);
+
 		//drill menu item
 		let reportDrill = doc.createElement("div");
 		reportDrill.style.padding = "3px";
 		reportDrill.style.verticalAlign = "middle";
 
-		reportDrill.setAttribute("onmouseover", "this.style.backgroundColor = 'lightgray'");
+		reportDrill.setAttribute("onmouseover", "this.style.backgroundColor = 'lightgray';this.style.color = 'rgb(0,0,200)'");
-		reportDrill.setAttribute("onmouseout", "this.style.backgroundColor = 'white'");
+		reportDrill.setAttribute("onmouseout", "this.style.backgroundColor = 'white';this.style.color = 'rgb(0,0,0)'");
 
 		let reportDrillHref = doc.createElement("a");
 		reportDrillHref.href = "javascript:void(0)";
+		reportDrillHref.style.color = "inherit";
 		reportDrillHref.style.textDecoration = "none";
+		reportDrillHref.style.textDecorationColor = "inherit";
 		reportDrillHref.style.fontSize = "11px";
 		reportDrillHref.style.verticalAlign = "middle";
 		reportDrillHref.setAttribute("onclick", "parent.idempiere.drillAcross('" + componentId + "','" + foreignColumnName + "','" + value + "','" + displayValue + "')");
 
-		reportDrill.appendChild(reportDrillHref);
-		menu.appendChild(reportDrill);
 		let drillIco = doc.body.getAttribute ("drillAssistantIco");
 		if (typeof drillIco === 'string' && drillIco.length > 0) {
-			let drillimage = doc.createElement("img");
+			if(isUseFontIcons) {
-			drillimage.src = drillIco;
+				let icon = doc.createElement("span");
-			drillimage.setAttribute("align", "middle");
+				icon.classList.add(drillIco);
-			reportDrillHref.appendChild(drillimage);
+				icon.classList.add("font-icon")
+				reportDrill.appendChild(icon);
+			}
+			else {
+				let drillimage = doc.createElement("img");
+				drillimage.src = drillIco;
+				drillimage.setAttribute("align", "middle");
+				reportDrillHref.appendChild(drillimage);
+			}
 		}
 		reportDrillHref.appendChild(doc.createTextNode(doc.body.getAttribute ("drillAssistantLabel")));
 
+		reportDrill.appendChild(reportDrillHref);
+		menu.appendChild(reportDrill);
 
 		doc.contextMenu = menu;
 		doc.body.appendChild (doc.contextMenu);

org.adempiere.ui.zk/css/report.css

@@ -97,6 +97,30 @@ div.rp-table-wrap > table > thead > tr > th {
 		overflow: visible;
 	}
 	div.rp-table-wrap > table > thead > tr > th {
-		position: relative;
+		position: relative;
-	}
+	}
-}
+}
+
+.z-icon-Report::before {
+	content: "\f1ea";
+}
+.z-icon-Window::before {
+	content: "\f022";
+}
+.z-icon-Zoom::before {
+	content: "\f14c";
+}
+[class^="z-icon-"], [class*=" z-icon-"] {
+  box-sizing: border-box;
+  padding-right: 4px;
+  line-height: 14px;
+}
+span.font-icon::before {
+	box-sizing: border-box;
+	display: inline-block;
+	font-size: 14px;
+	width: 16px;
+	text-align: center;
+	vertical-align: middle;
+	color: inherit;
+}