Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Load contrast stylesheet #2256

Merged
merged 1 commit into from
Feb 22, 2017
Merged

Load contrast stylesheet #2256

merged 1 commit into from
Feb 22, 2017

Conversation

jpellizzari
Copy link
Contributor

Part of https://github.com/weaveworks/service-ui/pull/184

Instead of loading a separate contrast.html page when the user clicks the contrast button, load a different stylesheet that will override the normal scope styles.

A window level variable is written to the index.html file. Adds a webpack plugin to accomplish this. From the code:

/**
 * Change the Scope UI theme from normal to high-contrast.
 * In prod, this will inject a stylesheet into <head> and override the styles.
 * In dev, it will force a webpack hot-reload.
 *
 * A window-level variable is written to the .html page during the build process that contains
 * the filename (and content hash) needed to download the file.
 */

@fbarl New approach to the previous PR. PTAL

@jpellizzari jpellizzari requested a review from fbarl February 17, 2017 01:16
@jpellizzari jpellizzari force-pushed the contrast-as-component branch from b55ff7f to f16fa1d Compare February 17, 2017 01:20
fbarl
fbarl suggested changes Feb 17, 2017
View reviewed changes
Copy link
Contributor

@fbarl fbarl left a comment

Choose a reason for hiding this comment

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

Are you sure you pushed all the commits?

Asking because webpack.local.config.js is not rebased right and isContrastMode helper is still being called across files.

@fbarl fbarl removed their assignment Feb 17, 2017
@jpellizzari jpellizzari force-pushed the contrast-as-component branch 3 times, most recently from 4f4fb81 to fe87d72 Compare February 17, 2017 21:17
@jpellizzari
Copy link
Contributor Author

@fbarl Sorry about the false-start. This should be ready for you review now.

Things I tested:

  • Contrast mode switches in hot-reload and static mode, ie npm run build && NODE_ENV=production npm start
  • The node svgs adapt correctly to contrast-mode changes
  • Reloading the page with contrastMode: true in the URL state behaves correctly

fbarl
fbarl reviewed Feb 20, 2017
View reviewed changes
Copy link
Contributor

@fbarl fbarl left a comment

Choose a reason for hiding this comment

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

Good job! There is quite a bit of webpack magic going on, but all the scenarios you mentioned also worked well on my machine. :)

Some of the comments I left may need to be addressed before you merge, but the changes should be rather straightforward.

client/app/scripts/actions/app-actions.js Outdated
@@ -664,6 +677,10 @@ export function route(urlState) {
state.get('nodeDetails'),
dispatch
);

if (urlState.contrastMode) {
dispatch(toggleContrastMode(true));

This comment was marked as abuse.

Sign in to view

client/app/scripts/contrast-compiler.js Outdated
// Append a script to the end of <head /> to evaluate before the other scripts are loaded.
const script = `<script>window.__WEAVE_SCOPE_THEMES = JSON.parse('${themes}')</script>`;
const [head, end] = htmlPluginData.html.split('</head>');
htmlPluginData.html = head.concat(script).concat(end);

This comment was marked as abuse.

Sign in to view

client/app/scripts/utils/contrast-utils.js Outdated
link.rel = 'stylesheet';
link.href = `${window.__WEAVE_SCOPE_THEMES.publicPath}${stylesheet}`;

head.appendChild(link);

This comment was marked as abuse.

Sign in to view

This comment was marked as abuse.

Sign in to view

client/webpack.production.config.js
filename: 'contrast.html'
}),
new HtmlWebpackPlugin({
hash: true,
chunks: ['vendors', 'terminal-app'],

This comment was marked as abuse.

Sign in to view

This comment was marked as abuse.

Sign in to view

This comment was marked as abuse.

Sign in to view

fbarl
fbarl previously approved these changes Feb 20, 2017
View reviewed changes
@fbarl fbarl dismissed their stale review February 20, 2017 14:06

Approved by mistake

@fbarl
Copy link
Contributor

fbarl commented Feb 20, 2017

Also, sorry for the conflicts with master, they're due to my layout optimizations PR. Just double check for isContrastMode helper calls when resolving them.

@jpellizzari jpellizzari force-pushed the contrast-as-component branch 2 times, most recently from 026e520 to 4df3f7f Compare February 20, 2017 19:47
fbarl
fbarl approved these changes Feb 21, 2017
View reviewed changes
Copy link
Contributor

@fbarl fbarl left a comment

Choose a reason for hiding this comment

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

LGTM! Works like charm :)

Just before you merge, maybe you'd want to squash your last two commits into one?

@jpellizzari jpellizzari force-pushed the contrast-as-component branch from 4df3f7f to f2f474a Compare February 21, 2017 18:29
@jpellizzari jpellizzari merged commit 5c7d284 into master Feb 22, 2017
@rade rade deleted the contrast-as-component branch July 5, 2017 13:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fbarl fbarl fbarl approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@jpellizzari @fbarl