AdminUX Overhaul Small Patch

[KyrneDev]

ref #2409

2 small issues that were missed are patched in this PR.

1. Extension list items were not hidden on tablets which made it look pretty bad, tablets are setup well to just use the widget.
2. Use the control color for AdminHeader descriptions to fit the color scheme

[SychO9]

Oh and I just noticed something else

Looks like we need to give .AdminLinkButton-description whitespace: normal

And give the active item anchor a @bg-color color, instead of applying it to specifically the child items currently

        &.active > a {
          background: @primary-color;
          font-weight: normal;

          .Button-label,
          .Button-icon {
            color: @body-bg;
            font-weight: bold;
          }
        }

Another thing, I noticed this in the code

@media @desktop, @desktop-hd {

We can simplify if by using

@media @desktop-up {

[askvortsov1]

A few more suggestions:

• I think I prefer when the active color for link items in AdminNav is the same as the hover color (that light gray). I think it looks a bit more subtle (https://i.imgur.com/lP66s70.png vs https://i.imgur.com/EvhyCiq.png)
• I prefer ExtensionListTitle bottom margin to be 8px instead of 15px (https://i.imgur.com/HjbYcjp.png vs https://i.imgur.com/HIaJmeB.png)
• The core settings options feel a bit cramped towards the top. Perhaps we could add a category header there? (https://i.imgur.com/XygZXeI.png vs https://i.imgur.com/ueDdZKz.png)

Putting it all together: https://i.imgur.com/lv8INGu.png

ALSO:

• If we remove the container div in ExtensionsWidget, and remove that block from the LESS, stuff seems to work without issue
• If you refresh the page, or navigate to an extension page via the widget links, the AdminNav should scroll so that the currently active element is visible.

[KyrneDev]

Ideally we should leave this PR open for a week or so and see if we find anything else.

[matteocontrini]

Wouldn't it be perhaps better to have the "No Settings" text (and similar) aligned to the left, instead of being centred? On large screens, at a first glance, it seems a bit "lost" in the UI. Also, when settings and permissions are actually there, they are aligned to the left.

Before:

After:

Maybe a more verbose message could also help (e.g. "This extension has no settings").

[askvortsov1]

A few more comments:

• The Permissions page feels a little off: it feels like the group items are a bit too high up in the block, and a bit too much to the right. Also, maybe the grid itself should be indented a tad bit?

[SychO9]

This is looking so much better!

[KyrneDev]

A few more comments:

• The Permissions page feels a little off: it feels like the group items are a bit too high up in the block, and a bit too much to the right. Also, maybe the grid itself should be indented a tad bit?

Can you show me what you mean by this? I can't see myself.

[askvortsov1]

A few more comments:

• The Permissions page feels a little off: it feels like the group items are a bit too high up in the block, and a bit too much to the right. Also, maybe the grid itself should be indented a tad bit?

Can you show me what you mean by this? I can't see myself.

It looks better if the PermissionsPage Button Group elements have their top padding set to 10px instead of 8px. Also, for PermissionsPage-groups > container, the side paddings are too large: it looks better with 10px left and right padding. Also, I think I prefer it when the actual PermissionsGrid element has a left padding of 10-15px.

[askvortsov1]

Another suggestion from working on the nicknames extension: there should be an option to pass a callback to registerSetting, which has access to the page as the execution context, and could be used to add custom settings inputs or other stuff in between settings. #2484 (comment)

[askvortsov1]

The "No Settings" and "No Permissions" text feels a bit too big. Maybe that could be made a bit smaller and/or shifted a tiny bit to the right?

[SychO9]

It would be great to add a generic AdminPage class to use with ExtensionPage and other core admin pages and other core admin pages. We can then use that to add bottom paddings to the page by default.

Because extension permissions are stuck to the very bottom, and the basics page's save button as well.

[askvortsov1]

It would be great to add a generic AdminPage to use with ExtensionPage and other core admin pages. We can then use that to add bottom paddings to the page by default.

That's something I'd like to see too, and furthermore, we could move buildSettingComponent there, and streamline all the admin page code. But I think that's better for a separate PR, since this one is designed to fix and tweak the UX redesign

[SychO9]

That's something I'd like to see too, and furthermore, we could move buildSettingComponent there, and streamline all the admin page code. But I think that's better for a separate PR, since this one is designed to fix and tweak the UX redesign

btw, I only meant a class for now, just so that we can add the bottom padding (we could add the padding differently, but I think this would be the best way)

And yes a component would be awesome, but that's something we can comeback to another time.