Jump to content

AdminOnSteroids


tpr

Recommended Posts

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

aos-imageselect-titles.png

  • Like 2
Link to comment
Share on other sites

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:

Image field.jpg

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

Edit-Image-Modal.jpg

For File Fields:

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

ReplaceFile.jpg

Any thoughts?

  • Like 2
Link to comment
Share on other sites

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:

file-upload-replace.gif

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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?

  • Like 2
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

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:

aos-pagelistdnd.gif

ProcessPageList.js

  • Like 7
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...