Settings vue 2

Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>
nextcloud · Mar 19, 2018 · 67bdead · 67bdead
1 parent cd137a6
commit 67bdead
Show file tree

Hide file tree

Showing 21 changed files with 1,975 additions and 938 deletions.
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
@@ -595,101 +595,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 {
@@ -1249,3 +1154,110 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 		margin-top: 22px;
 	}
 }
+
+
+/* USERS LIST -------------------------------------------------------------- */
+#body-settings {
+	#app-content.user-list-grid {
+		display: grid;
+		grid-auto-columns: 1fr;
+		grid-auto-rows: 46px;
+		grid-column-gap: 20px;
+		.row {
+			display: grid;
+			grid-row-start: span 1;
+			align-items: center;
+			grid-template-columns: 44px repeat(3,150px) 200px repeat(3,170px) 200px 80px 100px 50px;
+			grid-auto-columns: 170px;
+			border-top: $color-border 1px solid;
+			&:nth-child(odd) {
+				background-color: nc-darken($color-main-background, 5%);
+			}
+			&#grid-header {
+				color: nc-lighten($color-main-text, 60%);
+			}
+			&:hover {
+				input:not([type='submit']):not(:focus):not(:active) {
+					border-color: nc-darken($color-main-background, 14%) !important;
+				}
+			}
+			> div {
+				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;
+					}
+				}
+				> input:not([type='submit']) {
+					width: 100%;
+				}
+				&.quota {
+                    .multiselect--active + progress {
+                        display: none;
+                    }
+					progress {
+						position: absolute;
+						width: 160px;
+						left: 2px;
+						bottom: 2px;
+						height: 3px;
+					}
+				}
+				.icon-confirm {
+					display: none;
+					width: 32px;
+					height: 32px;
+					flex: 0 0 32px;
+					cursor: pointer;
+				}
+				&.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;
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/settings/js/main.js b/settings/js/main.js
diff --git a/settings/package.json b/settings/package.json
@@ -12,8 +12,10 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "lodash": "^4.17.5",
     "vue": "^2.5.11",
     "vue-click-outside": "^1.0.7",
+    "vue-multiselect": "^2.0.8",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1",
     "vuex-router-sync": "^5.0.0"

diff --git a/settings/routes.php b/settings/routes.php
@@ -51,7 +51,7 @@
 		['name' => 'AppSettings#viewApps', 'url' => '/settings/apps', 'verb' => 'GET'],
 		['name' => 'AppSettings#listApps', 'url' => '/settings/apps/list', 'verb' => 'GET'],
 		['name' => 'SecuritySettings#trustedDomains', 'url' => '/settings/admin/security/trustedDomains', 'verb' => 'POST'],
-		['name' => 'Users#setDisplayName', 'url' => '/settings/users/{username}/displayName', 'verb' => 'POST'],
+		['name' => 'Users#setDisplayName', 'url' => '/settings/users/{id}/displayName', 'verb' => 'PUT'],
 		['name' => 'Users#setEMailAddress', 'url' => '/settings/users/{id}/mailAddress', 'verb' => 'PUT'],
 		['name' => 'Users#setUserSettings', 'url' => '/settings/users/{username}/settings', 'verb' => 'PUT'],
 		['name' => 'Users#getVerificationCode', 'url' => '/settings/users/{account}/verify', 'verb' => 'GET'],

diff --git a/settings/src/components/appNavigation.vue b/settings/src/components/appNavigation.vue
@@ -1,13 +1,16 @@
 <template>
 	<div id="app-navigation">
+		<div class="app-navigation-new" v-if="menu.new">
+			<button type="button" id="new-user-button" :class="menu.new.icon">{{menu.new.text}}</button>
+		</div>
 		<ul :id="menu.id">
 			<navigation-item v-for="(item, key) in menu.items" :item="item" :key="key" />
 		</ul>
 	</div>
 </template>
 
 <script>
