fix: Make circle members visible again by moving them out of the modal

Signed-off-by: Julius Knorr <jus@bitgrid.net>

src/components/CircleDetails.vue

@@ -72,41 +72,7 @@
 				@update:value="onDescriptionChangeDebounce" />
 		</section>
 
-		<section v-if="circle.isMember" class="circle-details-section">
-			<ContentHeading>
-				{{ t('contacts', 'Members') }}
-			</ContentHeading>
-			<div class="avatar-box">
-				<div ref="avatarList" class="avatar-list">
-					<Avatar v-for="member in membersLimited"
-						:key="member.singleId"
-						:user="member.userId"
-						:display-name="member.displayName"
-						:is-no-user="!member.isUser"
-						:icon-class="member.isUser ? null : 'icon-group-white'"
-						:size="avatarSize" />
-					<Avatar v-if="hasExtraMembers">
-						<template #icon>
-							<DotsHorizontal :size="16" />
-						</template>
-					</Avatar>
-				</div>
-				<Button class="members-button" @click="showMembersModal = true">
-					<template #icon>
-						<AccountMultiplePlus :size="20" />
-					</template>
-					{{ t('contacts', 'Manage members') }}
-				</Button>
-			</div>
-			<Modal v-if="showMembersModal" @close="showMembersModal=false">
-				<div class="members-modal">
-					<h2>{{ t('contacts', 'Team members') }}</h2>
-					<MemberList :list="members" />
-				</div>
-			</Modal>
-		</section>
-
-		<section>
+		<section v-if="circle.isMember">
 			<ContentHeading>
 				{{ t('contacts', 'Team resources') }}
 			</ContentHeading>
@@ -136,6 +102,13 @@
 			</div>
 		</section>
 
+		<section v-if="members.length > 0">
+			<ContentHeading>
+				{{ t('contacts', 'Team members') }}
+			</ContentHeading>
+			<MemberList :list="members" />
+		</section>
+
 		<Modal v-if="(circle.isOwner || circle.isAdmin) && !circle.isPersonal && showSettingsModal" @close="showSettingsModal=false">
 			<div class="circle-settings">
 				<h2>{{ t('contacts', 'Team settings') }}</h2>
@@ -216,8 +189,6 @@ import Cog from 'vue-material-design-icons/Cog.vue'
 import Login from 'vue-material-design-icons/Login.vue'
 import Logout from 'vue-material-design-icons/Logout.vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
-import AccountMultiplePlus from 'vue-material-design-icons/AccountMultiplePlus.vue'
-import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 
 import { CircleEdit, editCircle } from '../services/circles.ts'
 import CircleActionsMixin from '../mixins/CircleActionsMixin.js'
@@ -239,14 +210,12 @@ export default {
 		CirclePasswordSettings,
 		ContentHeading,
 		DetailsHeader,
-		DotsHorizontal,
 		ListItem,
 		Cog,
 		Login,
 		Logout,
 		Modal,
 		IconDelete,
-		AccountMultiplePlus,
 		RichContenteditable,
 	},
 
@@ -445,17 +414,9 @@ export default {
 	gap: 12px;
 }
 
