[BasicUI] Hide header row if label not explicitly set

Applied to Chart/Image/Viodeo/Mapview/Webview elements. Chart and Image elements are also now clickable. Clicking allows toggling between header row shown and header row hidden. Fix #2065 Signed-off-by: Laurent Garnier <[email protected]>
openhab · Oct 6, 2023 · 7fa8189 · 7fa8189
1 parent c76a8e3
commit 7fa8189
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 20 deletions.
diff --git a/...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ChartRenderer.java b/...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ChartRenderer.java
@@ -127,6 +127,12 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
             }
 
             String snippet = getSnippet("chart");
+
+            boolean showHeaderRow = chart.getLabel() != null;
+            snippet = snippet.replace("%header_visibility_class%",
+                    showHeaderRow ? "%visibility_class%" : "mdl-form__row--hidden");
+            snippet = snippet.replace("%header_row%", Boolean.valueOf(showHeaderRow).toString());
+
             snippet = preprocessSnippet(snippet, w, true);
 
             // Process the color tags

diff --git a/...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ImageRenderer.java b/...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ImageRenderer.java
@@ -61,6 +61,11 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
         Image image = (Image) w;
         String snippet = (image.getChildren().size() > 0) ? getSnippet("image_link") : getSnippet("image");
 
+        boolean showHeaderRow = image.getLabel() != null;
+        snippet = snippet.replace("%header_visibility_class%",
+                showHeaderRow ? "%visibility_class%" : "mdl-form__row--hidden");
+        snippet = snippet.replace("%header_row%", Boolean.valueOf(showHeaderRow).toString());
+
         if (image.getRefresh() > 0) {
             snippet = snippet.replace("%update_interval%", Integer.toString(image.getRefresh()));
         } else {

diff --git a/....openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/MapviewRenderer.java b/....openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/MapviewRenderer.java
@@ -58,7 +58,7 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
         Mapview mapview = (Mapview) w;
         String snippet = getSnippet("mapview");
 
-        boolean showHeaderRow = !getLabel(w).isEmpty();
+        boolean showHeaderRow = w.getLabel() != null;
         snippet = snippet.replace("%header_visibility_class%",
                 showHeaderRow ? "%visibility_class%" : "mdl-form__row--hidden");
         snippet = snippet.replace("%header_row%", Boolean.valueOf(showHeaderRow).toString());

diff --git a/...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/VideoRenderer.java b/...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/VideoRenderer.java
@@ -67,7 +67,7 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
 
         snippet = getSnippet(snippetName);
 
-        boolean showHeaderRow = !getLabel(w).isEmpty();
+        boolean showHeaderRow = w.getLabel() != null;
         snippet = snippet.replace("%header_visibility_class%",
                 showHeaderRow ? "%visibility_class%" : "mdl-form__row--hidden");
         snippet = snippet.replace("%header_row%", Boolean.valueOf(showHeaderRow).toString());

diff --git a/....openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/WebviewRenderer.java b/....openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/WebviewRenderer.java
@@ -53,7 +53,7 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
         Webview webview = (Webview) w;
         String snippet = getSnippet("webview");
 
-        boolean showHeaderRow = !getLabel(w).isEmpty();
+        boolean showHeaderRow = w.getLabel() != null;
         snippet = snippet.replace("%header_visibility_class%",
                 showHeaderRow ? "%visibility_class%" : "mdl-form__row--hidden");
         snippet = snippet.replace("%header_row%", Boolean.valueOf(showHeaderRow).toString());

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/chart.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/chart.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-form__row--header mdl-cell mdl-cell--12-col %visibility_class%">
+<div class="mdl-form__row mdl-form__row--header mdl-cell mdl-cell--12-col %header_visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>
@@ -33,7 +33,7 @@
 		<spam class="mdl-tooltip mdl-tooltip--top" for="button4-%widget_id%">Refresh chart</spam>
 	</div>
 </div>
-<div class="mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col %visibility_class%">
+<div class="mdl-form__row mdl-form__row--height-auto mdl-form__link mdl-cell mdl-cell--12-col %visibility_class%">
 	<div
 		class="mdl-form__control mdl-form__image"
 		data-control-type="chart"
@@ -42,7 +42,7 @@
 		data-proxied-url="%proxied_url%"
 		data-valid-url="%valid_url%"
 		data-ignore-refresh="%ignore_refresh%"
-		data-header-row="true"
+		data-header-row="%header_row%"
 		data-legend="%legend%"
 	>
 		<img src="%url%" />

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/image.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/image.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-form__row--header mdl-cell mdl-cell--12-col %visibility_class%">
+<div class="mdl-form__row mdl-form__row--header mdl-cell mdl-cell--12-col %header_visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>
@@ -13,7 +13,7 @@
 		<spam class="mdl-tooltip mdl-tooltip--top" for="button-%widget_id%">Upscale image or not</spam>
 	</div>
 </div>
-<div class="mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col %visibility_class%">
+<div class="mdl-form__row mdl-form__row--height-auto mdl-form__link mdl-cell mdl-cell--12-col %visibility_class%">
 	<div
 		class="mdl-form__control mdl-form__image"
 		data-control-type="image"
@@ -23,7 +23,7 @@
 		data-proxied-url="%proxied_url%"
 		data-valid-url="%valid_url%"
 		data-ignore-refresh="%ignore_refresh%"
-		data-header-row="true"
+		data-header-row="%header_row%"
 	>
 		<img src="%url%" />
 	</div>

diff --git a/bundles/org.openhab.ui.basic/web-src/smarthome.js b/bundles/org.openhab.ui.basic/web-src/smarthome.js
@@ -602,17 +602,15 @@
 		_t.period = null;
 		_t.upscale = false;
 
-		if (_t.headerRow === "true") {
-			_t.legendButton = _t.formHeaderRow.querySelector(o.image.legendButton);
-			_t.periodButton = _t.formHeaderRow.querySelector(o.image.periodButton);
-			_t.upscaleButton = _t.formHeaderRow.querySelector(o.image.upscaleButton);
-			_t.refreshButton = _t.formHeaderRow.querySelector(o.image.refreshButton);
-			if (_t.legendButton !== null) {
-				if (_t.displayLegend) {
-					_t.legendButton.classList.add(o.buttonActiveClass);
-				} else {
-					_t.legendButton.classList.remove(o.buttonActiveClass);
-				}
+		_t.legendButton = _t.formHeaderRow.querySelector(o.image.legendButton);
+		_t.periodButton = _t.formHeaderRow.querySelector(o.image.periodButton);
+		_t.upscaleButton = _t.formHeaderRow.querySelector(o.image.upscaleButton);
+		_t.refreshButton = _t.formHeaderRow.querySelector(o.image.refreshButton);
+		if (_t.legendButton !== null) {
+			if (_t.displayLegend) {
+				_t.legendButton.classList.add(o.buttonActiveClass);
+			} else {
+				_t.legendButton.classList.remove(o.buttonActiveClass);
 			}
 		}
 
@@ -771,6 +769,15 @@
 			_t.image.setAttribute("src", _t.url + "&t=" + Date.now());
 		}
 
+		function toggleHeaderRow() {
+			_t.headerRow = _t.headerRow === "true" ? "false" : "true";
+			if (_t.headerRow === "true") {
+				_t.formHeaderRow.classList.remove(o.formRowHidden);
+			} else {
+				_t.formHeaderRow.classList.add(o.formRowHidden);
+			}
+		}
+
 		_t.destroy = function() {
 			var
 				imageParent = _t.image.parentNode;
@@ -794,6 +801,8 @@
 				componentHandler.downgradeElements([ _t.refreshButton ]);
 				_t.refreshButton.removeEventListener("click", onRefreshClick);
 			}
+
+			_t.parentNode.parentNode.removeEventListener("click", toggleHeaderRow);
 		};
 
 		if (_t.legendButton !== null) {
@@ -809,6 +818,8 @@
 			_t.refreshButton.addEventListener("click", onRefreshClick);
 		}
 
+		_t.parentNode.parentNode.addEventListener("click", toggleHeaderRow);
+
 		if (_t.visible) {
 			_t.activateRefresh();
 		}