New ProcessWire admin theme on dev branch

[adamspruijt]

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

Totally agree, I usually do that and added it to my version.

[SteveB]

Adam,

I agree about View. It just doesn't seem right for one of those tabs to be a link instead of another tool.

Your killer page tree is great. I'd tighten up the vertical spacing a bit but to each his own.

[adrian]

Hey Ryan,

I am already so used to the fields and templates submenus - so much quicker getting things done!

Small suggestion - do you think it would be too much to have an Add New item at the top of both those submenus?

One other thing and this might make things messy, but I wonder would it would be like if it is was possible to select a template when creating a new field, so that as soon as you save the field, it gets added to the template automatically. Just an idea and maybe not a good one

[Martijn Geerts]

Great improvements Ryan. 

But we've to think about the button colors to.

Red color = Warning, something terrible could happen.

Green = Approve something we want

Then we have neutrals.

Below is a result when playing with chrome. Just removed some unnecessary space.

(some margins & border-radius ) 

[horst]

Oh WOW!
 
massive and high improvements and discussion here!
 
I like the results!
 
I want contribute a screenshot to the fonts discussion about Arimo with 0.875em on WIndows 7 etc. AND I want to promote the font Muli instead of Arimo, because allready at this stage the new admintheme is so modern that it suits better with modern font like Muli than with Arimo IMO. Also it seems to be little bit better rendered at 0.875em than Arimo (best click on imgae to view it at 100%):
 

Edited October 12, 2013 by horst

[Pete]

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."

Pretty sure it only accepts .jpg, .gif and .png - what file type did you try?

[Pete]

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.

I'm with you on this one Adam.

There are a few things that I think fall under "config" that are difficult to achieve without a module and some server-side SASS compiler (hence that PHP one I linked to several pages ago). In my mind, and I appreciate there is some work involved, the admin theme would ship with a special module for configuring

1. Toggling of page titles in admin
2. Font size (I'm with ryan on preferring the smaller font actually )
3. Basic colour selector for people that don't want to compile SASS
4. Could even then have a selection of admin fonts

Those features in a special config module would be killer if they could be saved per admin user as you're also helping to adhere to disability standards with font sizes, colours and font faces which is another bonus, whilst letting people work in an editor they feel comfortable with (anyone else set up their own colour/font scheme in their favourite text editor? I know quite a lot do!).

I'm not saying any of that is remotely easy - it would require some thought certainly - but I can see how it would be done and how such a simple addition (from an interface perspective ) would make for a totally killer admin.

And again I unfortunately have no time or I'd build the module already

[horst]

with the colors=futura I find it a bit difficult to identify the hidden pages. With the setting of opacity from 0.75 to 0.5 it is much better:

  .content .PageList .PageListStatusHidden:not(.PageListItemOpen) > a.PageListPage {
    opacity: 0.5; }  /* original: 0.75 */

Have I allready said that I like the new admin theme?

[ryan]

For you guys where Arimo is looking bad, can you try adding this to your /site/templates-admin/styles/main-[colors].css file and see if this fixes it? I found this in HTML Kickstart's stylesheet, so was thinking maybe Joshua already figured this one out for us:

text-shadow: 0 0 1px transparent; /* google font pixelation fix */ 

Horst–thanks, I'll check out Muli too. 

[ryan]

Sorry, I should have clarified that the text-shadow should be added to the body tag...

body {
  text-shadow: 0 0 1px transparent; /* google font pixelation fix */ 
}

[diogo]

Horst, I don't think muli is a good choice at all for a cms admin because it's semi-geometric. This means that there was an effort to make the form of the different letters similar, while in – for instance – humanist letters there's an effort to have them the more distinguishable possible. The result is that humanists are much more readable in long texts and small sizes than geometric fonts, and this is particularly true with the minuscule "a" that in muli, might be confused with an "o" when read fast. Arimo is neither of those but it's in the middle, which is fine.

[SiNNuT]

Webfonts in general are pretty bad on Google Chrome on Windows. And yes, Arimo is no exception. It doesn't look good on Chrome on Windows. But this is also the case for almost every webfont out there, including very standard stuff like Open Sans which is butt-ugly on Chrome/Windows.

Maybe some day they will get their shit together, until then the best solution i've been able to find is to prioritize the svg over other formats. (This is mentioned elsewhere in this thread as well). This works well for most webfonts i've tried.

http://stackoverflow.com/questions/14438368/prioritise-svg-font-with-google-web-fonts

[diogo]

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

Ryan, why do you say the license doesn't allow it? This was taken from Arimo's license on Fontsquirrel:

The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works.

http://www.fontsquirrel.com/license/arimo

[horst]

Horst, I don't think muli is a good choice at all for a cms admin because it's semi-geometric. This means that there was an effort to make the form of the different letters similar, while in – for instance – humanist letters there's an effort to have them the more distinguishable possible. The result is that humanists are much more readable in long texts and small sizes than geometric fonts, and this is particularly true with the minuscule "a" that in muli, might be confused with an "o" when read fast. Arimo is neither of those but it's in the middle, which is fine.

Diogo thank's for explaning. I never have heard of that.  - But the "a" is one of the points why I like Muli. ?!

But also you are right, with Muli the chance to read it as a "o" is much greater than with Arimo.

And at least I have the choice to modify the css-file for my personal use.

[janlonden]

text-shadow: 0 0 1px transparent;

Tried it. No improvement here.

Pretty sure it only accepts .jpg, .gif and .png - what file type did you try?

I tried both jpg and png. It's strange because just a while ago I uploaded two screenshots.

[horst]

body {
  text-shadow: 0 0 1px transparent; /* google font pixelation fix */ 
}

unfortunately no improvement on Win7 with FF 24.

------

And I have found at Line 147 of futura-main.css that there is missing the Arimo fontname:

/*.ui-widget { font-family: Arial,Helvetica,sans-serif; font-size: 1.1em; }*/
/*.ui-widget .ui-widget { font-size: 1em; }*/
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: Arimo,Arial,Helvetica,sans-serif;   /* added Arimo as first choice */
  font-size: 1em; 
}

