Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Flow for creating lists from text #539

Open
mtias opened this Issue Apr 28, 2017 · 18 comments

Comments

Projects

In Development in Blocks

List in Blocks

4 participants
Contributor

mtias commented Apr 28, 2017 edited by jasmussen

Idea discussed with @jasmussen.

image

If you select text across multiple lines, a contextual "make a list out of these" button could appear next to the block switcher.

Clicking it would create a new list block with those items.

See comments for a mockup of how this could work.

@mtias mtias added to List in Blocks Apr 28, 2017

Collaborator

jasmussen commented May 1, 2017

To elaborate a bit, this might be particularly interesting in combination with the multi paragraph text block, #447. In this case, selecting items inside such a block and clicking the list block would "split the block".

Collaborator

jasmussen commented May 2, 2017

Here are two flow mockups for this.

Version 1: the list buttons are always visible:

version 1

Version 2: the list buttons are visible only when you've selected across lines:

version 2

In version 2, would we miss the inline formatting buttons?

Contributor

mtias commented May 2, 2017

I think these transformations should appear on the block switcher because I expect creating a list to split it into a separate block.

Collaborator

jasmussen commented May 2, 2017 edited

Chatted with Matías and we came up with this:

make a list

In this flow, the left most list and quote buttons show up only when you select multiple lines, and they show up in the spot where the block switcher sits.

Here's how a list block would look:

list

@jasmussen jasmussen added this to the Beta milestone May 16, 2017

Collaborator

EphoxJames commented May 17, 2017

If the list has indents what should the conversion from list to paragraph do?

Collaborator

jasmussen commented May 17, 2017

Probably okay to remove the indentation in the conversion then. We can always revisit if we find that too destructive.

@kopepasah kopepasah moved from Backlog to Ready in Blocks Jun 29, 2017

Member

iseulde commented Jul 8, 2017

@jasmussen @mtias Is this still relevant?

Collaborator

jasmussen commented Jul 9, 2017

Is this still relevant?

It is on a meta level.

I think we have many many aspects right with the editor in its current state. But one of the aspects I still think needs a little polish is cross-text-block actions like list or quote making. It might have to be punted, but I think it's worth keeping this open.

Contributor

mtias commented Jul 9, 2017

@iseulde we need to review transformations in general, both UI and technically. This falls under that. I feel it should be more contextual (if you select multiple lines you get option to create list, otherwise you don't).

@mtias mtias modified the milestone: Beta 0.7.0, Beta 0.6.0 Jul 24, 2017

Member

iseulde commented Jul 28, 2017

@matias So if you select multiple paragraphs, there should be a list option? Sounds like #1811 is a good start for that.

@jasmussen jasmussen added a commit that referenced this issue Aug 2, 2017

@jasmussen jasmussen Try old hover design
There has been discussion on the heaviness of the blocks. Initially this led us to having only the left border on hover. We added a full outline so as to better portray that a paragraph is a block.

However multi selection across blocks works well. If we can get it to work as well with keyboard shortcuts (and show list and quote options in a toolbar), aside from this addressing #539, it seems like there's less of a need for the block outlines to look so heavy.
3474036

@mtias mtias modified the milestone: Beta 0.8.0, Beta 0.7.0 Aug 2, 2017

Collaborator

jasmussen commented Aug 4, 2017

Here's a new mockup:

multi-select list making

In this situation, you get a new quick toolbar, one which works across blocks. @iseulde what do you think?

Member

iseulde commented Aug 4, 2017

@jasmussen I thought we were going for the blue toolbar on top?

Collaborator

jasmussen commented Aug 4, 2017

I still like that blue toolbar, it's an option. If it's easier to implement like that, it's okay.

The mockup tries a quick toolbar instead, as it adds actions related to formatting.

Member

iseulde commented Aug 4, 2017

Yes, I initially made it like this. I think we removed it because of the sticky toolbar problem (would be limited to the first block). Not sure how to solve that problem.

Collaborator

jasmussen commented Aug 4, 2017

Yes, I initially made it like this. I think we removed it because of the sticky toolbar problem (would be limited to the first block). Not sure how to solve that problem.

If it's easier to do in the blue toolbar for now, totally fine, especially since we're pondering a fixed toolbar in #2148.

Doing a little inspector surgery, if we can move the block controls to be a child of this div, then it can scroll across the blocks:

screen shot 2017-08-04 at 17 18 26

But if that's super complicated, totally fine to use the blue one.

Member

iseulde commented Aug 4, 2017 edited

@jasmussen Don't think that's true. It would scroll over all the blocks and not get fixed anywhere but the top and bottom of the editor.

Member

iseulde commented Aug 4, 2017

We can wrap selected blocks in a div (easy with React I guess), but then all iframes will reload every time you multi select them.

Collaborator

jasmussen commented Aug 4, 2017

Sounds like we should try putting the buttons in the blue bar for starters, seeing if it's actually a good flow. Then we can iterate from there.

@iseulde iseulde self-assigned this Aug 7, 2017

@kopepasah kopepasah moved from Ready to In Development in Blocks Aug 9, 2017

@mtias mtias modified the milestone: Beta 1.0, Beta 0.8.0 Aug 14, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment