New ProcessWire admin theme on dev branch

[Manfred62]

because translations in newest dev. Using 2.3.15 with german as default language (only one language). See the screenshots.

overview from Admin - Setup - Fields. In the breadcrumb only Fields (Felder) is translated. The rest is not.

pw-lang-dev.jpg

Admin - Setup. The titles are translated.

pw-setup-dev.jpg

Admin - Setup - Languages.

pw-languages-dev.jpg

in the breadcrumb the 'Fields' is the only one field which translated phrase show up correctly. All others not. Also the small nav in the footer is not translated.

tested with complete new installation, but no change.

I also contacted Radek (cz translator). He gets all translations correctly in the admin. To cross check it, he sent me his newest files for testing.

But same result (in cz) for me like above. Strange.

I'm using latest xampp 1.8.3 version. Maybe this helps with investigations?

[Soma]

I was using XAMPP (mac) for a long time but had to switch to MAMP because it was horribly broken and lots of strange things happening. (Couldn't create new Inputfields)

[adrian]

Just a minor detail. When installing with the new admin theme as a module, there is no color set checked by default. Warm is what is being displayed by default, so I think that radio button should be checked, or whatever color you decide to go with as the new default

[Martijn Geerts]

@Soma: Ever checked out the PHP from Liip ?

[Manfred62]

Just a minor detail. When installing with the new admin theme as a module, there is no color set checked by default. Warm is what is being displayed by default, so I think that radio button should be checked, or whatever color you decide to go with as the new default

did you tried a new installation or a update? With clean new installation (actual 2.3.15) you get the classic color scheme preselected as default. Also the radio button is checked in the modules settings.

[adrian]

Thanks Manfred - this observation was actually with an upgrade - my bad!

[Wanze]

Will "old" admin themes be supported also in future versions?

I'm using a customized version of Soma's great teflon 2 admin theme for a project. After upgrading to the newest dev version, I could uninstall the new Admin theme and so far the Teflon seems to work without problems. I love Pw!

[Manfred62]

the new 2.4 has arrived!

I tested it in a clean new installation, but unfortunately the translation problem with the /wire/templates-admin/default.php is still there.

Yesterday night I also tried installations in latest Wamp and EasyPHP on Windows (because of the hint of soma). Same result.

[ryan]

Will "old" admin themes be supported also in future versions?

Yes they are supported now and will continue to be. Though I'm hoping people will convert the themes over to AdminTheme modules. It's easy to do, and provides the benefit of having multiple-admin themes installed at once. When more than one admin theme module is installed, ProcessWire adds an admin-theme selection box to every user's profile screen.

To convert an existing admin theme to a module, just move the files into /site/modules/AdminThemeName/ (replacing the Name part with the name of the Admin theme, i.e. AdminThemeTeflon). Then create a new file in the same directory called AdminThemeName.module (again replacing the Name part). All that needs to be in that file is this (I'll continue to use Teflon as the example name): 

<?php
class AdminThemeTeflon extends AdminTheme implements Module {
  public static function getModuleInfo() {
    return array(
      'title' => 'Teflon Admin Theme',
      'version' => 1,
      'summary' => "A nice admin theme.",
      'autoload' => "template=admin"
      );
  }
} 

Of course, the AdminTheme can go a lot further if you want it to. Examples include: having its own install() method to add new assets it uses (i.e. user profile avatar), adding its own hooks, creating its own API vars, having a custom configuration screen, or anything else you could do with any other module. But all of that can come later... all you need to do to convert an existing admin theme to an AdminTheme module is just to move the files and add the AdminThemeName.module file shown above. 

I tested it in a clean new installation, but unfortunately the translation problem with the /wire/templates-admin/default.php is still there

 

I haven't yet had time to look at this one, but it's on my to do list. Thanks for keeping me up to date on it. There's always a long list of issues to cover on GitHub, but we were at a point where all remaining issues were relatively minor, affected very few people, and didn't need to hold up release. I just didn't see any reason for people to keep downloading 2.3 when 2.4 is already more stable. We'll be covering remaining issues, like this one, with incremental versions, working through the list.

[kongondo]

It's easy to do, and provides the benefit of having multiple-admin themes installed at once. When more than one admin theme module is installed, ProcessWire adds an admin-theme selection box to every user's profile screen.

Of course, the AdminTheme can go a lot further if you want it to. Examples include: having its own install() method to add new assets it uses (i.e. user profile avatar), adding its own hooks, creating its own API vars, having a custom configuration screen, or anything else you could do with any other module.

This is super cool!

[Pete]

Now the new default admin theme is a module, how would I go about creating another colour scheme for it? Is there a way to extend it and if so how would I do that?

[Joss]

Practice.

[Pete]

Ha, yes, but when it was a case of copying it to template/admin-template or wherever int eh old days it was easy to just go about changing colours. Now I feel like I just want to add another colour scheme to the new admin theme but I'm confused as to how I would go about it.

[kongondo]

Just guessing...
 
1. Copy contents of /wire/modules/AdminTheme/AdminThemeDefault to site/modules/AdminThemePete
2. Duplicate and rename AdminThemeDefault.module to say AdminThemePete.module + change the name of the class in the new file....
3. Since you want to add to rather than take from the AdminThemeDefault.module, add your Pete theme selection option here...(in your module file)
 
        $field->addOption('pete', __('Pete')); , i.e.
 

public static function getModuleConfigInputfields(array $data) {
	$inputfields = new InputfieldWrapper();
	$field = wire('modules')->get('InputfieldRadios');
	$field->attr('name', 'colors');
	$field->label = __('Color Set'); 
	$field->addOption('classic', __('Classic'));
	$field->addOption('warm', __('Warm'));
	$field->addOption('modern', __('Modern'));
	$field->addOption('futura', __('Futura'));
	$field->addOption('pete', __('Pete'));//Pete's new awesome colors!
	$field->attr('value', isset($data['colors']) ? $data['colors'] : ''); 
	$field->optionColumns = 1; 
	$inputfields->add($field); 		
	return $inputfields;
 }
}

 
 
4. In site/modules/AdminThemePete/styles add your css file - main-pete.css
5. Cross fingers and install
 
Just guessing...but see also...
 
http://processwire.com/talk/topic/4650-new-processwire-admin-theme-on-dev-branch/?p=50881
 
Edit 1:
I have a feeling though that this would duplicate the warm, classic, etc in Admin! This is because admin themes can now co-exists...so, maybe, remove all the other options in the field as well as their CSS, etc. and only leave yours...

Edit 2: Just duplicate as in my first attempt, change the css as you wish, but remove radio options.....?

Edit 3: I give up; am confused too....Ryan or Soma will clarify       

Edited February 15, 2014 by kongondo

[ryan]

I think Kongondo has it mostly right. But for the sake of keeping it simple, maybe ignore the part about making a copy of the AdminThemeDefault for the moment, and just make your edits to AdminThemeDefault. Once you've got them in place, you can always copy it to a different admin theme in /site/modules/ if you want to. But lets get down how to add color themes first. 

1. Add your new color theme option to the AdminThemeDefault.module file like Kongondo mentioned. 

2. Go into /wire/modules/AdminTheme/AdminThemeDefault/styles/sass/ and copy _vars.scss to _colors-pete.scss. The _vars.scss is based around the Warm color theme. If you prefer to use a different one as a starting point, then copy _colors-classic.scss (for example) to _colors-pete.scss instead.

3. In the same directory, edit the main.scss file and add your new colors file, making sure the others (except 'vars') are commented out:

@import 'vars';
@import 'mixins';
//@import 'colors-classic';
//@import 'colors-modern';
//@import 'colors-futura';
@import 'colors-pete'; // ADD THIS LINE

4. Make edits to your _colors-pete.scss file as you see fit. You don't need to know Sass to do this, as everything is predefined with Sass variables that you can just insert new color values into it. However, read the following steps first, as you may want to setup your Sass watch to keep an eye on the changes for you as you go, so that you can see them take place in your browser as you make them. 

5. Compile the styles/sass/main.scss file to styles/main-pete.css using whatever method you prefer. The standard method would be to use Sass watch. If you were currently in your styles/ directory, you could type this at the command line to automatically compile changes to main-pete.css. 

sass --watch sass/main.scss:main-pete.css

This will keep running indefinitely, monitoring for changes and compiling them to main-pete.css every time a change is made to any one of the scss files. If you only wanted it to run once, then you'd just omit the "--watch" part. 

6. Before or while you are making changes to your _colors-pete.scss file, go ahead and login to PW admin and go to Modules > Core > Default Admin Theme. Click "Settings" and change the color theme to "Pete", so that you can see your changes as you go. 

[Manfred62]

I tested it in a clean new installation, but unfortunately the translation problem with the /wire/templates-admin/default.php is still there

 

I haven't yet had time to look at this one, but it's on my to do list. Thanks for keeping me up to date on it.

@ryan: do you have an idea whats the problem here? Maybe a specific php version?

[wayne]

I think I have found the problem, take a look at this thread:

http://processwire.com/talk/topic/5592-pw-24-admin-menu-not-translated/

[MadeMyDay]

I very much like the possibility to configure admin themes as modules, thanks Ryan!

But one thing: If there are more than one themes installed, they are selectable on user level. Wouldn't it be reasonable to also make them selectable on role level? I think this is a much more common scenario. The editors are grouped by roles and they are likely to have role based themes. If it doesn't fit, the theme selection on user level could override the role setting.

btw: Same could be implemented for the user language.

[Macrura]

If you make custom admin pages (ie. with a custom process), and want the new theme module applied to them, make sure you change the site's index.php "$adminTplDir" variable (~ around line nr. 80) to:

$adminTplDir = "modules/AdminTheme/AdminThemeDefault";

Great new theme module btw !

i have also had to do this in order to make my custom admin pages work... wish there was a better way though..

I make a lot of custom admin pages and don't need to change anything, it automaticly uses admin template.

@Soma - can you explain more, or perhaps post an easy way to make a custom admin page? I use diogo's module on a few sites but now i have to change the index.php, as above, i couldn't figure out how to change the ACP to use the admin template module.

[apeisa]

Macrura: http://modules.processwire.com/modules/process-hello/

[Macrura]

@apeisa, thanks - working on it now..

gonna be tricky though to refactor all of my code, i have a lot of admin pages that are using simple templates with mixed html/php..

really wish there was a better/simpler way to just have the Admin Custom Pages module work with the new admin theme module, without having to modify the index.php

...

yeah - sorry about misspelling your handle!

Edited March 3, 2014 by Macrura

[apeisa]

I have always read/typed your nick as marcura (noticed it on last reply I wrote). Now I noticed something strange on the way you typed my nick

You are gonna love process modules, they are great!

[Soma]

U all hace too cinplicated niknames.

[Macrura]

yeah, the NEW process hello (which is kind of different than the old process hello) is what you were talking about, the new one creates the admin page etc..

now i just need to refactor the code on my admin pages, which are mostly special tables of pages using jquery datatables, showing various fields, sometimes calculations, related pages, alerts about images being too small, and edit buttons...

[kongondo]

yeah, the NEW process hello (which is kind of different than the old process hello) is what you were talking about, the new one creates the admin page etc..

now i just need to refactor the code on my admin pages, which are mostly special tables of pages using jquery datatables, showing various fields, sometimes calculations, related pages, alerts about images being too small, and edit buttons...

- for jQuery DT - u can use Soma's module/helper class...if u want..