style: adjust variables and styles in Talk sidebar plugins, refactor code

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

4 files changed, 39 insertions, 87 deletions

diff --git a/src/PublicShareSidebar.vue b/src/PublicShareSidebar.vue
index 61e7a3ae3..c7b7b346e 100644
--- a/src/PublicShareSidebar.vue
+++ b/src/PublicShareSidebar.vue
@@ -14,7 +14,7 @@
 					:disabled="joiningConversation"
 					@click="joinConversation">
 					<template #icon>
-						<span v-if="joiningConversation" class="icon icon-loading-small" />
+						<NcLoadingIcon v-if="joiningConversation" />
 					</template>
 					{{ t('spreed', 'Join conversation') }}
 				</NcButton>
@@ -41,6 +41,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import CallView from './components/CallView/CallView.vue'
 import ChatView from './components/ChatView.vue'
@@ -70,6 +71,7 @@ export default {
 		ChatView,
 		MediaSettings,
 		NcButton,
+		NcLoadingIcon,
 		PollViewer,
 		TopBar,
 		TransitionWrapper,
@@ -272,6 +274,7 @@ export default {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
+	padding: var(--default-grid-baseline) 0;
 }
 
 #talk-sidebar > .emptycontent {
@@ -293,14 +296,8 @@ export default {
 	right: -5px;
 }
 
-#talk-sidebar .button-centered,
 #talk-sidebar .call-button {
-	/* Center button horizontally. */
-	margin-left: auto;
-	margin-right: auto;
-
-	margin-top: 10px;
-	margin-bottom: 10px;
+	margin: 0 auto calc(var(--default-grid-baseline) * 2);
 }
 
 #talk-sidebar .button-centered {
@@ -309,7 +306,8 @@ export default {
 	 * .emptycontent [class*="icon-"] is matching button-vue--icon-and-text
 	 * setting the height to 64px, so we need to reset this.
 	 */
-	height: 44px;
+	height: var(--default-clickable-area) !important;
+	margin: 0 auto;
 }
 
 #talk-sidebar #call-container {
diff --git a/src/PublicShareSidebarTrigger.vue b/src/PublicShareSidebarTrigger.vue
index 315d937c9..f70e3dee3 100644
--- a/src/PublicShareSidebarTrigger.vue
+++ b/src/PublicShareSidebarTrigger.vue
@@ -4,31 +4,31 @@
 -->
 
 <template>
-	<div class="button-holder">
+	<div class="button-wrapper">
 		<NcButton type="tertiary-on-primary"
+			:title="ariaLabel"
 			:aria-label="ariaLabel"
 			@click="$emit('click')">
 			<template #icon>
-				<MenuPeople :size="20" />
+				<MessageText :size="20" />
 			</template>
 		</NcButton>
 	</div>
 </template>
 
 <script>
