Update styling document type meta fields

[patrickdemooij9]

Few styling changes to make for the meta fields content app for the document type:

• See if we can have the "Enable seo settings" take less space. Should check if Umbraco has anything like this in place.
• See if we can improve the UI for the "Open settings" button. Possibly moving all the sidepanel logic to the main panel. Just have to make sure that the main panel doesn't get too cluttered with information for the user.
• See if we can use markup for the field descriptions. Might help the developer/user with setting up the fields. Target group is developers, but it would be nice to provide some extra information anyway.

[leekelleher]

@patrickdemooij9 I've been hacking around with a potential alternative.
Of course, it's still a work-in-progress, but let me know what you think of this...

The default state, a <umb-box-header> with a <umb-toggle> and label...

I'm not fully convinced about the "Enable SEO settings?" label/toggle being right aligned, but left aligned would feel odd too. 🤔

When enabled, the toggle's label is hidden (I did have it saying "Disable SEO settings?" but that felt odd), and the tabs are displayed in the <umb-box-header> title area.

[patrickdemooij9]

@leekelleher
I think it does look very good. I think aligning it on the right is the right call here and I don't think there will ever be that many tabs that it'll cause an issue here.

It does feel a bit odd in the way that all configuration actions for document types are on the left while this one is on the right, but I wouldn't worry about it that much. I think it is definitely an improvement on the current implementation.

There also isn't really any way Umbraco currently does this. There is the "Enable List view", but that of course doesn't have tabs so it can be used a bit easier here.

[leekelleher]

Coming back to it a day later, the "Enable SEO settings?" being right aligned still isn't feeling right to me.
I'm happy to send over a pull-request, if you want the code - but I can't say that I'm completely happy with my progress at the moment.

[patrickdemooij9]

We can just put it on the "possible solutions" pile for now. Will see if I can also come up with some solutions later today so we have some more solutions to compare with

[patrickdemooij9]

I tried out a few things:

1:

2:

3:

4:

I think buttons might even be nicer here than a random checkbox, but still not quite sure. I do wonder if tabs are the way to go or if I should have different boxes for each setting. Just worried it will be a lot of content on one page then.

[leekelleher]

I'm liking number 3, the button does make a difference to it being a toggle.

I thought the same about swapping tabs for boxes/fieldsets going down the page. I don't think it'd feel too long for someone configuring the doctype.