Revert "Fix table view"

This reverts commit cb852ef

Signed-off-by: julia.kirschenheuter <[email protected]>

Author: JuliaKirschenheuter

apps/settings/css/settings.css

@@ -1417,8 +1417,14 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			.userActions {
 				display: flex;
 				justify-content: flex-end;
+				position: sticky;
 				right: 0px;
 				min-width: 88px;
+				background-color: var(--color-main-background);
+			}
+
+			&.row--editable .userActions {
+				z-index: 10;
 			}
 
 			.subtitle {
@@ -1462,6 +1468,10 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			}
 
 			&:hover {
+				input:not([type='submit']):not(:focus):not(:active) {
+					border-color: var(--color-border) !important;
+				}
+
 				&:not(#grid-header) {
 					box-shadow: 5px 0 0 var(--color-primary-element) inset;
 				}
@@ -1471,7 +1481,8 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 				width: 100%;
 			}
 
-			> td,
+			> div,
+			> .displayName > form,
 			> form {
 				grid-row: 1;
 				display: inline-flex;

apps/settings/css/settings.css.map

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<table id="app-content"
+	<div id="app-content"
 		role="grid"
 		:aria-label="t('settings', 'User\'s table')"
 		class="user-list-grid"
@@ -154,9 +154,9 @@
 						:options="possibleManagers"
 						:placeholder="t('settings', 'Select user manager')"
 						class="multiselect-vue"
-						@search-change="searchUserManager"
 						label="displayname"
-						track-by="id">
+						track-by="id"
+						@search-change="searchUserManager">
 						<span slot="noResult">{{ t('settings', 'No results') }}</span>
 					</NcMultiselect>
 				</div>
@@ -170,95 +170,89 @@
 				</div>
 			</form>
 		</NcModal>
-		<tbody>
-			<tr id="grid-header"
-				:class="{'sticky': scrolled && !showConfig.showNewUserForm}"
-				class="row">
-				<th id="headerAvatar" class="avatar">
-					<span class="hidden-visually"> {{ t('settings', 'Avatar') }} </span>
-				</th>
-				<th id="headerName" class="name">
-					<div class="subtitle">
-						<strong>
-							{{ t('settings', 'Display name') }}
-						</strong>
-					</div>
-					{{ t('settings', 'Username') }}
-				</th>
-				<th id="headerPassword" class="password">
-					{{ t('settings', 'Password') }}
-				</th>
-				<th id="headerAddress" class="mailAddress">
-					{{ t('settings', 'Email') }}
-				</th>
-				<th id="headerGroups" class="groups">
-					{{ t('settings', 'Groups') }}
-				</th>
-				<th v-if="subAdminsGroups.length>0 && settings.isAdmin"
-					id="headerSubAdmins"
-					class="subadmins">
-					{{ t('settings', 'Group admin for') }}
-				</th>
-				<th id="headerQuota" class="quota">
-					{{ t('settings', 'Quota') }}
-				</th>
-				<th v-if="showConfig.showLanguages"
-					id="headerLanguages"
-					class="languages">
-					{{ t('settings', 'Language') }}
-				</th>
-
-				<th v-if="showConfig.showUserBackend || showConfig.showStoragePath"
-					class="headerUserBackend userBackend">
-					<div v-if="showConfig.showUserBackend" class="userBackend">
-						{{ t('settings', 'User backend') }}
-					</div>
-					<div v-if="showConfig.showStoragePath"
-						class="subtitle storageLocation">
-						{{ t('settings', 'Storage location') }}
-					</div>
-				</th>
-				<th v-if="showConfig.showLastLogin"
-					class="headerLastLogin lastLogin">
-					{{ t('settings', 'Last login') }}
-				</th>
-				<th id="headerManager" class="manager">
-					{{ t('settings', 'Manager') }}
-				</th>
-				<th class="userActions hidden-visually">
-					{{ t('settings', 'User actions') }}
-				</th>
-			</tr>
-
-			<user-row v-for="user in filteredUsers"
-				:key="user.id"
-				:external-actions="externalActions"
-				:groups="groups"
-				:languages="languages"
-				:quota-options="quotaOptions"
-				:settings="settings"
-				:show-config="showConfig"
-				:sub-admins-groups="subAdminsGroups"
-				:user="user"
-				:users="users"
-				:is-dark-theme="isDarkTheme" />
+		<div id="grid-header"
+			:class="{'sticky': scrolled && !showConfig.showNewUserForm}"
+			class="row">
+			<div id="headerAvatar" class="avatar" />
+			<div id="headerName" class="name">
+				<div class="subtitle">
+					<strong>
+						{{ t('settings', 'Display name') }}
+					</strong>
+				</div>
+				{{ t('settings', 'Username') }}
+			</div>
+			<div id="headerPassword" class="password">
+				{{ t('settings', 'Password') }}
+			</div>
+			<div id="headerAddress" class="mailAddress">
+				{{ t('settings', 'Email') }}
+			</div>
+			<div id="headerGroups" class="groups">
+				{{ t('settings', 'Groups') }}
+			</div>
+			<div v-if="subAdminsGroups.length>0 && settings.isAdmin"
+				id="headerSubAdmins"
+				class="subadmins">
+				{{ t('settings', 'Group admin for') }}
+			</div>
+			<div id="headerQuota" class="quota">
+				{{ t('settings', 'Quota') }}
+			</div>
+			<div v-if="showConfig.showLanguages"
+				id="headerLanguages"
+				class="languages">
+				{{ t('settings', 'Language') }}
+			</div>
 
-			<InfiniteLoading ref="infiniteLoading" @infinite="infiniteHandler">
-				<div slot="spinner">
-					<div class="users-icon-loading icon-loading" />
+			<div v-if="showConfig.showUserBackend || showConfig.showStoragePath"
+				class="headerUserBackend userBackend">
+				<div v-if="showConfig.showUserBackend" class="userBackend">
+					{{ t('settings', 'User backend') }}
 				</div>
-				<div slot="no-more">
-					<div class="users-list-end" />
+				<div v-if="showConfig.showStoragePath"
+					class="subtitle storageLocation">
+					{{ t('settings', 'Storage location') }}
 				</div>
-				<div slot="no-results">
-					<div id="emptycontent">
-						<div class="icon-contacts-dark" />
-						<h2>{{ t('settings', 'No users in here') }}</h2>
-					</div>
+			</div>
+			<div v-if="showConfig.showLastLogin"
+				class="headerLastLogin lastLogin">
+				{{ t('settings', 'Last login') }}
+			</div>
+			<div id="headerManager" class="manager">
+				{{ t('settings', 'Manager') }}
+			</div>
+			<div class="userActions" />
+		</div>
+
+		<user-row v-for="user in filteredUsers"
+			:key="user.id"
+			:external-actions="externalActions"
+			:groups="groups"
+			:languages="languages"
+			:quota-options="quotaOptions"
+			:settings="settings"
+			:show-config="showConfig"
+			:sub-admins-groups="subAdminsGroups"
+			:user="user"
+			:users="users"
+			:is-dark-theme="isDarkTheme" />
+
+		<InfiniteLoading ref="infiniteLoading" @infinite="infiniteHandler">
+			<div slot="spinner">
+				<div class="users-icon-loading icon-loading" />
+			</div>
+			<div slot="no-more">
+				<div class="users-list-end" />
+			</div>
+			<div slot="no-results">
+				<div id="emptycontent">
+					<div class="icon-contacts-dark" />
+					<h2>{{ t('settings', 'No users in here') }}</h2>
 				</div>
-			</InfiniteLoading>
-		</tbody>
-	</table>
+			</div>
+		</InfiniteLoading>
+	</div>
 </template>
 
 <script>
@@ -685,12 +679,4 @@ export default {
 		 * prevent it). */
 		width: 0;
 	}
-
-	#app-content tbody tr {
-		&:hover,
-		&:focus,
-		&:active {
-			background-color: var(--color-main-background);
-		}
-	}
 </style>