New ProcessWire admin theme on dev branch

[Macrura]

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

yes, that's the plan, i'm going to try and figure out the module dependency thing for that.. going to be interesting...

[kongondo]

That's the easy bit...I don't want to spoil ur fun...hint, check MM module

Apeisa was right; once you create a ProcessModule, "your life will never be the same again!"

[alan]

Love the new Admin theme. Trying to work out how to change colours and having read this and other posts in this thread I am now at a point where I have created Soma's Teflon into a Module and added it and see it listed, but, the new PW 2.4 stock theme is still what is showing.

Do I need to uninstall the PW 2.4 theme to get site/modules/ Module themes to work maybe?

[kongondo]

You don' need to uninstall the core admin theme for your custom one to work...that's the whole idea with admin theme modules...multiple themes can be installed on the same site at the same time.

You say you see it listed. Where? In modules or under users page? Have you actually installed the module? If yes, you should then go to access/users and select your theme there. Maybe you've done this already and my questions seem pointless but your post is not clear, sorry

[alan]

U r a star kongondo, I had not noticed I needed to go to the user Profile to select it! Thanks!

[Soma]

Yeah you can now have all themes installed at once and also get all problems from all themes in one install.

Yeah you can now have all themes installed at once and also get all problems from all themes in one install.

[ceberlin]

Hi, with one of the latest releases, there came something new: 

Hovering the fields top bar there turns up now the field's original name in grey, which makes the admin page flickering a lot, when moving the cursor over any of the expand ("v") buttons.

Is that something I can switch off?  (Or where does the effect come from out of the sudden?)

I have the fields names already with the excellent module HelperFieldLinks.

[Soma]

no comment

[ceberlin]

This behavior seems to make the * (for required) disappearing also! 

[kongondo]

Turn debug off and they won't show...but that may not be an option for a developer ;-)

[thetuningspoon]

no comment

Oh Soma, ever so humble... 

[horst]

no comment

http://processwire.com/talk/topic/5742-showing-field-name-on-label-hover-not-working/

[ceberlin]

Now I get it. I was searching for the wrong keywords maybe. Sorry for posting something that has been posted here already.

[ceberlin]

3 more ideas (I hope I am not repeating something this time):

1. For the titles of collapsed fields add an ellipsis…

(for example with CSS for the collapsed field's title something like: ::after {content: "…";} )

Why? My clients have difficulties to identify collapsed fields as expandable with more content available inside.

2. If repeater or group is collapsed, infos about required missing content are hidden.

I would suggest that in this case those blocks are auto-expanded to show the spots to fix.

3. Repeaters - 1st element already visible

Option in repeater settings to aways show the first element for new pages

without requiring the click on "+add" helps clients to identify, what this area is for.

[renobird]

Good ideas.

#3: To have the first element already visible with repeaters, you can adjust the "Ready-To-Edit New Repeater Items" setting.

This will of course result in empty repeaters if the client doesn't enter anything for that item.

[renobird]

Ellipsis on collapsed fields looks good here. 

If you want to add this now.

_inputfields.scss (Line: 131)

Current:

.InputfieldStateCollapsed {

        .InputfieldHeader {
            /* different style for collapsed header */
            display: block;
            padding-bottom: 0.75em;
            background: $label-link-collapsed-bg; 
            border: 1px solid $subtle-border; 
            color: $label-link-collapsed-color; 
        
            &:hover {
                /* style for collapsed header when hovered */
                color: $label-link-hover-color; 
                border-color: $subtle-border; 
                background: $text-bg; 
            }

        }
        .InputfieldContent {
            /* collapsed Inputfields don't show their content (only header) */
            display: none;
        }
    }

Replace with

.InputfieldStateCollapsed {

        .InputfieldHeader {
            /* different style for collapsed header */
            display: block;
            padding-bottom: 0.75em;
            background: $label-link-collapsed-bg; 
            border: 1px solid $subtle-border; 
            color: $label-link-collapsed-color; 
        
            &:hover {
                /* style for collapsed header when hovered */
                color: $label-link-hover-color; 
                border-color: $subtle-border; 
                background: $text-bg; 
            }

            /* Add ellipsis to collapsed fields per ceberlin */
            &:after{
                content: " \2026";
            }

        }
        .InputfieldContent {
            /* collapsed Inputfields don't show their content (only header) */
            display: none;
        }
    }

[ceberlin]

> #3: To have the first element already visible with repeaters, you can adjust the "Ready-To-Edit New Repeater Items" setting.

I have set this to 3 (which is the default). From my understanding this only means that you can add that certain amounts of repeating elements without having to save the page in between. It does not mean (at least not in my PW 2.4.1 dev version) that 1 element is already set, visible and ready for input. And that is what I would like to have.

If I set one of the repeater's fields to "required" the PW behavior is unexpected (bug?). There comes an error about a missing field content. But that field was not set with the +ADD ITEM at that time.

Thank you very much for the code. I would like to avoid applying changes to the wire folder or any modules directly - I do not want to break it when there are updates.

It the idea does not find general support, I could consider overriding certain css with some plugin or so.

[renobird]

Sorry, misunderstood what you meant about repeaters.

So the repeater contains a field that is required, but is the repeater field itself also set to required?

[Joss]

Having a problem with the new admin theme. If I create a tab field and import it (and its brother) to a template, then click on it to edit the label, it does not display anything useful in the modal. 

Can anyone replicate?

EDIT:

Okay, not to do with the theme, something else is going on with 2.4.1

[ADONIS]

I did all but there was a problem.

When I tried to save the file  AdminThemeExamplename.module ,  the file was saved as txt and not as module. Maybe I am doing something wrong? Or maybe I forgot to write its extension? With Notepad ++ how can I be able to save it as module and not as a text file?

[kongondo]

In NP++: 'Save As', then select 'All Types(*)'. Yes, you need to make sure extension .module is there..

When viewing the file in NP++, also good to select 'Language' -> PHP

[ADONIS]

Thanx for your reply,

I already resolve the problem. I had to add the exension .module

I will write what I did, in order if someone else face the same problem to know how to resolve it:

Open Notepad ++ and chooce  Settings and then choose Style Configurator

On the left site you will see Language, scroll down untill you find php

Click on php and you will notice at the left bottom to see the Default Ext + User Ext

Now, in the box that is under User ext, type this but CLICK on Space bar once in order a space to add. After you click the space bar then type   module. Save an close.

Open Notepad++ and now you can save .module

[ADONIS]

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

Can you please be more specific? How to make the compile? Where is the command line? Or is Sass Wtch a compiler I have to install on my desktop first?

I need help for step 5 please, thanks

[ADONIS]

Oooops

Nevermind, is obvious that I have to use Command Prompt (or Terminal in Linux) in order to make the complie

Questions solved !!

[ADONIS]

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. 

I did all that, except I use the word test instead of Pete and still I cannot see it in the Settings, Color them. I only see the Classic, modern, feura ( I think this is the correct spell), warm.

Do you know what is wrong?