Merge pull request #7600 from nextcloud/new-user-button-to-sidebar

New user button to sidebar

1 files changed, 40 insertions, 15 deletions

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 451b9e733f2..18bc4efa783 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -137,7 +137,7 @@ input {
 }
 
 .personal-settings-setting-box input {
-	&[type="text"], &[type="email"], &[type="tel"], &[type="url"] {
+	&[type='text'], &[type='email'], &[type='tel'], &[type='url'] {
 		width: 100%;
 	}
 }
@@ -183,7 +183,7 @@ input {
 			}
 		}
 		> form span {
-			&[class^="icon-checkmark"], &[class^="icon-error"] {
+			&[class^='icon-checkmark'], &[class^='icon-error'] {
 				position: relative;
 				right: 8px;
 				top: -28px;
@@ -491,9 +491,12 @@ table.grid {
 	}
 }
 
-td {
+td, th {
 	&.name {
 		padding-left: .8em;
+		width: 10em;
+		min-width: 10em;
+		max-width: 10em;
 	}
 	&.password {
 		padding-left: .8em;
@@ -504,8 +507,12 @@ td {
 	&.displayName > img {
 		visibility: hidden;
 	}
-	&.password, &.displayName {
+	&.password,
+	&.displayName,
+	&.mailAddress {
 		width: 12em;
+		min-width: 12em;
+		max-width: 12em;
 		cursor: pointer;
 	}
 	&.mailAddress {
@@ -524,14 +531,14 @@ span.usersLastLoginTooltip {
 /* dropdowns will be relative to this element */
 #userlist {
 	position: relative;
-	.mailAddress, .storageLocation, .userBackend, .lastLogin {
+	.storageLocation, .userBackend, .lastLogin {
 		display: none;
 	}
 	th.name {
 		color: #000;
 	}
 	tr {
-		height: 51px;
+		height: 50px;
 	}
 	.mailAddress .loading-small {
 		width: 16px;
@@ -543,16 +550,17 @@ span.usersLastLoginTooltip {
 	.groupsListContainer.hidden {
 		display: none;
 	}
+	thead th,
+	thead tr {
+		z-index: 100;
+		background-color: $color-main-background;
+		position: sticky;
+		// positional attribute is required for position to take affect.
+		top: 0;
+	}
 }
 
-/* because of accessibility the name cell is <th> - therefore we enforce the black color */
-/* use same height as in files app */
 #newuser {
-	/* positioning fixes */
-	padding-left: 3px;
-	.groups {
-		display: inline;
-	}
 	.groupsListContainer.hidden {
 		display: none;
 	}
@@ -561,6 +569,24 @@ span.usersLastLoginTooltip {
 		position: relative;
 		top: -1px;
 	}
+	input {
+		&:not([type='submit']),
+		&:not([type='reset']) {
+			width: 100%;
+		}
+	}
+	.userActions input {
+		width: 44px;
+		height: 44px;
+		&.icon-close {
+			border: none;
+			background-color: initial;
+			opacity: .5;
+		}
+		&:hover {
+			opacity: 1;
+		}
+	}
 }
 
 tr:hover > td {
@@ -575,7 +601,6 @@ tr:hover > td {
 }
 
 td.userActions {
-	width: 44px;
 	.toggleUserActions {
 		width: 44px;
 		height: 44px;
@@ -834,7 +859,7 @@ span.version {
 	margin-bottom: 18px;
 }
 
-/* capitalize "Other" category */
+/* capitalize 'Other' category */
 
 #app-category-925 {
 	text-transform: capitalize;