Improve layout

3 files changed, 96 insertions, 58 deletions

diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
index ceb99549c..a2cdd20b9 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
@@ -25,7 +25,6 @@
 		<div class="breakout-rooms-editor">
 			<h2>{{ modalTitle }}</h2>
 			<template v-if="!isEditingParticipants">
-				<h2>{{ t('spreed', 'Create rooms') }}</h2>
 				<NcInputField :label="t('spreed', 'Number of breakout rooms')" type="number" :value.sync="amount" />
 				<NcCheckboxRadioSwitch :checked.sync="mode"
 					value="1"
@@ -45,15 +44,15 @@
 					type="radio">
 					{{ t('spreed', 'Allow participants to choose') }}
 				</NcCheckboxRadioSwitch>
+				<div class="breakout-rooms-editor__buttons">
+					<NcButton type="primary" @click="handleCreateRooms">
+						{{ t('spreed', 'Create rooms') }}
+					</NcButton>
+				</div>
 			</template>
 			<template v-else>
 				<BreakoutRoomsParticipantsEditor :token="token" />
 			</template>
-			<div class="breakout-rooms-editor__buttons">
-				<NcButton @click="handleCreateRooms">
-					{{ t('spreed', 'Create rooms') }}
-				</NcButton>
-			</div>
 		</div>
 	</ncmodal>
 </template>
@@ -120,5 +119,11 @@ export default {
 	padding: 20px;
 	justify-content: flex-start;
 	align-items: flex-start;
+	height: calc(100% - 80px);
+}
+
+::v-deep .modal-container {
+	overflow: hidden !important;
+	height: 100%;
 }
 </style>
diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
index a1b8dbb24..e9d51f42b 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
@@ -21,52 +21,63 @@
 
 <template>
 	<div class="participants-editor">
-		<NcActions v-if="hasSelected" :menu-title="t('spreed', 'Assign participants to room')">
-			<NcActionButton v-for="(item, index) in assignments" :key="index" @click="assignAttendees(index)">
-				<template #icon>
-					<!-- TODO: choose final icon -->
-					<GoogleCircles :size="20" />
-				</template>
-				{{ roomName(index) }}
-			</NcActionButton>
-			<NcActionButton>
-				<template #icon>
-					<Reload :size="20" />
-				</template>
-				{{ t('spreed', 'Reset all assignments') }}
-			</NcActionButton>
-		</NcActions>
-		<NcAppNavigationItem key="unassigned"
-			:title="t('spreed', 'Unassigned participants')"
-			:allow-collapse="true"
-			:open="true">
-			<template #icon>
-				<GoogleCircles :size="20" />
-			</template>
-			<SelectableParticipant v-for="participant in unassignedParticipants"
-				:key="participant.attendeeId"
-				:value="participant.attendeeId"
-				:checked.sync="selectedParticipants"
-				:participant="participant" />
-		</NcAppNavigationItem>
-		<template v-for="(item, index) in assignments">
-			<NcAppNavigationItem :key="index"
-				:title="roomName(index)"
+		<div class="participants-editor__scroller">
+			<NcAppNavigationItem v-if="hasUnassigned"
+				key="unassigned"
+				class="participants-editor__section"
+				:title="t('spreed', 'Unassigned participants')"
 				:allow-collapse="true"
 				:open="true">
 				<template #icon>
 					<GoogleCircles :size="20" />
 				</template>
-				<!-- Template should be simple, declarative, without calling methods when possible -->
-				<!-- A method is call each time on each re-render for each loop iteration -->
-				<!-- Not cool for perf as well -->
-				<SelectableParticipant v-for="attendeeId in item"
-					:key="attendeeId"
-					:value="assignments"
+				<SelectableParticipant v-for="participant in unassignedParticipants"
+					:key="participant.attendeeId"
+					:value="participant.attendeeId"
 					:checked.sync="selectedParticipants"
-					:participant="attendeesById[attendeeId]" />
+					:participant="participant" />
 			</NcAppNavigationItem>
