New admin theme

Topics: Administration, Core, Writing themes
May 4, 2014 at 11:27 AM
I open this discussion to get some advices about the enhancement of the admin theme.

I have made a little demo of a simple admin theme during the latest meeting.

Please, share your thoughts, needs, ...
May 4, 2014 at 11:36 AM
We should use a CSS Framework so we will probably use Bootstrap.
It would be also good to have an icon library so Font-awesome seems to be the one with most interesting and numerous icons.

At the same time, we should keep the number and the size of the resources as low as possible.

In order to be have a flexible and configurable interface (colors, size, fonts, ...), we could use some css preprocessors as LESS or SASS and we wonder how use them easily and effectively in .NET or in Visual Studio.
May 4, 2014 at 11:41 AM
'TheAdmin' theme will be modified directly.
A branch 'admin' will be created and used during the development.
In the Visual Studio solution, the project appear in the Themes folder as a Web project.

We could add some settings and migrations.
Some options could have an influence on the interface switching Bootstrap classes to have a Fixed or static header for example.
A 'Admin settings' sub-menu will appear under 'Themes' (with a corresponding permission).
May 4, 2014 at 11:51 AM
The layout will not change too much.

There will still have a vertical menu on the left.
One benefit of Bootstrap is that it will be responsive (will be hidden if the resolution is too low with a button to deploy it).

A 'true' header will be on top in a Bootstrap navbar.
The title and link to the front on the left.
Some links on the right like the user name and logout.

We can use the grid framework to display the content differently.
A grid is defined by 12 columns.
An Edit page could have a Content zone of 8 cols and a Sidebar of 4 cols.

The would allow to display some Parts on the right like Save buttons, tags, ...
Thanks to this, a wide screen could display almost all parts without scrolling and no empty space on the right.
May 4, 2014 at 12:11 PM
A decision has to be made about the css classes.

Do we keep the existing site.css or do we try to replace some classes with the ones offered by Bootstrap?

If we keep site.css, some classes could be unused between this and Bootstrap.
If we use Boostrap, it will be more consistent but some pages will have to changed and it can have an impact on some Edit forms used in the Front end.

Here as some examples of equivalent between site.css and Bootstrap css classes :
    button primary => btn btn-primary
Actions/ Filter
    bulk-actions => form-inline
    Fieldset to replace with div with 'form-group' and edit controls with 'form-control'
    contentItems > list-group 
    li => add list-group-item
    => pagination
    items => table
To add an icon before a button, prefix the text with a '<i class="fa fa-iconname"></i>'.

We would have to change the structure of many files but that is the way I would choose.
We can also define some alternate views specific to the admin but it will represent many pages.
May 5, 2014 at 8:09 AM
Bootstrap + Font Awesome + Less = seems perfect.
We should try to replace some classes with the ones offered by Bootstrap in order to keep up with Bootstrap directives and updates as well. If you think we can contribute, do drop a line.
May 5, 2014 at 1:27 PM
Other thing to thing about : Javascript plugins.

Bootstrap brings some useful JQuery plugins :
Some of them will be needed by default in the interface : Menu toggler, Dropdowns, collapse ...

If you see other interesting usages, please advice.
Examples :
Alert => Notification with a close X button
Tooltip, Popover => to replace hints ?
scrollspy + Tabs to have a little navigation interface between groups of parts or fields ?

Some existing 3rd party plugins are also existing to be adapted to the Look and Feel of Bootstrap :
Date picker, Editors, ...

We should also upgrade the latest versions of libraries a JQuery, JQuery UI and some components as TinyMCE.
May 5, 2014 at 1:44 PM
Last feature we would like to see : Dashboard widgets & customization.

The start page of the admin should contain some panels that summarize the important information.

Please, tell us what kind of widget you need :
Quick publish content
Last comments
RSS Feed

From my point of view, I would like to see something similar to the widgets but adapted to the admin (Drag and drop, ...).
May be the new Layout Editor that Bertrand previewed could be interesting.

Does the customization is for everyone and defined by an admin or by user?

