Add support for custom CSS skins #832

SamCarlberg · 2017-03-01T05:10:04Z

I'm opening this PR just to make this visible to anyone who wants to give input during development. There is still a lot of room for improvement, visually.

This also needs to get reworked to store arbitrarily many themes in ~/GRIP and offer a UI to choose between them, possibly with previews (like how Slack does it)

Screenshots

Empty

Add a source

Warning

With steps and connections

Deploy dialog

Analysis window

Settings

About

Should get reworked to store arbitrarily many themes in ~/GRIP and offer a UI to choose between them, possibly with previews (like how Slack does it) Still need to fix socket-handle

JLLeitschuh · 2017-03-01T15:49:57Z

🎆 Yes!!! I like this!!! 🎆

bradamiller · 2017-03-01T16:22:37Z

Sam

I was curious how much work you figured it would take to add the UI to be able to select themes and if that was all that it needed to be finished? It seems reasonable to start out with the two (old look and dark mode), then think about more or get contributions.

Split controls css into its own file Add pseudoclasses for started and stopped StartStoppableButtons Fixed analysis pane css not updating

codecov-io · 2017-03-02T06:16:07Z

Codecov Report

Merging #832 into master will decrease coverage by 0.15%.
The diff coverage is 41.6%.

@@             Coverage Diff             @@
##             master    #832      +/-   ##
===========================================
- Coverage     52.35%   52.2%   -0.16%     
- Complexity     1134    1147      +13     
===========================================
  Files           240     244       +4     
  Lines          7724    7848     +124     
  Branches        526     539      +13     
===========================================
+ Hits           4044    4097      +53     
- Misses         3494    3561      +67     
- Partials        186     190       +4

JLLeitschuh · 2017-03-02T22:42:27Z

ui/src/main/resources/edu/wpi/grip/ui/GRIP-dark-controls.css

+
+.range-slider .high-thumb, .range-slider .low-thumb, .slider .thumb {
+    -fx-background-color: gripsandy;
+}


Newline at end of file.

Might want to make it save to a file in ~/GRIP/ instead of ... whatever it is that Preferences decides to use Also made this work for the server port while I'm at it

nightpool · 2017-03-03T04:29:23Z

looking really good! some feedback:

The white borders around menu bars are really distracting. Compare the subtler shadow effect on the light theme:

Very little contrast in the background for the title of each section. The light grey is very close to the light green of the section borders, making it hard to distinguish the background of that title section from the borders, and thus muddying the borders in general. Compare to the high contrast of the light theme:

I would recommending getting rid of the backgrounds in this section entirely, adding dark borders where they don't already exist (preview and palette, sources already has a border for some reason?) and making the text bigger (because the white has less contrast on the grey then the black does on the tan background, so you should compensate by increasing the text size)

The search bar not having any borders is kinda weird:

there should be more space between these two buttons if there isn't going to be a border between them:

The stop button here should be bigger. it's really hard to see/understand right now:

Also, the "pulsing" play button is very light/hard to see/looks like it's disabled:

some weird white lines on the "benchmark" screen:

and in the "file" menu:

those should probably both be dark

If we're doing borderless, this dialogue needs more spacing too:

(add network table source)

nightpool · 2017-03-03T04:34:31Z

In general, there are two main "overall" design issues that need to be addressed.

The dark theme is flat, while the light theme is a more traditional skeuomorphic look-and-feel. this is good—I like it a lot more—but it requires a little more care in choosing spacing, where borders go, where we're using shadows, etc. Right now we're pretty inconsistent on where we're using borders. For example, we have a solid thick black border around preview output, and in the pipeline, but no borders at all in the palette or around headers. this leads to an inconsistent visual metaphor and a confusing user experience.
Everything is pretty weirdly blue. I really like it for the "selected" state, but I feel like the body text needs to be more desaturated—it feels like i'm using a 70s 2-color CRT terminal. Also the body text is honestly slightly too bright. Tweaking the main text color should fix both of these problems.

Just need to pretty up the selection screen

It would be REALLY nice to have previews of each theme rendered next to the buttons, though

…ects#832 Small improvements to hex grid placement, no more weird boders

JLLeitschuh · 2017-04-19T15:18:12Z

@nightpool Thanks for taking the time to review this PR and really give a solid review of the coloring and design.

SamCarlberg · 2017-04-19T21:46:33Z