-		</template>
+			<template v-for="(item, index) in assignments">
+				<NcAppNavigationItem :key="index"
+					class="participants-editor__section"
+					:title="roomName(index)"
+					:allow-collapse="true"
+					:open="true">
+					<template #icon>
+						<GoogleCircles :size="20" />
+					</template>
+					<SelectableParticipant v-for="attendeeId in item"
+						:key="attendeeId"
+						:value="assignments"
+						:checked.sync="selectedParticipants"
+						:participant="attendeesById[attendeeId]" />
+				</NcAppNavigationItem>
+			</template>
+		</div>
+		<div class="participants-editor__buttons">
+			<NcButton v-if="hasAssigned" type="tertiary" @click="resetAssignments">
+				<template #icon>
+					<Reload :size="20" />
+				</template>
+				{{ t('spreed', 'Reset') }}
+			</NcButton>
+			<NcActions v-if="hasUnassigned"
+				:menu-title="t('spreed', 'Assign participants to room')">
+				<NcActionButton v-for="(item, index) in assignments"
+					:key="index"
+					:close-after-click="true"
+					@click="assignAttendees(index)">
+					<template #icon>
+						<!-- TODO: choose final icon -->
+						<GoogleCircles :size="20" />
+					</template>
+					{{ roomName(index) }}
+				</NcActionButton>
+			</NcActions>
+			<NcButton type="primary" @click="handleCreateRooms">
+				{{ t('spreed', 'Create rooms') }}
+			</NcButton>
+		</div>
 	</div>
 </template>
 
@@ -77,6 +88,7 @@ import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
 import Reload from 'vue-material-design-icons/Reload.vue'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import SelectableParticipant from './SelectableParticipant.vue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'BreakoutRoomsParticipantsEditor',
@@ -88,6 +100,7 @@ export default {
 		Reload,
 		NcAppNavigationItem,
 		SelectableParticipant,
+		NcButton,
 	},
 
 	props: {
@@ -118,7 +131,7 @@ export default {
 		attendeesById() {
 			// Just get all attendees for this conversation without mapping to an array
 			// Like participants, but object, not array
-			return this.$store.state.participants.attendees[this.token]
+			return this.$store.state.participantsStore.attendees[this.token]
 		},
 
 		unassignedParticipants() {
@@ -133,9 +146,12 @@ export default {
 		},
 
 		hasSelected() {
-			return this.selectedParticipants.length !== 0
+			return this.selectedParticipants.length > 0
 		},
 
+		hasAssigned() {
+			return this.assignments.flat().length > 0
+		},
 	},
 
 	created() {
@@ -144,14 +160,6 @@ export default {
 
 	methods: {
 		initialiseAssignments() {
-			// let count = 0
-			// while (count < this.roomNumber) {
-			// 	this.assignments.push([])
-			// 	count++
-			// }
-
-			// Just more clean for me
-			// If it looks complex - then I'd prefer "for" instead of "while". It's fixed
 			this.assignments = Array.from(Array(this.roomNumber), () => [])
 		},
 
@@ -180,13 +188,38 @@ export default {
 <style lang="scss" scoped>
 .participants-editor {
 	display: flex;
+	width: 100%;
 	flex-direction: column;
 	gap: var(--default-grid-baseline);
+	height: 100%;
+
+	&__section {
+		margin: calc(var(--default-grid-baseline) * 2) 0 var(--default-grid-baseline) 0;
+
+	}
+
 	&__participant {
 		display: flex;
 		align-items: center;
 		gap: var(--default-grid-baseline);
 		margin-left: 14px;
 	}
+
+	&__scroller {
+		height: 100%;
+		overflow: auto;
+	}
+
+	&__buttons {
+		display: flex;
+		justify-content: flex-end;
+		gap: calc(var(--default-grid-baseline) * 2);
+	}
+}
+
+// TODO: upsteream collapse icon position fix
+::v-deep .icon-collapse {
+	position: absolute !important;
+	left: 0;
 }
 </style>
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
index 822b89ddf..f7783e6b3 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
@@ -236,9 +236,9 @@ export default {
 	font-weight: bold !important;
 }
 
-// TODO: upsteream collapse icon position fix
+// TODO: upstream collapse icon position fix
 ::v-deep .icon-collapse {
-	position: absolute !important;
-	left: 0;
+position: absolute !important;
+left: 0;
 }
 </style>