Drupal has a nice feature in the upcoming version 8 :
A shortcut bar where you can add your own links to be quickly available.
May 5, 2014 at 2:11 PM
Concerning Typography :
Should we use a font like 'Open Sans' to obtain some texts similar to Modern UI ?

More generally, should we have some 'Modern UI' guidelines adapted to a Web interface?
Buttons, Select, Tiles, ... (see for example)
May 5, 2014 at 2:16 PM
I do not think actual we need jQuery UI. Bootstrap plugins must cover us. TinyMCE 4.

About Widgets, we can do it Andoird way: at the end we can have a "plus" placeholder and on clicking a list of widget will appear. It could be touch friendly as well.

I think Orchard is missing somekind of anayltics info: how many times a content (per dislpaytype? ) is shown. If we have it, we should have a widget with popoular content. And Google analytics integration.
May 5, 2014 at 4:48 PM
I think we should not try to change all classes or HTML, but instead use mixins to Bootstrapize the current output.
This way we don't break any external module, and if bootstrap decides to change its classes, we won't have to change anything. We should keep it semantic as much as we can.

+100 to use .less, statically compiled. This will help users to customize it by overriding variables.
May 5, 2014 at 5:36 PM
Speaking of modules, if they define compatible (up to) Orchard version, Bootstrap classes should not be a problem.
May 5, 2014 at 10:32 PM
Edited May 5, 2014 at 10:35 PM
Couldn't we have a switch saying which framework is the target for css and html: classic or bootstrap ... or whatever.
We add it as a theme property.
Seems rather old solution but has the advantage to be more efficient and clear, lot of the css and html actually generated is using html element in a different way that bootstrap expects them, lot of them are not needed by bootstrap and sometimes avoiding css to run Ok.
This introduces the point of having an output engine identified: actually it is razor + the orchard logical (which has different facets according the age of the code).
This could be also the opportunity to review actually generated code.
May 6, 2014 at 8:16 AM
Please be aware that many of people need right to left admin theme. Also consider a setting to choose culture for admin theme without changing and effect on general site culture setting.
May 6, 2014 at 8:49 AM
Actually the admin theme culture defaults to Site Culture, unless you install some culture manager which propose an admin dedicated setting ?
May 7, 2014 at 8:40 AM
Focusing in left menu my suggestions are:
  • Fixed menu: It should not scroll. When you scroll to the bottom of a long page, if you want to quickly access a different item in the left menu you have to scroll again to the top, and locate again the menu item. If the left menu is fixed you don't need to scroll to the top and you don't need to "search" again the menu item each time. I already suggested that in this issue.
  • Bigger expanders:_When an item menu has subitems, if you want to expand it you need to click a very little button. It is not good from an usability point of view. Menu should expand when you click on the menuitem itself, I think.
  • Bigger icons: I think icons are useless because they are too small. The purpose of the icon is to make obvious what an item is about without having to read its name. Maybe being bigger or a different color will make them more visible.
  • MenuItems Categories: I think we have too many items piled in the left, in particular if you add a few modules to the system.. Maybe we can reduce them to 6 or seven categories ,with its corresponding icon, that contains the items.
  • Collapsible menu : If you use meaningful icons we can even make the left menu collapsible. I think this will clean a little the interface. Please take a look at this.
I know there are technical difficulties to achieve some of these points using only css.
May 7, 2014 at 9:23 AM
@CSADNT Please assume you have a client that requires a website with three cultures (Persian, English, Chinese) . This client is Persian and he want to manage website in this language. You create one Front-End theme with three cultures support. Client ask to set Chinese as default culture because he has most customers from china. Now when he want to manage website he will see admin theme in Chinese but he want Persian. Therefore Admin theme must be able to pick up separate culture than Site culture.
Do you understand me?
May 7, 2014 at 9:45 AM
Edited May 7, 2014 at 9:46 AM
mehranrezaei wrote:
@CSADNT Please assume you have a client that requires a website with three cultures (Persian, English, Chinese) . This client is Persian and he want to manage website in this language. You create one Front-End theme with three cultures support. Client ask to set Chinese as default culture because he has most customers from china. Now when he want to manage website he will see admin theme in Chinese but he want Persian. Therefore Admin theme must be able to pick up separate culture than Site culture.
Do you understand me?
Yes I do, but how do you manage the cultures ? Have you some culture selector module ?
I am just working on this and it is really interesting, many options still open.
Using a culture selector you can change the fallback rules for current culture and decide to default to a culture different from the site culture (and do it differently depending the incoming culture) , and keep the site culture for the admin.
Some modules already propose to use a cookies for the Admin culture, but I am not sure this is very secure, prefering to keep cookie selector for front-end.

