apeisa

Thanks Ryan! Looks solid.

I have been cleaning the code, commenting and added "new page", "view pages" and "hide" functionality. "View pages" is just a link to admin now, but new page works perfectly in modal now. Hide simply hides the AdminBar, so editor can see how others will see the page (in some resolutions / layouts that could be good thing). I just test a little bit more, add more comments, make settings work and then push new version to GitHub. Stay tuned

Adam will love it when you are working with images on rte-editor. You have modal on top of the modal (ok, we will have option for modal). But the best part actually is that it works very smoothly (at least on webkit browser) and it's not confusing at all.

You did put it in /site/modules/ not /wire/modules/ ?

You need to create /site/modules/, it's not part of the default site..

Off-topic: I'm currently working on new UX / UI design for PW administration – it's quite well thought out, brings some new stuff, some 'nice-somebody-thought-of-this' moments and nice design too, however, I have so much work [some of it will be brought back to PW though!] that I can't do everything at once!

Sounds great! Please let me know if you think I could help.

Not working for me...I've installed it but i cannot see the bar...

Thanks for installing and sorry to hear about problems. Do you have installed latest branch from here: https://github.com/ryancramerdesign/ProcessWire/archives/master

If you do, can you paste source code of your page (some front end page and when admin is logged in)?

Thanks, I can't wait to check this out! We are headed to dinner, so I'm going to check when I get back. If you are still around and want to try it, here is a fixed /wire/core/Modules.php that corrects the bug (attached).

Thanks Ryan. I go to bed now, but I will continue on weekend.

I don't know if I'll have time to check the module out right now, but I would love to work on it, so apeisa, please, create github account for it [or I can, if you wish], so we can synchronize better. If you don't have account / haven't work with git before, try some nice GUI for it and just dive in as I did – i still no almost nothing about it and love it already.

I have used SVN much more than Git. I have tried Git few times, always liked it but never had enough reason to start using it in real project. But maybe now: https://github.com/apeisa/AdminBar

No worries Ryan. This have been so much fun so far and big thanks for all your help! Dunno what my wife thinks about my late night coding after few weeks...

There is now first version to try out for you guys! No new features yet (only page editing and link to admin & logout), but this has super nice UI by adamkiss.

http://www.monoliitti.com/misc/AdminBar.zip

Remember: requires latest version from master branch. Installation is super simple: extract files from zip to: /site/modules/AdminBar/ and then through admin -> modules -> install (easy to find, since it will be first module on the list, good name )

There are some settings on module admin, but they aren't working yet (as you can read from above).

Hmm... $this->showModal returns 1, no matter if it is checked or not?

Ryan: no worries. Localization is important thing and it would be nice to have clean and simple solution to that also.

Question: module settings worked nicely, but how I read those values?

There isn't. But the current practice is to use either SQL date format in places where the date need to be a fixed length and/or sortable with other dates (like in a table), and to use "January 27, 2011" or "Jan 27, 2011" format anywhere else. I believe these formats are fairly universal, though correct me if I'm wrong.

In Finland we never use dates like "Tam 27, 2011", it is almost always "27.1.2011" and sometimes "27. tammikuuta 2011" or "Tammikuu 27. 2011". I think there is nothing universal to what comes to localisation

Is there any best practice to give some general constants for a whole site? Ie. in AdminBar I could try to read some site wide setting for default date formatting -> if there is none, then use module default. It wouldn't be wise to create date formatting as a module setting, wouldn't it? That would create situations where there is a lot of configuration to be made if site is using many modules (not sure though) - also every module that displays dates (or other local stuff) should provide settings for customizing localisation.

Very interested to hearing Adam's thoughts on languages.

Of course considering the "hands-on" nature of PW this isn't always an issue (easy to format things just the way you like on templates).

Ryan, Adam: thanks again!

I just implemented Adam's UI and I dive into these settings next.

Few questions (not important at this point, but later):

• Date formatting - is there global settings for this?
  
• Language - best practice to offer different languages for this module?
  

I actually just downloaded it, now tested and very smooth work and nice looking also while extended! Also very clean and nice coding here!

Someone wants to teach me a lesson how I create settings for this module?

Adam: all the better Downloading now and I start to implement it right a way!

With Base url I meant this: $this->config->urls->root (so I found it)

Ok, I got some nice progress here. After saving it redirects (out of the modal) and displays success message. I used Adam's tip on hooking to save and using sessions. I didn't need to use load hook, because I already had pagerender hook (or maybe it is faster with loaded hook?).

I had to redirect with javascript, because there seems to be no way to redirect out of the iFrame without js or user input. If someone knows please let me know

Oh, and how to I get base url? I have pretty ugly hard coding there with this line:

echo("top.location.href = \"http://localhost/processwire2{$this->session->pageSaved}\";");

There is probably something like $config->urls->base or like that?

