Merge branch 'main' into basicui_staticIcon

bundles/org.openhab.ui.basic/gulpfile.js

@@ -17,7 +17,9 @@
 	var paths = {
 	        FontLibs: [
 			'./node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff*',
-			'./node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf'
+			'./node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf',
+			'./node_modules/framework7-icons/fonts/Framework7Icons-Regular.woff*',
+			'./node_modules/framework7-icons/fonts/Framework7Icons-Regular.ttf'
 	        ]
 	    };
 

bundles/org.openhab.ui.basic/package.json

@@ -11,6 +11,7 @@
     "gulp-sass": "^5.0.0",
     "gulp-uglify": "^3.0.2",
     "material-design-icons": "^3.0.1",
+    "framework7-icons": "^5.0.5",
     "node-sass": "^8.0.0"
   }
 }

bundles/org.openhab.ui.basic/pom.xml

@@ -32,14 +32,13 @@
       <plugin>
         <groupId>com.github.eirslett</groupId>
         <artifactId>frontend-maven-plugin</artifactId>
-        <version>1.9.0</version>
+        <version>1.13.4</version>
 
         <configuration>
-          <nodeVersion>v16.14.2</nodeVersion>
-          <npmVersion>8.6.0</npmVersion>
+          <nodeVersion>v18.17.0</nodeVersion>
+          <npmVersion>9.8.1</npmVersion>
           <environmentVariables>
             <npm_config_cache>${project.basedir}/npm_cache</npm_config_cache>
-            <npm_config_tmp>${project.basedir}/npm_tmp</npm_config_tmp>
           </environmentVariables>
         </configuration>
 

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;
     }

bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java

@@ -61,6 +61,7 @@ public abstract class AbstractWidgetRenderer implements WidgetRenderer {
     private static final String ICON_SOURCE_IF = "if";
     private static final String ICON_SOURCE_ICONIFY = "iconify";
     private static final String ICON_SOURCE_MATERIAL = "material";
+    private static final String ICON_SOURCE_FRAMEWORK7 = "f7";
     private static final String ICON_SET_OH_CLASSIC = "classic";
     private static final String DEFAULT_ICON_SOURCE = ICON_SOURCE_OH;
     private static final String DEFAULT_ICON_SET = ICON_SET_OH_CLASSIC;
@@ -124,6 +125,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)
@@ -174,6 +177,9 @@ private String preprocessIcon(String originalSnippet, Widget w, boolean ignoreSt
                 case ICON_SOURCE_MATERIAL:
                     iconSnippet = getSnippet("icon_material");
                     break;
+                case ICON_SOURCE_FRAMEWORK7:
+                    iconSnippet = getSnippet("icon_framework7");
+                    break;
                 default:
                     break;
             }

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>

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

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>

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>

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>

bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_framework7.html

@@ -0,0 +1 @@
+<spam class="f7-icons">%icon_name%</spam>

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>

bundles/org.openhab.ui.basic/src/main/resources/snippets/main.html

@@ -25,6 +25,7 @@
 
 		<link rel="stylesheet" type="text/css" href="mdl/material.min.css" />
 		<link rel="stylesheet" type="text/css" href="material-icons.css" />
+		<link rel="stylesheet" type="text/css" href="framework7-icons.css" />
 		<link rel="stylesheet" type="text/css" href="smarthome.css" />
 
 		<script type="application/json" id="config">{"webAudio":%config.web-audio%}</script>

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>

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>

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>

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>

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>

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>

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>

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>

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>

bundles/org.openhab.ui.basic/src/main/resources/web/framework7-icons.css

@@ -0,0 +1,33 @@
+@font-face {
+  font-family: 'Framework7 Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Framework7 Icons'),
+       local('Framework7Icons-Regular'),
+       url('fonts/Framework7Icons-Regular.woff2') format('woff2'),
+       url('fonts/Framework7Icons-Regular.woff') format('woff'),
+       url('fonts/Framework7Icons-Regular.ttf') format('truetype');
+}
+
+.f7-icons,
+.framework7-icons {
+  font-family: 'Framework7 Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 28px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-feature-settings: 'liga';
+  -moz-font-feature-settings: 'liga=1';
+  -moz-font-feature-settings: 'liga';
+  font-feature-settings: 'liga';
+  text-align: center;
+}

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;
 	}
@@ -167,6 +170,16 @@
 				font-size: 28px;
 			}
 		}
+		.f7-icons {
+			font-size: 32px;
+			vertical-align: middle;
+			html:not(.ui-icons-enabled) & {
+				display: none;
+			}
+			html.ui-layout-condensed & {
+				font-size: 28px;
+			}
+		}
 	}
 	&__label {
 		@media screen and (max-width: $layout-tablet-size-threshold) {