Merge pull request #19533 from nextcloud/bugfix/noid/user-settings

Various user settings fixes

apps/settings/css/settings.scss

@@ -606,90 +606,6 @@ span.usersLastLoginTooltip {
 	white-space: nowrap;
 }
 
-/* dropdowns will be relative to this element */
-#userlist {
-	position: relative;
-
-	.storageLocation, .userBackend, .lastLogin {
-		display: none;
-	}
-
-	th.name {
-		color: #000;
-	}
-
-	tr {
-		height: 50px;
-	}
-
-	.mailAddress .loading-small {
-		width: 16px;
-		height: 16px;
-		margin-left: -26px;
-		position: relative;
-		top: 3px;
-	}
-
-	.groupsListContainer.hidden {
-		display: none;
-	}
-
-	thead th,
-	thead tr {
-		z-index: 100;
-		background-color: var(--color-main-background);
-		@include position('sticky');
-		// positional attribute is required for position to take affect.
-		top: 0;
-	}
-}
-
-#newuser {
-	.groupsListContainer.hidden {
-		display: none;
-	}
-
-	.multiselect {
-		min-width: 150px !important;
-		position: relative;
-		top: -1px;
-	}
-
-	input {
-		&:not([type='submit']),
-		&:not([type='reset']) {
-			width: 100%;
-		}
-	}
-
-	.userActions {
-		position: sticky;
-		right: 60px;
-		z-index: 20;
-	}
-
-	.userActions input {
-		width: 44px;
-		height: 44px;
-
-		&.icon-close {
-			border: none;
-			background-color: initial;
-			opacity: .5;
-		}
-
-		&:hover {
-			opacity: 1;
-		}
-	}
-}
-
-/* used to highlight a user row in red */
-
-#userlist tr.row-warning {
-	background-color: #FDD;
-}
-
 /* APPS */
 #app-content > svg.app-filter {
 	float: left;
@@ -1496,12 +1412,11 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 /* USERS LIST -------------------------------------------------------------- */
 #body-settings {
 	$grid-row-height: 60px;
-	$grid-col-min-width: 150px;
+	$grid-col-min-width: 160px;
+	overflow-x: scroll;
 
 	#app-content.user-list-grid {
 		display: grid;
