Design update

[juliusknorr]

Tasks

• [ ] Server
  • [x] PoC to check for potential blockers regarding scroll behaviour
  • [x] Migrate server and files to new container layout https://github.com/nextcloud/server/pull/33568
    • [x] overflow on body
    • [x] Spacing on sides and bottom on mobile (potentially also on smaller screen, or make it smaller with an in-between breakpoint)
    • [x] Set the background image on all page https://github.com/nextcloud/nextcloud-vue/pull/3091
    • [x] Set background image on header
    • [x] See if we want to make them opt-in (e.g. for not using them on dashboard or not yet compatible community apps)
  • [x] Core styling requirements https://github.com/nextcloud/server/pull/33610
    • [x] New css variable for transparent background color + blur filter
    • [x] Copy image to core/img/ to cover disabled dashboard
  • [x] Background image options
    • [x] https://github.com/nextcloud/server/pull/33733
    • [x] Add direct link to "Appearance & accessibility" to user menu in the header bar - top right: https://github.com/nextcloud/server/pull/34069
  • [ ] Fallback for not ported apps not needed as we announce it as breaking add
  • [x] #33968
    • [x] 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) https://github.com/nextcloud/server/issues/33969
  • [x] https://github.com/nextcloud/server/issues/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?
  • [x] https://github.com/nextcloud/server/pull/33728 Current app indicator
    • [ ] Decided to switch to a small bar instread of the arrow
• [ ] Vue components
  • [x] Smaller topics
    • [x] Counter bubble https://github.com/nextcloud/nextcloud-vue/issues/3054
    • [x] Show app nav actions menu only for active/hover/focus: https://github.com/nextcloud/nextcloud-vue/issues/3048
    • [x] https://github.com/nextcloud/nextcloud-vue/pull/3056
  • [x] Container layout https://github.com/nextcloud/nextcloud-vue/pull/3091
    • [x] Content
    • [x] AppNavigation
      • [x] Nav semi-transparent: https://github.com/nextcloud/nextcloud-vue/issues/3047
      • [x] Pill-rounded nav entries: https://github.com/nextcloud/nextcloud-vue/issues/3049
    • [x] AppContentList
      • [x] https://github.com/nextcloud/nextcloud-vue/pull/3055
      • [x] 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.
    • [x] AppContent
      • [x] Scroll container should be within the AppContent
    • [x] AppSidebar
      • [x] 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
    • [x] Files
    • [x] Settings
    • [x] Activity
    • [x] Photos
  • [ ] Groupware
    • [ ] Calendar
    • [ ] Contacts
    • [x] Mail
  • [ ] Office
    • [x] Deck
  • [x] Talk
  • [ ] Other
    • [x] Collectives
• [ ] Special care for
  • [x] 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...

[PVince81]

• [x] BUG: https://github.com/nextcloud/server/issues/33925

[jancborchardt]

• [x] Accessibility BUG: https://github.com/nextcloud/nextcloud-vue/issues/3198

[szaimen]

BTW, can we close this? I think almost everything is done and we should rather create new issues for the remaining small things, imho...