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

High contrast mode switch #954

Merged
merged 1 commit into from
Feb 15, 2016
Merged

High contrast mode switch #954

merged 1 commit into from
Feb 15, 2016

Conversation

davkal
Copy link
Contributor

@davkal davkal commented Feb 11, 2016

  • added button to the bottom right to switch to higher contrast,
  • suitable for projectors
  • increased contrast between background and text colors
  • thicker strokes around chart elements
  • ensure yellow details panel backgrounds are darker

Addresses #874

@davkal
Copy link
Contributor Author

davkal commented Feb 11, 2016

Normal mode:

screen shot 2016-02-10 at 16 09 13

High contrast mode:
screen shot 2016-02-10 at 16 10 07

@davkal
Copy link
Contributor Author

davkal commented Feb 11, 2016

Ludicrous contrast:

screen shot 2016-02-10 at 16 14 52

@peterbourgon
Copy link
Contributor

Nice! Since this is a super-rare feature mostly for us when we give demos, what do you think of swapping the toggle from SWITCH CONTRAST to something smaller, for example a half-moon icon?

@foot
Copy link
Contributor

foot commented Feb 11, 2016

Code looks good, had a bit of a poke into less but couldn't see a nice way to redefine vars more dynamically. There might be reload style hacks etc. It would be cool if we could just add a class to the app and have the contrast update.

  • Switching from high-contrast mode back to normal mode requires clicking the change contrast button twice atm

@davkal
Copy link
Contributor Author

davkal commented Feb 11, 2016

After review feedback:

screen shot 2016-02-11 at 10 41 45

@foot
Copy link
Contributor

foot commented Feb 13, 2016

Nice! LGTM.

I associate this icon more classically w/ contrast, but it doesn't have a nice inverse, personal pref. http://fortawesome.github.io/Font-Awesome/icon/adjust/

@davkal
High contrast mode switch
5310681 
* added button to the bottom right to switch to higher contrast,
* suitable for projectors
* increased contrast between background and text colors
* thicker strokes around chart elements
* ensure yellow details panel backgrounds are darker
@davkal
Copy link
Contributor Author

davkal commented Feb 15, 2016

Changed the icon. Thx @foot

davkal added a commit that referenced this pull request Feb 15, 2016
@davkal
Merge pull request #954 from weaveworks/contrast-mode
04b05c1 
High contrast mode switch
@davkal davkal merged commit 04b05c1 into master Feb 15, 2016
@davkal davkal deleted the contrast-mode branch February 15, 2016 16:21
@davkal davkal mentioned this pull request Feb 18, 2016
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@davkal @peterbourgon @foot