[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
parent
0404c5eb47
commit
df5f0e3cc2
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 & {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue