Fluent design

[agriffard]

VSTS online site is adopting a Fluent design: https://blogs.msdn.microsoft.com/devops/2018/06/19/new-navigation/

We should try to list the principles we would like to see in the admin:

• Filters
• List
• Menu
• Navigation

@Skrypt is already trying to make a few changes to the admin menu.

After a quick search for Bootstrap Fluent design, I found this project: https://github.com/nespero/fluent-kit

/cc @matiasmolleja

[Skrypt]

The first thing I'm noticing while looking at VSTS CSS is that they extensively uses Display: Flex for most layout elements. VSTS doesn't seem to be using Bootstrap 4. I'm looking at what we did with the current CSS work in Orchard Core and we are still using custom CSS code for layout elements where we should probably use something like this : https://getbootstrap.com/docs/4.0/utilities/flex/

I'm currently mostly evaluating what's missing in Orchard Core to reproduce this kind of design and I think everything is already in Bootstrap 4, we are just not using it properly as it should. We are still using margins and paddings on global layout elements like the main content zone while it should be all using a Flex grid with things like justify-content-between. Also by using Flex for those main elements it would be way easier afterward for reversing all elements with flex-row-reverse for RTL. Same goes for the admin menu elements (icon, name, expander) that should all be Flex elements and we could reverse them for RTL (expander, name, icon).

Basically we need to implement Flex grids everywhere.

[matiasmolleja]

Hi !

Flexbox

I agree with using Flexbox on TheAdmin. It makes it easy to layout things instead of using css tricks to get what you want. I used in the media module for things like easily centering and sizing thumbs on grid view. Indeed, for the few divs we are using on TheAdmin maybe we could avoid the Bootstrap helper classes and simply apply the necessary css rules on our scss files.

Fluent

After looking at Nespero example sites and thinking a little, in my opinion we should use it Fluent as a inspiration only, as the VSTS team did. I mean we should not try to adhere strictly to it. Because:

• When you try to seem exactly like something popular you have to do it perfect. Any detail that does not look like the expected thing is going to a very obvious error,

• These things are trends, and get quickly outdated. Imagine if we designed our admin following the Metro guidelines. Now the app would look outdated.

• Do we really want to look like every Windows App on the marketpace?

Consistency

This is difficult to get on a system as modular as Orchard. But maybe we can use theAdmin as a tool to encourage consistency on module developers. Ideas for that:

• Having a few zones on the admin. I think we already have a "messages" zone so that every notification looks the same, no matter what module raised it. Maybe we should have a "module-header" zone, a "action-buttons-zone", a "top-bar-action-buttons" etc.... That way the module developer only need to worry about adding its content, and theAdmin will take care of how it looks and even where they will appear. For example we could decide at the theme level if every action button group has to be fixed to the top of the screen.

• Having 2 or 3 sublayouts that every module developer can choose on each of its views. For example a "full-width layout" for pages like Content Edit, a "2-col layout" for pages like Media and the TreePage we are planning etc... On the VSTS post you can see examples of that 2-col layout.

These are my ideas about the admin in general. A lot of words. And I did not even entered in any of the points that you listed @agriffard :( Maybe we we should treat them in separate issues? To avoid a too long thread?

[agriffard]

Thank you for this first answer and your explanations @matiasmolleja .

To be clear, I didn't mean to use Fluent Kit, it was just to illustrate the components, the concepts and the kind of displays that could inspire us.

[matiasmolleja]

@agriffard Sure. It was mysel who yesterday said on gitter we should follow the Fluent guidelines. And later changed my mind :)

[agriffard]

Office UI started a Fluent branch: https://github.com/OfficeDev/office-ui-fabric-core/tree/fluent

[Skrypt]

I think the left menu design on VSTS website is what we should have in Orchard Core. Here is what I did so far.

I don't care about the rest of the design and if it should follow Fluent design completely. I think Orchard should have it's own theme and inspire itself from different things in different places. Our menu has it's own requirements which lead to different design concepts. You can see in the screenshot that I reproduced the color schemes but we still differ in the fact that we have collapsible menu sections and on VSTS the menu is an accordion... There's probably other things that should look the same as in VSTS like the content items page filters. Do the same as in VSTS but use Bootstrap classes !

VSTS interface is quite simple and I think Orchard Core should at least look as good as it. Right now, I think we're still far from that.

[Skrypt]

I was thinking that we could do a tenant switcher just left to the + button where we can add new content items. And move the website title there instead of in the top navbar. Though would probably need to work with a multi-tenants single sign on. Put Orchard Core in the top navbar.

TheAdmin maybe we could avoid the Bootstrap helper classes and simply apply the necessary css rules on our scss files

I think we should try to use the Bootstrap classes as much as we can and add customization in our scss files per need. There's no right and wrong with this as long as it looks good but I think it would be more optimized if we use less code possible.

[matiasmolleja]

Nice. I'm OK with using the Bootstrap classes. I like the idea of a tenant switcher on the admin. But don't you think that the top left area is going to be a little cluttered? Plus it was the result of a few of photoshop proposals speaking with Seb. I think that this switcher can be a flyout or dropdown on the top right area. Where the VSTS have "current account" and "search" buttons. If I can do something to help you on theAdmin just let me know.

[Skrypt]

@matiasmolleja Something you could look into is working on the content filters UI something that could be reusable on every page we display a list of content items with a pager. The pager layout also needs to be fixed.

I created a new branch for this : https://github.com/OrchardCMS/OrchardCore/tree/admin-ui

[matiasmolleja]

Nice. I will try.

[sebastienros]

Remember big changes are hard to merge. Tackle this with the menu first then the top navigation bar maybe, then a search/list screen to validate the pattern ... and so on