-import navigationItem from './appNavigation/navigationItem'
+import navigationItem from './appNavigation/navigationItem';
 
 export default {
 	name: 'appNavigation',

diff --git a/settings/src/components/appNavigation/navigationItem.vue b/settings/src/components/appNavigation/navigationItem.vue
@@ -22,7 +22,7 @@
 
 				<!-- second action only two actions and no counter -->
 				<li v-else-if="item.utils.actions && item.utils.actions.length === 2 && !Number.isInteger(item.utils.counter)"
-					v-for="action in item.utils.actions"
+					v-for="action in item.utils.actions" :key="action.action"
 					class="app-navigation-entry-utils-menu-button">
 					<button :class="action.icon"></button>
 				</li>
@@ -50,9 +50,9 @@
 		<!-- edit entry -->
 		<div class="app-navigation-entry-edit" v-if="item.edit">
 			<form>
-				<input type="text" value="Folder entry">
-				<input type="submit" value="" class="icon-close">
-				<input type="submit" value="" class="icon-checkmark">
+				<input type="text" v-model="item.text">
+				<input type="submit" value="" class="icon-confirm">
+				<input type="submit" value="" class="icon-close" @click.stop.prevent="cancelEdit">
 			</form>
 		</div>
 
@@ -64,9 +64,9 @@
 </template>
 
 <script>
-import popoverMenu from '../popoverMenu'
-import ClickOutside from 'vue-click-outside'
-import Vue from 'vue'
+import popoverMenu from '../popoverMenu';
+import ClickOutside from 'vue-click-outside';
+import Vue from 'vue';
 
 export default {
 	name: 'navigationItem',
@@ -93,11 +93,16 @@ export default {
 			// if item.opened isn't set, Vue won't trigger view updates https://vuejs.org/v2/api/#Vue-set
 			// ternary is here to detect the undefined state of item.opened
 			Vue.set(this.item, 'opened', this.item.opened ? !this.item.opened : true);
+		},
+		cancelEdit () {
+			// remove the editing class
+			if (Array.isArray(this.item.classes))
+				this.item.classes = this.item.classes.filter(item => item !== 'editing');
 		}
 	},
 	mounted () {
 		// prevent click outside event with popupItem.
-		this.popupItem = this.$el
+		this.popupItem = this.$el;
 	},
 }
 </script>
diff --git a/settings/src/components/popoverMenu.vue b/settings/src/components/popoverMenu.vue
@@ -1,22 +1,18 @@
 <template>
 	<ul>
-		<li v-for="(item, key) in menu" :key="key">
-			<a v-if="item.href" :href="(item.href) ? item.href : '#' ">
-				<span :class="item.icon"></span>
-				<span>{{item.text}}</span>
-			</a>
-			<button v-else class="menuitem">
-				<span :class="item.icon"></span>
-				<span>{{item.text}}</span>
-			</button>
-		</li>
+		<popover-item v-for="(item, key) in menu" :item="item" :key="key" />
 	</ul>
 </template>
 
 
 <script>
+import popoverItem from './popoverMenu/popoverItem';
+
 export default {
 	name: 'popoverMenu',
-	props: ['menu']
+	props: ['menu'],
+	components: {
+		popoverItem
+	}
 }
 </script>
diff --git a/settings/src/components/popoverMenu/popoverItem.vue b/settings/src/components/popoverMenu/popoverItem.vue
@@ -0,0 +1,23 @@
+<template>
+	<li>
+		<a @click="dispatchToStore" v-if="item.href" :href="(item.href) ? item.href : '#' ">
+			<span :class="item.icon"></span>
+			<span>{{item.text}}</span>
+		</a>
+		<button @click="dispatchToStore(item.action)" v-else>
+			<span :class="item.icon"></span>
+			<span>{{item.text}}</span>
+		</button>
+	</li>
+</template>
+
+<script>
+export default {
+	props: ['item'],
+	methods: {
+		dispatchToStore () {
+			this.$store.dispatch(this.item.action, this.item.data);
+		}
+	}
+}
+</script>