Thinking about admin theme

[Joss]

I have not dug into the admin theme possibilities much, however, I have a feeling that what I am thinking about is not possible without treading on the core rather a lot.

I like the fact that the admin is very straight forward, but I do get lost from time to time. By that I mean That if I work on something like a field or a page and want to play with a different one, I have to get back to where I started rather than jump from one to another.

My thought would be to have a top bar with the main links, just as now.

But when you go to pages, the page tree is in a left sidebar and any pages you open to edit are on the right main pane. This means that visually you always know where you are.

The problem is how to incorporate the rather nice moving of pages and things like bringing up "edit view new move" and so on.

One possibility is to use Jquery to create a right click menu on a page item - that would probably get round the problem and would allow for more options that might appear in the future "archive, email to my granny, feed to the dog, etc"

Where sidebar trees run into dificulties is when you have lots of sub levels and it gets wider, or someone has a really interesting long title for a page!

The way things like PhpMyAdmin do it is simply to add a horizonal scroll bar - which I hate, to be honest.

May it is better to have it as a sort of mixture between a tree and navigating through folders. So you would have your top level pages to start with. If one has a child, you can click on its "open children" icon and the menu is reloaded with that next level. Top levels are still visible, though slightly greyed out. There is no indentation.

If you go to a sub-sub level, the same thing happens. You see the list in the sub-sub level, but you still see the other Top level items (not the sub level, perhaps)

This does not give you complete vision of everything, but it is probably manageable, especially if you have a lot of sub levels and a lot of pages.

Titles possibly should be truncated. I am a great believer in a two-title system anyway. One for list sorting purposes and another one (or more) for displaying on the site.

The same navigation system would obviously be used for Fields, templates, modules, template files and anything else that might appear in the future.

Anyway, that is just some idle thoughts before bed.

Joss

[MadeMyDay]

Hi Joss,

I also was thinking about the navigation "issue" when dealing with pages. My thoughts:

But when you go to pages, the page tree is in a left sidebar and any pages you open to edit are on the right main pane. This means that visually you always know where you are.

The problem is how to incorporate the rather nice moving of pages and things like bringing up "edit view new move" and so on.

Totally agree with you here.

One possibility is to use Jquery to create a right click menu on a page item - that would probably get round the problem and would allow for more options that might appear in the future "archive, email to my granny, feed to the dog, etc"

No, never ever do that! Don't use right click events if they can't be anticipated. Why not show the options on a left click but perhaps aligned a bit less space consuming?

Where sidebar trees run into dificulties is when you have lots of sub levels and it gets wider, or someone has a really interesting long title for a page!

I wouldn't care that much. A max-width of 40% for the sidebar with overflow auto should work better than truncating the text.

May it is better to have it as a sort of mixture between a tree and navigating through folders. So you would have your top level pages to start with. If one has a child, you can click on its "open children" icon and the menu is reloaded with that next level. Top levels are still visible, though slightly greyed out. There is no indentation.

If you go to a sub-sub level, the same thing happens. You see the list in the sub-sub level, but you still see the other Top level items (not the sub level, perhaps)

This does not give you complete vision of everything, but it is probably manageable, especially if you have a lot of sub levels and a lot of pages.

Sounds interesting but I don't think it would work well. I would reduce the indentation to 1-1.5em, but would not experiment with not widely provided navigation patterns.

Titles possibly should be truncated. I am a great believer in a two-title system anyway. One for list sorting purposes and another one (or more) for displaying on the site.

You already can do that. Just define another field and use that for the page tree title.

While playing with the dashboard system (I know, I know....) I recognized that it would definitely the easiest way to just put the page navigation tree in an expandable element (either as a sidebar or as an overlay) and navigate from there. There is no sense in displaying the complete page tree and the edit form at the same time, all the time. It would be one click (or mouse move) more to open/close the navigation, but I think this is reasonable.

[diogo]

