[basicui] Support primary and secondary as value for label/value colors (#1733)

Closes #1716

Signed-off-by: Laurent Garnier <lg.hc@free.fr>
pull/1758/head
lolodomo 2023-03-04 22:34:57 +01:00 committed by GitHub
parent 970cd6f391
commit 1ac9d770d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 5 deletions

View File

@ -49,12 +49,11 @@ import org.slf4j.LoggerFactory;
* @author Kai Kreuzer - Initial contribution and API
* @author Vlad Ivanov - BasicUI changes
* @author Laurent Garnier - Refactor icon management to support other iconsets
* @author Laurent Garnier - primary/secondary colors
*/
@NonNullByDefault
public abstract class AbstractWidgetRenderer implements WidgetRenderer {
private final Logger logger = LoggerFactory.getLogger(AbstractWidgetRenderer.class);
private static final String ICON_SOURCE_OH = "oh";
private static final String ICON_SOURCE_IF = "if";
private static final String ICON_SOURCE_ICONIFY = "iconify";
@ -65,6 +64,11 @@ public abstract class AbstractWidgetRenderer implements WidgetRenderer {
public static final String ICON_TYPE = "svg";
public static final String PRIMARY_COLOR = "#3f51b5";
public static final String SECONDARY_COLOR = "#ff4081";
private final Logger logger = LoggerFactory.getLogger(AbstractWidgetRenderer.class);
private final BundleContext bundleContext;
protected final TranslationProvider i18nProvider;
protected final ItemUIRegistry itemUIRegistry;
@ -350,6 +354,7 @@ public abstract class AbstractWidgetRenderer implements WidgetRenderer {
String snippet = originalSnippet;
color = itemUIRegistry.getLabelColor(w);
color = applyPrimaryOrSecondaryColor(color);
if (color != null) {
style = "style=\"color:" + color + "\"";
@ -358,6 +363,7 @@ public abstract class AbstractWidgetRenderer implements WidgetRenderer {
style = "";
color = itemUIRegistry.getValueColor(w);
color = applyPrimaryOrSecondaryColor(color);
if (color != null) {
style = "style=\"color:" + color + "\"";
@ -375,6 +381,15 @@ public abstract class AbstractWidgetRenderer implements WidgetRenderer {
return snippet;
}
private @Nullable String applyPrimaryOrSecondaryColor(@Nullable String color) {
if ("primary".equals(color)) {
return PRIMARY_COLOR;
} else if ("secondary".equals(color)) {
return SECONDARY_COLOR;
}
return color;
}
protected @Nullable String getCategory(Widget w) {
return itemUIRegistry.getCategory(w);
}

View File

@ -51,6 +51,7 @@ import org.slf4j.LoggerFactory;
*
* @author Kai Kreuzer - Initial contribution and API
* @author Vlad Ivanov - BasicUI changes
* @author Laurent Garnier - primary/secondary colors
*/
@Component(service = { PageRenderer.class })
@NonNullByDefault
@ -117,6 +118,8 @@ public class PageRenderer extends AbstractWidgetRenderer {
snippet = snippet.replace("%icon_type%", ICON_TYPE);
snippet = snippet.replace("%theme%", config.getTheme());
snippet = snippet.replace("%sitemapquery%", String.format("?sitemap=%s", sitemap));
snippet = snippet.replace("%primarycolor%", PRIMARY_COLOR);
snippet = snippet.replace("%secondarycolor%", SECONDARY_COLOR);
String[] parts = snippet.split("%children%");

View File

@ -69,7 +69,7 @@
</div>
</script>
</head>
<body class="mdl-color-text--grey-700" data-sitemap="%sitemap%" data-page-id="%id%" data-theme="%theme%" data-icon-type="%icon_type%">
<body class="mdl-color-text--grey-700" data-sitemap="%sitemap%" data-page-id="%id%" data-theme="%theme%" data-icon-type="%icon_type%" data-primary-color="%primarycolor%" data-secondary-color="%secondarycolor%">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--scroll navigation navigation-home">
<div class="mdl-layout__header-row">

View File

@ -1673,6 +1673,8 @@
_t.loading = _t.root.querySelector(o.uiLoadingBar);
_t.layoutTitle = document.querySelector(o.layoutTitle);
_t.iconType = document.body.getAttribute(o.iconTypeAttribute);
_t.primaryColor = document.body.getAttribute(o.primaryColorAttribute);
_t.secondaryColor = document.body.getAttribute(o.secondaryColorAttribute);
_t.notification = document.querySelector(o.notify);
_t.escapeHtml = function(text) {
@ -1965,6 +1967,8 @@
this.updateWidget = function(widget, update) {
var
value = this.extractValueFromLabel(update.label),
labelColor = update.labelcolor,
valueColor = update.valuecolor,
makeVisible = false;
if (widget.visible !== update.visibility) {
@ -1982,17 +1986,29 @@
widget.setValue(smarthome.UI.escapeHtml(value), update.state, update.visibility);
}
if (labelColor === "primary") {
labelColor = smarthome.UI.primaryColor;
} else if (labelColor === "secondary") {
labelColor = smarthome.UI.secondaryColor;
}
if (valueColor === "primary") {
valueColor = smarthome.UI.primaryColor;
} else if (valueColor === "secondary") {
valueColor = smarthome.UI.secondaryColor;
}
[{
apply: widget.setLabel,
data: update.label,
fallback: null
}, {
apply: widget.setLabelColor,
data: update.labelcolor,
data: labelColor,
fallback: ""
}, {
apply: widget.setValueColor,
data: update.valuecolor,
data: valueColor,
fallback: ""
}, {
apply: widget.setIconColor,
@ -2397,6 +2413,8 @@
idAttribute: "data-widget-id",
iconAttribute: "data-icon",
iconTypeAttribute: "data-icon-type",
primaryColorAttribute: "data-primary-color",
secondaryColorAttribute: "data-secondary-color",
controlButton: "button",
buttonActiveClass: "mdl-button--accent",
modal: ".mdl-modal",