Skip to content
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.

Already on GitHub? Sign in to your account

Jump to bottom

UI/UX for User Story: Data Detection Toggle #200

Closed
ryuntalan opened this issue Aug 15, 2020 · 0 comments · Fixed by #188
Closed

UI/UX for User Story: Data Detection Toggle #200

ryuntalan opened this issue Aug 15, 2020 · 0 comments · Fixed by #188
Assignees
@ryuntalan @kgoo124
Labels
design Design-related work (CSS styling, prototypes, UI/UX mockups)

Comments

@ryuntalan
Copy link
Member

Description

Here is the UI/UX for toggling on and off the data detection feature.
toggle

Images

Light Mode - Off
Light Mode Toolbar Off
Colors used for the toggle:

  • Data detection text: rgb(0,0,0, .54)
  • Toggle circle: #EEEEEE
  • Toggle background: #424242
  • Toggle off text: #FFFFFF

Light Mode - On
Light Mode Toolbar On
Colors used for the toggle:

  • Data detection text: #1976D2
  • Toggle circle: #EEEEEE
  • Toggle background: #1976D2
  • Toggle on text: #FFFFFF

Dark Mode - Off
Dark Mode Toolbar Off
Colors used for the toggle:

  • Data detection text: #FFFFFF
  • Toggle circle: #BDBDBD
  • Toggle background: #FFFFFF
  • Toggle off text: #000000

Dark Mode - On
Dark Mode Toolbar On
Colors used for the toggle:

  • Data detection text: #FFFFFF
  • Toggle circle: #BDBDBD
  • Toggle background: #1976D2
  • Toggle on text: #FFFFFF

SVG Icons

Data Type SVG Icons used in the gif
data type icons.zip

Related Issues

Related Issues: #171

Questions

Let me know if there are any questions!

Interactive Prototype

Prototype Link
@ryuntalan ryuntalan added the design Design-related work (CSS styling, prototypes, UI/UX mockups) label Aug 15, 2020
@ryuntalan ryuntalan pinned this issue Aug 15, 2020
@kgoo124 kgoo124 mentioned this issue Aug 17, 2020
Merged
3 tasks
@kgoo124 kgoo124 linked a pull request Aug 17, 2020 that will close this issue
Different cell editors for the body region #188
Merged
3 tasks
@kgoo124 kgoo124 closed this as completed Aug 17, 2020
@kgoo124 kgoo124 reopened this Aug 17, 2020
@kgoo124 kgoo124 closed this as completed Aug 24, 2020
@kgoo124 kgoo124 unpinned this issue Aug 25, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ryuntalan ryuntalan

@kgoo124 kgoo124

Labels
design Design-related work (CSS styling, prototypes, UI/UX mockups)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Different cell editors for the body region kgoo124/jupyterlab-tabular-data-editor
2 participants
@ryuntalan @kgoo124