feat(settings): Rework personal info into a sectioned single-column layout#61358
feat(settings): Rework personal info into a sectioned single-column layout#61358nfebe wants to merge 2 commits into
Conversation
…ayout Personal info is reorganized into clear sections in a single column instead of a multi-column grid of separately mounted widgets, with fields adopting a consistent modern look in line with the settings redesign. Signed-off-by: nfebe <fenn25.fn@gmail.com>
…over The per-field privacy control now sets both profile visibility and federation scope in one popover, replacing the separate visibility section. Signed-off-by: nfebe <fenn25.fn@gmail.com>
nfebe
requested review from
CarlSchwan,
artonge and
leftybournes
and removed request for
a team
pringelmann
left a comment
pringelmann
left a comment
There was a problem hiding this comment.
Good overall! Left some comments, and two general points:
- Would be nice to get these changes covered by tests. I know we didn't have any to begin with, but this might be a good opportunity to add some. Even just getting an LLM to write tests that cover the critical happy paths.
- The max width of the form inputs feels a bit too wide. Maybe set the cap a bit lower? Just my opinion :) cc @kra-mo
| import { loadState } from '@nextcloud/initial-state' | ||
| import HeaderBar from '../shared/HeaderBar.vue' | ||
| import EditProfileAnchorLink from './EditProfileAnchorLink.vue' | ||
| import ProfileCheckbox from './ProfileCheckbox.vue' |
There was a problem hiding this comment.
Can we also get rid of ProfileCheckbox and EditProfileAnchorLink?
| .property__helper-text-message { | ||
| padding: 4px 0; | ||
| &__scope { | ||
| flex: 0 0 44px; |
There was a problem hiding this comment.
Lots of hard-coded clickable area sizes (44px, 44px + 8px gap, etc.)
Can we replace/compute these with var(--default-clickable-area) where applicable?
kra-mo
left a comment
kra-mo
left a comment
There was a problem hiding this comment.
+963
-1,311Neat :D
As @pringelmann said, it is a bit too wide, but also, it should be center-aligned instead of left-aligned.
Otherwise, looks good from the design side!
|
Although, are the vertical lines everywhere a video compression glitch or are there just separator lines in a bunch of places? If there are, they are not needed. The layout is quite clear without them already. |
|
Oh but actually, I forgot that according the original mockup, "Language & locale" and "Profile & contact" should be two separate pages, replacing "Personal info". |
| </NcPopover> | ||
| </template> | ||
|
|
||
| <script> |
There was a problem hiding this comment.
should be at least lang="ts" better directly script setup lang="ts" to prevent us from having to refactor all of this to enabled vapor mode.
There was a problem hiding this comment.
Agree with Laura’s and Peter’s review on the width, and also on the center-alignment.
Important to note about the center alignment is that it shouldn’t center in the app-content on the right, but generally based on the viewport. So it should be nicely centered below the search bar in the header.
And as per discussion with @kra-mo, it would be best to put layouting logic like that in the components, because this will be the case for most or all settings sections.
5 participants
Personal info is reorganized into clear sections in a single column instead of a multi-column grid of separately mounted widgets, with fields adopting a consistent modern look in line with the settings redesign.
Resolves: #57008
Before
After
Screencast.From.2026-06-16.22-51-29.webm