Create breakout rooms tab

Signed-off-by: Marco <marcoambrosini@icloud.com>

4 files changed, 96 insertions, 7 deletions

diff --git a/src/components/ConversationSettings/LinkShareSettings.vue b/src/components/ConversationSettings/LinkShareSettings.vue
index f5666021e..6127493b9 100644
--- a/src/components/ConversationSettings/LinkShareSettings.vue
+++ b/src/components/ConversationSettings/LinkShareSettings.vue
@@ -67,8 +67,8 @@
 		</div>
 		<div class="app-settings-subsection app-settings-subsection__buttons">
 			<NcButton ref="copyLinkButton"
-				@click.prevent="handleCopyLink"
 				:wide="true"
+				@click.prevent="handleCopyLink"
 				@keydown.enter="handleCopyLink">
 				<template #icon>
 					<ClipboardTextOutline />
diff --git a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
index 206d68530..18a0cf2b1 100644
--- a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
+++ b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
@@ -209,12 +209,6 @@ export default {
 		},
 	},
 
-	computed: {
-		disableKeyboardShortcuts() {
-			return OCP.Accessibility.disableKeyboardShortcuts()
-		},
-	},
-
 	data() {
 		return {
 			text: '',
@@ -222,6 +216,12 @@ export default {
 			blurTimer: null,
 		}
 	},
+
+	computed: {
+		disableKeyboardShortcuts() {
+			return OCP.Accessibility.disableKeyboardShortcuts()
+		},
+	},
 	watch: {
 		text(text) {
 			this.$nextTick(() => {
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
new file mode 100644
index 000000000..92b3c760e
--- /dev/null
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
@@ -0,0 +1,63 @@
+<template>
+	<div class="breakout-rooms">
+		<template v-for="breakoutRoom in breakoutRooms">
+			<NcAppNavigationItem :key="breakoutRoom.displayName"
+				:title="breakoutRoom.displayName"
+				:allow-collapse="true">
+				<template #icon>
+					<!-- TODO: choose final icon -->
+					<GoogleCircles :size="20" />
+				</template>
+				<template v-for="participant in $store.getters.participantsList(breakoutRoom.token)">
+					<Participant :key="participant.actorId" :participant="participant" />
+				</template>
+			</NcAppNavigationItem>
+		</template>
+	</div>
+</template>
+
+<script>
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import Participant from '../Participants/ParticipantsList/Participant/Participant.vue'
+import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
+
+export default {
+	name: 'BreakoutRoomsTab',
+
+	components: {
+		NcAppNavigationItem,
+		Participant,
+		GoogleCircles,
+	},
+
+	computed: {
+		// TODO: get actual rooms
+		breakoutRooms() {
+			return [
+				this.$store.getters.conversation('zsn49dx9'),
+				this.$store.getters.conversation('py2qhwa7'),
+				this.$store.getters.conversation('sngyetkc'),
+			]
+		},
+	},
+
+	watch: {
+		breakoutRooms() {
+			this.$forceUpdate()
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+
+::v-deep .app-navigation-entry__title {
+	font-weight: bold !important;
+}
+
+// TODO: upsteream collapse icon position fix
+::v-deep .icon-collapse {
+	position: absolute !important;
+	left: 0;
+}
+</style>
diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
index 4ca13fd87..0e8c56e03 100644
--- a/src/components/RightSidebar/RightSidebar.vue
+++ b/src/components/RightSidebar/RightSidebar.vue
@@ -38,6 +38,17 @@
 		<template slot="description">
 			<LobbyStatus v-if="canFullModerate && hasLobbyEnabled" :token="token" />
 		</template>
+		<NcAppSidebarTab v-if="getUserId && !isOneToOne"
+			id="breakout-rooms"
+			ref="breakout-rooms"
+			:order="1"
+			:name="breakoutRoomsText">
+			<template slot="icon">
+				<!-- TODO: choose final icon -->
+				<DotsCircle :size="20" />
+			</template>
+			<BreakoutRoomsTab v-if="showBreakoutRoomsTab" :is-active="activeTab === 'breakout-rooms'" />
+		</NcAppSidebarTab>
 		<NcAppSidebarTab v-if="showChatInSidebar"
 			id="chat"
 			:order="1"
@@ -113,6 +124,8 @@ import CogIcon from 'vue-material-design-icons/Cog.vue'
 import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
 import Message from 'vue-material-design-icons/Message.vue'
+import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
+import BreakoutRoomsTab from './BreakoutRooms/BreakoutRoomsTab.vue'
 
 export default {
 	name: 'RightSidebar',
@@ -131,6 +144,8 @@ export default {
 		FolderMultipleImage,
 		InformationOutline,
 		Message,
+		DotsCircle,
+		BreakoutRoomsTab,
 	},
 
 	mixins: [
@@ -184,13 +199,16 @@ export default {
 		canAddParticipants() {
 			return this.canFullModerate && this.canSearchParticipants
 		},
+
 		canSearchParticipants() {
 			return (this.conversation.type === CONVERSATION.TYPE.GROUP
 					|| (this.conversation.type === CONVERSATION.TYPE.PUBLIC && this.conversation.objectType !== 'share:password'))
 		},
+
 		isSearching() {
 			return this.searchText !== ''
 		},
+
 		participantType() {
 			return this.conversation.participantType
 		},
@@ -238,6 +256,14 @@ export default {
 			return t('spreed', 'Participants ({count})', { count: participants.length })
 		},
 
+		breakoutRoomsText() {
+			return t('spreed', 'Breakout rooms')
+		},
+
+		// TODO: compute actual value
+		showBreakoutRoomsTab() {
+			return true
+		},
 	},
 
 	watch: {