From 7f2dbb3400757b736e64be4fa7e2dd59e504a674 Mon Sep 17 00:00:00 2001 From: lolodomo Date: Wed, 16 Aug 2023 10:16:45 +0200 Subject: [PATCH] [BasicUI] Upgrade to last version of Material icons (#2016) Move from the outdated official NPM module (material-design-icons) to an alternative NPM module (material-icons) providing most recent material icons. As a consequence, TTF format is no more provided, only WOFF and WOFF2 formats. All current browsers support WOFF format, so only very old browsers could be impacted by the miss of the TTF format. Also fix icon size in condensed mode (28x28). Fixes #2011 Fixes #2015 Signed-off-by: Laurent Garnier --- bundles/org.openhab.ui.basic/gulpfile.js | 3 +-- bundles/org.openhab.ui.basic/package-lock.json | 18 +++++++++--------- bundles/org.openhab.ui.basic/package.json | 2 +- .../resources/snippets/icon_framework7.html | 2 +- .../main/resources/snippets/icon_material.html | 2 +- .../src/main/resources/web/material-icons.css | 18 ++++-------------- .../org.openhab.ui.basic/web-src/_layout.scss | 1 + 7 files changed, 18 insertions(+), 28 deletions(-) diff --git a/bundles/org.openhab.ui.basic/gulpfile.js b/bundles/org.openhab.ui.basic/gulpfile.js index e05cb18302..74ff17ea1c 100644 --- a/bundles/org.openhab.ui.basic/gulpfile.js +++ b/bundles/org.openhab.ui.basic/gulpfile.js @@ -16,8 +16,7 @@ var paths = { FontLibs: [ - './node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff*', - './node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf', + './node_modules/material-icons/iconfont/material-icons.woff*', './node_modules/framework7-icons/fonts/Framework7Icons-Regular.woff*', './node_modules/framework7-icons/fonts/Framework7Icons-Regular.ttf' ] diff --git a/bundles/org.openhab.ui.basic/package-lock.json b/bundles/org.openhab.ui.basic/package-lock.json index df8b0e878e..72ea1a9baa 100644 --- a/bundles/org.openhab.ui.basic/package-lock.json +++ b/bundles/org.openhab.ui.basic/package-lock.json @@ -13,7 +13,7 @@ "gulp-eslint": "^6.0.0", "gulp-sass": "^5.0.0", "gulp-uglify": "^3.0.2", - "material-design-icons": "^3.0.1", + "material-icons": "^1.13.9", "node-sass": "^8.0.0" } }, @@ -3621,10 +3621,10 @@ "node": ">=0.10.0" } }, - "node_modules/material-design-icons": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz", - "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78=" + "node_modules/material-icons": { + "version": "1.13.9", + "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.13.9.tgz", + "integrity": "sha512-dwuf2C8LR07FcrjRDx0vWnDEcHiDuamXOmtAck8bdONUv5Fi6wR/ubQwPfG1NbcqgPg+y0fHN8Unj5DO+5fV4w==" }, "node_modules/meow": { "version": "9.0.0", @@ -9459,10 +9459,10 @@ } } }, - "material-design-icons": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz", - "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78=" + "material-icons": { + "version": "1.13.9", + "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.13.9.tgz", + "integrity": "sha512-dwuf2C8LR07FcrjRDx0vWnDEcHiDuamXOmtAck8bdONUv5Fi6wR/ubQwPfG1NbcqgPg+y0fHN8Unj5DO+5fV4w==" }, "meow": { "version": "9.0.0", diff --git a/bundles/org.openhab.ui.basic/package.json b/bundles/org.openhab.ui.basic/package.json index 2778423b17..8df12d8fa8 100644 --- a/bundles/org.openhab.ui.basic/package.json +++ b/bundles/org.openhab.ui.basic/package.json @@ -10,7 +10,7 @@ "gulp-eslint": "^6.0.0", "gulp-sass": "^5.0.0", "gulp-uglify": "^3.0.2", - "material-design-icons": "^3.0.1", + "material-icons": "^1.13.9", "framework7-icons": "^5.0.5", "node-sass": "^8.0.0" } diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_framework7.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_framework7.html index fac2b9ce0a..012afcc531 100644 --- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_framework7.html +++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_framework7.html @@ -1 +1 @@ -%icon_name% \ No newline at end of file +%icon_name% \ No newline at end of file diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_material.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_material.html index 7ba8b87657..7ce50b6daf 100644 --- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_material.html +++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_material.html @@ -1 +1 @@ -%icon_name% \ No newline at end of file +%icon_name% \ No newline at end of file diff --git a/bundles/org.openhab.ui.basic/src/main/resources/web/material-icons.css b/bundles/org.openhab.ui.basic/src/main/resources/web/material-icons.css index 71b9859b62..941fdcfbcc 100644 --- a/bundles/org.openhab.ui.basic/src/main/resources/web/material-icons.css +++ b/bundles/org.openhab.ui.basic/src/main/resources/web/material-icons.css @@ -4,9 +4,8 @@ font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), - url(fonts/MaterialIcons-Regular.woff2) format('woff2'), - url(fonts/MaterialIcons-Regular.woff) format('woff'), - url(fonts/MaterialIcons-Regular.ttf) format('truetype'); + url(fonts/material-icons.woff2) format('woff2'), + url(fonts/material-icons.woff) format('woff'); } .material-icons { @@ -21,6 +20,8 @@ text-transform: none; letter-spacing: normal; word-wrap: normal; + white-space: nowrap; + direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; @@ -33,14 +34,3 @@ /* Support for IE. */ font-feature-settings: 'liga'; } - -.material-icons.md-oh { - font-size: 32px; - vertical-align: middle; - html:not(.ui-icons-enabled) & { - display: none; - } - html.ui-layout-condensed & { - font-size: 28px; - } -} diff --git a/bundles/org.openhab.ui.basic/web-src/_layout.scss b/bundles/org.openhab.ui.basic/web-src/_layout.scss index d07ef391a2..e2a08660e7 100644 --- a/bundles/org.openhab.ui.basic/web-src/_layout.scss +++ b/bundles/org.openhab.ui.basic/web-src/_layout.scss @@ -170,6 +170,7 @@ font-size: 28px; } } + .material-icons, .f7-icons { font-size: 32px; vertical-align: middle;