Move users management to multi line

Signed-off-by: Greta Doci <gretadoci@gmail.com>

apps/settings/css/settings.scss

@@ -524,7 +524,6 @@ td, th {
 		visibility: hidden;
 	}
 	&.password,
-	&.displayName,
 	&.mailAddress {
 		min-width: 5em;
 		max-width: 12em;
@@ -705,6 +704,7 @@ span.version {
 	#searchresults {
 		display: none;
 	}
+
 }
 #apps-list.store {
 	.section {
@@ -1351,8 +1351,8 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 
 /* USERS LIST -------------------------------------------------------------- */
 #body-settings {
-	$grid-row-height: 46px;
-	$grid-col-min-width: 120px;
+	$grid-row-height: 60px;
+	$grid-col-min-width: 150px;
 	#app-content.user-list-grid {
 		display: grid;
 		grid-auto-columns: 1fr;
@@ -1376,7 +1376,6 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 
 			/* grid col width */
 			.name,
-			.displayName,
 			.password,
 			.mailAddress,
 			.languages,
@@ -1384,12 +1383,17 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			.userBackend,
 			.lastLogin {
 				min-width: $grid-col-min-width;
+				display: flex;
+				color:  var(--color-text-dark);
+				vertical-align: baseline;
 			}
 			.groups,
 			.subadmins,
 			.quota {
 				.multiselect {
 					min-width: $grid-col-min-width;
+					color: var(--color-text-dark);
+					vertical-align: baseline;
 				}
 			}
 			.obfuscated {
@@ -1399,6 +1403,10 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			.userActions {
 				min-width: 44px;
 			}
+			.subtitle {
+				color: var(--color-text-maxcontrast);
+				vertical-align: baseline;
+			}
 
 			/* various */
 			&#grid-header,
@@ -1427,16 +1435,23 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			&#grid-header {
 				color: var(--color-text-maxcontrast);
 				z-index: 60; /* above new-user */
+				border-bottom-width: thin;
 
 				#headerDisplayName,
 				#headerPassword,
 				#headerAddress,
 				#headerGroups,
 				#headerSubAdmins,
+				#theHeaderUserBackend,
+				#theHeaderLastLogin,
 				#headerQuota,
+				#theHeaderStorageLocation,
 				#headerLanguages {
 					/* Line up header text with column content for when there’s inputs */
 					padding-left: 7px;
+					text-transform: none;
+					color: var(--color-text-maxcontrast);
+					vertical-align: baseline;
 				}
 			}
 			&:hover {
@@ -1451,8 +1466,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			> form {
 				grid-row: 1;
 				display: inline-flex;
-				align-items: center;
-				color: var(--color-text);
+				color: var(--color-text-lighter);
 				position: relative;
 				> input:not(:focus):not(:active) {
 					border-color: transparent;
@@ -1478,7 +1492,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 					}
 				}
 				&.name,
-				&.storageLocation {
+				&.userBackend {
 					/* better multi-line visual */
 					line-height: 1.3em;
 					max-height: 100%;
@@ -1492,16 +1506,14 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 					-webkit-box-orient: vertical;
 				}
 				&.quota {
-                    .multiselect--active + progress {
-                        display: none;
-                    }
+					height: 44px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
 					progress {
-						position: absolute;
-						width: calc(100% - 4px); /* minus left and right */
-						left: 2px;
-						bottom: 2px;
+						width: 100%;
+						margin: 0 10px;
 						height: 3px;
-						z-index: 5; /* above multiselect */
 					}
 				}
 				.icon-confirm {
@@ -1520,16 +1532,22 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 					}
 				}
 				&.userActions {
+				  .action-item {
+					position: absolute;
+				  }
 					#newsubmit {
 						width: 100%;
 					}
 					.toggleUserActions {
 						position: relative;
+						display: block;
+						align-items: center;
 						.icon-more {
 							width: 44px;
 							height: 44px;
 							opacity: .5;
 							cursor: pointer;
+							margin-left: 40px;
 							&:hover {
 								opacity: .7;
 							}

apps/settings/src/components/AppList.vue

@@ -29,7 +29,9 @@
 					<button v-if="showUpdateAll"
 						id="app-list-update-all"
 						class="primary"
-						@click="updateAll">{{t('settings', 'Update all')}}</button>
+						@click="updateAll">
+						{{ t('settings', 'Update all') }}
+					</button>
 				</div>
 				<transition-group name="app-list" tag="div" class="apps-list-container">
 					<AppItem v-for="app in apps"

apps/settings/src/components/UserList.vue

@@ -22,13 +22,16 @@
 
 <template>
 	<div id="app-content" class="user-list-grid" @scroll.passive="onScroll">
-		<div id="grid-header" class="row" :class="{'sticky': scrolled && !showConfig.showNewUserForm}">
+		<div id="grid-header"
+			:class="{'sticky': scrolled && !showConfig.showNewUserForm}"
+			class="row">
 			<div id="headerAvatar" class="avatar" />
 			<div id="headerName" class="name">
 				{{ t('settings', 'Username') }}
-			</div>
-			<div id="headerDisplayName" class="displayName">
-				{{ t('settings', 'Display name') }}
+
+				<div class="subtitle">
+					{{ t('settings', 'Display name') }}
+				</div>
 			</div>
 			<div id="headerPassword" class="password">
 				{{ t('settings', 'Password') }}
@@ -52,99 +55,103 @@
 				class="languages">
 				{{ t('settings', 'Language') }}
 			</div>
-			<div v-if="showConfig.showStoragePath"
-				class="headerStorageLocation storageLocation">
-				{{ t('settings', 'Storage location') }}
-			</div>
-			<div v-if="showConfig.showUserBackend"
+
+			<div v-if="showConfig.showUserBackend || showConfig.showStoragePath"
 				class="headerUserBackend userBackend">
-				{{ t('settings', 'User backend') }}
+				<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>
 			</div>
 			<div v-if="showConfig.showLastLogin"
 				class="headerLastLogin lastLogin">
 				{{ t('settings', 'Last login') }}
 			</div>
+
 			<div class="userActions" />
 		</div>
 
 		<form v-show="showConfig.showNewUserForm"
 			id="new-user"
-			class="row"
-			:disabled="loading.all"
 			:class="{'sticky': scrolled && showConfig.showNewUserForm}"
+			:disabled="loading.all"
+			class="row"
 			@submit.prevent="createUser">
 			<div :class="loading.all?'icon-loading-small':'icon-add'" />
 			<div class="name">
 				<input id="newusername"
 					ref="newusername"
 					v-model="newUser.id"
-					type="text"
-					required
+					:disabled="settings.newUserGenerateUserID"
 					:placeholder="settings.newUserGenerateUserID
 						? t('settings', 'Will be autogenerated')
 						: t('settings', 'Username')"
-					name="username"
-					autocomplete="off"
 					autocapitalize="none"
+					autocomplete="off"
 					autocorrect="off"
+					name="username"
 					pattern="[a-zA-Z0-9 _\.@\-']+"
-					:disabled="settings.newUserGenerateUserID">
+					required
+					type="text">
 			</div>
 			<div class="displayName">
 				<input id="newdisplayname"
 					v-model="newUser.displayName"
-					type="text"
 					:placeholder="t('settings', 'Display name')"
-					name="displayname"
-					autocomplete="off"
 					autocapitalize="none"
-					autocorrect="off">
+					autocomplete="off"
+					autocorrect="off"
+					name="displayname"
+					type="text">
 			</div>
 			<div class="password">
 				<input id="newuserpassword"
 					ref="newuserpassword"
 					v-model="newUser.password"
-					type="password"
-					:required="newUser.mailAddress===''"
+					:minlength="minPasswordLength"
 					:placeholder="t('settings', 'Password')"
-					name="password"
-					autocomplete="new-password"
+					:required="newUser.mailAddress===''"
 					autocapitalize="none"
+					autocomplete="new-password"
 					autocorrect="off"
-					:minlength="minPasswordLength">
+					name="password"
+					type="password">
 			</div>
 			<div class="mailAddress">
 				<input id="newemail"
 					v-model="newUser.mailAddress"
-					type="email"
-					:required="newUser.password==='' || settings.newUserRequireEmail"
 					:placeholder="t('settings', 'Email')"
-					name="email"
-					autocomplete="off"
+					:required="newUser.password==='' || settings.newUserRequireEmail"
 					autocapitalize="none"
-					autocorrect="off">
+					autocomplete="off"
+					autocorrect="off"
+					name="email"
+					type="email">
 			</div>
 			<div class="groups">
 				<!-- hidden input trick for vanilla html5 form validation -->
 				<input v-if="!settings.isAdmin"
 					id="newgroups"
-					type="text"
+					:class="{'icon-loading-small': loading.groups}"
+					:required="!settings.isAdmin"
 					:value="newUser.groups"
 					tabindex="-1"
-					:required="!settings.isAdmin"
-					:class="{'icon-loading-small': loading.groups}">
+					type="text">
 				<Multiselect v-model="newUser.groups"
-					:options="canAddGroups"
+					:close-on-select="false"
 					:disabled="loading.groups||loading.all"
-					tag-placeholder="create"
+					:multiple="true"
+					:options="canAddGroups"
 					:placeholder="t('settings', 'Add user in group')"
+					:tag-width="60"
+					:taggable="true"
+					class="multiselect-vue"
 					label="name"
+					tag-placeholder="create"
 					track-by="id"
-					class="multiselect-vue"
-					:multiple="true"
-					:taggable="true"
-					:close-on-select="false"
-					:tag-width="60"
 					@tag="createGroup">
 					<!-- If user is not admin, he is a subadmin.
 						Subadmins can't create users outside their groups
@@ -152,63 +159,64 @@
 					<span slot="noResult">{{ t('settings', 'No results') }}</span>
 				</Multiselect>
 			</div>
-			<div v-if="subAdminsGroups.length>0 && settings.isAdmin" class="subadmins">
+			<div v-if="subAdminsGroups.length>0 && settings.isAdmin"
+				class="subadmins">
 				<Multiselect v-model="newUser.subAdminsGroups"
+					:close-on-select="false"
+					:multiple="true"
 					:options="subAdminsGroups"
 					:placeholder="t('settings', 'Set user as admin for')"
-					label="name"
-					track-by="id"
+					:tag-width="60"
 					class="multiselect-vue"
-					:multiple="true"
-					:close-on-select="false"
-					:tag-width="60">
+					label="name"
+					track-by="id">
 					<span slot="noResult">{{ t('settings', 'No results') }}</span>
 				</Multiselect>
 			</div>
 			<div class="quota">
 				<Multiselect v-model="newUser.quota"
+					:allow-empty="false"
 					:options="quotaOptions"
 					:placeholder="t('settings', 'Select user quota')"
+					:taggable="true"
+					class="multiselect-vue"
 					label="label"
 					track-by="id"
-					class="multiselect-vue"
-					:allow-empty="false"
-					:taggable="true"
 					@tag="validateQuota" />
 			</div>
 			<div v-if="showConfig.showLanguages" class="languages">
 				<Multiselect v-model="newUser.language"
+					:allow-empty="false"
 					:options="languages"
 					:placeholder="t('settings', 'Default language')"
-					label="name"
-					track-by="code"
 					class="multiselect-vue"
-					:allow-empty="false"
+					group-label="label"
 					group-values="languages"
-					group-label="label" />
+					label="name"
+					track-by="code" />
 			</div>
 			<div v-if="showConfig.showStoragePath" class="storageLocation" />
 			<div v-if="showConfig.showUserBackend" class="userBackend" />
 			<div v-if="showConfig.showLastLogin" class="lastLogin" />
 			<div class="userActions">
 				<input id="newsubmit"
-					type="submit"
+					:title="t('settings', 'Add a new user')"
 					class="button primary icon-checkmark-white has-tooltip"
-					value=""
-					:title="t('settings', 'Add a new user')">
+					type="submit"
+					value="">
 			</div>
 		</form>
 
 		<user-row v-for="(user, key) in filteredUsers"
 			:key="key"
-			:user="user"
+			:external-actions="externalActions"
+			:groups="groups"
+			:languages="languages"
+			:quota-options="quotaOptions"
 			:settings="settings"
 			:show-config="showConfig"
-			:groups="groups"
 			:sub-admins-groups="subAdminsGroups"
-			:quota-options="quotaOptions"
-			:languages="languages"
-			:external-actions="externalActions" />
+			:user="user" />
 		<InfiniteLoading ref="infiniteLoading" @infinite="infiniteHandler">
 			<div slot="spinner">
 				<div class="users-icon-loading icon-loading" />
@@ -328,7 +336,10 @@ export default {
 		},
 		quotaOptions() {
 			// convert the preset array into objects
-			let quotaPreset = this.settings.quotaPreset.reduce((acc, cur) => acc.concat({ id: cur, label: cur }), [])
+			let quotaPreset = this.settings.quotaPreset.reduce((acc, cur) => acc.concat({
+				id: cur,
+				label: cur
+			}), [])
 			// add default presets
 			quotaPreset.unshift(this.unlimitedQuota)
 			quotaPreset.unshift(this.defaultQuota)
@@ -377,9 +388,9 @@ export default {
 			// deleting the last user, reset the list
 			if (val === 0 && old === 1) {
 				this.$refs.infiniteLoading.stateChanger.reset()
-			// adding the first user, warn the infiniteLoader that
-			// the list is not empty anymore (we don't fetch the newly
-			// added user as we already have all the info we need)
+				// adding the first user, warn the infiniteLoader that
+				// the list is not empty anymore (we don't fetch the newly
+				// added user as we already have all the info we need)
 			} else if (val === 1 && old === 0) {
 				this.$refs.infiniteLoading.stateChanger.loaded()
 			}
@@ -437,7 +448,9 @@ export default {
 				group: this.selectedGroup !== 'disabled' ? this.selectedGroup : '',
 				search: this.searchQuery
 			})
-				.then((response) => { response ? $state.loaded() : $state.complete() })
+				.then((response) => {
+					response ? $state.loaded() : $state.complete()
+				})
 		},
 
 		/* SEARCH */
@@ -492,10 +505,10 @@ export default {
 					if (error.response && error.response.data && error.response.data.ocs && error.response.data.ocs.meta) {
 						const statuscode = error.response.data.ocs.meta.statuscode
 						if (statuscode === 102) {
-						// wrong username
+							// wrong username
 							this.$refs.newusername.focus()
 						} else if (statuscode === 107) {
-						// wrong password
+							// wrong password
 							this.$refs.newuserpassword.focus()
 						}
 					}
@@ -542,7 +555,7 @@ export default {
 		redirectIfDisabled() {
 			const allGroups = this.$store.getters.getGroups
 			if (this.selectedGroup === 'disabled'
-				&& allGroups.findIndex(group => group.id === 'disabled' && group.usercount === 0) > -1) {
+						&& allGroups.findIndex(group => group.id === 'disabled' && group.usercount === 0) > -1) {
 				// disabled group is empty, redirection to all users
 				this.$router.push({ name: 'users' })
 				this.$refs.infiniteLoading.stateChanger.reset()