Settings to vuejs

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 171 insertions, 95 deletions

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 97767ce2f22..dd398f761f9 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -675,101 +675,6 @@ span.usersLastLoginTooltip {
 	}
 }
 
-tr:hover > td {
-	&.password > span, &.displayName > span, &.mailAddress > span {
-		margin: 0;
-		cursor: pointer;
-	}
-	&.password > img, &.displayName > img, &.mailAddress > img {
-		visibility: visible;
-		cursor: pointer;
-	}
-}
-
-td.userActions {
-	.toggleUserActions {
-		width: 44px;
-		height: 44px;
-		position: relative;
-		.action {
-			display: block;
-			padding: 14px;
-			opacity: 0.5;
-			.icon-more {
-				display: inline-block;
-			}
-			&:hover,
-			&:focus {
-				opacity: 1;
-			}
-		}
-	}
-}
-
-div.recoveryPassword {
-	left: 50em;
-	display: block;
-	position: absolute;
-	top: -1px;
-}
-
-input#recoveryPassword {
-	width: 15em;
-}
-
-#controls select.quota {
-	margin: 3px;
-	margin-right: 10px;
-	height: 37px;
-}
-
-#userlist td.quota {
-	position: relative;
-	width: 10em;
-	progress.quota-user-progress {
-		position: absolute;
-		width: calc(10em + 0px);
-		margin-top: -7px;
-		z-index: 0;
-		margin-left: 1px;
-		height: 3px;
-	}
-}
-
-select {
-	&.quota-user {
-		width: 10em;
-		height: 34px;
-		z-index: 50;
-		position: relative;
-	}
-	+ progress.quota-user-progress {
-		position: absolute;
-		width: calc(10em + 0px);
-		margin-top: -7px;
-		z-index: 0;
-		margin-left: 1px;
-		height: 3px;
-	}
-}
-
-input.userFilter {
-	width: 200px;
-}
-
-#newusergroups + input[type='submit'] {
-	position: relative;
-	top: -1px;
-}
-
-#headerGroups, #headerSubAdmins, #headerQuota {
-	padding-left: 18px;
-}
-
-#headerAvatar {
-	width: 32px;
-}
-
 /* used to highlight a user row in red */
 
 #userlist tr.row-warning {
@@ -1350,3 +1255,174 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 		margin-top: 22px;
 	}
 }
+
+
+/* USERS LIST -------------------------------------------------------------- */
+#body-settings {
+	#app-navigation {
+		/* Hack to override the javascript orderBy */
+		#usergrouplist > li {
+			order: 4;
+			&#_everyone {
+				order:1;
+			}
+			&#admin {
+				order:2;
+			}
+			&#_disabled {
+				order:3;
+			}
+		}
+	}
+	$grid-row-height: 46px;
+	#app-content.user-list-grid {
+		display: grid;
+		grid-auto-columns: 1fr;
+		grid-auto-rows: $grid-row-height;
+		grid-column-gap: 20px;
+		.row {
+			display: grid;
+			grid-row-start: span 1;
+			align-items: center;
+			/* let's define the column until storage path,
+			   what follows will be manually defined  */
+			grid-template-columns: 44px;
+			grid-auto-columns: min-content;
+			border-top: $color-border 1px solid;
+			.name,
+			.displayName,
+			.password {
+				width: 150px;
+			}
+			.mailAddress{
+				width: 200px;
+			}
+			.groups,
+			.subadmins,
+			.quota {
+				width: 170px;
+			}
+			.storageLocation {
+				width: 250px;
+			}
+			.userBackend,
+			.lastLogin,
+			.userActions {
+				width: 100px;
+			}
+			&#grid-header,
+			&#new-user {
+				position: sticky;
+				align-self: normal;
+				background-color: $color-main-background;
+				z-index: 55; /* above multiselect */
+				top: 0;
+				&.sticky {
+					box-shadow: 0 -2px 10px 1px $color-box-shadow;
+				}
+			}
+			&#grid-header {
+				color: nc-lighten($color-main-text, 60%);
+				z-index: 60; /* above new-user */
+			}
+			&#new-user {
+				top: $grid-row-height;
+			}
+			&:hover {
+				input:not([type='submit']):not(:focus):not(:active) {
+					border-color: nc-darken($color-main-background, 14%) !important;
+				}
+			}
+			> div,
+			> form {
+				grid-row: 1;
+				display: inline-flex;
+				align-items: center;
+				color: nc-lighten($color-main-text, 33%);
+				position: relative;
+				> input:not(:focus):not(:active) {
+					border-color: transparent;
+					cursor: pointer;
+				}
+				> input:focus, >input:active {
+					+ .icon-confirm {
+						display: block !important;
+					}
+				}
+				&:not(.userActions) > input:not([type='submit']) {
+					width: 100%;
+					min-width: 0;
+				}
+				&.quota {
+                    .multiselect--active + progress {
+                        display: none;
+                    }
+					progress {
+						position: absolute;
+						width: 160px;
+						left: 2px;
+						bottom: 2px;
+						height: 3px;
+					}
+				}
+				.icon-confirm {
+					width: 32px;
+					height: 32px;
+					flex: 0 0 32px;
+					cursor: pointer;
+					&:not(:active) {
+						display: none;
+					}
+				}
+				&.avatar {
+					height: 32px;
+					width: 32px;
+					margin: 6px;
+					img {
+						display: block;
+					}
+				}
+				.toggleUserActions {
+					position: relative;
+					.icon-more {
+						width: 44px;
+						height: 44px;
+						opacity: .5;
+						cursor: pointer;
+						:hover {
+							opacity: .7;
+						}
+					}
+				}
+				.v-select {
+					&.open .selected-tag-wrap {
+						display: none;
+					}
+					.dropdown-toggle .selected-tag {
+						padding-right: 5px;
+						.close {
+							/* no delete on tags*/
+							display: none;
+						}
+					}
+					.dropdown-menu li a .icon-add {
+						position: absolute;
+						width: 16px;
+						height: 16px;
+						opacity: .5;
+						left: 7px;
+					}
+				}
+			}
+		}
+		.infinite-loading-container {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.users-list-end {
+			opacity: .5;
+			user-select: none;
+		}
+	}
+}