From 229b9a5a076d019ec0ff768a8d77d9cddf0739e2 Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Thu, 2 Mar 2023 12:55:15 +0100
Subject: [PATCH 1/4] Use custom component for breakoutrooms in tab

Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 .../BreakoutRooms/BreakoutRoomItem.vue        | 94 ++++++++++---------
 1 file changed, 52 insertions(+), 42 deletions(-)

diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
index 4b8f32750c5..febfb5c9e43 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
@@ -21,51 +21,47 @@
 -->
 
 <template>
-	<NcAppNavigationItem :key="roomName"
-		:force-display-actions="true"
-		class="breakout-rooms__room"
-		:title="roomName"
-		:allow-collapse="true"
-		:inline-actions="1"
-		:open="true">
-		<template #icon>
+	<Fragment>
+		<li :key="roomName"
+			class="breakout-room-item">
 			<!-- TODO: choose final icon -->
 			<GoogleCircles :size="20" />
-		</template>
-		<template #actions>
-			<NcActionButton @click="joinRoom">
-				<template #icon>
-					<ArrowRight :size="16" />
-				</template>
-				{{ t('spreed', 'Join room') }}
-			</NcActionButton>
-			<NcActionButton v-if="showAssistanceButton"
-				@click="dismissRequestAssistance">
-				<template #icon>
-					<HandBackLeft :size="16" />
-				</template>
-				{{ t('spreed', 'Dismiss request for assistance') }}
-			</NcActionButton>
-			<NcActionButton @click="openSendMessageForm">
-				<template #icon>
-					<Send :size="16" />
-				</template>
-				{{ t('spreed', 'Send message to room') }}
-			</NcActionButton>
-		</template>
-		<!-- Send message dialog -->
-		<SendMessageDialog v-if="isDialogOpened"
-			:display-name="roomName"
-			:token="roomToken"
-			@close="closeSendMessageForm" />
+			{{ roomName }}
+			<div class="breakout-room-item__actions">
+				<NcButton @click="joinRoom">
+					{{ t('spreed', 'Join') }}
+				</NcButton>
+				<NcActions :force-menu="true">
+					<NcActionButton v-if="showAssistanceButton"
+						@click="dismissRequestAssistance">
+						<template #icon>
+							<HandBackLeft :size="16" />
+						</template>
+						{{ t('spreed', 'Dismiss request for assistance') }}
+					</NcActionButton>
+					<NcActionButton @click="openSendMessageForm">
+						<template #icon>
+							<Send :size="16" />
+						</template>
+						{{ t('spreed', 'Send message to room') }}
+					</NcActionButton>
+				</NcActions>
+			</div>
+			<!-- Send message dialog -->
+			<SendMessageDialog v-if="isDialogOpened"
+				:display-name="roomName"
+				:token="roomToken"
+				@close="closeSendMessageForm" />
+		</li>
 		<template v-for="participant in roomParticipants">
 			<Participant :key="participant.actorId" :participant="participant" />
 		</template>
-	</NcAppNavigationItem>
+	</Fragment>
 </template>
 
 <script>
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import { Fragment } from 'vue-frag'
+
 import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
 import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
 import Send from 'vue-material-design-icons/Send.vue'
@@ -73,7 +69,8 @@ import Send from 'vue-material-design-icons/Send.vue'
 import { showWarning } from '@nextcloud/dialogs'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
 import Participant from '../Participants/ParticipantsList/Participant/Participant.vue'