+import MessageText from 'vue-material-design-icons/MessageText.vue'
+
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
-import MenuPeople from './assets/missingMaterialDesignIcons/MenuPeople.vue'
-
 export default {
-
 	name: 'PublicShareSidebarTrigger',
 
 	components: {
+		MessageText,
 		NcButton,
-		MenuPeople,
 	},
 
 	props: {
@@ -42,11 +42,9 @@ export default {
 
 	computed: {
 		ariaLabel() {
-			if (this.sidebarState.isOpen) {
-				return t('spreed', 'Close Talk sidebar')
-			}
-
-			return t('spreed', 'Open Talk sidebar')
+			return this.sidebarState.isOpen
+				? t('spreed', 'Close Talk sidebar')
+				: t('spreed', 'Open Talk sidebar')
 		},
 	},
 
@@ -57,10 +55,11 @@ export default {
 </script>
 
 <style scoped>
-.button-holder {
-	margin: 2px 5px 2px 2px;
+.button-wrapper {
+	height: var(--header-height) !important;
+	width: var(--default-clickable-area) !important;
 	display: flex;
 	justify-content: center;
-	height: 44px !important;
+	align-items: center;
 }
 </style>
diff --git a/src/assets/missingMaterialDesignIcons/MenuPeople.vue b/src/assets/missingMaterialDesignIcons/MenuPeople.vue
deleted file mode 100644
index f84b94a90..000000000
--- a/src/assets/missingMaterialDesignIcons/MenuPeople.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<span :aria-hidden="!title"
-		:aria-label="title"
-		class="material-design-icon menu-people-icon"
-		role="img"
-		v-bind="$attrs"
-		@click="$emit('click', $event)">
-		<svg :fill="fillColor"
-			class="material-design-icon__svg"
-			:width="size"
-			:height="size"
-			viewBox="0 0 16 16">
-			<path d="m2 2c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm9.717 4.0059c-1.247 0-2.1428 1.0199-2.1428 1.998 0 0.9995 0.0726 1.7127 0.5718 2.4981 0.16 0.207 0.347 0.251 0.5 0.43 0.097 0.357 0.171 0.713 0.071 1.07-0.311 0.109-0.607 0.237-0.9065 0.357-0.364-0.195-0.7863-0.357-1.1503-0.5-0.05-0.2-0.0129-0.347 0.0371-0.535 0.0856-0.089 0.163-0.129 0.2558-0.215 0.2642-0.321 0.2793-0.864 0.2793-1.2496 0-0.5712-0.5135-0.9981-1.0703-0.9981-0.6211 0-1.0723 0.5126-1.0723 0.9981h-0.0136c0 0.4996 0.0353 0.8576 0.2851 1.2496 0.0714 0.107 0.1729 0.126 0.25 0.215 0.0481 0.179 0.0859 0.357 0.0352 0.535-0.4569 0.16-0.8863 0.357-1.2832 0.571-0.2999 0.214-0.1668 0.131-0.3574 0.822-0.0886 0.357 0.928 0.521 1.6562 0.578-0.0357 0.196-0.0857 0.457-0.2285 0.957-0.2285 0.893 3.1074 1.213 4.2834 1.213 1.735 0 4.507-0.325 4.269-1.213-0.371-1.385-0.15-1.221-0.701-1.642-0.778-0.467-1.749-0.834-2.568-1.143-0.107-0.398-0.03-0.692 0.07-1.07 0.168-0.179 0.357-0.259 0.514-0.43 0.492-0.6312 0.556-1.7299 0.556-2.4981 0-1.1323-1.019-1.998-2.14-1.998zm-9.717 0.9941c-0.554 0-1 0.446-1 1s0.446 1 1 1h4.2852c0.0891-0.1855 0.2-0.3648 0.3515-0.5195 0.3721-0.3801 0.9171-0.5988 1.4883-0.6192h0.0195c0.1729 0.017 0.3042 0.0597 0.4297 0.1426 0-0.3488 0.0747-0.6853 0.1953-1.0039h-6.7695zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h3.25c-0.0375-0.049-0.0777-0.09-0.1113-0.152-0.1221-0.228-0.1706-0.568-0.1035-0.838l0.0019-0.012 0.0039-0.012c0.0822-0.298 0.0556-0.322 0.1445-0.615 0.0313-0.103 0.1114-0.245 0.1993-0.371h-3.3848z" />
-			<title v-if="title">{{ title }}</title>
-		</svg>
-	</span>
-</template>
-
-<script>
-export default {
-	name: 'MenuPeople',
-	props: {
-		title: {
-			type: String,
-			default: '',
-		},
-		fillColor: {
-			type: String,
-			default: 'currentColor',
-		},
-		size: {
-			type: Number,
-			default: 24,
-		},
-	},
-
-	emits: ['click'],
-}
-</script>
diff --git a/src/views/FilesSidebarChatView.vue b/src/views/FilesSidebarChatView.vue
index 8d9ec1db7..2652ab862 100644
--- a/src/views/FilesSidebarChatView.vue
+++ b/src/views/FilesSidebarChatView.vue
@@ -5,8 +5,8 @@
 
 <template>
 	<div class="talk-tab__wrapper">
-		<CallButton class="call-button" />
-		<ChatView />
+		<CallButton class="talk-tab__call-button" />
+		<ChatView class="talk-tab__chat-view" />
 		<PollViewer />
 		<MediaSettings :recording-consent-given.sync="recordingConsentGiven" />
 	</div>
@@ -38,23 +38,22 @@ export default {
 
 </script>
 
-<style scoped>
-.talk-tab__wrapper{
-	height: 100%;
-}
-
-.call-button {
-	/* Center button horizontally. */
-	margin-left: auto;
-	margin-right: auto;
-
-	margin-top: 10px;
-	margin-bottom: 10px;
-}
-
-.chatView {
-	overflow: hidden;
-	/* Considering the call button height (44px + 10px * 2) */
-	height: calc(100% - 64px);
+<style lang="scss" scoped>
+.talk-tab {
+	&__wrapper {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		height: 100%;
+		padding: var(--default-grid-baseline) 0;
+	}
+
+	&__call-button {
+		margin: 0 auto calc(var(--default-grid-baseline) * 2);
+	}
+
+	&__chat-view {
+		overflow: hidden;
+	}
 }
 </style>