So no need to change your site default culture.

Do you see my point.
May 7, 2014 at 11:11 AM
There are some culture picker modules in gallery.
May 7, 2014 at 11:57 AM
Edited May 7, 2014 at 6:36 PM
Here is an admin culture selector :
May be it won't fit your needs but that is a beginning.
May 7, 2014 at 6:58 PM
Fixed menu: If we use a fixed menu, it must be scrollable. May be we could use a jquery plugin to obtain a vertical scroll.
Bigger expanders: May be we can use the collapse icons of Bootstrap or Font awesome. The expanded state need to stay persistent between pages.
Bigger icons: The icon library should allow that.
MenuItems Categories: I would also like less menu items, better organized but this is a consequence of the modularity of Orchard.
Collapsible menu : I also like the theme you are mentioning and the ability to collapse the menu clicking on a button or when you resize the screen.
May 8, 2014 at 6:00 AM
A massive menu recreation would be if we had 4 main categories (with accordion ui): Content Management, Site Management, Admin Settings and Module Settings. This will allow both fixed menu with minimized chance of scrolling. And will serve modularity of Orchard.

I also like fixed top bar (like Wordpress) when someone logged in, viewing the site, with corresponding actions and quick links: Edit/(Un)Publish/Delete for BlogPosts, Manage Blog/Taxonomies for corresponding pages etc. Or this is not part of admin theme & functionality?
May 8, 2014 at 7:23 PM
The Admin menu should display the name / culture and maybe roles of the authenticated user
Aug 6, 2014 at 3:56 AM
Do we have a branch for this? I want to contribute on that.
Aug 6, 2014 at 6:32 PM
Good suggestion, Antoine, would you mind sharing your work on a public branch ?
Aug 8, 2014 at 9:11 PM
No news on that. I will just restart from scratch.
Aug 10, 2014 at 4:38 PM
I have made 2 repositories on my Github account.
There is still work to do on them. But so far I've managed to make the admin theme switchable without altering the Orchard Framework.
The work left to do :
  1. Clean and review code
  2. Modify views to use Bootstrap styles
  3. Modify views to use Bootstrap swatches
  4. Make it work with SaSS
Aug 15, 2014 at 4:00 PM
Edited Aug 15, 2014 at 4:04 PM
Here is how it looks with the Workflow list page

