Add ability to toggle between grid-view and promoted-view

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

4 files changed, 63 insertions, 6 deletions

diff --git a/img/grid-view.svg b/img/grid-view.svg
new file mode 100644
index 000000000..617730dbb
--- /dev/null
+++ b/img/grid-view.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="7" height="7" rx="2" fill="black"/>
+<rect y="9" width="7" height="7" rx="2" fill="black"/>
+<rect x="9" width="7" height="7" rx="2" fill="black"/>
+<rect x="9" y="9" width="7" height="7" rx="2" fill="black"/>
+</svg>
diff --git a/src/components/CallView/shared/EmptyCallView.vue b/src/components/CallView/shared/EmptyCallView.vue
index 07b72f63d..73770f876 100644
--- a/src/components/CallView/shared/EmptyCallView.vue
+++ b/src/components/CallView/shared/EmptyCallView.vue
@@ -138,3 +138,11 @@ export default {
 
 }
 </script>
+
+<style lang="scss">
+.emptycontent {
+	margin-top: 0;
+	position: absolute;
+	top: 30vh;
+}
+</style>
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index cc1b44377..74831532f 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -32,6 +32,14 @@
 				{{ labelFullscreen }}
 			</ActionButton>
 		</Actions>
+		<Actions v-if="isInCall">
+			<ActionButton
+				class="top-bar__button"
+				:icon="changeViewIconClass"
+				@click="changeView">
+				{{ changeViewText }}
+			</ActionButton>
+		</Actions>
 		<Actions v-if="showOpenSidebarButton"
 			class="top-bar__button"
 			close-after-click="true">
@@ -57,9 +65,13 @@ export default {
 	},
 
 	props: {
-		forceWhiteIcons: {
+		isInCall: {
 			type: Boolean,
-			default: false,
+			required: true,
+		},
+		isGrid: {
+			type: Boolean,
+			required: true,
 		},
 	},
 
@@ -69,7 +81,7 @@ export default {
 		},
 
 		iconFullscreen() {
-			if (this.forceWhiteIcons) {
+			if (this.isInCall) {
 				return 'forced-white icon-fullscreen'
 			}
 			return 'icon-fullscreen'
@@ -83,7 +95,7 @@ export default {
 		},
 
 		iconMenuPeople() {
-			if (this.forceWhiteIcons) {
+			if (this.isInCall) {
 				return 'forced-white icon-menu-people'
 			}
 			return 'icon-menu-people'
@@ -92,6 +104,21 @@ export default {
 		showOpenSidebarButton() {
 			return !this.$store.getters.getSidebarStatus()
 		},
+
+		changeViewText() {
+			if (this.isGrid) {
+				return t('spreed', 'Switch to promoted view')
+			} else {
+				return t('spreed', 'Switch to grid view')
+			}
+		},
+		changeViewIconClass() {
+			if (this.isGrid) {
+				return 'promoted-view'
+			} else {
+				return 'grid-view'
+			}
+		},
 	},
 
 	mounted() {
@@ -155,6 +182,10 @@ export default {
 				document.msExitFullscreen()
 			}
 		},
+
+		changeView() {
+			this.$emit('changeView')
+		},
 	},
 }
 </script>
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index d904e6b04..ad96fd035 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -2,10 +2,17 @@
 	<div class="main-view">
 		<LobbyScreen v-if="isInLobby" />
 		<template v-else>
-			<TopBar :force-white-icons="showChatInSidebar" />
+			<TopBar
+				:is-in-call="showChatInSidebar"
+				:is-grid="isGrid"
+				@changeView="handleChangeView" />
 			<ChatView v-if="!showChatInSidebar" :token="token" />
 			<template v-else>
-				<CallView :grid-width="mainViewWidth" :grid-height="mainViewHeight" />
+				<CallView
+					:is-grid="isGrid"
+					:grid-width="mainViewWidth"
+					:grid-height="mainViewHeight"
+					:token="token" />
 			</template>
 		</template>
 	</div>
@@ -41,6 +48,7 @@ export default {
 		return {
 			mainViewWidth: 0,
 			mainViewHeight: 0,
+			isGrid: true,
 		}
 	},
 
@@ -111,6 +119,10 @@ export default {
 				this.mainViewHeight = this.mainView.clientHeight
 			}
 		},
+
+		handleChangeView() {
+			this.isGrid = !this.isGrid
+		},
 	},
 
 	// FIXME reactivate once Signaling is done correctly per conversation again.