[felix]

Fira would be a pretty good choice as it is open source and designed for the web (even looking good in chrome / windows). If you like to preview how it might look in PW: I used it for my "Modern Admin Theme" Design

[Manfred62]

back from vacations and tested the new version (it says 2.3.5). Looks very good.

Still found some things...

In the login screen hover over the arrow shows the field-name

In the setup/templates view hover over the page number symbol: the popup is misaligned

In the top navigation under setup the 'Fields' is not translatable

Color schemes: warm and modern are nice.

Futura looks very good, but the red buttons look wrong. Martijn already mentioned this.

Classic is also nice, but the gradients .... hmm better not.

Translations: how far is the work with translatable strings gone? Seems, there are still some missing strings.

regards Manfred

[diogo]

Two more bug reports:

On small screen sizes, if there are custom pages in the nav the tabs start flying

I thinks it's inevitable to collapse the nav pages into one button...

The second is not really a bug, but the notifications also make the active tab look weird. Would it make sense to put them on the top?

[adamspruijt]

Two more bug reports:

The second is not really a bug, but the notifications also make the active tab look weird. Would it make sense to put them on the top?

Agreed on the notifications, kinda how I did it in my version?

Though I think the nav is a tough one, the numbers of items can very greatly from site to site, and often clients will see far fewer links. Maybe some type of "responsive javascript" will need to be used to determine if the links are overflowing, was the image you posted a working example or just a mock-up?

[Soma]

Wanted to mention something that is even more a problem with this theme (as it was with the current default)

If a field or fieldset is collapsed, it's hard to see or easily overlooked. It looks much like a some sort of header for the following fields.

I have no idea how to solve that.

[horst]

... 

If a field or fieldset is collapsed, it's hard to see or easily overlooked. It looks much like a some sort of header for the following fields.

I have no idea how to solve that.

special background-color / background-transparency for collapsed fields?

[diogo]

Maybe some type of "responsive javascript" will need to be used to determine if the links are overflowing, was the image you posted a working example or just a mock-up?

It's a quick mokup. What I posted might be not very practical because if one of the last entries in the nav is active we would have to hide some from the left. Maybe this would be more realistic?

Would be quite easy to do with javascript. making the nav inline or inline-block, we can measure it and hide all the elements as soon as the browser window is smaller than the nav. The active page link would stay visible and all the others would go on a dropdown under the + sign.

[ryan]

On small screen sizes, if there are custom pages in the nav the tabs start flying 

I thinks it's inevitable to collapse the nav pages into one button...

I plan to collapse them to a "=" icon (pretend it has 3 horizontal bars rather than 2). But I'm also not sure how important it really is, as the navigation remains fully functional either way. I think it'll be fine to let the content tabs (WireTabs) wrap this way at least. 

The second is not really a bug, but the notifications also make the active tab look weird. Would it make sense to put them on the top?

I thought they looked pretty good the way they were, but if you guys think they look better on top, I'll switch it. 

In the top navigation under setup the 'Fields' is not translatable

It should be translatable from /site/templates-admin/default.php, at least it does appear in our translation list in that file. I'll test it out to be sure though. 

Fira would be a pretty good choice as it is open source and designed for the web (even looking good in chrome / windows). If you like to preview how it might look in PW: I used it for my "Modern Admin Theme" Design

Thanks, I'll try this one out.

I was able to test on Windows Chrome this week, and can now see the font-rendering issue. Though from my perspective, all fonts looked pretty poor, including Arial. Maybe I'm just used to the antialiasing in OS X, but wondering if Chrome/Windows just has issues here in general. Not sure how far we should go with it if even the native fonts look bad. 

Ryan, why do you say the license doesn't allow it? This was taken from Arimo's license on Fontsquirrel:

Fontsquirrel says that the font's license doesn't allow them to create a webfont version of it, so it has to be done manually. If they can't distribute the webfont version, i'm assuming we can't either. When we put something in ProcessWire, we're distributing it. However, I'd love to be wrong about this, as I'm really enjoying the look of Arimo (on the mac at least). 

[Adam Kiss]

Hey, Arimo a has webfont version on Google Fonts, released under Apache License v2.0, so it is redistributable. You can also download it