search

spite / rstats

rStats
MIT License
244 stars 31 forks source link

Add white textshadow to alarm counter text for better readability #24

Closed kevinzwhuang closed 7 years ago

kevinzwhuang commented 7 years ago

Description:

When a counter falls below the threshold, the alarm colored text (red) is hard to read behind the gray background. (https://github.com/aframevr/aframe/issues/1630)

screen shot 2016-08-31 at 11 47 39 pm

Change Proposed:

I'd like to propose adding a white text shadow to back the red text. This solution adds much more readability to the labels & values without intruding too much on the overall layout.

screen shot 2016-08-31 at 11 32 32 pm

To do this, I've created a new .alarm CSS class which holds the text-shadow & color property for counters below the threshold. The text-shadow is dense and is made up of 9 levels of shadow to compose the overall red/white backing of the text. I've replaced the _dom.style.color= assignment statement in _draw with _dom.className= to let the CSS handle the color instead of inline through javascript.

This issue & solution has also been discussed in https://github.com/aframevr/aframe/issues/1630 & https://github.com/aframevr/aframe/pull/1880

kevinzwhuang commented 7 years ago

Thoughts on this, @spite ?

spite commented 7 years ago

Sounds good, let me give a closer look before merging.

spite commented 7 years ago

Yeah, very good! Thanks!