8000 placeholders and empty states · Issue #332 · cylc/cylc-ui · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

placeholders and empty states #332

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.

Sign up for GitHub

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

A 8000 lready on GitHub? Sign in to your account

Jump to bottom
Open
8 tasks
oliver-sanders opened this issue Dec 15, 2019 · 3 comments
Open
8 tasks

placeholders and empty states #332

oliver-sanders opened this issue Dec 15, 2019 · 3 comments
Labels
design
Milestone
Pending

Comments

@oliver-sanders
Copy link
Member
oliver-sanders commented Dec 15, 2019 •
edited
Loading

Stand-in content for empty / null states to make users aware of the state (rather than just displaying a blank page).

Proposal to close the empty/loading components of #111

Modern UI design seems to have settled on a greyscale background image for empty states these days. Clear, concise and simple to implement.

I believe material design has built-in support.

Some examples of places where we need empty state placeholders and some ideas as to what they could look like:

placeholders

Missing placeholders:

  • Workflow: workflow stopped
  • Workflow: workflow does not exist (e.g. workflow deleted)
  • All view components: connecting/loading (spinner / skeleton)
  • All workflow components: no tasks matching filter
  • Workflow: network error (unable to get data)
  • Workflow: no active view
  • GScan: no workflow
  • GScan: no workflow matching filter

Pull requests welcome!
@oliver-sanders oliver-sanders added this to the 1.0 milestone Dec 15, 2019
This was referenced Dec 16, 2019
Open
Closed
@oliver-sanders oliver-sanders mentioned this issue Mar 16, 2020
Closed
This was referenced Sep 9, 2020
Merged
Closed
@kinow kinow mentioned this issue Jul 5, 2021
Merged
6 tasks
@kinow kinow modified the milestones: 1.0, 2.0 Sep 10, 2021
@oliver-sanders oliver-sanders modified the milestones: 2.0.0, Pending Jun 8, 2022
@oliver-sanders oliver-sanders added UX/UI User experience and interface improvements and removed UX/UI User experience and interface improvements labels Oct 17, 2022
@oliver-sanders oliver-sanders mentioned this issue Apr 16, 2024
Open
@jfrost-mo jfrost-mo mentioned this issue Sep 25, 2024
Open
@MetRonnie
Copy link
Member

Vuetify has a VEmptyState component that should make this easy

@oliver-sanders
Copy link
Member Author

I'm not quite sure what VEmptyState brings to the party, it's trivial to roll your own:

<div v-if="workflow.status === 'stopped'">
  <!-- placeholder -->
</div>
<div v-else>
   <!-- content -->
</div>

@MetRonnie
Copy link
Member

Yes but even trivialier using that component. No need to roll your own styles

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
design
Projects
None yet
Milestone
Pending
Development

No branches or pull requests
3 participants
@kinow @oliver-sanders @MetRonnie
0