New ProcessWire admin theme on dev branch

[adamspruijt]

This is starting to take shape.  Like the nav at the top, and the Futura colours options is nice. I'll be talking a closer look soon, with more feedback I'm sure.

[WillyC]

u.forgot the

modals

[BartekG]

I'm new here, so I feel a bit guilty criticising things. But I've these suggestions, so please, bear with me.

For starters: the new themes are definitely a huge step forward. The warm one is my favourite. But, do we really need three (now: four) of them? I'd rather see one that gets all the attention. I had dealed with sites with a selection of custom skins. Believe me: it's not worth it. Updating and maintaining one is hard enough.

So, I would ditch warm and modern, leave the classic and put all the focus on it. Let the community work on the alternatives. And don't wait too much with the release. Ship it once it reaches a stable stage, let the people iron out the details.

Speaking of the details (sorry again for nitpicking):

1) The header is too tall. The title is not that important to take over 15% of the screen estate. Footer as well could have significantly smaller vertical padding. Bascially, the content should dominate over everything else. In the era of small handheld devices it's very important to not waste any vertical space.

2) The colors are nice, however they're a bit imbalanced. It's a question of small details. Like: why the title is pink? If it's not a link it should be black.

Take for example this forum. It has similar palette and yet it looks way clearer. I'd take clues from it.

3) Items in the pages' tree could use an icon to show if they're closed or open. A simple triangle would do the job.

I'd like to repeat that overall the new themes are great. I love the fact they not change things in a revolutionary manner. If anything, I'd make even less changes and introduce the new things in a few small steps. But, again, Ryan, you did a superb job.

[jacmaes]

Two bugs to report:

1. The "hours˝ and "minutes" sliders in the date picker don't work. The hour slider, for example, jumps from 12 a.m. to 11 p.m.
2. It's been mentioned many times before, but the default admin theme still suffers from an overflow issue (parent element is set to style="overflow:hidden") when using Apeisa's Thumbnail module.

See screenshots below. Finally, I can't get the Font Awesome icons to work; is it because I've set Spanish as my main language?

[ryan]

Here's the next iteration of updates which takes into account the comments above. The biggest changes are:

Switch to Arimo for the font–thanks to Diogo for the suggestion. This font seems about perfect for our need here. It looks like the license for it wouldn't let us bundle it in the app, so we have to load from googlefonts... but I think that's okay. It'll continue to use Arial for people that are working offline. 

Got rid of the entire headline, per BartekG's comments above. The headline really doesn't seem necessary (regardless of how big or small it is), and his post made me realize that. The headline text is now just part of the breadcrumb trail. 

The drop down navigation now includes drilling down to individual fields and templates. 

./colors=classic

 

./colors=modern

 

./colors=warm

 

./colors=futura

 

Dropdown example:

One thing that still bothers me a little is the rounded corners on submenu items when hovered over with the mouse. Not a big thing, but still wanted to give a little constructive criticism.

Not sure I understand–can you clarify which submenu items you are talking about (in the page list maybe)? Anyone else agree? What I was gathering from previous feedback was that folks wanted page list actions that were bigger and less subtle, so making them look a little more like buttons was the intent here. 

But, do we really need three (now: four) of them?

I just want to clarify that this is 1 theme, not 4. The color schemes are merely different SCSS variable files included at the top. Otherwise everything else is the same. There's no maintenance burden here. We are also in a spot where many like the classic color scheme, and it's kind of become our brand. But an equal number (or more) dislike the colors to the point where they see them as childish. So I think we have to answer that by having a variable palette / different options from the start. 

The header is too tall. The title is not that important to take over 15% of the screen estate.

Good suggestion. I had started to think the title was more important than it was. I looked at several other CMSs to compare (Drupal, Joomla, Concrete5, EE, Craft) and noticed that this new admin theme started the content input before any of those–a good thing for sure. But then I got to WordPress, and noticed their content input is practically at the top of the screen! Granted WordPress uses sidebar navigation rather than header navigation, but it drove home your point for me. 

 Footer as well could have significantly smaller vertical padding. 

It's going to look like you've got a big footer if you have little content on the page and no scrollbar. That's because the <body> background color is the footer color. If you have a lot of content on the page, you will have a very small footer. The actual footer is actually very small / very little padding, but that may not be clear on some screenshots. 