While playing with the dashboard system (I know, I know....) I recognized that it would definitely the easiest way to just put the page navigation tree in an expandable element

it might work well with something like this http://museudoresgate.org/videos/ (page it's slow at the moment)

[Joss]

Arf'noon!

The confusing folder/tree system is actually a bit like windows folders in list mode - but in such a way as you can still see the top level to speed up going back to source.

Another way of doing that is by having top level items as a drop down, plus a live search area. It is the old problem of what happens when you suddenly have 10,000 pages in goodness knows how many trees and you dont want it taking up much width?

I get the feeling that there is a clever way of handling this that we haven't thought of yet.

Joss

[MadeMyDay]

it might work well with something like this http://museudoresgate.org/videos/ (page it's slow at the moment)

Yes, something like this. Could always expand to the needed width of the tree.

[MadeMyDay]

Another way of doing that is by having top level items as a drop down, plus a live search area. It is the old problem of what happens when you suddenly have 10,000 pages in goodness knows how many trees and you dont want it taking up much width?

I think, that it is hard to find the one perfect way for all needs. If you have 10.000s of pages I think a custom interface would work better than using the page tree, because even if the page tree is always present, you also need a lot of clicks to navigate through it. A combination of the classical page tree with a search box on top, that all put together into such a sidebar diogo just showed would be a huge benefit for sure.

[Joss]

Hi Diogo.

Yes I thought of something like that - or actually a bit cleverer.

So by default you would have the standard, fixed width tree.

When you mouse over it it expands to accommodate any longer titles if needed.

As you expanded the tree it would also get wider to fit the wider tree.

When you went back over the edit area, it would go back to standard size.

Optionally, you can hide it entirely.

That way, it is there most of the time, but not taking up too much room.

Another thing that should be switch-able is whether when you open one part of the tree, other parts close. When you only have a limited number of pages, you may want to expand several parts at once.

But when you get to a large number of pages that would be simply impractical, so you would not want that.

Also, is there a problem with loading links to thousands of pages at once? Would you need to load the tree in bits so the entire page did not fall over?

Joss

[diogo]

Another way would be, having the tree visible and occupying all the screen by pressing a button, or even a shortcut key. No animations, just visible or invisible.

[Soma]

I don't like to change the way it is, because I like it the way it is. But that's ofc only me.

Something that may take alternative routes with modules or custom admin template makes sense. Look at my teflon theme that does some things like dropdowns. Or my shortcut module, which makes "alt+q" and opens an autocomple dialog to search for pages, click enter and you're tehre, without even leaving and not matter where you are in the admin.

I like the flow and all possible things that can be built on top of the simple approach. I wouldn't like if we change the admin to a state where it's assuming too much things that may not useful for all, or to their likings, and make it hard to change it from there with modules.

For example build bustom admin pages and widgets that could help doing stuff like popups. Instead of changing the current admin flow.

I'm not saying it's all bad (maybe I didn't understand all), but think about it a second. Just my 2 cents

[MadeMyDay]

@Soma: I also wouldn't change the standard behaviour / standard admin starting page. It totally is something that should be accomplished with a module or a custom admin theme or whatever. Only if the users (and of course Ryan) say: Well, this is a huge improvement to everyone's workflow, let us build this as a standard, we should think about that. Not earlier

[Joss]

Hi Soma

I am using your Teflon theme and like it!

The only thing I have problems with (which is to do with the underlying admin side, not your theme) is going backwards and forwards between areas.

Some very simple things would help, like a Save and Close button and a Save and New - especially for mass field creation or mass page creation.

But also having access to the fields/pages/template list while still on an edit page would be nice - either to just leap from editing one thing to editing another directly, or even opening up another edit page in a new browser tab/window.

I think admin interfaces should always be heavily customisable so that several very different interface layouts are possible - not just themes. That also helps with legacy issues. A new admin layout might be wonderful, but if the client has been using the old one for a couple of years, they may be less than impressed with changing.

As was said earlier, there is no best way, but there may be a better way for one particular person and how they think their clients will work best.

[Soma]

I build a tool for page mass creation:

And a tool to list pages and data in a table and have an edit link that opens in a modal:

Tool like this are great and easy to implement to one needs.

[diogo]

Soma, your shortcuts are nice and everything, and the alt+q feature is great. I even think it would be great to expand on that and have a natural language search module (think spotlight). But in PW there's nothing more powerful and clear than the tree, and IMO would be handy to have it quickly available.

[Soma]

But also having access to the fields/pages/template list while still on an edit page would be nice - either to just leap from editing one thing to editing another directly, or even opening up another edit page in a new browser tab/window.

I often use open in new tab to have a page, template or field screen open. Not trying to convience you, I think you know that

[ryan]

I take the same approach as Soma, which is to use browser tabs when I need to keep tabs on more than one thing at a time (like the Page List while editing another page). Basically I'll be in the page tree, and CMD-click the 'edit' link, when I want to keep my current Page List handy.

I think there are a lot of good and welcome ideas here, and I'd like to do anything I can to support implementation of them in other admin themes. For the default admin theme, I feel like I've got to keep it immediately understandable and infinitely scalable. It's got to be something that will accommodate any situation. I have no doubt that other implementations are possible that would have more appeal to some (especially power users), but it would be a compromise in some other respect. What I'm trying to avoid is a sidebar tree because that gets awkward when things grow. I've been turned off by the way that Silverstripe and MODx handle this. Likewise, I'm reluctant to introduce any kind of frames in the default admin theme (other than modals) or accept the overhead of executing PageList on every request.

I do like what Diogo demonstrated about a sidebar that pops out only when you hover (or click) it, but only if it were a top (or bottom) bar instead that can span full width. But there's lots of baggage to consider. Example: if taking the frame route, adding a new page wouldn't be reflected in the PageList. If not taking the frame route, then PageList is getting executed on every request. There may be simple solutions to these that I'm not aware of, or there may be other issues to consider as well.

If anyone is interested in working on an admin theme (or variation of one) that accomplishes any of what's been mentioned in this thread, then I'd be very interested and glad to help in any way I can. If there's anything that needs to be added to the core in order to support, I'll add it too.

[Pete]

I think Soma's new module that loads page editing in modal windows and keeps the page tree always in the background (you may not have seen it yet ryan as it's that brand new and I've lost the link already) covers a large part of this and I can see it fitting certain workflows and personal preferences nicely.

I'm sure Soma will oblige by linking us to it

[Soma]

For sure I can, mighty Pete!

[Pete]

It was the name that had me stumped - couldn't remember what it was called but, as ever, it's a fitting title!

[Joss]

Just as a general thought about UIs generally (rather than this one in particular) there seems to be a problem with them being what I would call enterprise ready.

Basically, doing things like cross linking between articles where you may have thousands of them, or digging out an images that was on a page several hundred back, or just searching for information from one page to copy into another.

I am not totally sure what the solution is that addresses that issue and is also neat and easy for the site with just 20 pages in it.

One thing I do know is that clients hate it when they get confronted with a search - great, if you know exactly what you are looking for, not so hot if you can only just remember .... (not that I am old or anything.)

These are problems that have plagued just about every system I have worked with, with the possible exception of a couple of Crays ....

Joss

[Pete]

I think a better search module in the admin (no offence ryan, it does work as it is of course!) or at least an alternative could be implemented whereby you can select fields/templates/pages and do some really advanced things without getting overly techy with selectors.

As a real-world business example, creating rules in certain versions of Outlook takes you through steps - not that this needs steps - of selecting your first criteria, then a second and so on.

It would be neat to be able to chain criteria in a drop-down interface where you can have as many criteria as you like with one per row. For example with drop-downs and some AJAX (for subsequent drop-downs at that stage) you could achieve:

1) Template equals "blog-page"

2) and body contains "pasta"

What I mean by this is that for users who aren't the web developer there could be an easier way to present searches in a way that reads exactly how it appears on screen. The two separate lines are for two criteria, but equally you could add 6 for a big site to drill down into some complex stuff.

Just thinking that something human-readable (devs are super-human of course) will be better for the less techy content editor whilst devs should be aware of the selectors by the time they've built the site

[Joss]

Actually, that works even for the developers, who by the time they have finished the site have completely forgotten the bit they did at the beginning ...

Most sites are never going to be so complex, but some will, and being able to guide a user through a search/browse process in such a way as it speeds them right up will benefit both the untechy user and the dev who is lost in their own genius creation...

Talking of which: Soma, I have a module idea for you that sort of relates to this:

Basically, It is the ability to create a drop down on the admin bar to which you can add links to the "new" link of parent pages. So, if you have a page which is the parent of your news articles, a link to its "new" link can be made and named "News Article."

So, rather than scroll through your ever growing list of pages, you can just hit the button.

Possibly an addition to the template - a check box or something that adds it to the menu? Sorry, haven't thought this out fully.

Joss

[onjegolders]

I think that other than the power user thing where they need to search and find an article amongst hundreds, the only real gripe I have with the admin is that it often feels like you need three clicks when one should/could do.

I often find that when dealing with template and field setup I get dizzy going back and forward. One solution would be more buttons (not too many but as has been discussed "save&new" etc.)

Also more use could be made of dropdown on hover. So that you could hover over Setup and Templates & Fields would dropdown, then drop down over templates etc.

I feel that a couple more additions could make productivity a lot faster. I also don't believe that this would compromise too much on what Ryan was saying about over-complicating things. (I completely share his dislike for the ModX backend)

[Soma]

Actually, that works even for the developers, who by the time they have finished the site have completely forgotten the bit they did at the beginning ...

Most sites are never going to be so complex, but some will, and being able to guide a user through a search/browse process in such a way as it speeds them right up will benefit both the untechy user and the dev who is lost in their own genius creation...

Talking of which: Soma, I have a module idea for you that sort of relates to this:

Basically, It is the ability to create a drop down on the admin bar to which you can add links to the "new" link of parent pages. So, if you have a page which is the parent of your news articles, a link to its "new" link can be made and named "News Article."

So, rather than scroll through your ever growing list of pages, you can just hit the button.

Possibly an addition to the template - a check box or something that adds it to the menu? Sorry, haven't thought this out fully.

Joss

That's very nice thinking of me!

Some are waiting for this:

Well let me think , by "admin bar", you mean the one on the front-end by apeisa? This already has a add new to the current parent, if the template family setting is set to only a allow one template.

Lot's of possibilities and ways to implement such features, that's why I tend to think this is up to the developer to create shortcuts and helpers in the admin from project to project where it fits. But I understand that some "system" in the admin to add such things by clicking rather than coding would be nice to have. Since it's hard to hook into the admin menu other than creating a custom admin page. I think a nice way to add such features is create a custom admin page much like mademyday is doing. Another would be to add a "Tools" admin page with child pages. And create a process module that reads a text field of "url", which is added to the admin template. This process just redirect to the link. So you could use these admin pages to create shortcuts in the admin menu. "/pages/add/?parent_id=1001". Well at least some food. I think it would work well.

[Joss]

I was thinking about the back end.

I tend to work from the idea that the admin should be the place you can use thoroughly unless you want to create a specific experience where you may use the front end or create a complete new admin system or what ever.

Maybe Ryan can create a hook in the normal admin menu so that it can be customised either with processes like this, or even manually for people that want to put specific things in it.

[Soma]

The admin topnav is simple frontend code in the admin template default.php, that's why you can't make it a hook

That's why I could implement such nice dropdown menu and module menu in teflon.