Module AdminOnSteroids

[adrian]

9 minutes ago, tpr said:

Upgrade time!

You are a freaking star! This is brilliant! Love the implementation as well.

This is why open source rocks - I owe you several beers (or other beverage of choice) for this one!

Seriously made my day - client meeting in the morning and this is going to make things so much better.

 

[tpr]

Nice to hear that. I see some parts that could be improved but I think it's usable as it is now. 

[theo]

Hi,

If I look at the browser source code of my admin, there is a red line, which might have to do with AOS:

<a href="/~theo/pwtest/processwire/module/edit?name=AdminOnSteroids&toggle=1" class="aos_toggle"style="opacity: 0.75; color: inherit !important; margin-left: 0; display: inline-block; padding: 4px 0; margin-right: 1px;"><i class="fa fa-medkit"></i> <span onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">
Disable AdminOnSteroids</span></a>

 

A space is missing between class and style

class="aos_toggle"style=

Thank you.

[tpr]

Thanks, will fix that, although I don't see this (at least in Chrome). I think auto format code went wrong.

[theo]

Thank you.

Chrome doesn't highlight these problems, but it's the same there of course.

Firefox does that, which is pretty handy.

[tpr]

Latest v1.8.3 further improves checkAllCheckboxes feature. Now its state properly corresponds to individual checkbox changes and also fires a change event (without that showIf fields wouldn't react).

[bernhard]

Hey @tpr would it be possible to apply the AOS tweaks for ckeditor also to the frontend editor? Here for example I have the lightwire skin + justify plugin and that does not show up on frontend:

[tpr]

Currently no, aos is loaded only in the admin and I think it would really mess things up if I would change that. 

What would be possible to create another module that would use aos functions and settings but of course aos would also need some refact. I would happily assist in this if someone would take up the challenge. 

[theo]

@tpr How can I change the font which is used in CodeMirror?

I would like sth. like Courier instead of Arial.

Thank you.

 

EDIT: OK, found it myself.

Adding this:

html.aos .cke_reset_all .CodeMirror-scroll *{font-family:courier!important;font-size:14px;}

to the theme css (One of the files in /site/modules/AdminOnSteroids/CKE/plugins/codemirror/theme/)  does that.

Here is my own theme (theo.css)
 

Spoiler

 

.cm-s-theo span.cm-meta { color: #FF1717; }
.cm-s-theo span.cm-keyword { line-height: 1em; font-weight: bold; color: #7F0055; }
.cm-s-theo span.cm-atom { color: #219; }
.cm-s-theo span.cm-number { color: #164; }
.cm-s-theo span.cm-def { color: #00f; }
.cm-s-theo span.cm-variable { color: black; }
.cm-s-theo span.cm-variable-2 { color: #0000C0; }
.cm-s-theo span.cm-variable-3 { color: #0000C0; }
.cm-s-theo span.cm-property { color: black; }
.cm-s-theo span.cm-operator { color: black; }
.cm-s-theo span.cm-comment { color: #3F7F5F; font-style:italic;}
.cm-s-theo span.cm-string { color: #555; }
.cm-s-theo span.cm-string-2 { color: #f50; }
.cm-s-theo span.cm-qualifier { color: #555; }
.cm-s-theo span.cm-builtin { color: #30a; }
.cm-s-theo span.cm-bracket { color: #cc7; }
.cm-s-theo span.cm-tag { color: brown;}
.cm-s-theo span.cm-attribute { color: #00c; }
.cm-s-theo span.cm-link { color: #219; }
.cm-s-theo span.cm-error { color: #f00; }

.cm-s-theo .CodeMirror-activeline-background { background: #e8f2ff; }
.cm-s-theo .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; }

html.aos .cke_reset_all .CodeMirror-scroll *{font-family:"Source Code Pro",Courier;font-size:13px;}

.cke_dialog_contents_body .cke_dialog_ui_text, .cke_dialog_contents_body .cke_dialog_ui_select, .cke_dialog_contents_body .cke_dialog_ui_hbox_last > a.cke_dialog_ui_button {
    margin-top:0px;
}

 

 

[bernhard]

thank you. Totally makes sense, I'll install the plugins manually  

[tpr]

4 hours ago, theo said:

to the theme css (One of the files in /site/modules/AdminOnSteroids/CKE/plugins/codemirror/theme/)  does that.

You should better add a new css file with assetpaths and add your rules there instead changing module files. 

[theo]

4 minutes ago, tpr said:

You should better add a new css file with assetpaths and add your rules there instead changing module files. 

Thank you.

I've made my own theme (just added above).

I was trying to use "CKEditor Custom CSS" in AOS config, but the file configured there was not loaded (Browser Network Analysis).

[theo]

Btw. how can I configure CodeMirror to not wrap lines?

I think code editors should not wrap lines.

I've changed:
 

config.codemirror = {
theme: 'theo',
lineWrapping: false
}

in "sample-cke.js" but it has no effect (The file is loaded, as it loads theme: 'theo')

Thank you.

[tpr]

You were on the right path but that file is only a sample. Copy it elsewhere to templates/scripts for example and load it in assetpaths. 

19 minutes ago, theo said:

I was trying to use "CKEditor Custom CSS" in AOS config, but the file configured there was not loaded (Browser Network Analysis).

I don't know what is that, will do a search. 

[tpr]

v1.8.5 is available, which contains @Robin S CKEditor Link Files CKE plugin, multilanguage-ready.

@theo Have you managed to solve the issue? I couldn't find any relevant info on "Browser Network Analysis". Are you sure you entered a correct path?

[theo]

33 minutes ago, tpr said:

Have you managed to solve the issue? I couldn't find any relevant info on "Browser Network Analysis". Are you sure you entered a correct path?

Ah, sorry. I mean the tool that many browsers have, where you can see which files they are actually requesting and the HTTP status etc.

I could not find my CSS in this list and it had no effect, although the AOS file check was successful.

Example Screenshot:

 

Thank you.

[tpr]

Perhaps it could help if you pasted the path you entered here.

[theo]

Everything seems normal. But while it loads the cke.js it does not load the test.css afaics.

Thank you.

[tpr]

Interesting, I can only think of an adblocker or similar that prevents loading the file.

[theo]

Ah, now I see.

If there is a CKE CSS configured in the field page, then the one configured in AOS is not loaded.

Thank you.

[tpr]

Good catch! Just modified the module to allow loading both, thanks. 
(will be released later)

[adrian]

Hey @tpr - would you mind enabling field edit links for the user template please? I expect it's just a matter of adding ProcessUser instead of just ProcessPageEdit

Thank you!

[tpr]

You mean only for non-system fields, right? 

[adrian]

7 hours ago, tpr said:

You mean only for non-system fields, right? 

I hadn't really thought about it, but if you think that's better, that's fine. The main thing is that I have a LOT of extra fields in my user template on one of the sites I am working on and I am missing that functionality.

[tpr]

@adrian I've modified field edit links to appear on every page, for non-system fields only, please check.