[BasicUI] Add a new setting to choose the nb of columns

Also allow 3 columns on desktop. Possible number of columns on desktop: 1 or 2 or 3. Possible number of columns on tablet: 1 or 2 Possible number of columns on phone: 1 Closes #1836 Signed-off-by: Laurent Garnier <lg.hc@free.fr>
openhab · Aug 13, 2023 · b8e8921 · b8e8921
1 parent 0d34818
commit b8e8921
Show file tree

Hide file tree

Showing 18 changed files with 72 additions and 13 deletions.
diff --git a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/WebAppConfig.java b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/WebAppConfig.java
@@ -40,8 +40,14 @@ public class WebAppConfig {
     private static final String DEFAULT_INLINE_SVG = "false";
     private static final String DEFAULT_WEB_AUDIO = "false";
 
+    private static final String DEFAULT_CONFIG_NB_COLUMNS = "3-2";
+    private static final int DEFAULT_NB_COLUMNS_DESKTOP = 3;
+    private static final int DEFAULT_NB_COLUMNS_TABLET = 2;
+
     private String defaultSitemap = DEFAULT_SITEMAP;
     private String theme = DEFAULT_THEME;
+    private int nbColsDesktop = DEFAULT_NB_COLUMNS_DESKTOP;
+    private int nbColsTablet = DEFAULT_NB_COLUMNS_TABLET;
     private boolean iconify = Boolean.parseBoolean(DEFAULT_ICONIFY);
     private boolean inlineSvg = Boolean.parseBoolean(DEFAULT_INLINE_SVG);
     private boolean webAudio = Boolean.parseBoolean(DEFAULT_WEB_AUDIO);
@@ -53,6 +59,7 @@ public class WebAppConfig {
 
     private static final String CONFIG_ENABLE_ICONS = "enableIcons";
     private static final String CONFIG_CONDENSED_LAYOUT = "condensedLayout";
+    private static final String CONFIG_NB_COLUMNS = "nbColumns";
     private static final String CONFIG_CAPITALIZE = "capitalizeValues";
 
     static {
@@ -81,6 +88,9 @@ private void applyCssClasses(Map<String, Object> configProps) {
                 cssClassList.add(entry.getValue());
             }
         }
+        if (nbColsDesktop == 3) {
+            cssClassList.add("ui-large-window");
+        }
     }
 
     public void applyConfig(Map<String, Object> configProps) {
@@ -90,6 +100,22 @@ public void applyConfig(Map<String, Object> configProps) {
         if ("default".equals(theme)) {
             theme = DEFAULT_THEME;
         }
+        String nbColumns = (String) configProps.getOrDefault(CONFIG_NB_COLUMNS, DEFAULT_CONFIG_NB_COLUMNS);
+        if (nbColumns.length() == 3) {
+            try {
+                nbColsDesktop = Integer.parseInt(nbColumns.substring(0, 1));
+            } catch (NumberFormatException e) {
+                nbColsDesktop = DEFAULT_NB_COLUMNS_DESKTOP;
+            }
+            try {
+                nbColsTablet = Integer.parseInt(nbColumns.substring(2, 3));
+            } catch (NumberFormatException e) {
+                nbColsTablet = DEFAULT_NB_COLUMNS_TABLET;
+            }
+        } else {
+            nbColsDesktop = DEFAULT_NB_COLUMNS_DESKTOP;
+            nbColsTablet = DEFAULT_NB_COLUMNS_TABLET;
+        }
         iconify = "true".equalsIgnoreCase((String) configProps.getOrDefault("enableIconify", DEFAULT_ICONIFY));
         inlineSvg = "true".equalsIgnoreCase((String) configProps.getOrDefault("inlineSvg", DEFAULT_INLINE_SVG));
         webAudio = "true".equalsIgnoreCase((String) configProps.getOrDefault("webAudio", DEFAULT_WEB_AUDIO));
@@ -113,6 +139,14 @@ public String getCssClassList() {
         return result;
     }
 
+    public int getNbColsDesktop() {
+        return nbColsDesktop;
+    }
+
+    public int getNbColsTablet() {
+        return nbColsTablet;
+    }
+
     public boolean isIconifyEnabled() {
         return iconify;
     }

diff --git a/...b.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java b/...b.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java
@@ -124,6 +124,8 @@ protected String preprocessSnippet(String originalSnippet, Widget w) {
     protected String preprocessSnippet(String originalSnippet, Widget w, boolean ignoreStateForIcon) {
         String snippet = preprocessIcon(originalSnippet, w, ignoreStateForIcon);
 
+        snippet = snippet.replace("%cells%", String.valueOf(12 / config.getNbColsDesktop()));
+        snippet = snippet.replace("%cells_tablet%", String.valueOf(8 / config.getNbColsTablet()));
         snippet = snippet.replace("%widget_id%", itemUIRegistry.getWidgetId(w));
         snippet = snippet.replace("%item%", w.getItem() != null ? w.getItem() : "");
         // Optimization: avoid calling 3 times itemUIRegistry.getLabel(w)

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/config/config.xml b/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/config/config.xml
@@ -59,6 +59,19 @@
 			</options>
 			<default>false</default>
 		</parameter>
+		<parameter name="nbColumns" type="text">
+			<label>Number Columns</label>
+			<description>The number of columns to consider to fill the grid in large screen width (desktop) and medium screen
+				width (tablet).</description>
+			<options>
+				<option value="1-1">1 column on desktop and tablet</option>
+				<option value="2-1">2 columns on desktop but only 1 on tablet</option>
+				<option value="2-2">2 columns on desktop and tablet</option>
+				<option value="3-1">3 columns on desktop but only 1 on tablet</option>
+				<option value="3-2">3 columns on desktop but only 2 on tablet</option>
+			</options>
+			<default>3-2</default>
+		</parameter>
 		<parameter name="capitalizeValues" type="text" required="true">
 			<label>Capitalize Values</label>
 			<description>Displays all widget states in uppercase.</description>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/i18n/basic.properties b/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/i18n/basic.properties
@@ -20,6 +20,13 @@ ui.config.basic.inlineSvg.label = Inline SVG
 ui.config.basic.inlineSvg.description = If enabled, any SVG icon provided by the openHAB icon server will automatically be converted to an inline SVG in the WEB page, allowing control of its color with the sitemap widget property "iconcolor" in the case where the SVG icon sets "currentColor" as the fill color. Note that this will work with custom SVG icons but not with all the packaged icons from the classic iconset since they are defined with a hard-coded color palette. This feature is disabled by default.
 ui.config.basic.inlineSvg.option.true = Enable
 ui.config.basic.inlineSvg.option.false = Disable
+ui.config.basic.nbColumns.label = Number Columns
+ui.config.basic.nbColumns.description = The number of columns to consider to fill the grid in large screen width (desktop) and medium screen width (tablet).
+ui.config.basic.nbColumns.option.1-1 = 1 column on desktop and tablet
+ui.config.basic.nbColumns.option.2-1 = 2 columns on desktop but only 1 on tablet
+ui.config.basic.nbColumns.option.2-2 = 2 columns on desktop and tablet
+ui.config.basic.nbColumns.option.3-1 = 3 columns on desktop but only 1 on tablet
+ui.config.basic.nbColumns.option.3-2 = 3 columns on desktop but only 2 on tablet
 ui.config.basic.theme.label = Theme
 ui.config.basic.theme.description = Defines the UI theme.
 ui.config.basic.theme.option.bright = Bright

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/buttons.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/buttons.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/colorpicker.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/colorpicker.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/group.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/group.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-form__link %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet mdl-form__link %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/input.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/input.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/mapview.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/mapview.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--12-col %visibility_class%">
     <span %iconstyle% class="mdl-form__icon">
         %icon_snippet%
     </span>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/rollerblind.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/rollerblind.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/selection.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/selection.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-form__link %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet mdl-form__link %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/setpoint.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/setpoint.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/slider.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/slider.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/switch.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/switch.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/text.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/text.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/text_link.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/text_link.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-form__link %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet mdl-form__link %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/webview.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/webview.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--12-col %visibility_class%">
     <span %iconstyle% class="mdl-form__icon">
         %icon_snippet%
     </span>

diff --git a/bundles/org.openhab.ui.basic/web-src/_layout.scss b/bundles/org.openhab.ui.basic/web-src/_layout.scss
@@ -46,6 +46,9 @@
 
 .page-content {
 	max-width: 1080px;
+	html.ui-large-window & {
+		max-width: 1620px;
+	}
 	@media screen and (max-width: $layout-tablet-size-threshold) {
 		padding: 0;
 	}