Module AdminOnSteroids

[tpr]

1 hour ago, ceberlin said:

Am I the only one having the issue?

This was present only if PagePreviewBtn was off, will be fixed on the next update.

[tpr]

v067 is up, containing the image titles for the image select dialog and other fixes/updates:

• new option to FileFieldTweaks: show image titles in image select dialog
• custom paths for admin.css, admin.js and CKEaddons assets
• AdminTweaks: remove max-width constraint from modals
• AdminTweaks & RenoTweaks: added tweak "Highlight pagelist rows on hover"
• fix for templateEditLink not showing up (default theme)
• removed ScrollFix submodule

[gmclelland]

Hi tpr.  Feature Request: If possible one thing I would like to see is better consistency for replacing files in file and image fields.  This is a task that content editors have to do constantly, so I would like to make it dead simple and obvious.

Here is some quick mockups:

For image fields:

When the "Replace Image" Button is clicked, a modal dialog pops up.

For File Fields:

Same thing...It opens a dialog to replace the file

Any thoughts?

[tpr]

Good idea, but the first round should be a feature request to Ryan.

[gmclelland]

Thanks tpr, I created an issue on github for those who would like to follow along.  https://github.com/ryancramerdesign/ProcessWire/issues/2047

[tpr]

Thanks! Image fields already have such feature as you might know, and something similar would be fine for file fields too, eg prepending an icon to serve as a draganddrop area. If the purpose of your request is on consistency, this would be perhaps better.

Edit: here's what I thought:

[tpr]

I've updated the previous post and added a gif to illustrate my idea.

[gmclelland]

Thanks tpr, but I don't think that is obvious enough.

If we rely on drag and drop we will have to explain/train our users on how to use the user interface.

IMHO.. I'd rather have a simple button that pops up a modal that includes a standard file chooser input field in case the user just wants to select a file and doesn't want to drag and drop.

[adrian]

Honestly, I almost never use drag and drop - I am a big fan of maximizing windows (maybe I am just bad at multtasking) so it's not really that easy to drag 'n drop. Maybe if I had a dual monitor setup (which I have sort of had in the past), or a 30+ inch screen it would be different.

[tpr]

Well it's the same functionality that is already present in image fields, of course a help text could be added to make things clearer. There could be also a Replace button.

I use dnd from time to time, and it's especially handy when replacing images. Just dnd a new image over the old and save. I also maximize windows but it's easy to dnd - move the "loaded" cursor over the taskbar item, wait and drag to the destination.

[bernhard]

hi tpr,

2 things:

1) having open treeitems show up in bold is really helpful!

2) i see clients having problems with moving items around the tree very often. especially when they want to move a page into a subtree of another item. the explanation is always the same: "you have to open the oder pageitem before you can move your sub-item there."

i think that could be improved and would perfectly fit into your steroids module, if it does not find it's way into the core. looking at your short screencast (https://processwire.com/talk/uploads/monthly_2016_09/aos-highlightrow.gif.7fa25570dd6f9c8c6db625ab329947a8.gif) it brought up the idea of improving this part as well. do you think it would be possible to trigger the click on the treeitem when a user holds the moved item over the new parent? or maybe bring up some helping tooltip like "if you want to place your item here you have to open the parent item first"?

what do you guys think about that?

[adrian]

3 minutes ago, tpr said:

I also maximize windows but it's easy to dnd - move the "loaded" cursor over the taskbar item, wait and drag to the destination.

I know, I and sometimes I do that when a file is really deeply nested and I already have it open in Forklift (plug for the best Mac file manager), but usually I don't really find it much quicker than browsing from PW.

[szabesz]

21 minutes ago, adrian said:

I know, I and sometimes I do that when a file is really deeply nested and I already have it open in Forklift (plug for the best Mac file manager), but usually I don't really find it much quicker than browsing from PW.

Not to mention that most users (be it PC or Mac) do not know where and how drag-and-drop can be used.

[tpr]

@bernhard

I think it's a good idea, I also often have hard times when moving pages though I don't do that too often.

I have minimal experience with drag-and-drop but I could modify ProcessPageList.js up to the point where only a "click" is needed, but unfortunately I couldn't make this last step work so far.

[bernhard]

i think it should be possible to trigger a tooltip while dragging the item over a parent with children that says "wait 1 second to open this item, then you can drag your item here". maybe it would also be helpful to create a first child via javascript, because if the subtree is not visible, you can only place your item below or above the parent.

hmm. playing around with it i think there might be some problems (eg when having paginated lists...). i think the best solution would be a tooltip showing the help "if you want to place your item here you have to open this pagetree before moving your item". that would be the easiest and most bulletproof solution.

edit: tried to add "PageListItemOpen" class to the items, but then hovering gets buggy...

hm.. don't have a good idea how to solve that properly. but i still think there is room for improvement

[tpr]

There is a loadChildren function which works, so in theory everything is ready to be put together

[bernhard]

yes but the question is when to trigger this function without messing the whole tree or the UI up  but i bet you find a good solution

[tpr]

There are some things to polish but it starts to take shape:

[adrian]

Very nice!

[gmclelland]

Silverstripe - https://www.silverstripe.org/ also does a good job with this.  Here is a quick screencast.

I wonder though if these are usable on mobile / tablet?

silverstripe.mp4

[gmclelland]

I haven't tested it on a phone/tablet, but I wonder if we can use the existing system to work better on mobile.

How it could work:

1. Click  a page title in the tree - Links expand showing "Edit, View, New, Move"
2. Click "Move" - it shows "Click another page title to show the moving options"
3. Navigate to and click on a different page title in the tree - it shows "Move below, Move above, Set as parent"

Maybe then we wouldn't need the drag and drop javascript?

[bernhard]

looks awesome @tpr !

@gmclelland i support your request to improve that feature on mobile but i would not see it as a replacement of drag&drop. on mobile, yes! but on desktop the drag&drop is almost a killer-feature compared to other cms. and now on steroids it is finally getting even more userfriendly!!

thank you tpr for picking the idea up, looking forward to the next steroids update

[tpr]

Just to clarify: the pagelist dnd won't be in AOS but a PR. I don't think such mod could be applied from the outside.

[tpr]

Just uploaded v068 which adds template edit link tooltips to the main pagelist items plus has some CSS improvements to a few CKE plugins (some seem to be written at least 10 yrs ago :)).

And also see the ProcessPageList.js attached that was modified to enable opening collapsed pagelist items when hovering over them during drag-and-drop. It's still not perfect but it's still much better than the original imo - please feel free to modify the code (see line 1035, "change" property of "sortOptions"). The file's location is "/wire/modules/Process/ProcessPageList/".

The main problem is that I check the next item after the placeholder (.PageListSortPlaceholder) so expand-collapse occurs only when moving the placholder above on item and not directly on it. I think this could be improved somehow.

The reason I uploaded this here is because AOS v068 contains a few lines of CSS that modifies the appearance of dragging. Of course it works without AOS too.

Here is what it looks now:

ProcessPageList.js

[adrian]

Beautifully done - @ryan needs to see this