pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

URL: http://github.com/easydiffusion/easydiffusion/pull/1410

s-be6017ec12798e73.css" /> Have +/- for collapsible task entries by JeLuF · Pull Request #1410 · easydiffusion/easydiffusion · GitHub
Skip to content

Have +/- for collapsible task entries - #1410

Open
JeLuF wants to merge 4 commits into
easydiffusion:betafrom
JeLuF:expand
Open

Have +/- for collapsible task entries#1410
JeLuF wants to merge 4 commits into
easydiffusion:betafrom
JeLuF:expand

Conversation

@JeLuF

@JeLuF JeLuF commented Jul 12, 2023

Copy link
Copy Markdown
Contributor

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
    image

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

Copy link
Copy Markdown
Contributor

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

JeLuF commented Jul 26, 2023

Copy link
Copy Markdown
Contributor Author

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

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

@cmdrgrunt

Copy link
Copy Markdown
Contributor

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:

ED_grab_bar_example

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

Hakorr commented Jul 28, 2023

Copy link
Copy Markdown
Contributor

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

JeLuF commented Jul 29, 2023

Copy link
Copy Markdown
Contributor Author

Fontawesome has these 4 grip icons:
image

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

This is the SVG file we currently use: grip Download

@Hakorr

Hakorr commented Jul 29, 2023

Copy link
Copy Markdown
Contributor

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

@JeLuF

JeLuF commented Jul 29, 2023

Copy link
Copy Markdown
Contributor Author

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

arrows-up-down

image

up-down

image

sort

image

right-left, transform: rotate(90deg)

image

@Hakorr

Hakorr commented Jul 29, 2023

Copy link
Copy Markdown
Contributor

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

JeLuF commented Jul 29, 2023

Copy link
Copy Markdown
Contributor Author

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

Opacity 0.3, sort
image

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.

@Hakorr

Hakorr commented Jul 29, 2023

Copy link
Copy Markdown
Contributor

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

JeLuF commented Aug 15, 2023

Copy link
Copy Markdown
Contributor Author

Implemented the "Sort" icon

@codeCraft-Ritik codeCraft-Ritik left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! UI feels more intuitive 👍
Just noting the plugin compatibility impact.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

pFad - Phonifier reborn

Pfad - The Proxy pFad © 2024 Your Company Name. All rights reserved.





Check this box to remove all script contents from the fetched content.



Check this box to remove all images from the fetched content.


Check this box to remove all CSS styles from the fetched content.


Check this box to keep images inefficiently compressed and original size.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy