Show flex controls on div by default?

[sunny]

I currently find the workflow for using divs to be a little bit slow - mostly because there are a few extra clicks involved.

To have a flex column layout, you need to

1. Click on the Layout tab
2. Click the Display dropdown
3. Select Flex
4. Click on the Row icon

In Oxygen, this can be achieved in a single click:

I know Oxygen sets its divs to flex by default, but what are your thoughts on something like this for Cwicly?

The display is still left unset by default, but if you click on any of the controls, it adds display:flex:

I feel like most users will want to use flex on a div 90%(?) of the time, so it’d help save a lot of clicks.

Personally I’d also want to see the layout tab come first for divs under the Primary controls, but I know that’s a bit trickier since Colors tends to come first for most elements.

[Marius]

Interesting point @sunny. Kind of experienced the same.

@sunny

The display is still left unset by default, but if you click on any of the controls, it adds display:flex:

I think this wouldn’t be the best idea for a couple of reasons, instead, I do suggest the following improvement:

Remove Display Property dropdown list and display the most used ones as icons or labeled buttons.
The rest could be hidden inside a dropdown list. Something like a “+” icon should do the job.
This would not only save one click but also additional mouse movement, plus searching the right item from the list.

@sunny

Personally I’d also want to see the layout tab come first

Agreed. In addition, the Div Block needs definitely the sizing options be available inside the Primary’s Tab.

This would save 2 of currently required 4 clicks, which equals 50%.
The time saving should be even noticeably higher than this.
Setting display flex and the direction would actually only be one very small mouse interaction.

This is how I tweak a new inserted Div Block:

1.) Layout
2.) Sizing
3.) Colors (mainly BG color if applicable)
4.) Margin & Padding

Typography settings is not something I would necessarily nees inside the Primary Tab.

Curious how others proceed in terms of styling area order and what they would find useful inside the Primary Tab.

@sunny

but I know that’s a bit trickier since Colors tends to come first for most elements.

Since these styles are block related, I think there isn’t the necessity to provide the same order just for the sake of a unified look.
It should make sense and improve the workflow.

[sunny]

@Louis the new implementation is a huge improvement! What used to be 4 clicks is now just 1

[Marius]

So good
Small tweak with big impact.

Edit:
Just recognized it’s a 1:1 implementation following my thoughts above.
Thank you so much for this.

Hopefully, the way it works now makes sense for the majority and the decisions that were made are based on various user feedback.

[sunny]

What are your thoughts on moving Context to the Advanced Tab, and Typography back to the Primary?

I actually use typography on divs quite a bit, usually because I use the divs to contain meta information as link wrappers.

Not a big deal if I have to go to the Design tab for it, but Context seems like something you’d use only a fraction of the time? (I’m actually not entirely sure what it does).

[Marius]

I think if typography is requested for the div block, it could be added, since I can see the need for it.

Context is block specific and wouldn’t make sense elsewhere.

Design and advanced tab should remain consistent across blocks.

I’m confident there is a way to implement it nicely inside the primary tab in case it will be considered.

[Louis]

Indeed @Marius, super suggestions which seemed to fit our vision.

@sunny, we removed the Typography tab as much like @Marius, we don’t tend to use it so often when accessing the Primary Tab in itself (more like when we’re already navigating the Advanced tab).

We did hesitate before removing it, as it can be a bit of a shocker, but after a few sessions with/without, decided to remove it.

It definitely fits inside the Primary group tab, so I’m fine with blaming @Marius on this one and say we reintroduce it if you users see a real benefit.
It’s also interesting to know how you feel about the Context tab. Some food for thought.

[Marius]

So, after a week using the improved interface, I just can confirm my first impressions.
It’s such a great experience navigating through efficiently.
Based on this, I strictly have to reject any finger pointing

@Louis

It’s also interesting to know how you feel about the Context tab. Some food for thought.

Could you elaborate?
UI or functionality wise? Or how (or the fact that) it’s integrated inside the primary tab?