Skip to content

Conversation

mickr777
Copy link
Contributor

@mickr777 mickr777 commented Jun 2, 2023

Find on some screens the progress bar at top is hard to see, Bar should only show when in progress

Animation

Find on some screens the progress bar at top of screen gets cut off
@blessedcoolant
Copy link
Collaborator

It's neat. What about when the parameters panel is hidden?

@mickr777
Copy link
Contributor Author

mickr777 commented Jun 2, 2023

It's neat. What about when the parameters panel is hidden?

the progress still shows under the small button
Animation2

@blessedcoolant
Copy link
Collaborator

blessedcoolant commented Jun 2, 2023

Okay. I like it. I'll let @psychedelicious chime in and we merge.

@blessedcoolant
Copy link
Collaborator

blessedcoolant commented Jun 2, 2023

One small change, can we make sure there's no UI shift? Right now the elements move. I think setting the progress bar to absolute overlay might work better.

In this case it might not be a huge deal coz the button goes inactive when in progress so theres no user interactivity anyway but ideally we want to avoid layout shifts.

@psychedelicious
Copy link
Collaborator

Hmm,I'm not sold. I don't mind changing the progress indicator, but the proposed change causes layout shifts which we should avoid.

Can you explain the problem with the current placement in a bit more detail?

An alternative to the invoke button's bottom edge might be using a CSS gradient to "fill up" the invoke button as progress increases.

@blessedcoolant
Copy link
Collaborator

I like the gradient idea better.

@mickr777
Copy link
Contributor Author

mickr777 commented Jun 2, 2023

changed it to not move the other ui components
Animation3

Animation4

@mickr777
Copy link
Contributor Author

mickr777 commented Jun 2, 2023

Can you explain the problem with the current placement in a bit more detail?

on the screen resolution I use and the zoom level the current progress bar is very small

@blessedcoolant
Copy link
Collaborator

@mickr777 @psychedelicious I pushed a new button style. Please give it a try and see how it feels.

firefox_m81RZN2zEj.mp4
firefox_8rNEeiBpLg.mp4

@mickr777
Copy link
Contributor Author

mickr777 commented Jun 2, 2023

@mickr777 @psychedelicious I pushed a new button style. Please give it a try and see how it feels.

that is what I was trying to aim for, but my knowledge isn't there, so could only get it how I did

@blessedcoolant
Copy link
Collaborator

@mickr777 @psychedelicious I pushed a new button style. Please give it a try and see how it feels.

that is what I was trying to aim for, but my knowledge isn't there, so could only get it how I did

All good. I just built upon what you did. I like it. If @psychedelicious thinks its good enough, we'll go for a merge.

@mickr777
Copy link
Contributor Author

mickr777 commented Jun 2, 2023

maybe it should be added to the node blend button

edit: nvm your already on that as I was typing

@blessedcoolant
Copy link
Collaborator

blessedcoolant commented Jun 2, 2023

maybe it should be added to the node blend button

edit: nvm your already on that as I was typing

Just how we roll. Haha. But yeah, added a temporary full component copy button for it. We'll probably generalize the Invoke button at some stage so we can reuse the component. But can worry about that when doing the Nodes UI.

@mickr777 mickr777 changed the title Add Progress bar under invoke Button Make Invoke Button also the progress bar Jun 2, 2023
@blessedcoolant blessedcoolant merged commit 8223136 into invoke-ai:main Jun 2, 2023
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.

3 participants