Still lots of works to do.
Aug 15, 2014 at 6:20 PM
Looks already really nice. you just to change the admin theme? no core changes ?
Aug 15, 2014 at 6:28 PM
For changing general layout I did'nt needed any core changes. I just did, some small changes to a controller for supporting the dropdown bulk action button because it's looking for a specific input on the controller. See FormValueRequired. But I could make it work without changing anything. I'm actually making a rough run over all views and after that I will fix those things. The idea is to not change core and to be able to extend the admin theme while beeing able to keep the actual one for supporting people who have built custom modules. Once it will work side by side, I guess, they will make changes in their module if they want to switch to the bootstrap theme.
        public ActionResult Index(FormCollection input) {
            if (!Services.Authorizer.Authorize(Permissions.ManageUsers, T("Not authorized to manage users")))
                return new HttpUnauthorizedResult();

            var viewModel = new UsersIndexViewModel {Users = new List<UserEntry>(), Options = new UserIndexOptions()};
Aug 15, 2014 at 10:13 PM
I've made a theme named Admin.Bootstrap wich is in a project just like pjs.bootstrap.
And I've made a module to be able to switch admin themes wich I named Orchard.Themes.Admin.
So, I've not made my changes on top of the actual admin. I can switch between my Bootstrap theme and the actual one.
Aug 15, 2014 at 10:15 PM
I've noticed that the Admin menu is not using any ViewModel. That might help for theming purpose to clean up logic from the View. I will probably try to do that too. That way we could make the admin menu configurable or even switchable to another one.
Aug 16, 2014 at 3:14 AM
Edited Aug 18, 2014 at 3:49 AM
Made this quick script that makes me able to not change anything in controllers that has FormValueRequired for a button.
This makes me able to use the nice Bootstrap buttons.
jQuery.fn.exists = function () { return this.length > 0; }

//TODO add confirm dialog box
function submitForm(form, action) {
    if ($('button[name="submit.BulkEdit"]').exists()) {
        var button = $('button[name="submit.BulkEdit"]').click();
    else if ($('button[name="submit.BulkExecute"]').exists()) {
        var button = $('button[name="submit.BulkExecute"]').click();
    else {
and this is an example of a button
    <fieldset class="bulk-actions">
        <input id="publishActions" name="@Html.NameOf(m => m.Options.BulkAction)" type="hidden" value="@ImageProfilesBulkAction.None" />
        <button name="submit.BulkEdit" type="submit" class="hidden" value="@T("Apply")">@T("Apply")</button>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Bulk Actions <span class="caret"></span>
            <ul class="dropdown-menu" role="menu">
                <li><a href="javascript:submitForm($('form'), '@ImageProfilesBulkAction.Delete');">@T("Delete").ToString()</a></li>
A button that clicks a hidden button ;)
This is kind of silly
Aug 26, 2014 at 2:20 PM
Made progress on this. Most of views are done (except media library and widgets).
There are some details that needs to be fixed overall.
Right now, I want to change the left menu layout and improve the toolbars ergonomy by using button groups and button dropdowns.

I'm not quite sure I will be able to change them everywhere since they are rendered as custom shapes in some places (ex : media library).
For now I've been styling <select> boxes with button styles but I would really like to get rid of these in favor or button dropdowns or split button dropdowns

Also, we could use button groups for toolbars. Filters group and action button group separated.
Because right now those filter buttons are not having a great responsive behavior.

I've made a test on the content admin page by just styling <option class="btn btn-default"> but I should not do this kind of things ...
Aug 26, 2014 at 10:27 PM
As a side note, we need to think about RTL on this. Is there anything specific we need to do?
Aug 26, 2014 at 10:40 PM
There is some bootstrap RTL extensions out there. But I can't tell if it will work with your actual modifications.
Although, right now I've done a Theme Switcher because we still need to support the actual theme for backward compatibility.
I will add RTL support to my TODO list. Feel free to test it out by cloning my repository and tell me how it worked.
Jul 19 at 2:33 PM
I think I have found the good approach to use concerning the navigation:

Orchard admin should have a toggle/fly out menu, specially when the screen is small (< 768px : tablet or smartphone).

On low resolution, there should be a burger menu button that opens the sidebar menu from the left when you click on it (over the content or pushing it to the right).
It should appear in a top bar where there is just the logo and the title (and may be a dropdown menu with the user name).

We can use a jquery plugin to have a small vertical slider bar if the menu is to large.

To do that, we need to reorganize the HTML layout, create the appropriate CSS with the media queries and code some kind of javascript plugin that will allow to toggle the menu.
Jul 19 at 2:49 PM
@agriffard i have made a similar concept (with a small HTML reorganisation): check the screenshot.

The problem is that the header bar still looks empty and plenty of unused space... I was thinking of adding the Dashboard and "New" actions there.

And the vertical bar to have them all hiding as you described.
Jul 20 at 7:28 AM
Is this project alive somewhere? I don't see an Admin fork on the orchard repo or in the Skrypt repositories.
Jul 20 at 3:13 PM
Jul 21 at 7:14 AM
Damn was I that blind? Thank you @Skrypt!
Jul 21 at 5:38 PM
@urbanit, the goal is to have the header extensible so that modules can add stuff there. And yes, the dashboard module could then add a link here.
Jul 21 at 5:47 PM
Edited Jul 21 at 5:47 PM
@sebros it is clear. What I am proposed is to have "Dashboard" and "New" [with dropdown actions] by default. Qusestion: should this header be visible when authenticanted user is browsing the site? Maybe we can add related actions as well.