Merge pull request #18818 from nextcloud/rethink_quota

change quota design

apps/settings/css/settings.scss

 				}
 
 				&.quota {
-					height: 44px;
-					display: flex;
-					align-items: center;
-					justify-content: center;
+					display: flex;;
+					justify-content: left;
+					white-space: nowrap;
+					position: relative;
 
 					progress {
-						width: 100%;
-						margin: 0 10px;
+						width: 150px;
+						margin-top: 35px;
 						height: 3px;
 					}
 				}

apps/settings/src/components/UserList/UserRowSimple.vue

 		<div v-if="subAdminsGroups.length > 0 && settings.isAdmin" class="subAdminsGroups">
 			{{ userSubAdminsGroupsLabels }}
 		</div>
-		<div v-tooltip.auto="usedSpace" class="quota">
-			<progress
-				class="quota-user-progress"
-				:class="{'warn': usedQuota > 80}"
-				:value="usedQuota"
-				max="100" />
+		<div class="userQuota">
+			<div class="quota">
+				{{ userQuota }} ({{ usedSpace }})
+				<progress
+					class="quota-user-progress"
+					:class="{'warn': usedQuota > 80}"
+					:value="usedQuota"
+					max="100" />
+			</div>
 		</div>
 		<div v-if="showConfig.showLanguages" class="languages">
 			{{ userLanguage.name }}
 		</div>
 
 		<div class="userActions">
-			<div v-if="canEditUser(user) && !loading.all" class="toggleUserActions">
+			<div v-if="canEdit && !loading.all" class="toggleUserActions">
 				<Actions>
 					<ActionButton icon="icon-rename" @click="toggleEdit">
 						{{ t('settings', 'Edit User') }}
 <script>
 import { PopoverMenu, Actions, ActionButton } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
+import { getCurrentUser } from '@nextcloud/auth'
 
 import UserRowMixin from '../../mixins/UserRowMixin'
 export default {
 			}
 			return t('settings', '{size} used', { size: OC.Util.humanFileSize(0) })
 		},
-		canEditUser() {
-			return (user) => this.settings.isAdmin || user.id !== OC.getCurrentUser().uid
+		canEdit() {
+			return getCurrentUser().uid !== this.user.id && this.user.id !== 'admin'
 		},
+		userQuota() {
+			if (this.user.quota.quota === 'none') {
+				return t('settings', 'Unlimited')
+			}
+			if (this.user.quota.quota >= 0) {
+				return OC.Util.humanFileSize(this.user.quota.quota)
+			}
+			return OC.Util.humanFileSize(0)
+		},
+
 	},
 	methods: {
 		hideMenu() {