Skip to content

Tighten up Workspace>Schedule section layout #2091

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ammario opened this issue Jun 6, 2022 · 22 comments
Closed

Tighten up Workspace>Schedule section layout #2091

ammario opened this issue Jun 6, 2022 · 22 comments
Assignees
Labels
design needed Request for more beauty

Comments

@ammario
Copy link
Member

ammario commented Jun 6, 2022

image

Context

@ammario
Copy link
Member Author

ammario commented Jun 7, 2022

This issue should be solved in tandem with #2141.

@BrunoQuaresma
Copy link
Collaborator

To solve this, I came up with some solutions:

  • Remove the status bar at all and use some tags for the most important info about the workspace: the owner, template, and status.
  • On hovering over the template name, the user can see the template info or if it is outdated, the outdated tooltip.
  • Group the workspace actions and show only one primary action.
  • Move the schedule to be a button that triggers a popover to show the details.

Schedule
Outdated
Workspace Page

I need to design the actions dropdown but I would like to receive early feedback.

@kylecarbs
Copy link
Member

I'm a big fan of this style. Only a single minor nit:

The "start / stopped" indicator should be a bit louder (maybe we merge it with the start/stop button itself somehow)? It seems like the status is difficult to parse.

@BrunoQuaresma
Copy link
Collaborator

@kylecarbs yes, I agree. I will play around with other statuses to see.

Figma link: https://www.figma.com/file/YIGBkXUcnRGz2ZKNmLaJQf/Coder-v2-Design?node-id=441%3A567

@Kira-Pilot
Copy link
Member

This seems like a big improvement! I really love how clean it looks. I think it's brilliant to combine the schedule stuff with the start button.
Some thoughts

  • for accessibility reasons, can we consider using dropdowns instead of popovers?
  • maybe we move the links to the top of the popovers/dropdowns so that the action is right at the top.

@BrunoQuaresma
Copy link
Collaborator

BrunoQuaresma commented Jun 28, 2022

@Kira-Pilot great concerns! I think the popover should always be accessible and should open when a user "focuses" the element as well and not only "hovering" so users using the keyboard could navigate/use it as well. What do you think? And by "popover" I want to say a "dropdown that has something else than links" 😆

@Kira-Pilot
Copy link
Member

@BrunoQuaresma thats exactly what I was getting at! Sounds perfect to me!

@johnstcn
Copy link
Member

Suggestion: when workspace is running AND has a deadline set, the stop time (or a countdown?) should remain visible.

@ammario
Copy link
Member Author

ammario commented Jun 29, 2022

@BrunoQuaresma the new design looks good!

  • "Start at" should be "Starts at"
  • "Shutdown" should be "Stops at" so it's consistent with "Starts at"
  • I agree with @johnstcn that showing the deadline or stop time without a hover would be ideal
  • Also: if we should the stop time, I think the bump stop time operation should be visible (perhaps as a button) by where we show the stop time

@BrunoQuaresma
Copy link
Collaborator

@ammario @johnstcn great suggestions. I'm going to work on these.

@BrunoQuaresma
Copy link
Collaborator

@ammario @johnstcn thoughts?
Schedule Inline Info

I also made a version using plus and minus instead of arrows. I like the arrow version but maybe it is a personal preference.
Screen Shot 2022-06-29 at 11 27 40

@johnstcn
Copy link
Member

johnstcn commented Jun 29, 2022

@BrunoQuaresma I think the 'plus' and 'minus' version is clearer than the 'up and down' version, personally :-)
But that looks great otherwise!

@ketang
Copy link
Contributor

ketang commented Jun 29, 2022

Would this also address #2716?

@ketang ketang closed this as completed Jun 29, 2022
@ketang ketang reopened this Jun 29, 2022
@ketang ketang reopened this Jun 29, 2022
@BrunoQuaresma
Copy link
Collaborator

@ketang yes, but I think the #2716 is solved by #2224

@BrunoQuaresma
Copy link
Collaborator

@ammario do you think the latest design is good enough? and any preferences about arrows or plus/minus?

After getting approval I think we can create two tickets:

  • Move all the workspace actions into the grouped button
  • Move the schedule to the new grouped button + popover

@ammario
Copy link
Member Author

ammario commented Jun 29, 2022

@BrunoQuaresma LGTM with +/- as Cian said.

When the workspace is off can it flip to showing "Starts at" instead? We would have to hide the bumpers in this case since there's no support for one-off changing start time.

@BrunoQuaresma
Copy link
Collaborator

BrunoQuaresma commented Jun 29, 2022

@tjcran how do you prefer to handle this:

  • Create the new two tickets mentioned previously as sub-tasks for this one and keep this one open
  • Create the new two tickets mentioning this ticket, and close it

@ammario
Copy link
Member Author

ammario commented Jun 29, 2022

@BrunoQuaresma what if when you clicked on the "Stops at" time or the "Starts at" time it opened up a time selector like so? Hopefully we could reuse the component on the edit schedule page too... Or maybe there's even a way we could do without the edit schedule page.

image

@BrunoQuaresma
Copy link
Collaborator

@ammario I think a time selector like this would not be possible because our "time selection" is a bit more complex. You don't define a date, you define a start time, the number of hours the workspace will be live, and days of the week. But to have an "inline edition" experience, we could try to make the form simpler and add it inside of a dropdown/popover.

@ketang
Copy link
Contributor

ketang commented Jun 29, 2022

I may not be representative of our users, but for time fields I find typing to be faster than using a picker. How about we see if people ask for a picker?

@tjcran
Copy link

tjcran commented Jun 29, 2022

@tjcran how do you prefer to handle this:

  • Create the new two tickets mentioned previously as sub-tasks for this one and keep this one open
  • Create the new two tickets mentioning this ticket, and close it

@BrunoQuaresma the second option!

johnstcn added a commit that referenced this issue Jun 30, 2022
@BrunoQuaresma BrunoQuaresma added design needed Request for more beauty and removed site Area: frontend dashboard needs grooming labels Jun 30, 2022
@BrunoQuaresma
Copy link
Collaborator

The design work is done and two tickets were created for the development part:

cc.: @tjcran

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design needed Request for more beauty
Projects
None yet
Development

No branches or pull requests

8 participants