Skip to content
This repository has been archived by the owner on May 7, 2020. It is now read-only.

Basic UI styling changed to SASS + initial theming support #4137

Merged
merged 1 commit into from Sep 19, 2017
Merged

Basic UI styling changed to SASS + initial theming support #4137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion extensions/ui/org.eclipse.smarthome.ui.basic/CONTRIBUTING.md
View file
Open in desktop
@@ -1,6 +1,6 @@
## Contributing

Javascript linting, compressing and LESS compilation is handled through Grunt. Therefore, please run `grunt` instead of changing compressed CSS/JS manually. Default Grunt task will also check the code using ESLint.
Javascript linting, compressing and LESS compilation is handled through Gulp. Therefore, please run `gulp` instead of changing compressed CSS/JS manually. Default Gulp task will also check the code using ESLint.

Installing build dependencies:

Expand Down
9 changes: 9 additions & 0 deletions extensions/ui/org.eclipse.smarthome.ui.basic/ESH-INF/config/config.xml
View file
Open in desktop
Expand Up @@ -5,6 +5,15 @@
http://eclipse.org/smarthome/schemas/config-description-1.0.0.xsd">

<config-description uri="ui:basic">
<parameter name="theme" type="text" required="true">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is now a pretty different approach than we have in the Paper UI.
With the Paper UI, we allow ESH solutions to add a custom theme on top by adding a fragment. It is NOT a feature exposed to the user, though. I think this makes sense in terms of ensuring a "corporate identity", i.e. allowing solutions to make sure that their UIs carry their logo and match there general CI.

While I can understand that it can be useful to allow users to choose a light or dark theme, I am not so convinced, if we really need orange/blue/green color options (resp. rather allow solutions to add additional themes besides light/dark through a fragment).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll leave just Default and Dark then. We can work on the fragment solution later on if that's preferred.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. The leftover themes are still accessible from my public gist.

<label>Theme</label>
<description>Defines the UI theme.</description>
<options>
<option value="default">Default</option>
<option value="dark">Dark</option>
</options>
<default>default</default>
</parameter>
<parameter name="iconType" type="text" required="true">
<label>Icon Format</label>
<description>Defines whether bitmap or vector icons are used by the UI.</description>
Expand Down
8 changes: 4 additions & 4 deletions extensions/ui/org.eclipse.smarthome.ui.basic/gulpfile.js
View file
Open in desktop
Expand Up @@ -3,19 +3,19 @@

var
gulp = require("gulp"),
less = require("gulp-less"),
sass = require("gulp-sass"),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a new tool that we didn't use before, correct? If so, we will require a CQ and approval by Eclipse.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could also stick with LESS unless it doesn't support some of the required features.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd suggest to go with SASS because of the fact that MDL uses it natively by default. In the future we might extend/modify MDL stylesheets and possibly load them directly from package.json instead of hosting them as a static asset.

See my comment from the first post:

The reason for the last bullet point was to potentially utilize Material Design Lite in scss version only. That would give us some more flexibility wrt styling (e.g. extend css classes with internal mdl components or create your own).

I believe this approach will give us more flexibility overall and now is a good time to change it (since there's not much stylesheet to be maintained and conversion from LESS was pretty straightforward).

What's a process of submitting CQs? Is that something a PR creator should do?

Cheers! :-)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@resetnow @kaikreuzer 馃彄

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think eventually having MDL building from sources is a good point.

Is that something a PR creator should do?

No, as far as I understand, some people from Eclipse org can do it, including @kaikreuzer

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct, this has to be done by project committers.
Just to clarify: This is a build-time only dependency, i.e. we are not distributing anything from that project, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kaikreuzer that's right.

uglify = require("gulp-uglify"),
eslint = require("gulp-eslint");

var
sources = {
js: "web-src/smarthome.js",
less: "web-src/smarthome.less"
sass: "web-src/smarthome.scss"
};

gulp.task("css", function() {
return gulp.src(sources.less)
.pipe(less({ compress: true }))
return gulp.src(sources.sass)
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest("web"));
});

