Two column admin theme concept

[Martijn Geerts]

Repeaters & fieldsets take a lot of space.

Most of the time I need fieldsets only for dividing fields and description & label is not needed. 

For several projects I use a module to remove label and set border and padding to 0 for.

Also, the repeater can be way more elegant, if some space is givin back to the admin.

(Did not make a module for this)

(ps, if someone is interested in the FieldsetSchrink module it's here on github)

[Philipp]

Update.

• Font size is now 14px for all base fonts, heading/nav are mostly 16px. 
• Sidebar action shrink down. I think we now have enough space for most page trees.
• Removed the boxes around the fields as suggested by apeisa. Thin lines to seperate them, especially the multi-column fields. Not sure about this one, because it' really defines the "look" of the PW admin.
• Updated setup view added.

Now looking forward to do more on those fields. Repeaters and image uploads, fieldset. 

Note: You can use this design under a Creative Commons BY-SA 3.0 licence. Of course, the ProcessWire logo is owned by Ryan Cramer and the Icons are taken from Entypo. Contact me, if you want the layered files or sliced graphics.

[apeisa]

I like it much better without boxes. Thin borders look great! That boxes inside boxes inside boxes effects is very heavy when you have repeater that has an image field for example. 

I really like this. Still not a fan of red/pink labels. Setup view looks wonderful!

[adamspruijt]

Maybe the admin-themes can get some sort of an option page where we can disable things like the sidebar. Not sure about this one...

This! I have made a few themes where I have wanted users to have some amount of configuration. A standardized method for "hooking" in some setting would be great. Like turning on/off a list of recent changes, or enabling a sticky footer or even tweaking font sizes for accessibility. If this was something a theme could add optionally and in its own source file it could be completely self contained.

As a side note I've also been thinking a lot about the need for a new default admin theme. There a lot inconsistencies in styling and an overuse of "!important" that can make things very difficult for theme developers. I think if the ProcessWire admin tried to take a more "framework" like approach this could benefit theme developers and module developers alike. Ideally most of the tools and pieces needed to put together a great module would be available by default so that almost no custom css would be needed for most modules. I believe this is somewhat the intention currently but the can tend to be some frustrations working with this (maybe some documentation could help, something akin to how Bootstrap is documented). Another aspect to this could be the abandonment of jquery UI for something custom maybe? (or maybe an existing framework... I'm not a huge Bootstrap fan for frontend work but for this use case it could be perfect), this could then allow for font based icons which would then be much easier to change for theme developers (font-awesome has a ridiculous number of icons which would be really nice for module developers).

Anyways blah blah blah, just my thoughts, busy busy lately with the new home, might not have explained myself super well, basically I'd LOVE to maybe get a thread going where we can discuss this more, heck, I'd love to fork PW and try and do it myself,   HAH!!

[Philipp]

Maybe we can make the base color adjustable. A single line of CSS or a line in $config. Here are the only PW blue, green or black versions:

I wouldn't make the topic more complicated than it is. We can right now customize the admin theme and write modules. This discussion is good, because we ould create some interessting ideas for future modules - build for the backend of PW.

The idea of a blank admin theme is great. This could be layed out as a kit to develop your own admin theme. (In addition, PW could ship with a theme created on top of this blank master). 

[janlonden]

Like Nico Knolls Dark Business theme, this one looks amazing! I'm really glad to see more awesome admin themes popping up

I really like the idea to be able to change color theme, to match the frontend design of your clients website.

I'm looking forward to use this theme.

[ryan]

This design direction is really looking good. It's as good of a replacement for the default admin theme that I've seen, and I think it could be a good direction for us.

I agree with Antti, that I liked the reduction of the borders from the latest version. 

I did kind of prefer the icons in the page list actions, though am thinking it might be good to just have 3 configurable options there: text only, icons+text, or icons only. 

