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

Add heading level and alignment to inspector #1383

Merged
merged 4 commits into from
Jun 26, 2017
Merged

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented Jun 22, 2017

Just an idea. See #751.

This PR removes levels 1, 4 and 5 from the inline toolbar, and adds levels 1-6 to the inspector. Also adds alignment.

@joen Feel free to style any way you want.

@ellatrix ellatrix requested a review from jasmussen June 22, 2017 21:00
@ellatrix ellatrix added [Feature] Blocks Overall functionality of blocks [Type] Enhancement A suggestion for improvement. labels Jun 22, 2017
@jasmussen
Copy link
Contributor

This is really really interesting. I can't quite yet tell whether I like it, but I think I love it. But it feels like we need more opinions on this one. CC: @melchoyce @mtias @folletto @afercia

Here's a screenshot:

screen shot 2017-06-23 at 09 55 28

@jasmussen
Copy link
Contributor

(Also, I still have on my todo to make better icons for the H levels, but I'll do that separately)

@afercia
Copy link
Contributor

afercia commented Jun 23, 2017

Gut reaction: I like it! Definitely something worth exploring, also some user testing would be nice.
Just a small thing, it would be great to don't skip heading levels, currently there's a jump from h2 to h4:

screen shot 2017-06-23 at 10 00 57

@melchoyce
Copy link
Contributor

I have a similar positive gut reaction!

@jasmussen
Copy link
Contributor

Given the positive reactions, let's get this in master and test it.

@@ -36,6 +36,11 @@
height: $icon-button-size - 16px;
}
}

.editor-sidebar & {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer to include these styles in editor-sidebar instead.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 👍

@ellatrix ellatrix merged commit 03d13cf into master Jun 26, 2017
@ellatrix ellatrix deleted the try/heading-inspector branch June 26, 2017 11:33
@mtias
Copy link
Member

mtias commented Jun 26, 2017

I'm a bit conflicted with moving the alignment, because now some blocks will have alignment in quick access, and some will have it in the inspector.

@ellatrix
Copy link
Member Author

@mtias Yeah, I wonder if we should move it to the inspector everywhere, as an advanced setting.

@jasmussen
Copy link
Contributor

Matías makes a good point.

Should we show instead Switcher | H2-4 | Alignments

.. and then the rest in the inspector?

Instead of what it is now, Switcher | H2-4 | Inline?

@ellatrix
Copy link
Member Author

I don't mind that, or show alignment in the inspector for all blocks. An argument against the latter is that centre alignment is used a lot.

Something in between we should explore: centre alignment toggle for all blocks (one button), and more alignment options in the inspector.

N.b.: alignment has nothing to do with LTR and RTL. I saw some confusion a few months ago.

@mtias
Copy link
Member

mtias commented Jun 26, 2017

I think I'd rather see the switcher in the inspector, to be honest. The other part of the conversation is that we've said the inspector is for advanced settings, and the design optimizes for that—hidden on mobile, etc. Specially if it become a modal, it would be awkward to have alignment there because you cannot see what you change with a modal obscuring it.

@ellatrix
Copy link
Member Author

I'd also rather see it in the inspector. Regarding the mobile argument, the same could be said about all other advanced controls as well, e.g. drop cap. Not sure how alignment would be different.

@jasmussen
Copy link
Contributor

Part of the "basic & advanced split" conversation is also the implicit tradeoff that we are okay with it not being as accessible on mobile.

That said, Google Docs does something interesting on mobile:

screenshot_20170626-150919

We could presumably do something similar with our inspector, but it could only be for block level actions, as inline actions would invoke the soft keyboard.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants