Direct access to PageListActions

[mindplay.dk]

This is just a tiny, one-line tweak - but it really makes a huge difference in terms of ease and speed in working with the Page List.

I've added this to my admin theme, but I really think this belongs in the core.

in "ProcessPageList/ProcessPageList.css":

/**
* When an item is open, this style ensures that the PageListActions become visible
*
*/
.PageList .PageListItemOpen > ul.PageListActions,
.PageListItem:hover > ul.PageListActions, /* <-- add this line! */
.PageListSelectHeader .PageListActions {
display: inline !important;
}

You now have direct access to "new", "edit", etc. - just by hovering over an item in the Page List.

Give it a try - you will most likely never want to go back!

[mindplay.dk]

I personally also added a rule that hides the PageListActions for expanded Pages - so that the buttons display only when you hover over an item.

That may be taking it too far for some people's taste, but I find that it minimizes the amount of noise on the page greatly - I don't need a screen full of buttons. That may be more of a personal matter though

[netcarver]

I've tried this and like it. The idea in your second post sounds like a good addition too. However, I do have one thought: would it be even nicer if the hover target was narrower? Currently the list items are pretty wide so the menu pops up even if the cursor is over the other side of the screen which seems a little over-animated to me.

BTW, I'm using the default theme - I guess other themes may have a more restricted width on the list items.

[diogo]

I think it's a good idea, but somehow it's a bit confusing...

try this:

/**
* When an item is open, this style ensures that the PageListActions become visible
*
*/
.PageListItem:hover > ul.PageListActions{
display: inline !important;
opacity: 0.4;
}

.PageList .PageListItemOpen > ul.PageListActions,
.PageListSelectHeader .PageListActions {
display: inline !important;
opacity: 1;
}

[mindplay.dk]

would it be even nicer if the hover target was narrower?

It would no longer be obvious that the navigation exists - I don't think you want users to have to "search" for it.

It's may be a little "over-animated" this way, but there's something to be said for usability too, not just for design... (just my $.02)

@diogo - having them still showing with opacity just makes things look muddy to me - I prefer to keep the UI clean. (this, on the other hand, is a design consideration, so perhaps just my personal preference)

Given all these very personal pros and cons, perhaps I was wrong - perhaps it is better to just keep this in your own admin theme?

[ryan]

I agree I think this does seem like a nice optimization, as you can perform an action on a page separately from having to open its children, so this ultimately saves time/resources. However, I also agree with Netcarver about the issue with hovering in the whitespace, though experimented a bit and not really sure how to solve this.

[diogo]

The white space thing can be solved like this

.PageList .PageListItemOpen > ul.PageListActions,
.PageListItem:hover > ul.PageListActions, /* <-- add this line! */
.PageListSelectHeader .PageListActions {
  display: inline !important;
}

.PageListItem{
  display: inline !important;
}

.PageListItem:after {
  content:"\A";
  white-space:pre;
}

not pretty but it works.

edit: .PageListItem can go up of course, kept it separate for illustration purposes

[Marty Walker]

If saves an extra click it's an improvement.

[netcarver]

@diogo, thank you, overall that seems better to me but may not be to everyone's taste and I do now see mindplay's point about the navigation not being so obvious.

[ryan]

ot pretty but it works.

What do you mean that it's not pretty? Is there anything wrong with this method? Looks pretty darn elegant to me (nice job!), especially after I was mucking about trying to do this same thing in Javascript.

[diogo]

I don't know... I just think there should be a way of telling a block element to have the size of it's content...

[mindplay.dk]

I don't know... I just think there should be a way of telling a block element to have the size of it's content...

display:inline-block; width:auto; margin:0 auto;

?

[diogo]

Ok, I didn't explain myself very well... I meant a block element with the size of it's content that doesn't allow any other element next to it.

But giving it another thought, that's just not the way the flow works.

[Martijn Geerts]

mindplay.dk & diogo, tnx for sharing. Used this today & love it!

[mindplay.dk]

There's a problem with this tweak - if a page is not selected/open (.PageListItemOpen) you can't drag it.

This appears to be caused by "ProcessPageList.js", where the clickMove() function has a block of code with the description, "make an invisible PageList placeholder that allows 'move' action to create a child below this".

I'm not sure how to fix this, or if that's even precisely the problem... any ideas?

[ryan]

I noticed that too. At the time, I tinkered with it for a bit, but couldn't figure and gave up. Will play with it more next time I'm on there, but if anyone else finds the solution sooner let me know…