From df5f0e3cc25d598188d027c0b16cdc28efda97b3 Mon Sep 17 00:00:00 2001 From: jimtng <2554958+jimtng@users.noreply.github.com> Date: Sun, 13 Apr 2025 20:16:11 +1000 Subject: [PATCH] [BasicUI] Add a setting to render buttons with rounded corners (#3147) image image Default: image Rounded: image Pill: image Signed-off-by: Jimmy Tanagra --- .../ui/basic/internal/render/PageRenderer.java | 12 ++++++++++++ .../src/main/resources/OH-INF/i18n/basic.properties | 5 +++++ bundles/org.openhab.ui.basic/web-src/_layout.scss | 6 ++++++ bundles/org.openhab.ui.basic/web-src/settings.js | 9 +++++++++ bundles/org.openhab.ui.basic/web-src/smarthome.js | 9 +++++++++ 5 files changed, 41 insertions(+) diff --git a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/PageRenderer.java b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/PageRenderer.java index 48b1bc839..385bc2013 100644 --- a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/PageRenderer.java +++ b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/PageRenderer.java @@ -303,6 +303,18 @@ public class PageRenderer extends AbstractWidgetRenderer { localizeText("@text/ui.config.basic.adjustedColors.description"), "adjustedColors", "openhab.ui.basic:adjustedColors", "enabled", "disabled", true, sb); + buttons = new StringBuilder(); + buildButton(escapeHtml(localizeText("@text/ui.config.basic.buttonRadius.option.square")), "", buttons); + buildButton(escapeHtml(localizeText("@text/ui.config.basic.buttonRadius.option.rounded")), "rounded", buttons); + buildButton(escapeHtml(localizeText("@text/ui.config.basic.buttonRadius.option.fullyRounded")), "fully-rounded", + buttons); + + sb.append(getSnippet("setting_buttons") + .replace("%label%", escapeHtml(localizeText("@text/ui.config.basic.buttonRadius.label"))) + .replace("%description%", escapeHtml(localizeText("@text/ui.config.basic.buttonRadius.description"))) + .replace("%key%", "openhab.ui.basic:buttonRadius").replace("%default%", "") + .replace("%buttons%", buttons.toString())); + buttons = new StringBuilder(); buildButton("1", "1", buttons); buildButton("2", "", buttons); 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 index 899ecefd1..3bdc5afb8 100644 --- 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 @@ -1,5 +1,10 @@ ui.config.basic.adjustedColors.label = Adjusted User Colors ui.config.basic.adjustedColors.description = Automatically adjusts user-defined colors (label, value, icon) to the current theme for better contrast. +ui.config.basic.buttonRadius.label = Button Shape +ui.config.basic.buttonRadius.description = Sets the buttons corner radius. +ui.config.basic.buttonRadius.option.square = Square +ui.config.basic.buttonRadius.option.rounded = Rounded +ui.config.basic.buttonRadius.option.fullyRounded = Fully Rounded ui.config.basic.biggerFontSize.label = Bigger Font Size ui.config.basic.biggerFontSize.description = Displays texts in UI with a bigger font size than the default. ui.config.basic.capitalizeValues.label = Capitalize Values diff --git a/bundles/org.openhab.ui.basic/web-src/_layout.scss b/bundles/org.openhab.ui.basic/web-src/_layout.scss index 0bf9e2467..55da769d0 100644 --- a/bundles/org.openhab.ui.basic/web-src/_layout.scss +++ b/bundles/org.openhab.ui.basic/web-src/_layout.scss @@ -289,6 +289,12 @@ padding-left: 4px; padding-right: 4px; } + html.ui-button-rounded & { + border-radius: 12px; + } + html.ui-button-fully-rounded & { + border-radius: 50px; + } } .mdl-button-text { html.ui-bigger-font & { diff --git a/bundles/org.openhab.ui.basic/web-src/settings.js b/bundles/org.openhab.ui.basic/web-src/settings.js index 890bc702b..40d3be305 100644 --- a/bundles/org.openhab.ui.basic/web-src/settings.js +++ b/bundles/org.openhab.ui.basic/web-src/settings.js @@ -336,6 +336,15 @@ _t.root.documentElement.classList.add("ui-bigger-font"); } } + + if (param === null || param === "openhab.ui.basic:buttonRadius") { + _t.root.documentElement.classList.remove("ui-button-rounded"); + _t.root.documentElement.classList.remove("ui-button-fully-rounded"); + newValue = window.localStorage.getItem("openhab.ui.basic:buttonRadius"); + if (newValue) { + _t.root.documentElement.classList.add("ui-button-" + newValue); + } + } }; _t.updateControlLocalSetting = function(param) { diff --git a/bundles/org.openhab.ui.basic/web-src/smarthome.js b/bundles/org.openhab.ui.basic/web-src/smarthome.js index 804ddcfda..3a9ebccf7 100644 --- a/bundles/org.openhab.ui.basic/web-src/smarthome.js +++ b/bundles/org.openhab.ui.basic/web-src/smarthome.js @@ -3146,6 +3146,15 @@ } } + if (param === null || param === "openhab.ui.basic:buttonRadius") { + _t.root.documentElement.classList.remove("ui-button-rounded"); + _t.root.documentElement.classList.remove("ui-button-fully-rounded"); + newValue = window.localStorage.getItem("openhab.ui.basic:buttonRadius"); + if (newValue) { + _t.root.documentElement.classList.add("ui-button-" + newValue); + } + } + if (param === null || param === "openhab.ui.basic:nbColumnsTablet") { oldValue = _t.cellSizeTablet; newValue = window.localStorage.getItem("openhab.ui.basic:nbColumnsTablet") === null ? 4