[BasicUI] Add a setting to render buttons with rounded corners (#3147)

<img width="549" alt="image"
src="https://github.com/user-attachments/assets/75ec1b38-2cab-49bb-bfb2-e074f201e4a2"
/>

<img width="557" alt="image"
src="https://github.com/user-attachments/assets/2a8b2f90-8139-4c1f-92cd-4720f760453a"
/>


Default:
<img width="384" alt="image"
src="https://github.com/user-attachments/assets/6b2c421b-4306-48b5-8233-099b5ca43124"
/>

Rounded:
<img width="378" alt="image"
src="https://github.com/user-attachments/assets/06651f04-1aaa-413b-b08b-b60ddfc0712f"
/>


Pill:
<img width="378" alt="image"
src="https://github.com/user-attachments/assets/0e716d1e-f499-43f6-94f4-3fd992c65c5d"
/>

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
pull/3151/head
jimtng 2025-04-13 20:16:11 +10:00 committed by GitHub
parent 0404c5eb47
commit df5f0e3cc2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 41 additions and 0 deletions

View File

@ -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);

View File

@ -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

View File

@ -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 & {

View File

@ -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) {

View File

@ -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