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.

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

Fade out all outlines as you are typing #8

Closed
jasmussen opened this issue Feb 8, 2017 · 5 comments
Closed

Fade out all outlines as you are typing #8

jasmussen opened this issue Feb 8, 2017 · 5 comments
Labels
[Type] Enhancement A suggestion for improvement. [Type] Task Issues or PRs that have been broken down into an individual action to take

Comments

@jasmussen
Copy link
Contributor

Take the UI prototype for a spin: https://automattic.github.io/gutenberg/ — put the cursor in a paragraph, make some linebreaks, write some text, soak it up.

It's not intended to be super functional, but rather to give a feel for how the block and inline level controls can work, and how that feels while typing. Depending on how far we want to take it, here are some thoughts on how the feel of it all could be improved.

Type selector + up/down rearrangement controls

Should we be showing these controls when you hover over a block? Right now only the faint outlines show up. Might be nice for some quick rearranging to not have to click first.

Show outlines in block you are typing in

Right now the faint outlines show only when you hover over a block with a mouse. Should we be showing these outlines as you are typing inside a block as well? (And only on that block?)

... OR: fade out all outlines as you are typing?

Related to hover outlines, instead of showing outlines on the block you are typing in, we could consider fading out all outlines as you are typing, even outlines on block that your mouse is currently over. The cursor itself fades out anyway, maybe the outlines should too?

When rearranging blocks, the block moved should stay is-selected.

Moving around blocks right now is neat, but a little disorienting. Perhaps we should even add a subtle animation showing the block moving to its new place, squishing out the old block.

@jasmussen jasmussen added the [Type] Question Questions about the design or development of the editor. label Feb 8, 2017
@mtias
Copy link
Member

mtias commented Feb 8, 2017

Show outlines in block you are typing in

I think so. Right now if you press enter from a block and start a new one, the previous block retains the light gray border and the new one has none. We should start with only highlighting in gray the block being edited.

@mtias
Copy link
Member

mtias commented Feb 8, 2017

I think we would end up with three states:

  • Hover state.
  • Selected state.
  • Editing state.

@jasmussen jasmussen added [Type] Enhancement A suggestion for improvement. and removed [Type] Question Questions about the design or development of the editor. labels Feb 8, 2017
@ianstewart
Copy link
Contributor

ianstewart commented Feb 8, 2017

Should we be showing these controls when you hover over a block? Right now only the faint outlines show up. Might be nice for some quick rearranging to not have to click first.

When trying it out I felt like I expected to see the controls appear without having to click. It made me pause.

Perhaps we should even add a subtle animation showing the block moving to its new place, squishing out the old block.

+1 to trying it out, at least. I felt the same way when moving blocks.

@mtias mtias changed the title UI prototype: various experience tweaks Various experience tweaks Feb 8, 2017
@jasmussen
Copy link
Contributor Author

As an update, When rearranging blocks, the block moved should stay is-selected has been fixed.

Showing controls on hover is in progress: #59

The remaining task, fade out all outlines as you are typing, we should do that. We should also consider it in the context of #61

@jasmussen jasmussen changed the title Various experience tweaks Fade out all outlines as you are typing Feb 20, 2017
@jasmussen jasmussen added the [Type] Task Issues or PRs that have been broken down into an individual action to take label Feb 20, 2017
@jasmussen
Copy link
Contributor Author

This is done in both prototypes.

omarreiss pushed a commit that referenced this issue Jun 26, 2018
Share ARIA live regions between multiple instances of A11ySpeak
omarreiss added a commit that referenced this issue Jun 26, 2018
Update browserlist supported browsers matrix
hypest pushed a commit that referenced this issue Nov 2, 2018
…in-readme

Add README.md instructions for attaching debugger to jest
ntwb pushed a commit that referenced this issue May 31, 2020
Bump dependencies, Stylelint to v1.0.1 and PostCSS to v5.0.4
fluiddot added a commit that referenced this issue Jan 26, 2021
Update master branch from original repo
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Enhancement A suggestion for improvement. [Type] Task Issues or PRs that have been broken down into an individual action to take
Projects
None yet
Development

No branches or pull requests

4 participants