I think that the screenshots do demonstrate that a sidebar page-list is workable with condensed indents–it actually looks pretty great. But I'm not convinced it's workable on the technical side–I think we'd have to go with frames in order to avoid having to re-render that page-list on every edit. And even then, we run into issues, like when and how to refresh it automatically (like when a title is change for instance). Though I'm sure it's all solvable one way or another, and I think we should give it a chance and see where it takes us. 

Other elements that I think would be useful would be things that Soma has already done with his Teflon theme. One example I can think of is the drop downs that let you go straight to a template or field. I know the concepts shown here don't get down to that level of granularity yet, so just mentioning things I've liked. 

I know some people like the current minimal admin theme, and I am one of them (I can't seem to use anything else for more than a few minutes). But the default admin theme has to be one that markets us well, and apparently the current one does not have the broad appeal it needs to have. If there's one thing that comes up more than any other when people are checking out ProcessWire for the first time, it's a general aversion to the admin theme. This has been the case since the beginning. I don't understand it, but I think the current admin theme is the only thing preventing wider adoption of ProcessWire. There's a large segment of users out there that judge a product on how it appears to their subjective design sense, and they don't bother looking further if the admin look doesn't excite them. So what we need is something that draws people in rather than halts them from looking further.

That's not to say that the current admin theme is bad (I quite like it myself), but that the current admin theme must be an acquired taste–something probably better as a 3rd party theme option rather than the default one. Diogo and I may keep using the current admin theme, but the time has come where we need a different default theme to increase our user base. There are several other admin themes that already exist that could accomplish this already. But like has been mentioned above (and by others before) there is also a need to optimize and improve some of the framework elements behind it all. So building a new default admin theme is best done with a little bit larger scope of changes than would usually accompany an admin theme. I'm not interested in switching away from jQuery UI, but would support inclusion of another minimal framework to provide more foundation both to grid and typography–the things that jQuery UI doesn't do, and isn't designed to do. I'm not sure what framework would be right, or if homebrewing would be better. Regardless, if we were to start developing a new default admin theme from scratch, I think Philip's design here is a good direction to build from. I don't have the bandwidth to get involved with this anytime particularly soon, but it should maybe be a top priority after release of ProcessWire 2.4. 

[diogo]

To be honest I use the default theme, not because I dislike the others, but mainly because it's the default. There are two main reasons for this: one is that it represents PW (in a "corporate identity" way), the second is because I trust it will break less then the others with PW updates. As much as I like to try, and to see that there are nice themes being designed for PW, unless one is much better, I will stick with the default. This is one of the reasons I would prefer to see the default theme evolving, than a proliferation of alternative themes, and that's also why I'm happy that Philipp started this (being is ideas used or not).

That said, I do agree that the admin should be more appealing to newcomers and easily tweakable to have different appearances by changing colors and typography (business (Nico's colors are a great example), fun, serious, etc). I even think that the default install could offer 4 or five alternatives, besides of those that would be shared by users, I'm talking maybe a small json file that could be imported by the system to change it's appearence (a bit like Philipp's color changes, but maybe more profound). What I'm talking here are not different themes, but variations of the same (default) theme. IMO the possibility to easily make these kind of changes, would allow us to maintain the recognizable PW colors on the default appearance of the default theme. This is for me an important point: the PW corporate feeling should be kept.

I also want to remind Reno's small tweaks for the edit page. I think they work great:

http://processwire.com/talk/topic/2002-repeating-events-multiple-datestimes-for-datepicker/?p=18862

This post went too long. I'm sure it's a mess...

[adamspruijt]

I personally think that the way that the current ProcessWire admin functions is exactly how it should continue to function, I'm not a fan of the always available page tree (or any kinda of extra clutter really), I've rarely had a client I was confident could understand/effectively utilize such a feature anyway. I get fewer calls about "CMS confusion" with processwire than I ever have before with ANY platform (yes, even WordPress). Though developing a new admin theme that may make itself more conducive to the addition of such major features would be great, if doable?(I'm not master programmer so I have no idea) I really think this simplicity is key in a default shipping product. Also making the default theme clean/minimal would also potentially make small visual changes easier for developers.

My concerns about the theme don't come from a function stand point as I think some of the ideas floating around in these forums serve more to solve developer issues than client issues, and in the end our primary concern, particularly for the default theme, needs to be client experience. My concern is that honestly I was one of these superficial types that overlooked PW because the admin wasn't "cool" or "slick" enough for my tastes. There was probably a 3-4 month period between when I first discovered PW and watched the intro video to when I ended up back here out of my continued search for a "custom post type/custom content" CMS. This second time I took a peek around in the forums to realize that PW supported admin themes, I was in. Between Futura Remix and at the time a preview post for Ergo I knew I could be happy with the look of PW. But obviously not perfectly happy as I was still motivated to go on to make a few of my own (one particular motivator was the use of Jquery ui and its awful awful icons). And frankly in general jqueryui is a bit ugly and very dated looking (though I can understand the concern of moving away from it, seeing as how much code would need to be rewritten). The point before being that there is a very real risk of loosing out on new users because of this (just look at the CMS "Craft" which recently got tons of attention in a bunch of webdev blogs and yet has no single feature that processwire doesn't except it has a gorgeous admin interface, AND you have to PAY for almost all the other good features!).

I think one thing that happens is people can't so quickly understand how amazing, flexible, straightforward, powerful and generally beneficial the PW API is, but what they can understand immediately, is whether or not the CMS admin panel is cool, clean, slick, simple, sexy.... whatever. And I think PW falls short here, its not terrible, but its nothing exciting. There are certainly plenty of CMS' to draw inspiration from though: Symphony CMS, Kirby admin panel plugin, Craft, Statamic, Anchor CMS... I'm sure there are more.

I think the most effective place to put effort for now it a simplified cleaner rewrite that better supports 3rd party admin themes, no more specificity battles (there should be no need for the use of "!important" in the default theme, or at least very little). This combined with the ability to have "Admin Theme settings" and a per user admin theme selection could really fix most of the concerns floating around (at least I think so...). I really think something that takes the colors from the new processwire.com and a bit of inspiration maybe from others could really nail it. Oh and, I really think switching to an icon font would be smart..... and ditching jqueryui....  

I'll stop here... phew.

[Pete]

Don't ditch jqueryui - it's confusing on the odd occasion when I've wanted to override something, but it is as logical as Mr Spock once you get use to the HTML it generates

I'll be honest and say I think the biggest hurdle can be the colours. Some people just have an issue with baby blue and pink. It's hurtful I know, but someone has actually said to me that that made it look childish to them (I don't agree, and they should darned well look deeper than appearances, but I can at least step outside myself and see things from their perspective). Back when I worked for another web dev company, being able to change admin colours was something that was brought up, so simply being able to choose colours might help.

I'm thinking if that functionality is built in, perhaps with a simple colour-picker for the 3-4 main colours, then that would help. That and some pre-defined colour schemes as has been mentioned. You could save the chosen colour scheme to a CSS file with relative ease so that it's all cached nicely too.

I like where all this is going as it reminds be a bit of MODx with the ever-present tree, but like ryan says it's not always appropriate (and not every client has widescreen monitors yet even where this might be a problem ).

In a future default admin theme I'd agree with others who have said this and suggest some configurability built in would really help. Things like:

• Easy way to create a custom colour scheme - maybe save as json so can be copy and pasted to other installations easily?
• Even a simple image upload field so they can stick a company logo at the top
• Easy way to select another page as the default admin (not applicable to everyone, but since we're talking about configuration options for the admin this might make sense to have it in the same config page)
• And why not take it one further and allow devs/agencies to type their company name in somewhere as well as a support telephone number?

I'm not suggesting total white-labelling as it's important ProcessWire's copyright stays there and that the system is ProcessWire, but if we can think of a sensible way of helping devs struggling with brand identity to tick some of these boxes then it might well help. I know that branding can be a big issue to big companies, but certainly not all - it might be worth bearing in mind and making it easy so that they're not inclined to be rude and take out the copyright and logo so they've got somewhere to stick their own name and info (seen it happen before years ago).

Not all of this will help people who only look at the surface of the product - compared to some more elaborate (read: overly compex styling) CMS admins out there it looks more streamlined and functional to many of us, but that translates to "basic" and "under-developed" to others - and there's no helping those people

[Manfred62]

I'm also a fan of the simple PW layout... without sidebar.

On the other side: yes, the look and feel of the default admin theme needs a refreshment. Phillips design demo above looks very very good.

Also the idea for simple changing the colorschemes is nice. 3 colors (like above black, blue, green) is enough I think. More should be done via themes.

In the moment I mostly use Soma's Teflon-2 theme. It's well done, complete and looks serious (for most people).

My second favourite is the Unify theme. Has very nice fresh colors. But there a still some missing translation strings?

Unify could imho be a good starting point for a new PW default admin theme.

[onjegolders]

I am a fan of the default but we were looking for something a little more modern and I agree somewhat with Pete about colours.

This is Nikola's Ergo theme (without the added sidebar), I think it's a nice clean, modern layout and design, a nice alternative to those who don't like pink

[Jonathan Dart]

Is this still in the design phase or is it under development?

[Wafiq]

Elegance Admin theme is perfect not too much of a shift from default.

[Peter Knight]

Love Phillips work on the theme with the split tree/editing

Having used Silverstripe and MODX, split screen editing is much better IMHO.

As a new comer to PW, I appreciate that there's a simplicity in displaying only the tree but I'd love to see this as an option. 

[thetuningspoon]

Agreed. Having the page tree always available as an option would really speed up my workflow tremendously. I think it would be great if the technical issues could be overcome and this could be made an option in the new Reno theme. I remember that was one thing I really liked about Silverstripe.

[Tom.]

I absolutely love the Reno Theme, however this is an aesthetic change. After using Craft Pro 2.5 for a recent project. I can see how the UI/UX for ProcessWire can be greatly improved.

There are many things that I love about both CMS, but for me it's Crafts backend admin, ProcessWire for everything else.

So the thing I like about Craft is:

Almost like lister, there is a way to select an entry type and have that display custom columns and be filterable by table heading (eg. Title).

It would be awesome if this was possible with ProcessWire, lister is great, however I find that it's quite advanced for average clients. If the bookmarks we create showed as filters? It could be quite nice.

(I can do some mockups this weekend on UI/UX and illustrate my ideas).

Don't get me wrong, I'm not saying that the backend admin isn't great. If it wasn't for my recent intense usage of Craft I wouldn't have noticed. I just feel like some attention to the UX/UI might improve the product. Mostly the consistency. Craft is incredibly consistent in its UI and that gives it just that little more polish.

[kongondo]

@Tom...looking forward to your mockups...

[Peter Knight]

Hey Tom. Does ListerPro not cater for this?

[Tom.]

Hey Tom. Does ListerPro not cater for this?

Hi Peter, yes ListerPro is very much what I was referring too, thank you for that. However, I'm still keen to look at the UI/UX. If anything just to better demonstrate my ideas.

[Peter Knight]

Hi Peter, yes ListerPro is very much what I was referring too, thank you for that. However, I'm still keen to look at the UI/UX. If anything just to better demonstrate my ideas.

Would love to see them. 

Multi-column listings were one of things I most missed about MODX after a brief fling with Expression Engine and it's Channels concept. 

I've used Craft a few times and agree, the UI is very tight.

[Tom.]

I've decided to make a start on the design, I thought I'd get a feel on what people think about the idea behind me doing this before continuing. I've always been passionate about UI/UX, and I'm always up for the extra practice wherever I can get it. 

Here is the design I've started: (http://i.imgur.com/2SY50ua.jpg - full size)

So here are few things I've tried to solve with this:

Unify the user journey, this page tree is going to be the main focus for every user and often unless you are an admin, the sidebar doesn't get used often. 

This is great from a UX point of view because that means they know exactly where everything is and there is no complicated bloat. 

I've tried to move very useful features into this screen as this is where I find users spend the most time. Also giving admins the ability to better define that user journey. The cog will edit the filter and the add filter button will, well, add a filter. 

Filters will work much like Peter mentioned ListerPro, however they will work just as well with Lister. I will do a mock-up if people want on how a filter page will look.

The other people is moving items in the page tree. Many people expect to be able to drag and drop and if they want to move into a child and didn't open the page tree first. Then they will have to stop the move, open the tree and then move again. This works by hovering over a parent, the child will then expand. You can start a move just by dragging the page name.

Another people I've seen people do, is not knowing to click on the edit on the right of the page name. Instead they frantically click the page tree and watch the page name highlight change, but nothing happen. I hope to do some work on this, but part of the problem is that the page names look like links. However I think they should be clickable to go into edit. I see people doing it, so they must feel natural doing it that way. I haven't yet thought of a solution for this as I also like how the click expends children. However one thing I've thought of is have it click it edit if it doesn't have children. If it does the will have to use the edit as normal. I'm not completely sold on this idea as I don't like the idea behind having two ways to get to edit. I can see this confusing users. 

Advanced Search will be the same as Lister. 

[adrian]

I like where you are headed with this Tom.

One of the things that I find still quite cumbersome in PW is the need to return to the Page Tree after editing a page so I can find and edit the next page. Having the tree in the side menu would be a huge timesaver in my opinion, and also just help the user to visualize the site structure when they are editing a page - they can see where the page fits - context can often be very helpful in a complex site.

I have actually been thinking about this today too and my thoughts are that the Setup, Modules, Access items should be along the top (like the default theme). Then the page tree could simply be in that side menu - no need for a second side menu.

As far as implementing this, I don't think we need to have ajax loading of pages when clicking the edit butt on a page - it can simply reload the entire page with the page tree open to the page that is being edited.

I also like the color scheme - matching the recent PW dev mockups.

[gmclelland]

I posted a similar topic that might be relevant to this discussion.  https://processwire.com/talk/topic/11905-globally-access-the-page-tree-in-the-admin-theme/

I like how wagtail.io has a sliding page tree.

[Tom.]

I like where you are headed with this Tom.

One of the things that I find still quite cumbersome in PW is the need to return to the Page Tree after editing a page so I can find and edit the next page. Having the tree in the side menu would be a huge timesaver in my opinion, and also just help the user to visualize the site structure when they are editing a page - they can see where the page fits - context can often be very helpful in a complex site.

I have actually been thinking about this today too and my thoughts are that the Setup, Modules, Access items should be along the top (like the default theme). Then the page tree could simply be in that side menu - no need for a second side menu.

As far as implementing this, I don't think we need to have ajax loading of pages when clicking the edit butt on a page - it can simply reload the entire page with the page tree open to the page that is being edited.

I also like the color scheme - matching the recent PW dev mockups.

I completely agree, the way I'm heading in my Mockup is in fact the edit page comes in as a sidebar, taking up about 75% of the screen. However I agree with the sidebar as of current. For most users they only see "pages" it seems pointless having it there just for the one link (which will always be active). My plan was to hide the sidebar if that was the only link. However across the top will do nicely too and it will so give more screen real estate for the edit page overlay.

The only reason why in thinking the edit page be an overlay instead is two things, without it, what is the default page? How would lister also implement this? Especially if you have already done a search.

Ill finish my mockups this weekend glad to get some feedback already and get a discussion started on this. Especially for the upcoming 3.0 brand refresh.