Design fixes

- Gap between columns
- Click on icon more closes the menu
- Fixed select height
- Focus input on new user click
- Cursor fix on select

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

core/css/inputs.scss

@@ -633,7 +633,8 @@ input {
     &.multiselect--active {
         /* Opened: force display the input */
         input.multiselect__input {
-            opacity: 1 !important;
+			opacity: 1 !important;
+			cursor: text !important;
         }
     }
     &.multiselect--disabled,
@@ -648,7 +649,7 @@ input {
         cursor: pointer;
         position: relative;
         border-radius: 3px;
-        height: 38px;
+        height: 34px;
         /* tag wrapper */
         .multiselect__tags-wrap {
             align-items: center;
@@ -707,7 +708,9 @@ input {
             height: 100%;
             border: none;
             /* override hide to force show the placeholder */
-            display: block !important;
+			display: block !important;
+			/* only when not active */
+			cursor: pointer;
         }
     }
     /* results wrapper */

settings/css/settings.scss

@@ -1281,8 +1281,10 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 		grid-auto-rows: $grid-row-height;
 		grid-column-gap: 20px;
 		.row {
+			// TODO replace with css4 subgrid when available
 			display: grid;
 			grid-row-start: span 1;
+			grid-gap: 3px;
 			align-items: center;
 			/* let's define the column until storage path,
 			   what follows will be manually defined  */

settings/src/components/userList.vue

@@ -160,7 +160,7 @@ export default {
 				let disabledUsers = this.users.filter(user => user.enabled !== true);
 				if (disabledUsers.length===0 && this.$refs.infiniteLoading && this.$refs.infiniteLoading.isComplete) {
 					// disabled group is empty, redirection to all users
-					this.$router.push('users');
+					this.$router.push('/settings/users');
 					this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
 				}
 				return disabledUsers;

settings/src/components/userList/userRow.vue

@@ -73,7 +73,7 @@
 		</div>
 		<div class="userActions">
 			<div class="toggleUserActions" v-if="OC.currentUser !== user.id && user.id !== 'admin' && !loading.all">
-				<div class="icon-more" v-click-outside="hideMenu" @click="showMenu"></div>
+				<div class="icon-more" v-click-outside="hideMenu" @click="toggleMenu"></div>
 				<div class="popovermenu" :class="{ 'open': openedMenu }">
 					<popover-menu :menu="userActions" />
 				</div>
@@ -196,8 +196,8 @@ export default {
 	},
 	methods: {
 		/* MENU HANDLING */
-		showMenu() {
+		toggleMenu() {
-			this.openedMenu = true;
+			this.openedMenu = !this.openedMenu;
 		},
 		hideMenu() {
 			this.openedMenu = false;

settings/src/views/Users.vue

@@ -81,6 +81,14 @@ export default {
 		}
 	},
 	methods: {
+		toggleNewUserMenu() {
+			this.showConfig.showNewUserForm = !this.showConfig.showNewUserForm;
+			if (this.showConfig.showNewUserForm) {
+				Vue.nextTick(() => {
+					window.newusername.focus();
+				});
+			}
+		},
 		getLocalstorage(key) {
 			// force initialization
 			let localConfig = this.$localStorage.get(key);
@@ -287,7 +295,7 @@ export default {
 					id:'new-user-button',
 					text: t('settings','New user'),
 					icon: 'icon-add',
-					action: () => this.showConfig.showNewUserForm=!this.showConfig.showNewUserForm
+					action: this.toggleNewUserMenu
 				},
 				items: groups
 			}