Merge pull request #6963 from nextcloud/feat/6927/button-for-call-button

6927: updated button for call button

1 files changed, 24 insertions, 26 deletions

diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index 1e1c9b651..ca87cd79e 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<div>
-		<button v-if="showStartCallButton"
+		<Button v-if="showStartCallButton"
 			id="call_button"
 			v-tooltip="{
 				placement: 'auto',
@@ -31,22 +31,25 @@
 				html: true
 			}"
 			:disabled="startCallButtonDisabled || loading || blockCalls"
-			class="top-bar__button"
-			:class="startCallButtonClasses"
+			:type="startCallButtonType"
 			@click="handleClick">
-			<span class="icon"
-				:class="startCallIcon" />
+			<template #icon>
+				<span class="icon"
+					:class="startCallIcon" />
+			</template>
 			{{ startCallLabel }}
-		</button>
-		<button v-else-if="showLeaveCallButton && !canEndForAll"
+		</Button>
+		<Button v-else-if="showLeaveCallButton && !canEndForAll"
 			id="call_button"
-			class="top-bar__button error"
+			type="error"
 			:disabled="loading"
 			@click="leaveCall(false)">
-			<span class="icon"
-				:class="leaveCallIcon" />
+			<template #icon>
+				<span class="icon"
+					:class="leaveCallIcon" />
+			</template>
 			{{ leaveCallLabel }}
-		</button>
+		</Button>
 		<Actions v-else-if="showLeaveCallButton && canEndForAll"
 			:disabled="loading">
 			<template slot="icon">
@@ -85,7 +88,7 @@ import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import VideoOff from 'vue-material-design-icons/VideoOff'
 import MenuDown from 'vue-material-design-icons/MenuDown'
-
+import Button from '@nextcloud/vue/dist/Components/Button'
 export default {
 	name: 'CallButton',
 
@@ -98,6 +101,7 @@ export default {
 		ActionButton,
 		VideoOff,
 		MenuDown,
+		Button,
 	},
 
 	mixins: [
@@ -211,11 +215,15 @@ export default {
 			return 'icon-start-call'
 		},
 
-		startCallButtonClasses() {
-			return {
-				primary: !this.hasCall && !this.isInLobby,
-				success: this.hasCall && !this.isInLobby,
+		startCallButtonType() {
+			if (!this.isInLobby) {
+				if (!this.hasCall) {
+					return 'primary'
+				} else {
+					return 'success'
+				}
 			}
+			return ''
 		},
 
 		showStartCallButton() {
@@ -300,16 +308,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.top-bar__button {
-	height: 44px;
-	margin: 0;
-
-	.icon {
-		opacity: 1;
-		margin-right: 8px;
-	}
-}
-
 .success {
 	color: white;
 	background-color: var(--color-success);