search

arrowtype / type-x

Test your fonts across the web by easily overriding fonts on any webpage.
Apache License 2.0
178 stars 6 forks source link

Text-oriented UI updates - "v1" #25

Closed thundernixon closed 5 years ago

thundernixon commented 5 years ago

As we chatted about, for v1 we will need to pair down our scope, and leave out some of the more-advanced UI controls for now.

With that in mind, I made some design polishing edits in https://github.com/kabisa/recursive-extension/pull/23, and then also did some directional sketches.

Because we have (at least) three chunks of CSS to place with each font override, I think we would be best off using a tabbed approach within the overrides:

image

Note: if we don't need the "apply changes" button, then we shouldn't change the top row to buttons – we can just leave it as it currently is.

image

image

image

I do think that it would be more convenient to have a global selector blacklist, partly so a user can easily ignore weird hashes, etc, and doesn't risk accidentally deleting their work. However, if you think it's really better (or only feasible) to keep selectors to ignore with each font, here's how that might look:

image

thundernixon commented 5 years ago

One update here: because it sounds like a <select> menu of available fonts will happen, that portion should look like a select menu, rather than a single big button. It should be something more like this:

image

arrowtype commented 5 years ago

Closing this as it's out-of-date, and resolved where applicable.