search

jamiewaese / ePlant

ePlant is a data visualization tool for integrating and exploring multiple levels of biological data.
MIT License
2 stars 1 forks source link

Update icons with separate PNG's for every state: unavailable, available, active #3

Closed jamiewaese closed 11 years ago

jamiewaese commented 11 years ago

Jamie to generate and upload here.

Question, is the 100 x 100 size appropriate, or should I send to you in the actual display size, roughly 50% of the original? The benefit of extra pixels is they'll remain crisp when they enlarge on mouse over.

yuzhenmi commented 11 years ago

I think (not at home now) Im setting icons at 52px after scaling up. Anything higher than that would be great?

jamiewaese commented 11 years ago

Here are the icons pre-tinted for each state: unavailable, available, active. I'll email you a zipped file with them all as well.

For the hover state we can use transform:scale(1.1) instead of setting the pixel width/height. We can also use transition:all .25s; to animate the transition over a quarter of a second. I added that to the index file... but it may need some tweaking now that we're using different png's for each state. In fact, I'm not sure what the process is when I make edits online and commit.

cellefp-active cellefp-available cellefp-unavailable

cytoscape-active cytoscape-available cytoscape-unavailable

jsmol-active jsmol-available jsmol-unavailable

plantefp-active plantefp-unavailable plantefp-available

reactome-active reactome-available reactome-unavailable

species-active species-unavailable species-available

tracks-active tracks-available tracks-unavailable

geneselector-active geneselector-available geneselector-unavailable

worldefp-active worldefp-available worldefp-unavailable

yuzhenmi commented 11 years ago

I just want to note that transform and transition are CSS3, older (but not ancient) browsers don't support it.

Edit: actually, if CSS3 doesn't work on the browser then canvas probably doesn't either!

jamiewaese commented 11 years ago

True. But I'd rather be on the cutting edge than hold ourselves back because of browser wars. Lets embrace HTML5, CSS3, etc. We want the wow factor!

On Oct 4, 2013, at 9:43 PM, Hans Yu notifications@github.com wrote:

I just want to note that transform and transition are CSS3, older (but not ancient) browsers don't support it.

— Reply to this email directly or view it on GitHub.