Like: why the title is pink? If it's not a link it should be black.

Take for example this forum. It has similar palette and yet it looks way clearer. I'd take clues from it.

I'm not sure I agree with this, but it doesn't matter now that the title is gone. Yes the forum may have a black title, but I believe that was a limitation of the IPBoard theming system. Notice the rest of the site (outside the forum) uses the pink titles. So the admin theme was trying to be consistent with that. 

3) Items in the pages' tree could use an icon to show if they're closed or open. A simple triangle would do the job.

I'm not against the idea, but since we already support custom icons there, I think it would be too much. Also, we already have visual cues that indicate whether an item is open, so additional icons/cues would be a form of double emphasis. Still, I think in the future, we will probably have default icons for when non are specified (like open and closed folder, triangles or something like that). 

Two bugs to report:

Thanks–I will look into these. 

See screenshots below. Finally, I can't get the Font Awesome icons to work; is it because I've set Spanish as my main language?

I don't think it should matter. Try hitting reload a couple times to make sure your cache is fresh. Also, your screenshots look to be the old admin theme rather than the one discussed in this thread? Though the icons should work in either, but just want to make sure I know which we're talking about. 

[ryan]

Btw, forgot to mention, but these are all committed to the dev branch if anyone wants to try them out. 

[Soma]

Love it.

[adrian]

Really looking great - minimalistic, but without removing functionality - such a rare thing these days, I am impressed!

Two comments for the moment - the field and template drilldowns are great but I wonder how functional they will be on a site with a lot of fields - it might be become to unwieldy to be useful - not sure if it should be configurable so it can be turned off or not. I also wonder whether there needs to be the ability to scroll within the div that contains the fields, rather than scrolling the entire page to get to the bottom of the list - maybe that will be messier?

I think you actually just fixed the rounded corners issue, although I do think the css for the menu could still be tweaked a little - being very pedantic, the grey border that appears around the fields and templates items when you are viewing the sub items looks a little clunky - I think just keeping the background grey would be better. Also note that go from a fields/templates submenu back to its parent doesn't return the parent to the grey background. Also, maybe just a personal preference, but I'd rather see the submenus slightly offset, rather than slightly overlapping the main dropdown - just a little breathing space.

A couple more minor things - I love the futura colors, but worry about the use of that much red - seems to me that it diminishes the use of red in error messages. I will also iterate one of Soma's earlier comments about too many colors - buttons in particular seem too colorful with many changes between states, including a red border when active but the mouse is no longer hovering.

BTW, removing the title really is a great improvement - it's looking so clean now

PS: Even though I said less colors, I would like to see a warning color (orange i guess) for appropriate messages like this one:

ProcessTemplate: Pages using this template are not viewable because the template file   - I see that there are different shades of green, so maybe that is ok?

PPS: Any thoughts on making the "Add New" link a config option - I think on some sites this will be great, and on others perhaps confusing to certain users.

Edited October 11, 2013 by adrian

[janlonden]

Not sure I understand–can you clarify which submenu items you are

talking about (in the page list maybe)? Anyone else agree? What I was

gathering from previous feedback was that folks wanted page list actions

that were bigger and less subtle, so making them look a little more

like buttons was the intent here.

The border radius is now gone from the sub menus in the new version

The new font looks a little "jagged" here on firefox, as if it's not being displayed at it's recommended size. Also I found a strange visual behavior on select elements when hovered on.

I tried to post screenshots but it wouldn't let me? I get a message that says: "You are not allowed to use that image extension on this community."

Anyway, I'm really happy with the new theme.

[apeisa]

Great improvements Ryan. Surprised how big difference there is by removing the header. Also lots of little new improvements here and there!

I like the new fonts, but some of the sizes are jaggy, at least on chrome / win7. I would say all bolds are messy (like page tree actions and button labels on warm theme).

[diogo]

Ryan, the new theme was already growing on me while working with it, with these improvements I'm starting to love it!!

(not sure about the gradients on the classic colors though )

