Have +/- for collapsible task entries

[JeLuF]

What is changed

• Adds the +/- symbols known from the negative prompt or the image settings
• moves the drag handle to the right side
• moves the "Use settings" and "Stop/Remove" buttons down to the "outputMsg" line
  

Why is this changed

Users were often surprised that their images disappeared after accidentally clicking on the taskEntry header (e.g. when copying the prompt)

Side effects

This change probably breaks plugins that rely on the structure of the taskEntry

Alternatives

• Add Plugin API to add buttons to the taskEntry
• Redesign the taskEntry HTML to use CSS grid and provide a cleaner access to the elements in the layout

[cmdrgrunt]

Something to consider, the six square icon for dragging the task initially confused me when I first started using the distribution, because I thought it had something to do with a gallery view or how multiple tasks were organized. It might be more associative if the drag bar icon be considered changed to something like a triple horizontal bar icon which resonates more like a grip area, the triple bar also indicates a stack, which would familiarly indicate to the user the ability to drag a task within the queue stack.

[JeLuF]

The six dot icon is used in other applications as grip:

The horizontal three bar logo (known as hamburger menu) is generally used for menus, as can be seen in the top left corner of this page:

[cmdrgrunt]

I agree, and those examples you provided look better I think. on my system currently the six dots look more like six rectangles. Here's what I see:

It might help to reduce the thickness/stroke of the dots so they look similar to your example since they tend to merge and look like little rectangles which to me made me think of a sorting or view change at first..

And of course, none of this is to disparage, I appreciate the UX work you are doing and only want to be constructive so you have additional feedback to base your own decisions on :)

[Hakorr]

It might help to reduce the thickness/stroke of the dots so they look similar to your example since they tend to merge and look like little rectangles which to me made me think of a sorting or view change at first.

I agree with this, I too initially thought it was a button to open a gallery/grid view of some sort.

The icon is currently 6 boxes, not 6 dots, at least on my browser as well.

[JeLuF]

Fontawesome has these 4 grip icons:

For me, the grip-lines don't work too well:

This is the SVG file we currently use: Download

[Hakorr]

I agree, the grip one is better than the grip-lines.

[JeLuF]

Would it help to give up the "grip" metapher and to use arrows instead?

arrows-up-down

up-down

sort

right-left, transform: rotate(90deg)

[Hakorr]

Fontawesome does have a grip icon which is dotted and has tinier dots, however that is a pro feature, so can't be used I guess.

Does the grip allow the user to do anything else than sort the queue items? If not, then I think the sort icon would perfectly communicate its usage. If the grip offers more functionality, then a sort icon might not be suitable.

I think I'd also change its opacity a bit. It doesn't need to be as apparent as the title next to it. Reducing the opacity could help reduce visual clutter. Maybe 0.25 opacity and on hover 1?

[JeLuF]

The grip can only be used to drag&drop the tasks up and down.

Opacity 0.3, sort

Increasing the opacity to 1 on hover interferes with the change of the pointer to the "move" cursor, which covers most of the icon.

[Hakorr]

Increasing the opacity to 1 on hover interferes with the change of the pointer to the "move" image cursor, which covers most of the icon.

Oh, scratch that, then.

Honestly, it doesn't really matter which icon it is. The sort icon isn't perfect as well: some users might misunderstand those arrows for buttons, however they'll quickly learn it, just like with the grip icon.

Probably 0.0001% of users care about which icon it is, so take no pressure, lol. Nobody has seemed to complain about the icon before, so maybe the grip icon has worked fine, and with this opacity change, could look less like a button to something? If it ain't broke, don't fix it, eh?

[JeLuF]

Implemented the "Sort" icon