So these tests are failing on Travis, Appveyor, and my Linux laptop... but not on my Windows 10 desktop. I'm very tempted to just @Ignore all those tests since it seems (to me) to be an issue with testfx

* Make the preloader have a fancy background Remove the progress bar from the preloader as well * Make colors stand out a bit more * Change to dark color theme. Should probably depend on #832 Small improvements to hex grid placement, no more weird boders

SamCarlberg · 2019-01-13T18:44:52Z

Closing this PR. I may open a PR in the future with a better theme

Add initial dark theme

f7684a3

Should get reworked to store arbitrarily many themes in ~/GRIP and offer a UI to choose between them, possibly with previews (like how Slack does it) Still need to fix socket-handle

SamCarlberg added location: ui type: enhancement labels Mar 1, 2017

SamCarlberg added 2 commits March 2, 2017 00:39

Improve styling

a2e27cd

Split controls css into its own file Add pseudoclasses for started and stopped StartStoppableButtons Fixed analysis pane css not updating

Appease PMD

73eae98

SamCarlberg added 2 commits March 2, 2017 03:20

Fix codegen dialog. Make menu hover light green

4430241

Holy crap PopOvers are impossible to style

80bc967

JLLeitschuh reviewed Mar 2, 2017

View reviewed changes

SamCarlberg added 2 commits March 2, 2017 17:42

Make the theme persistent with java.util.Preferences

0788052

Might want to make it save to a file in ~/GRIP/ instead of ... whatever it is that Preferences decides to use Also made this work for the server port while I'm at it

NL at EOF

41bcc2d

SamCarlberg added 7 commits March 2, 2017 23:56

Extract built in themes at startup and allow them to be switched at will

96454c7

Just need to pretty up the selection screen

Add ComboBox styles, remove and fix some minor annoyances

ecdd0cc

Improve theme selection dialog

1b7e4e0

It would be REALLY nice to have previews of each theme rendered next to the buttons, though

Make search box always dark gray to differentiate it from surroundings

4b23697

Fix benchmarking results not getting the correct style

8d6e0df

Move theme discovery to its own class

2736093

Rename themes to "dark" and "light"

6003d63

SamCarlberg added a commit to SamCarlberg/GRIP that referenced this pull request Apr 10, 2017

Change to dark color theme. Should probably depend on WPIRoboticsProj…

89e0367

…ects#832 Small improvements to hex grid placement, no more weird boders

SamCarlberg added 2 commits April 9, 2017 22:28

Merge branch 'master' into feat/skinning

c4eb4f1

Add theme preview images, remove ugly "gripsandy" color

623f0b7

SamCarlberg closed this Jan 13, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for custom CSS skins #832

Add support for custom CSS skins #832

SamCarlberg commented Mar 1, 2017 •

edited

Loading

JLLeitschuh commented Mar 1, 2017

bradamiller commented Mar 1, 2017

codecov-io commented Mar 2, 2017 •

edited

Loading

JLLeitschuh Mar 2, 2017

SamCarlberg Mar 2, 2017 •

edited

Loading

nightpool commented Mar 3, 2017 •

edited

Loading

nightpool commented Mar 3, 2017

JLLeitschuh commented Apr 19, 2017

SamCarlberg commented Apr 19, 2017

SamCarlberg commented Jan 13, 2019

Add support for custom CSS skins #832

Add support for custom CSS skins #832

Conversation

SamCarlberg commented Mar 1, 2017 • edited Loading

Screenshots

Empty

Add a source

Warning

With steps and connections

Deploy dialog

Analysis window

Settings

About

JLLeitschuh commented Mar 1, 2017

bradamiller commented Mar 1, 2017

codecov-io commented Mar 2, 2017 • edited Loading

Codecov Report

JLLeitschuh Mar 2, 2017

Choose a reason for hiding this comment

SamCarlberg Mar 2, 2017 • edited Loading

Choose a reason for hiding this comment

nightpool commented Mar 3, 2017 • edited Loading

nightpool commented Mar 3, 2017

JLLeitschuh commented Apr 19, 2017

SamCarlberg commented Apr 19, 2017

SamCarlberg commented Jan 13, 2019

SamCarlberg commented Mar 1, 2017 •

edited

Loading

codecov-io commented Mar 2, 2017 •

edited

Loading

SamCarlberg Mar 2, 2017 •

edited

Loading

nightpool commented Mar 3, 2017 •

edited

Loading