Expand Down
2 changes: 1 addition & 1 deletion extensions/ui/org.eclipse.smarthome.ui.basic/package.json
View file
Open in desktop
Expand Up @@ -8,7 +8,7 @@
"dependencies": {
"gulp": "^3.9.0",
"gulp-eslint": "^4.0.0",
"gulp-less": "^3.3.2",
"gulp-sass": "^3.1.0",
"gulp-uglify": "^1.5.1"
}
}
4 changes: 2 additions & 2 deletions extensions/ui/org.eclipse.smarthome.ui.basic/snippets/main.html
View file
Open in desktop
Expand Up @@ -61,7 +61,7 @@
</div>
</script>
</head>
<body class="mdl-color--grey-100 mdl-color-text--grey-700" data-sitemap="%sitemap%" data-page-id="%id%" 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%">
<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">
Expand All @@ -78,7 +78,7 @@
</div>
<div class="ui__loading mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</header>
<main class="mdl-layout__content mdl-color--grey-100">
<main class="mdl-layout__content">
<div class="page-content mdl-grid">
%children%
</div>
Expand Down
4 changes: 2 additions & 2 deletions extensions/ui/org.eclipse.smarthome.ui.basic/snippets/main_static.html
View file
Open in desktop
Expand Up @@ -23,7 +23,7 @@

<script src="mdl/material.min.js"></script>
</head>
<body class="mdl-color--grey-100 mdl-color-text--grey-700">
<body class="mdl-color-text--grey-700">
<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">
Expand All @@ -35,7 +35,7 @@
<div class="mdl-layout-spacer"></div>
</div>
</header>
<main class="mdl-layout__content mdl-color--grey-100">
<main class="mdl-layout__content">
<div class="page-content page-static__content mdl-color--white mdl-shadow--2dp mdl-grid">
%content%
</div>
Expand Down
16 changes: 14 additions & 2 deletions ...marthome.ui.basic/src/main/java/org/eclipse/smarthome/ui/basic/internal/WebAppConfig.java
View file
Open in desktop
Expand Up @@ -21,9 +21,11 @@
public class WebAppConfig {
private final static String DEFAULT_SITEMAP = "default";
private final static String DEFAULT_ICON_TYPE = "png";
private final static String DEFAULT_THEME = "default";

private String defaultSitemap = DEFAULT_SITEMAP;
private String iconType = DEFAULT_ICON_TYPE;
private String theme = DEFAULT_THEME;

private List<String> cssClassList = new ArrayList<String>();

Expand Down Expand Up @@ -61,8 +63,9 @@ private void applyCssClasses(Map<String, Object> configProps) {
}

public void applyConfig(Map<String, Object> configProps) {
String configIconType = (String) configProps.get("iconType");
String configDefaultSitemap = (String) configProps.get("defaultSitemap");
String configIconType = (String) configProps.get("iconType");
String configTheme = (String) configProps.get("theme");

if (configDefaultSitemap == null) {
configDefaultSitemap = DEFAULT_SITEMAP;
Expand All @@ -74,8 +77,13 @@ public void applyConfig(Map<String, Object> configProps) {
configIconType = DEFAULT_ICON_TYPE;
}

iconType = configIconType;
if (configTheme == null) {
configTheme = DEFAULT_THEME;
}

defaultSitemap = configDefaultSitemap;
iconType = configIconType;
theme = configTheme;

applyCssClasses(configProps);
}
Expand All @@ -88,6 +96,10 @@ public String getIconType() {
return iconType;
}

public String getTheme() {
return theme;
}

public String getCssClassList() {
String result = " ";
for (String item : cssClassList) {
Expand Down
1 change: 1 addition & 0 deletions ...e.ui.basic/src/main/java/org/eclipse/smarthome/ui/basic/internal/render/PageRenderer.java
View file
Open in desktop
Expand Up @@ -82,6 +82,7 @@ public StringBuilder processPage(String id, String sitemap, String label, EList<
snippet = StringUtils.replace(snippet, "%sitemap%", sitemap);
snippet = StringUtils.replace(snippet, "%htmlclass%", config.getCssClassList());
snippet = StringUtils.replace(snippet, "%icon_type%", config.getIconType());
snippet = StringUtils.replace(snippet, "%theme%", config.getTheme());

String[] parts = snippet.split("%children%");

Expand Down