UI Suggestions

This topic contains 5 replies, has 2 voices, and was last updated by  deanphillips1991 4 days, 7 hours ago.

Author Posts

deanphillips1991

Hey Sebastian,

As you’re planning on adding a few things to improve the editors UI (sliders, dragging up and down, arrows etc) I thought I’d suggest these, for the left docked view 🙂

1) I’d love to see the padding/margin inputs reduced to similar lines (not all stacked to one column) like this (https://github.com/soflyy/oxygen-bugs-and-features/issues/647) OR brought together like this: https://drive.google.com/file/d/1d4EZZqZ086IcBNvaJ4KgDDqevfA7SQeF/view?usp=sharing

2) It would be good to be able to have a flexbox view like this: https://user-images.githubusercontent.com/56085341/68090767-fd8dc200-fe77-11e9-9a72-52a1ad01b6a5.gif

I find coming from Oxygen it takes a lot longer to use flexbox

3) Icons for the pointers css (https://drive.google.com/file/d/1U1ZAAxXfPYmx8ASPCo8IxhS0uCl8OWCk/view?usp=sharing) – would save trial and error when choosing them

I had a few more suggestions that I’ll update this with soon 🙂

Thanks,
Dean


deanphillips1991

1) Is there any way to put folders inside of folders for selection organisation at all?

For example:

Blog posts
– Main styles
– Blog Post Name 1
– Blog Post Name 2

I’m really liking the selector folders now I’m getting used to them and this would make them even better for me.

2) I’d love to see MC handle !important tags like Yellowpencil does. It’s really intelligent at working out when the tag is needed and only adds it during that time. For the most part it’s been extremely accurate.

I know during Oxygen as it sets flexbox on every div/section to start with (from what I can tell) it mean’s I’m having to manually add it often (I know about the setting to add !important to everything, but I’m prefer to not do this, when it’s not needed)

Another feature to this is YCs automatical completion when you put !i it auto fills !important in the code editor.

Your selection detection is leagues above there’s so hopefully this will be possible one day, although I know you’ve got so much on your plan, and don’t expect it to come anything soon.


Sebastian

Thanks for your suggestions Dean, I will reply properly in the next day or two. I’m just prioritising some other queries as, and correct me if I’m wrong, these feature requests do not require an urgent response.

Please do keep the suggestions coming though, I will respond thoughtfully to each and every one 🙂

Thanks,
Sebastian


deanphillips1991

Adding this to the suggestions too:

1. Instant targeting mode

2. Hover/active/focus states made easier + visual

https://www.loom.com/share/3af27448f16c4f0ebc146e6e89ec9790

^^ that explains them both 🙂


Sebastian

Thanks for the continuing suggestions Dean, so here are my comments on each:

Docked left view

1. Padding and margin: The options do actually form a more logical structure if you widen the sidebar (using the drag option at the bottom right):

Docked left padding options

I appreciate this could happen at an earlier breakpoint. The side-docked options haven’t been super refined yet. I wanted to test if people actually like having the options on the side first. It seems they do.

2. With flexbox, do you mean icons instead of dropdown menus? Why do you see that as preferable?

3. Sure thing on the mouse pointer icons.

4. Sub-folders will be added in future. I initially resisted that request, but it’s necessary for some other MT updates, so I will implement it.

5. Regarding intelligent !important, I’m still deciding if I agree with that in principle. Another option would be to alert users to specificity issues, and suggest a different selector they can easily update to. Having !important always on seems better because it can be globally turned off. Rather than having random !important tags that users don’t intentionally create.

You’ve said that you find you need !important quite a lot for overriding Oxygen, but I’m going to be looking at that specific issue over the next few weeks to see if a selector-based fix can be applied.

6. Instant targeting is something I will implement too. I’ve sketched out a plan for this already. But because it involves a change, and existing users are often a little resistant to change, I’m focusing on improvements to the properties first. As they will be less controversial I just can get them done and then allow some proper time to sort out the ideal targeting workflow.

You can use the Plus [+] icon to create a selector with two clicks – one to select the element, another to create a selector.

I’m still thinking about how to handle instant selectors though. I guess auto-cleanup if no styles are added is one way to prevent junk selectors building up…

Thanks so much for taking such an active role Dean. Engaged users are gold dust to me!

Cheers,
Sebastian


deanphillips1991

Hey mate,

Been meaning to reply to this but kept getting busy with projects 🙂

1. Yeah that is a little better, however, it could still be approved, either by 2 stacked side by side or in a way similar to this http://smartbusinesstrends.com/wp-content/uploads/2017/08/ThriveArchitect-MarginPaddingEditor.jpg – this allows dragging and margin/padding to be super clear for users. It’s the same way Webflow does it too (which I assume has been tested a lot)

2. I think icons instead of dropdowns is a clearer indication as to what they do. Coming from Webflow and oxygen where we’re used to seeing it, it takes a bit of time to work them out without the visual icons for each setting. Of course, this could be adjusted on and off, however, I think icons + labels above can still take up very little space and give instant visual feedback at a glance for users who don’t remember what the options are.

4. Amazing. Been noticing how handy this would be lately. I’ve got a lot of selectors happening and I’m a bit of an organisation nut.

5. Agreed! I think that would be great. Even just a faster way to add !important in the code editor, when doing custom code would be super handy

6. I think it would be fantastic with auto-clean up. I know now I’ve created a lot of selectors, without adding anything to them, obviously there’s the lack of a blue dot, which tells me that, but 1-click clean-up buttons would be very handy. YP automatically gets rid of them if you don’t type it in, BUT they don’t actually create selectors.

I had a few more suggestions, but I’ll wait till tomorrow for them aha 🙂

You must login or register to reply to this topic.