InvokeAI icon indicating copy to clipboard operation
InvokeAI copied to clipboard

[enhancement]: Two UI enhancements

Open mcbexx opened this issue 1 year ago • 2 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

Contact Details

No response

What should this feature add?

Two suggestions for UI enhancements, one a minor optimization, the other more functional:

a) in Queue view, please move the "Cancel item" and "Cancel batch" buttons of the expanded item view from the right to the left, closer to the other button elements (Resume, Prune, Pause, Clear) at the upper left corner.

I find myself often needing to cancel batches and the additional mouse movement (usually I need to "prune" the old outputs to get to the pending jobs, expand one job of the current batch and then have to move across the screen to cancel). While a minor issue, I find myself being e teeny-tiny bit annoyed everytime I run into it (it becomes especially apparent on widescreen monitors).

b) In the info view, the two < > arrows for switching to the previous/next image in the board overlap with recall parameters, effectively blocking access to some of the little "reuse this item" curved arrow icons, therefore defeating their purpose:

firefox_rBO64cStDS

Clicking will naturally switch to the previous image.

Possible solutions:

  • Add identation/margin for the Recall parameter text to avoid overlap
  • Move the <> as buttons to the top left, to the right of the buttons for "Display progress images" and "Info". Since the keyboard arrows also work for navigation in info view, the UI navigation elements do not necessarily need to be as prominent. I am aware that this ironically could involve increased mouse movement (see point a)), so adding identation for the recall parameters, while potentially less visually pleasing, is the more ergonomic option.

Alternatives

No response

Additional Content

No response

mcbexx avatar May 31 '24 13:05 mcbexx

Workaround I sometimes use for problem (b): Hit Ctrl-+ or Ctrl-- (or whatever on your system) to change the size of the text, which at the very least mixes things up some so you have a better chance of the thing you want not being overshadowed by the arrows. It's a hack, and the problem remains a problem; just giving you a possible stopgap.

clsn avatar Jun 14 '24 18:06 clsn

I usually just change the width of the right side panel until the "recall" arrow I want to access shifts away from under the caret, so it's not a critical issue, just a low priority UI fix.

mcbexx avatar Jun 22 '24 16:06 mcbexx

I use these custom styles as a workaround for the second point:

/* Hides previous and next buttons that are placed over the content. */
#main-panel button[aria-label="Previous Image"],
#main-panel button[aria-label="Next Image"] {
    display: none;
}

/* Add padding to the info panel to prevent side menus from masking part of the content. */
#main-panel .css-ogrerw {
    padding-left: 30px;
    padding-right: 30px;
}

Darathor avatar Nov 03 '24 18:11 Darathor