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

🥛 Make app navigation semi-transparent #3047

Closed
ChristophWurst opened this issue Aug 16, 2022 · 0 comments · Fixed by #3057
Closed

🥛 Make app navigation semi-transparent #3047

ChristophWurst opened this issue Aug 16, 2022 · 0 comments · Fixed by #3057
Assignees
@GretaD
Labels
2. developing Work in progress accessibility Making sure we design for the widest range of people possible, including those who have disabilities design Design, UX, interface and interaction design enhancement New feature or request feature: app-navigation Related to the app-navigation component

Comments

@ChristophWurst
Copy link
Contributor

ChristophWurst commented Aug 16, 2022 •
edited by jancborchardt
Loading

As per the mockups

Bildschirmfoto vom 2022-08-16 12-58-35

the app navigation component should become semi-transparent and let the background image show through with a blur.

Specification

  • 80% opaque white with 10px blur, like in Dashboard. Code: background-color: var(--color-background-translucent); -webkit-backdrop-filter: var(--background-blur); backdrop-filter: var(--background-blur);
  • AppNavigationNew gets our Nextcloud fade, looks nice and clicky
  • WCAG AA: Contrast of secondary text in the navigation works after darkening it to 5c5c5c
  • WCAG AAA: Just like for Dashboard, the high contrast theme should make the navigation background fully opaque and the secondary text color also color-main-text.
@ChristophWurst ChristophWurst added enhancement New feature or request 1. to develop Accepted and waiting to be taken care of feature: app-navigation Related to the app-navigation component design Design, UX, interface and interaction design accessibility Making sure we design for the widest range of people possible, including those who have disabilities labels Aug 16, 2022
@jancborchardt jancborchardt changed the title Make app navigation opaque Make app navigation semi-transparent Aug 16, 2022
@jancborchardt jancborchardt moved this to 📄 To do (5-20 entries) in 🖍 Design team Aug 16, 2022
@ChristophWurst ChristophWurst moved this to 🏗️ In progress in 💌 📅 👥 Groupware team Aug 17, 2022
@GretaD GretaD mentioned this issue Aug 17, 2022
Merged
2 tasks
@ChristophWurst ChristophWurst added 2. developing Work in progress and removed 1. to develop Accepted and waiting to be taken care of labels Aug 18, 2022
@AndyScherzinger AndyScherzinger changed the title Make app navigation semi-transparent 🥛 Make app navigation semi-transparent Aug 18, 2022
Repository owner moved this from 🏗️ In progress to ☑️ Done in 💌 📅 👥 Groupware team Aug 26, 2022
Repository owner moved this from 📄 To do (5-20 entries) to ☑️ Done in 🖍 Design team Aug 26, 2022
@juliusknorr juliusknorr mentioned this issue Aug 29, 2022
Closed
64 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@GretaD GretaD

Labels
2. developing Work in progress accessibility Making sure we design for the widest range of people possible, including those who have disabilities design Design, UX, interface and interaction design enhancement New feature or request feature: app-navigation Related to the app-navigation component
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

🥛 Make app navigation semi-transparent nextcloud-libraries/nextcloud-vue
2 participants
@ChristophWurst @GretaD