Merge pull request #45245 from nextcloud/feat/split-user-columns

feat: Split display name and username columns
nextcloud · May 14, 2024 · 28564f9 · 28564f9
2 parents 0e29a79 + 67dcd33
commit 28564f9
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 16 deletions.
diff --git a/apps/settings/src/components/Users/UserListHeader.vue b/apps/settings/src/components/Users/UserListHeader.vue
@@ -35,7 +35,11 @@
 			<strong>
 				{{ t('settings', 'Display name') }}
 			</strong>
-			<span class="header__subtitle">
+		</th>
+		<th class="header__cell header__cell--username"
+			data-cy-user-list-header-username
+			scope="col">
+			<span>
 				{{ t('settings', 'Username') }}
 			</span>
 		</th>

diff --git a/apps/settings/src/components/Users/UserRow.vue b/apps/settings/src/components/Users/UserRow.vue
@@ -54,13 +54,14 @@
 					spellcheck="false"
 					@trailing-button-click="updateDisplayName" />
 			</template>
-			<template v-else>
-				<strong v-if="!isObfuscated"
-					:title="user.displayname?.length > 20 ? user.displayname : null">
-					{{ user.displayname }}
-				</strong>
-				<span class="row__subtitle">{{ user.id }}</span>
-			</template>
+			<strong v-else-if="!isObfuscated"
+				:title="user.displayname?.length > 20 ? user.displayname : null">
+				{{ user.displayname }}
+			</strong>
+		</td>
+
+		<td class="row__cell row__cell--username" data-cy-user-list-cell-username>
+			<span class="row__subtitle">{{ user.id }}</span>
 		</td>
 
 		<td data-cy-user-list-cell-password

diff --git a/apps/settings/src/components/Users/shared/styles.scss b/apps/settings/src/components/Users/shared/styles.scss
@@ -66,6 +66,10 @@
 			}
 		}
 
+		&--username {
+			padding-left: calc(var(--default-grid-baseline) * 3);
+		}
+
 		&--avatar {
 			min-width: var(--avatar-cell-width);
 			width: var(--avatar-cell-width);

diff --git a/dist/settings-users-3239.js b/dist/settings-users-3239.js
diff --git a/dist/settings-users-3239.js.map b/dist/settings-users-3239.js.map
diff --git a/dist/settings-vue-settings-apps-users-management.js b/dist/settings-vue-settings-apps-users-management.js
diff --git a/dist/settings-vue-settings-apps-users-management.js.map b/dist/settings-vue-settings-apps-users-management.js.map