edit: (Hm, to be honest I am sure. I don't like them at all)

[ryan]

Glad you guys like it. Making a little progress with every update. 

the field and template drilldowns are great but I wonder how functional they will be on a site with a lot of fields - it might be become to unwieldy to be useful - not sure if it should be configurable so it can be turned off or not. 

They disable themselves if you get above 100 fields (or 100 templates, but that's less likely). So if you are dealing with that many fields, then you'll not have the drop-down menu option... it would just be too much. It might be that the limit should be lowered to 50 or something, I'm not sure. 

I also wonder whether there needs to be the ability to scroll within the div that contains the fields, rather than scrolling the entire page to get to the bottom of the list - maybe that will be messier?

IMO the fewer scrollbars the better... I'd rather scroll the whole page than something within the page. But I haven't tried the alternative either. 

being very pedantic, the grey border that appears around the fields and templates items when you are viewing the sub items looks a little clunky - I think just keeping the background grey would be better. Also note that go from a fields/templates submenu back to its parent doesn't return the parent to the grey background. 

These are jQuery UI menus, and I'm not sure yet how to change that (I was trying to earlier). It may be that I just need to come back to it when I've got more time to explore it. But if you see any specific CSS tweaks I can make let me know and I will. 

Also, maybe just a personal preference, but I'd rather see the submenus slightly offset, rather than slightly overlapping the main dropdown - just a little breathing space.

Not positive I understand–might need a screenshot that points to exactly what you are talking about. At least, I'm not recognizing where the overlap is here. Theoretically I'm not sure they can be separated (space between them) and still maintain the mouseover state to keep the menus active. 

A couple more minor things - I love the futura colors, but worry about the use of that much red - seems to me that it diminishes the use of red in error messages.

I'm not too worried about this, as the error message appear right under the masthead. Also, error messages in this environment are not life-threatening if they somehow miss it. I'll play with it though, as I'm not sure I've even seen the error message in Futura. 

 

buttons in particular seem too colorful with many changes between states, including a red border when active but the mouse is no longer hovering.

jQuery UI is adding these button colors when active/click, and I'm not exactly sure how to get around it (I've been pressed for time this week, so haven't pursued these rabbit holes). If you manage to figure it out before I do, please let me know. I get the impression this is coming in from the JS side, since there seems to be a fade-on-click going on here. The yellows and blues that show up in there are not part of the color scheme and I don't know where they are coming from, yet. 

PPS: Any thoughts on making the "Add New" link a config option - I think on some sites this will be great, and on others perhaps confusing to certain users.

We probably will expand the scope of this button, but going to keep it simple for the first version. 

The new font looks a little "jagged" here on firefox, as if it's not being displayed at it's recommended size. Also I found a strange visual behavior on select elements when hovered on.

I'd love to see screenshots of these, as I can't see that here (Firefox 24 in OS X). I think the screenshots you attempted to post were probably not JPG/PNG/GIF, given the error message the forum gave you. Please convert them to one of those formats and post. Or if you don't want to convert, just email to me ryan at processwire dot com. 

I like the new fonts, but some of the sizes are jaggy, at least on chrome / win7. I would say all bolds are messy (like page tree actions and button labels on warm theme).

Could I see a screenshot? I'm not seeing the jaggies here. Maybe there is something I need to adjust with this particular typeface. Based on what you are saying, I'm guessing the browser is fake-bolding the typeface rather than using the actual bold version of the typeface. Maybe there's something I can do from the CSS side to fix that, but I'd like to get a look at it first. 

(not sure about the gradients on the classic colors though )

I was trying to find something in-between the old theme's colored field headers and the new theme's non-colored headers... a gradient. But I think those gradients are a failed experiment. 

[janlonden]

I'd love to see screenshots of these, as I can't see that here (Firefox

24 in OS X). I think the screenshots you attempted to post were probably

not JPG/PNG/GIF, given the error message the forum gave you. Please

convert them to one of those formats and post. Or if you don't want to

convert, just email to me ryan at processwire dot com.

Sorry, same problem. Tried with jpg and png. I'll email them.

[apeisa]

These are from Win7 / Chrome31:

[Craig]

Chrome on Windows does have a problem with rendering TrueType web fonts jaggedly, especially at small sizes.

The best solution I've seen is SVG as demo'd and documented here - http://www.fontspring.com/blog/smoother-web-font-rendering-chrome.

(I mainly use Chrome on Windows 7, and this Chrome issue bugs me a lot)

[adamspruijt]

Just thought I'd share some work I've been doing on a "version" of this theme. I was recently inspired to make a theme that had a "killer" page tree and decided I would merge that code with some alterations to Ryan new 2.4 theme and port it to SASS (I usually use LESS). Anyway below are some screenshots.

Dots indicated status, compatible with PageTemplateIcons though I will offer a version without if I finish this and release it as a theme.

During drag and drop. Note: helpful arrow, I've used this on my Unify theme, clients seems to like it  

Fixed placeholderitem styling (not everything has been brought over yet)

[adamspruijt]

Oh, also this is the scss I used to style my dropdowns, this ill kill the ugly borders

.dropdown-menu{
	display: none;
	border-radius: 0 !important;
	border: 0 !important;

	.ui-menu-item{
		min-width: 10px;
		border: 0 !important;
		a{
			border-radius: 0 !important;
		}
	}
}

Pretty simple, though I think you already got rid of the border-radius I left mine in there.

EDIT: 

Also, while it seems I'll be in the minority on this one, I believe removing the traditional title element from the page is a bad idea. A proper title is a strong visual cue to a user as to the current location/function of what they are doing, and the breadcrumbs just doesn't command enough attention to serve this purpose. This seems to be once again slipping towards a feature that is more in the interest of developer than clients/users. I guarantee the majority of my clients will find this confusing, and plenty of them think they are rather "tech savvy". Mind you I know I can go ahead and make a theme to fix this if I want, but I just think it might not be a great idea for a default theme.

[apeisa]

That theme looks absolutely fantastic Adam! I love the traffic lights idea!

Reaction and activity to take PW admin to next level tells something about how keen people are for PW. Can't wait to start testing this one Adam.

[apeisa]

Also, while it seems I'll be in the minority on this one, I believe removing the traditional title element from the page is a bad idea. A proper title is a strong visual cue to a user as to the current location/function of what they are doing, and the breadcrumbs just doesn't command enough attention to serve this purpose. This seems to be once again slipping towards a feature that is more in the interest of developer than clients/users. I guarantee the majority of my clients will find this confusing, and plenty of them think they are rather "tech savvy". Mind you I know I can go ahead and make a theme to fix this if I want, but I just think it might not be a great idea for a default theme.

I agree mostly. But "edit page" page is also very intentional. What I mean is that you have clicked "edit" in certain place before getting into that page. So you should have very strong sense about where you are. You don't get to that page from search engine for example. 

[adamspruijt]

That theme looks absolutely fantastic Adam! I love the traffic lights idea!

Reaction and activity to take PW admin to next level tells something about how keen people are for PW. Can't wait to start testing this one Adam.

Keen is an understatement for me, no CMS comes even close, PW is a quantum leap in CMS's. I like many others here have a hard time bothering with anything else anymore. I looked for soooo long for something with the logic of PW. And while I still look because I just find software and CMSs fascinating, nothing has yet to even give PW any competition in my mind. I believe with the right design and marketing PW can be "the next big thing".

Oh and thanks for the complement!

[renobird]

Great work guys!

Ryan, so much good stuff going on, can't wait to give it a real test drive over the weekend.

Adam, looks great! I'm with you about the title - I think it's important for a lot of users to have the visual clue - especially the less technical.

I'll report back (maybe even post some ideas) as soon as I can. Overall, some killer stuff going on - love it!

[adamspruijt]

I agree mostly. But "edit page" page is also very intentional. What I mean is that you have clicked "edit" in certain place before getting into that page. So you should have very strong sense about where you are. You don't get to that page from search engine for example. 

You make a good point, it still makes me a tad nervous, I think those clients who use multiple tabs may find it a bit hard to "reacquaint" themselves with the page. Regardless I'm open to it, and like any good developer or designed I'd be glad to be wrong and learn something instead!

[apeisa]

Oh, I am not sure which is best. But I think that in Ryan's theme the breadcrumb is styled and positioned in a way that it is very clear and visible. Also one thing to remember is that title is first editable field on page, so therefore also on very visible spot.

[adamspruijt]

Made a compromise that I'm happy with. Same technique might be a happy medium for Ryan's theme as well.

The more I look at it the more I like it. Awesome!

[adrian]

Is it just me, or is the "View" tab a little strange. I feel like this has been discussed before but couldn't easily find it. I just wonder if maybe it should be moved from its location next to the other options, and/or made to not look like a tab. At a minimum, I think it should open the page in a new browser tab so the user doesn't potentially lose their edits if they haven't saved yet.

Maybe it's just me