-		grid-auto-columns: 1fr;
-		grid-auto-rows: $grid-row-height;
 		grid-column-gap: 20px;
 
 		.row {
@@ -1509,13 +1424,20 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			// fallback for ie11 no grid
 			display: flex;
 			display: grid;
+			min-height: $grid-row-height;
 			grid-row-start: span 1;
 			grid-gap: 3px;
 			align-items: center;
-			z-index: 0;
 			/* let's define the column until storage path,
 			   what follows will be manually defined  */
-			grid-template-columns: 44px minmax($grid-col-min-width + 30px, 1fr) repeat(auto-fit, minmax($grid-col-min-width, 1fr));
+			grid-template-columns:
+					44px
+					minmax($grid-col-min-width + 30px, 1fr) // username, displayname
+					minmax($grid-col-min-width, 1fr) // password
+					minmax($grid-col-min-width, 1fr) // email
+					minmax(1.5*$grid-col-min-width, 1fr) // groups
+					minmax(1.5*$grid-col-min-width, 1fr) // group admins
+					repeat(auto-fit, minmax($grid-col-min-width, 1fr));
 			border-bottom: var(--color-border) 1px solid;
 
 			&.disabled {
@@ -1531,16 +1453,20 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			.userBackend,
 			.lastLogin {
 				min-width: $grid-col-min-width;
-				display: flex;
+
 				color: var(--color-text-dark);
 				vertical-align: baseline;
+				text-overflow: ellipsis;
+				overflow: hidden;
 			}
 
 			.groups,
 			.subadmins,
 			.quota {
+				min-width: $grid-col-min-width;
+
 				.multiselect {
-					min-width: $grid-col-min-width;
+					width: 100%;
 					color: var(--color-text-dark);
 					vertical-align: baseline;
 				}
@@ -1552,10 +1478,12 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			}
 
 			.userActions {
-				min-width: 44px;
+				display: flex;
+				justify-content: flex-end;
 				position: sticky;
-				right: 40px;
+				right: 0px;
-				z-index: 109;
+				min-width: 88px;
+				background-color: var(--color-main-background);
 			}
 
 			.subtitle {
@@ -1628,12 +1556,15 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 				}
 			}
 
+			> form {
+				width: 100%;
+			}
+
 			> div,
 			> form {
 				grid-row: 1;
 				display: inline-flex;
 				color: var(--color-text-lighter);
-				position: relative;
 
 				> input:not(:focus):not(:active) {
 					border-color: transparent;
@@ -1711,9 +1642,8 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 				}
 
 				&.userActions {
-					.action-item {
+					display: flex;
-						position: absolute;
+					justify-content: flex-end;
-					}
 
 					#newsubmit {
 						width: 100%;
@@ -1721,15 +1651,15 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 
 					.toggleUserActions {
 						position: relative;
-						display: block;
+						display: flex;
 						align-items: center;
+						background-color: var(--color-main-background);
 
 						.icon-more {
 							width: 44px;
 							height: 44px;
 							opacity: .5;
 							cursor: pointer;
-							margin-left: 40px;
 
 							&:hover {
 								opacity: .7;

apps/settings/src/components/UserList.vue

@@ -575,3 +575,8 @@ export default {
 	},
 }
 </script>
+<style scoped>
+	.row::v-deep .multiselect__single {
+		z-index: auto !important;
+	}
+</style>

apps/settings/src/components/UserList/UserRow.vue

@@ -76,32 +76,35 @@
 				width="32">
 		</div>
 		<!-- dirty hack to ellipsis on two lines -->
-		<div class="displayName">
+		<div v-if="user.backendCapabilities.setDisplayName" class="displayName">
 			<form
 				:class="{'icon-loading-small': loading.displayName}"
 				class="displayName"
 				@submit.prevent="updateDisplayName">
-				<template v-if="user.backendCapabilities.setDisplayName">
+				<input
-					<input v-if="user.backendCapabilities.setDisplayName"
+					:id="'displayName'+user.id+rand"
-						:id="'displayName'+user.id+rand"
+					ref="displayName"
-						ref="displayName"
+					:disabled="loading.displayName||loading.all"
-						:disabled="loading.displayName||loading.all"
+					:value="user.displayname"
-						:value="user.displayname"
+					autocapitalize="off"
-						autocapitalize="off"
+					autocomplete="off"
-						autocomplete="new-password"
+					autocorrect="off"
-						autocorrect="off"
+					spellcheck="false"
-						spellcheck="false"
+					type="text">
-						type="text">
+				<input
-					<input v-if="user.backendCapabilities.setDisplayName"
+					class="icon-confirm"
-						class="icon-confirm"
+					type="submit"
-						type="submit"
+					value="">
-						value="">
-				</template>
-				<div v-else
-					v-tooltip.auto="t('settings', 'The backend does not support changing the display name')"
-					class="name" />
 			</form>
 		</div>
+		<div v-else class="name">
+			{{ user.id }}
+			<div class="displayName subtitle">
+				<div v-tooltip="user.displayname.length > 20 ? user.displayname : ''" class="cellText">
+					{{ user.displayname }}
+				</div>
+			</div>
+		</div>
 		<form v-if="settings.canChangePassword && user.backendCapabilities.setPassword"
 			:class="{'icon-loading-small': loading.password}"
 			class="password"
@@ -221,11 +224,12 @@
 						{{ t('settings', 'Done') }}
 					</ActionButton>
 				</Actions>
-				<div v-click-outside="hideMenu"
+				<div class="userPopoverMenuWrapper" v-click-outside="hideMenu">
-					class="icon-more"
+					<div class="icon-more"
-					@click="toggleMenu" />
+						@click="toggleMenu" />
-				<div :class="{ 'open': openedMenu }" class="popovermenu">
+					<div :class="{ 'open': openedMenu }" class="popovermenu">
-					<PopoverMenu :menu="userActions" />
+						<PopoverMenu :menu="userActions" />
+					</div>
 				</div>
 			</div>
 			<div :style="{opacity: feedbackMessage !== '' ? 1 : 0}"
@@ -684,4 +688,7 @@ export default {
 	.row--menu-opened {
 		z-index: 1 !important;
 	}
+	.row::v-deep .multiselect__single {
+		z-index: auto !important;
+	}
 </style>

apps/settings/src/components/UserList/UserRowSimple.vue

@@ -46,7 +46,7 @@
 			<div v-if="showConfig.showUserBackend" class="userBackend">
 				{{ user.backend }}
 			</div>
-			<div v-if="showConfig.showStoragePath" class="storageLocation subtitle">
+			<div v-if="showConfig.showStoragePath" v-tooltip="user.storageLocation" class="storageLocation subtitle">
 				{{ user.storageLocation }}
 			</div>
 		</div>
@@ -61,9 +61,11 @@
 						{{ t('settings', 'Edit User') }}
 					</ActionButton>
 				</Actions>
-				<div v-click-outside="hideMenu" class="icon-more" @click="$emit('toggleMenu')" />
+				<div class="userPopoverMenuWrapper">
-				<div class="popovermenu" :class="{ 'open': openedMenu }">
+					<div v-click-outside="hideMenu" class="icon-more" @click="$emit('toggleMenu')" />
-					<PopoverMenu :menu="userActions" />
+					<div class="popovermenu" :class="{ 'open': openedMenu }">
+						<PopoverMenu :menu="userActions" />
+					</div>
 				</div>
 			</div>
 			<div class="feedback" :style="{opacity: feedbackMessage !== '' ? 1 : 0}">