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.

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

[KED-1638] Update colour scheme, improve print/export styles #169

Merged
merged 17 commits into from
May 22, 2020

Conversation

richardwestenra
Copy link
Contributor

@richardwestenra richardwestenra commented May 20, 2020

Description

  1. Add new colour scheme styles
  2. Update the image export styles, so that on the dark theme, it adds the dark background to the image, while in light mode it keeps the transparent background and instead changes the node/edge styling to the ones you sent over, so that it’s print-friendly.
  3. Add @media print styles, so that it will print properly - see the image preview if you hit Cmd+P
  4. Remove unused Sass variables, and rename colour variables
  5. Hide layers bg gradient when layers are hidden
  6. Rename flowchart classes to add 'pipeline-' prefix. This is to avoid compatibility issues with global classes when embedded in other projects
  7. Reduce icon-toolbar width
  8. Make sidebar margin a variable, and increase it
  9. Fix broken layer gradient in Safari

Dark theme:
image

Light theme:
image

Development notes

  1. I've added some new window event listeners for the print styles
  2. I've renamed a lot of the basic flowchart classes to add 'pipeline-' prefix. This is to avoid compatibility issues with global classes when embedded in other projects. It's something I've been meaning to do for a while. Probably should have been its own PR - 🤷 sorry!

QA notes

Need to test exporting images (both PNG/SVG), and printing, in both themes.
See also tooltips etc.

Checklist

  • Read the contributing guidelines
  • Opened this PR as a 'Draft Pull Request' if it is work-in-progress
  • Updated the documentation to reflect the code changes
  • Added new entries to the RELEASE.md file
  • Added tests to cover my changes

Legal notice

  • I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.

  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorised to submit this contribution on behalf of the original creator(s) or their licensees.

  • I certify that the use of this contribution as authorised by the Apache 2.0 license does not violate the intellectual property rights of anyone else.

- Rename main bg colour variables to -1, -2, -3
- Remove node-highlighted class, as it's pretty much unnecessary
- Rename node highlighted variable to active, and active to selected, as these are what they're being used for
This is to avoid compatibility issues with global classes when embedded in other projects
1. Ensure that the chart displays well when printing, by hiding the sidebar and layers, and making it reset to 100% width
2. Add new styles for both print and export, especially the light theme, which has a white/transparent background, so the nodes need a different stroke and fill. Also make the background solid for dark exported images
Safari treats transparent as rgba(0,0,0,0), so it fades the hue to black as it changes the opacity. This fix avoids this problem by keeping the hue the same, and only changing the opacity.
@richardwestenra richardwestenra merged commit 20dc805 into develop May 22, 2020
@richardwestenra richardwestenra deleted the feature/colour-scheme branch May 22, 2020 09:39
@richardwestenra richardwestenra mentioned this pull request May 26, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants