Merge pull request #7694 from nextcloud/bugfix/noid/move-public-share-sidebar-to-vue-button

Move public share sidebar to vue button

src/PublicShareSidebar.vue

@@ -26,10 +26,15 @@
 			<div v-if="!conversation" class="emptycontent room-not-joined">
 				<div class="icon icon-talk" />
 				<h2>{{ t('spreed', 'Discuss this file') }}</h2>
-				<button class="primary" :disabled="joiningConversation" @click="joinConversation">
+				<ButtonVue type="primary"
+					class="button-centered"
+					:disabled="joiningConversation"
+					@click="joinConversation">
+					<template #icon>
+						<span v-if="joiningConversation" class="icon icon-loading-small" />
+					</template>
 					{{ t('spreed', 'Join conversation') }}
-					<span v-if="joiningConversation" class="icon icon-loading-small" />
-				</button>
+				</ButtonVue>
 			</div>
 			<template v-else>
 				<CallView v-if="isInCall"
@@ -45,6 +50,7 @@
 </template>
 
 <script>
+import ButtonVue from '@nextcloud/vue/dist/Components/Button'
 import PreventUnload from 'vue-prevent-unload'
 import { loadState } from '@nextcloud/initial-state'
 import CallView from './components/CallView/CallView.vue'
@@ -69,6 +75,7 @@ export default {
 	name: 'PublicShareSidebar',
 
 	components: {
+		ButtonVue,
 		CallButton,
 		CallView,
 		ChatView,
@@ -285,6 +292,7 @@ export default {
 	right: -5px;
 }
 
+#talk-sidebar .button-centered,
 #talk-sidebar .call-button {
 	/* Center button horizontally. */
 	margin-left: auto;
@@ -294,6 +302,15 @@ export default {
 	margin-bottom: 10px;
 }
 
+#talk-sidebar .button-centered {
+	/*
+	 * When there is an icon the servers empty-content rule
+	 * .emptycontent [class*="icon-"] is matching button-vue--icon-and-text
+	 * setting the height to 64px, so we need to reset this.
+	 */
+	height: 44px;
+}
+
 #talk-sidebar #call-container {
 	position: relative;