-.members-modal {
-	padding: 12px;
-
-	h2 {
-		margin-bottom: 16px;
-	}
-
-	:deep(.app-content-list) {
-		max-width: 100%;
-		border: 0;
-	}
+:deep(.app-content-list) {
+	max-width: 100%;
+	border: 0;
 }
 
 .circle-settings {

src/components/MemberList.vue

@@ -28,7 +28,7 @@
 		</template>
 	</AppContentList>
 
-	<AppContentList v-else :class="{ showdetails: showDetails }">
+	<AppContentList v-else>
 		<div class="members-list__new">
 			<Button v-if="circle.canManageMembers"
 				@click="onShowPicker(circle.id)">
@@ -38,13 +38,6 @@
 				</template>
 				{{ t('contacts', 'Add members') }}
 			</Button>
-			<Button v-if="isMobile"
-				@click="showCircleDetails">
-				<template #icon>
-					<IconInfo :size="20" />
-				</template>
-				{{ t('contacts', 'Show team details') }}
-			</Button>
 		</div>
 
 		<MembersListItem v-for="member in filteredList"
@@ -78,7 +71,6 @@ import MembersListItem from './MembersList/MembersListItem.vue'
 import EntityPicker from './EntityPicker/EntityPicker.vue'
 import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
-import IconInfo from 'vue-material-design-icons/InformationOutline.vue'
 import RouterMixin from '../mixins/RouterMixin.js'
 
 import { getRecommendations, getSuggestions } from '../services/collaborationAutocompletion.js'
@@ -96,7 +88,6 @@ export default {
 		EmptyContent,
 		IconContact,
 		IconAdd,
-		IconInfo,
 		IconLoading,
 		MembersListItem,
 	},
@@ -112,11 +103,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-
-		showDetails: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	data() {
@@ -154,11 +140,15 @@ export default {
 		},
 
 		filteredList() {
+			const groupList = CIRCLES_MEMBER_GROUPING.map((group) => {
+				group.label = group.labelStandalone
+				return group
+			})
 			return Object.keys(this.groupedList)
 				// Object.keys returns string
 				.map(type => parseInt(type, 10))
 				// Map populated types to the group entry
-				.map(type => CIRCLES_MEMBER_GROUPING.find(group => group.type === type))
+				.map(type => groupList.find(group => group.type === type))
 				// Removed undefined group
 				.filter(group => group !== undefined)
 				// Injecting headings
@@ -288,10 +278,6 @@ export default {
 			this.pickerData = []
 			this.pickerSelection = {}
 		},
-
-		showCircleDetails() {
-			this.$emit('update:showDetails', true)
-		},
 	},
 }
 </script>
@@ -304,12 +290,12 @@ export default {
 
 	&__new {
 		padding: 10px;
+		display: inline-flex;
 
 		button {
-			height: 44px;
 			background-position: 14px center;
 			text-align: left;
-			width: 100%;
+
 		}
 	}
 

src/models/constants.ts

@@ -111,18 +111,20 @@ export const PUBLIC_CIRCLE_CONFIG = {
 	},
 }
 
-// Represents the picker options but also the
-// sorting of the members list
+// Represents the picker options (label is used lower case in a list of options: Search users, groups, teams, ...)
+// labelStandalone is used as heading for the member list where we need it starting captialized
 export const CIRCLES_MEMBER_GROUPING = [
 	{
 		id: `picker-${ShareType.User}`,
 		label: t('contacts', 'users'),
+		labelStandalone: t('contacts', 'Users'),
 		share: ShareType.User,
 		type: MEMBER_TYPE_USER,
 	},
 	{
 		id: `picker-${ShareType.Group}`,
 		label: t('contacts', 'groups'),
+		labelStandalone: t('contacts', 'Groups'),
 		share: ShareType.Group,
 		type: MEMBER_TYPE_GROUP,
 	},
@@ -142,19 +144,22 @@ export const CIRCLES_MEMBER_GROUPING = [
 	{
 		id: `picker-${ShareType.Team}`,
 		label: t('contacts', 'teams'),
+		labelStandalone: t('contacts', 'Teams'),
 		share: ShareType.Team,
 		type: MEMBER_TYPE_CIRCLE,
 	},
 	{
 		id: `picker-${ShareType.Email}`,
 		label: t('contacts', 'email addresses'),
+		labelStandalone: t('contacts', 'Email addresses'),
 		share: ShareType.Email,
 		type: MEMBER_TYPE_MAIL,
 	},
 	// TODO: implement SHARE_TYPE_CONTACT
 	{
 		id: 'picker-contact',
-		label: t('contacts', 'teams'),
+		label: t('contacts', 'contacts'),
+		labelStandalone: t('contacts', 'Contacts'),
 		share: ShareType.Email,
 		type: MEMBER_TYPE_CONTACT,
 	},

src/models/contact.js

@@ -214,7 +214,7 @@ export default class Contact {
 	 *
 	 * @readonly
 	 * @memberof Contact
- 	 */
+	 */
 	get hasPhoto() {
 		return this.dav && this.dav.hasphoto
 	}