Design update

[juliusknorr]

Tasks

• Server
  • PoC to check for potential blockers regarding scroll behaviour
  • Migrate server and files to new container layout ⚗️ Proof of concept: Redesign app-content #33568
    • overflow on body
    • Spacing on sides and bottom on mobile (potentially also on smaller screen, or make it smaller with an in-between breakpoint)
    • Set the background image on all page Implement new container layout nextcloud-libraries/nextcloud-vue#3091
    • Set background image on header
    • See if we want to make them opt-in (e.g. for not using them on dashboard or not yet compatible community apps)
  • Core styling requirements 🔢 Add css variables for blur background #33610
    • New css variable for transparent background color + blur filter
    • Copy image to core/img/ to cover disabled dashboard
  • Background image options
    • Move background settings from dashboard app to Appearance and accessibility settings #33733
    • Add direct link to "Appearance & accessibility" to user menu in the header bar - top right: Add accessibility entry in user menu #34069
  • Fallback for not ported apps not needed as we announce it as breaking add
  • Login page default background needs to switch from the "icons" background to the "clouds" background #33968
    • Theming "Login image" needs to be changed to "Background image" and taken as default for the login page as well as people’s background image – until they change it
  • Header icons don’t yet pick up the light/dark logic depending on the background image (light background images of the default set should make the heading icons go dark) Header icons need to invert to black/dark on specific preset background images (like the Dashboard does) #33969
  • New avatar styles #33735
    • Figure out a way to regenerate avatars
    • New style based on lighter color pallete
    • What about contacts which uses the same color palette iirc?
  • Move app menu to vue #33728 Current app indicator
    • Decided to switch to a small bar instread of the arrow
• Vue components
  • Smaller topics
    • Counter bubble 3️⃣2️⃣1️⃣ Colored app navigation counter nextcloud-libraries/nextcloud-vue#3054
    • Show app nav actions menu only for active/hover/focus: ☝️ Show app navigation actions menu only for active/hover/focus nextcloud-libraries/nextcloud-vue#3048
    • 📰 Update AppNavigationItem design nextcloud-libraries/nextcloud-vue#3056
  • Container layout Implement new container layout nextcloud-libraries/nextcloud-vue#3091
    • Content
    • AppNavigation
      • Nav semi-transparent: 🥛 Make app navigation semi-transparent nextcloud-libraries/nextcloud-vue#3047
      • Pill-rounded nav entries: 💊 Pill-rounded navigation entries nextcloud-libraries/nextcloud-vue#3049
    • AppContentList
      • ListItem Design update nextcloud-libraries/nextcloud-vue#3055
      • Bold first line (sender in Mail, contact name in Contacts, conversation name in Talk) – but keep it normal in single-line navigation like Files, Photos etc.
    • AppContent
      • Scroll container should be within the AppContent
    • AppSidebar
      • Sidebar should span full height if rendered besides a modal/viewer (e.g. in talk like it is with files already)
• Apps to upgrade components + testing + bug fixing
  • Hub
    • Files
    • Settings
    • Activity
    • Photos
  • Groupware
    • Calendar
    • Contacts
    • Mail
  • Office
    • Deck
  • Talk
  • Other
    • Collectives
• Special care for
  • Performance of blur effect
  • Sidebar collapsing on large screens
  • Sidebar collapsing on mobile
  • check Js interaction on scroll containers
  • Scroll bars should not cause a container content size change (e.g. https://caniuse.com/?search=overlay https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter)

Common app migration topics

• Sticky headers might need less top offset (50px before for the header bar, 0 now as the app-content is scrollable)

Potential follow up ideas

Out of scope for now as discussed

• Dynamic colors https://m3.material.io/theme-builder#/dynamic

Screenshots

[szaimen]

• Add direct link to "Appearance & accessibility" to user menu in the header bar - top right

Do we have the space for this there? Thinking about mobile compatibility...