Adam: I have to say that I love your UI - super clean. I think fastest could be for now that if you send me a psd. Then when I get first working version with minimal features I will create github repo so you can contribute to coding also - and we can bake those needed options in (initial state / modal).

Adam: very polished and nice looking toolbar there! Do you have some functionality created or just UI design? It would be crazy to create same functionality twice...

Although I have to admit that PW seems to make things like this very easy to do. Props to the system!

If I may suggest, something like modal editor makes more sense, because front-end anything implies, that that's what you edit. But you merely pushed the administration into modal and added few buttons [though that this statement doesn't make it any less valuable!]

That is true - but my plan is to add more "admin" functions here. I am planning few more features like:

• Quick look of the permissions of current page (which roles can edit, view etc)
  
• Create a new subpage
  
• Show sitemap (maybe?)
  

So now it is mainly "modal editing", but I do hope that I get most needed admin functions baked in. You are also right that everything that admin bar does is also available from real admin: I have no means to rebuild anything: just to give more convenient (for some people) way to find information & admin functions they need. So maybe best name could be something like "quick admin" or "mini admin". "Enhanced inpage user control" is actually pretty good one (in descriptive means, tough a little bit difficult to remember )

Not that the name is most important, but I also wanted to share my ideas on this one.

Martin: Thanks! I hope to get this released sooner than later, so you guys can test it.

Thanks Ryan. I will update my module tomorrow.

Here is two more screenshots, I polished the user interface a little bit:

Wow. It was very easy to port from basic include to a module. Only thing I needed to change was put $page->id ==> $this->page->id and $config->urls->admin ==> $this->config->urls->admin

I actually have pretty solid module here

I put those css and js files just before </head> just like in Ryan's skeleton module. I also put html needed by Admin Bar right before </body>.

Now only few things missing:

1) Keeping admin in modal view after saving a page

2) Or closing admin and notifying user in some other way that page was saved

3) Better name for this child. Front-end editor? Front-end admin? Quick Edit?

(actually there is millions of ideas how I wanna improve this one, but I think after those three things this is solid enough for others to test)

Thanks, it works now. Time to get hands dirty!

(actually, I was polishing the UI all the time )

I get same error for HelloWorld.module also.

Apeisa: Let me know if that module skeleton worked for you.

I upgraded to latest master and tried this skeleton. It gives me error "Field 'data' doesn't have a default value" and install stops. Any clues?

Apeisa: if you post the code somewhere I might try to hack it, so after save it closes modal and reloads window.

Thanks for advice! I have created simple custom modal. I now track if there is #notices inside the iFrame in modal, and if there is then clicking on "dark side" fires page refresh.

I might just hide the form (with js) if there is #notices -> not sure about that tough. I have to play with different ways. What I want is that user get's clear "Page saved" notice, not just quick refresh. I have few ideas tough, so I just play

Ryan, thanks for this! I think I get easily forward.

Probably only thing I need on the admin side is that after submit modal view should stay. And maybe some way to hide form to re-appear after successful save.

This went off topic from my original question, so I started a new topic in modules section (and there is a screencast!):

http://processwire.com/talk/index.php/topic,56.0.html

Update 31.7.2019: AdminBar is now maintained by @teppo. Modules directory entry has been updated, as well as the "grab the code" link below.

***

Latest screencast: http://www.screencas...73-ab3ba1fea30c

Grab the code: https://github.com/teppokoivula/AdminBar

***

I put this Adminbar thingy (from here: http://processwire.c...topic,50.0.html) to modules section and to it's own topic.

I recorded quick and messy screencast (really, my first screencast ever) to show what I have made so far. You can see it from here: http://www.screencas...18-1bc0d49841b4

When the modal goes off, I click on the "dark side". I make it so fast on screencast, so it might seem a little bit confusing. Current way is, that you can edit, go back to see the site (without saving anything), continue editing and save. After that you still have the edit window, but if you click "dark side" after saving, then the whole page will be reloaded and you see new edits live.

I am not sure if that is best way: there are some strengths in this thinking, but it is probably better that after saving there shouldn't be a possibility to continue editing. It might confuse because then if you make edits, click on dark side -> *page refresh* -> You lose your edits.

***

When I get my "starting module" from Ryan, I will turn this into real module. Now I had to make some little tweaks to ProcessPageEdit.module (to keep modal after form submits). These probably won't hurt anything:

if($this->redirectUrl) $this->session->redirect($this->redirectUrl);
if(!empty($_GET['modal'])) $this->session->redirect("./?id={$this->page->id}&modal=true"); // NEW LINE
else $this->session->redirect("./?id={$this->page->id}");

and...

if(!empty($_GET['modal'])) {
$form->attr('action', './?id=' . $this->id . '&modal=true');
} else {
$form->attr('action', './?id=' . $this->id); // OLD LINE
}