@@ -86,16 +83,17 @@ export default {
 
 	components: {
 		// Components
-		NcAppNavigationItem,
 		Participant,
 		NcActionButton,
 		SendMessageDialog,
+		NcButton,
+		NcActions,
+		Fragment,
 
 		// Icons
 		GoogleCircles,
 		HandBackLeft,
 		Send,
-		ArrowRight,
 	},
 
 	props: {
@@ -187,6 +185,18 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.breakout-room-item {
+	font-weight: bold;
+	display: flex;
+	align-items: center;
+	margin-top: calc(var(--default-grid-baseline)*5);
+	gap: var(--default-grid-baseline);
+
+	&__actions {
+		margin-left: auto;
+		display: flex;
+		gap: var(--default-grid-baseline);
+	}
+}
 </style>

From 2a8260a0d4b58701bb93e9d3503fc6f2afad6bc3 Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Thu, 2 Mar 2023 13:01:57 +0100
Subject: [PATCH 2/4] Use the same icon and fix alignment

Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 .../RightSidebar/BreakoutRooms/BreakoutRoomItem.vue    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
index febfb5c9e43..e5e40dd017f 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
@@ -25,7 +25,7 @@
 		<li :key="roomName"
 			class="breakout-room-item">
 			<!-- TODO: choose final icon -->
-			<GoogleCircles :size="20" />
+			<DotsCircle class="breakout-room-item__icon" :size="20" />
 			{{ roomName }}
 			<div class="breakout-room-item__actions">
 				<NcButton @click="joinRoom">
@@ -62,7 +62,7 @@
 <script>
 import { Fragment } from 'vue-frag'
 
-import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
+import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
 import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
 import Send from 'vue-material-design-icons/Send.vue'
 
@@ -91,7 +91,7 @@ export default {
 		Fragment,
 
 		// Icons
-		GoogleCircles,
+		DotsCircle,
 		HandBackLeft,
 		Send,
 	},
@@ -193,6 +193,10 @@ export default {
 	margin-top: calc(var(--default-grid-baseline)*5);
 	gap: var(--default-grid-baseline);
 
+	&__icon {
+		margin: 0 18px 0 16px ;
+	}
+
 	&__actions {
 		margin-left: auto;
 		display: flex;

From 3237156b9a944363d645e6d43b7a757f5309a0de Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Thu, 2 Mar 2023 13:04:39 +0100
Subject: [PATCH 3/4] Use the same icon for breakout rooms everywhere

Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 .../BreakoutRoomsParticipantsEditor.vue              | 12 +++++-------
 .../RightSidebar/BreakoutRooms/BreakoutRoomItem.vue  |  1 -
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
index 25e5153ebd7..2d58a94654b 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
@@ -29,7 +29,7 @@
 				:allow-collapse="true"
 				:open="true">
 				<template #icon>
-					<GoogleCircles :size="20" />
+					<DotsCircle :size="20" />
 				</template>
 				<SelectableParticipant v-for="participant in unassignedParticipants"
 					:key="participant.attendeeId"
@@ -44,7 +44,7 @@
 					:allow-collapse="true"
 					:open="true">
 					<template #icon>
-						<GoogleCircles :size="20" />
+						<DotsCircle :size="20" />
 					</template>
 					<SelectableParticipant v-for="attendeeId in item"
 						:key="attendeeId"
@@ -70,7 +70,6 @@
 				type="tertiary"
 				@click="goBack">
 				<template #icon>
-					<!-- TODO: choose final icon -->
 					<ArrowLeft :size="20" />
 				</template>
 				{{ t('spreed', 'Back') }}
@@ -88,8 +87,7 @@
 					:close-after-click="true"
 					@click="assignAttendees(index)">
 					<template #icon>
-						<!-- TODO: choose final icon -->
-						<GoogleCircles :size="20" />
+						<DotsCircle :size="20" />
 					</template>
 					{{ roomName(index) }}
 				</NcActionButton>
@@ -106,7 +104,7 @@
 <script>
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
-import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
+import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
 import Reload from 'vue-material-design-icons/Reload.vue'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
@@ -124,7 +122,7 @@ export default {
 	components: {
 		NcActions,
 		NcActionButton,
-		GoogleCircles,
+		DotsCircle,
 		Reload,
 		NcAppNavigationItem,
 		SelectableParticipant,
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
index e5e40dd017f..ef7e9ffe9ea 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
@@ -24,7 +24,6 @@
 	<Fragment>
 		<li :key="roomName"
 			class="breakout-room-item">
-			<!-- TODO: choose final icon -->
 			<DotsCircle class="breakout-room-item__icon" :size="20" />
 			{{ roomName }}
 			<div class="breakout-room-item__actions">

From d4621028ee3107a59d469b0830100207249e4dc4 Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Thu, 2 Mar 2023 13:27:56 +0100
Subject: [PATCH 4/4] Use check icon for stopping breakout rooms

Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 .../RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
index 0666164f418..751a764bac4 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
@@ -22,7 +22,7 @@
 				:wide="true"
 				@click="stopBreakoutRooms">
 				<template #icon>
-					<StopIcon :size="20" />
+					<Check :size="20" />
 				</template>
 				{{ stopLabel }}
 			</NcButton>
@@ -93,10 +93,10 @@
 
 <script>
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
+import Check from 'vue-material-design-icons/Check.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import Play from 'vue-material-design-icons/Play.vue'
 import Send from 'vue-material-design-icons/Send.vue'
-import StopIcon from 'vue-material-design-icons/Stop.vue'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
@@ -125,7 +125,7 @@ export default {
 		// Icons
 		Play,
 		Cog,
-		StopIcon,
+		Check,
 		ArrowLeft,
 		Send,
 	},