Merge pull request #7647 from nextcloud/bugfix/noid/move-signaling-to-vue-buttons

Move signaling to vue buttons

6 files changed, 42 insertions, 53 deletions

diff --git a/src/components/AdminSettings/SignalingServer.vue b/src/components/AdminSettings/SignalingServer.vue
index a30555945..693f96631 100644
--- a/src/components/AdminSettings/SignalingServer.vue
+++ b/src/components/AdminSettings/SignalingServer.vue
@@ -38,24 +38,30 @@
 			@change="updateVerify">
 		<label :for="'verify' + index">{{ t('spreed', 'Validate SSL certificate') }}</label>
 
-		<a v-show="!loading"
-			v-tooltip.auto="t('spreed', 'Delete this server')"
-			class="icon icon-delete"
-			@click="removeServer" />
+		<Button v-show="!loading"
+			type="tertiary-no-background"
+			:aria-label="t('spreed', 'Delete this server')"
+			@click="removeServer">
+			<template #icon>
+				<Delete :size="20" />
+			</template>
+		</Button>
 
 		<span v-if="server">{{ connectionState }}</span>
 	</div>
 </template>
 
 <script>
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import Button from '@nextcloud/vue/dist/Components/Button'
+import Delete from 'vue-material-design-icons/Delete'
 import { getWelcomeMessage } from '../../services/signalingService.js'
 
 export default {
 	name: 'SignalingServer',
 
-	directives: {
-		tooltip: Tooltip,
+	components: {
+		Button,
+		Delete,
 	},
 
 	props: {
diff --git a/src/components/AdminSettings/SignalingServers.vue b/src/components/AdminSettings/SignalingServers.vue
index 7a97a0326..8a8c1815c 100644
--- a/src/components/AdminSettings/SignalingServers.vue
+++ b/src/components/AdminSettings/SignalingServers.vue
@@ -21,17 +21,19 @@
  -->
 
 <template>
-	<div id="signaling_server" class="videocalls section">
+	<div id="signaling_server" class="videocalls section signaling-server">
 		<h2>
 			{{ t('spreed', 'High-performance backend') }}
-			<span v-if="saved" class="icon icon-checkmark-color" :title="t('spreed', 'Saved')" />
-			<a v-else-if="!loading && showAddServerButton"
-				v-tooltip.auto="t('spreed', 'Add a new server')"
-				class="icon icon-add"
+
+			<Button v-if="!loading && showAddServerButton"
+				class="signaling-server__add-icon"
+				type="tertiary-no-background"
+				:aria-label="t('spreed', 'Add a new high-performance backend server')"
 				@click="newServer">
-				<span class="hidden-visually">{{ t('spreed', 'Add a new server') }}</span>
-			</a>
-			<span v-else-if="loading" class="icon icon-loading-small" />
+				<template #icon>
+					<Plus :size="20" />
+				</template>
+			</Button>
 		</h2>
 
 		<p class="settings-hint">
@@ -84,7 +86,9 @@
 
 <script>
 import SignalingServer from '../../components/AdminSettings/SignalingServer.vue'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import Button from '@nextcloud/vue/dist/Components/Button'
+import Plus from 'vue-material-design-icons/Plus'
+import { showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import debounce from 'debounce'
 import { SIGNALING } from '../../constants.js'
@@ -92,12 +96,10 @@ import { SIGNALING } from '../../constants.js'
 export default {
 	name: 'SignalingServers',
 
-	directives: {
-		tooltip: Tooltip,
-	},
-
 	components: {
+		Button,
 		SignalingServer,
+		Plus,
 	},
 
 	data() {
@@ -144,6 +146,7 @@ export default {
 
 			OCP.AppConfig.setValue('spreed', 'hide_signaling_warning', this.hideWarning ? 'yes' : 'no', {
 				success() {
+					showSuccess(t('spreed', 'Missing high-performance backend warning hidden'))
 					self.loading = false
 					self.toggleSave()
 				},
@@ -165,6 +168,7 @@ export default {
 				secret: this.secret,
 			}), {
 				success() {
+					showSuccess(t('spreed', 'High-performance backend settings saved'))
 					self.loading = false
 					self.toggleSave()
 				},
@@ -184,6 +188,14 @@ export default {
 <style lang="scss" scoped>
 @import '../../assets/variables';
 
+.signaling-server {
+	h2 {
+		height: 44px;
+		display: flex;
+		align-items: center;
+	}
+}
+
 .signaling-warning label {
 	margin: 0;
 }
diff --git a/src/components/AdminSettings/StunServer.vue b/src/components/AdminSettings/StunServer.vue
index 27bd4b8d7..1d38f26d5 100644
--- a/src/components/AdminSettings/StunServer.vue
+++ b/src/components/AdminSettings/StunServer.vue
@@ -44,7 +44,7 @@
 			:aria-label="t('spreed', 'Delete this server')"
 			@click="removeServer">
 			<template #icon>
-				<Delete />
+				<Delete :size="20" />
 			</template>
 		</Button>
 	</div>
@@ -52,17 +52,12 @@
 
 <script>
 import Button from '@nextcloud/vue/dist/Components/Button'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import AlertCircle from 'vue-material-design-icons/AlertCircle'
 import Delete from 'vue-material-design-icons/Delete'
 
 export default {
 	name: 'StunServer',
 
-	directives: {
-		tooltip: Tooltip,
-	},
-
 	components: {
 		Button,
 		AlertCircle,
diff --git a/src/components/AdminSettings/StunServers.vue b/src/components/AdminSettings/StunServers.vue
index 4eb0a59a4..5418601cc 100644
--- a/src/components/AdminSettings/StunServers.vue
+++ b/src/components/AdminSettings/StunServers.vue
@@ -31,7 +31,7 @@
 				:aria-label="t('spreed', 'Add a new STUN server')"
 				@click="newServer">
 				<template #icon>
-					<Plus />
+					<Plus :size="20" />
 				</template>
 			</Button>
 		</h2>
@@ -57,7 +57,6 @@
 <script>
 import StunServer from '../../components/AdminSettings/StunServer.vue'
 import Button from '@nextcloud/vue/dist/Components/Button'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import Plus from 'vue-material-design-icons/Plus'
 import debounce from 'debounce'
 import { loadState } from '@nextcloud/initial-state'
@@ -66,10 +65,6 @@ import { showSuccess } from '@nextcloud/dialogs'
 export default {
 	name: 'StunServers',
 
-	directives: {
-		tooltip: Tooltip,
-	},
-
 	components: {
 		Button,
 		StunServer,
@@ -159,13 +154,6 @@ export default {
 		display: flex;
 		align-items: center;
 	}
-
-	&__add-icon {
-		display: inline-block;
-		width: 44px;
-		height: 44px;
-		vertical-align: middle;
-	}
 }
 
 </style>
diff --git a/src/components/AdminSettings/TurnServer.vue b/src/components/AdminSettings/TurnServer.vue
index 1f4d2c636..d9ce21df0 100644
--- a/src/components/AdminSettings/TurnServer.vue
+++ b/src/components/AdminSettings/TurnServer.vue
@@ -89,7 +89,7 @@
 			:aria-label="t('spreed', 'Delete this server')"
 			@click="removeServer">
 			<template #icon>
-				<Delete />
+				<Delete :size="20" />
 			</template>
 		</Button>
 	</div>
diff --git a/src/components/AdminSettings/TurnServers.vue b/src/components/AdminSettings/TurnServers.vue
index 6e6294d5d..a4edc5952 100644
--- a/src/components/AdminSettings/TurnServers.vue
+++ b/src/components/AdminSettings/TurnServers.vue
@@ -31,7 +31,7 @@
 				:aria-label="t('spreed', 'Add a new TURN server')"
 				@click="newServer">
 				<template #icon>
-					<Plus />
+					<Plus :size="20" />
 				</template>
 			</Button>
 		</h2>
@@ -61,7 +61,6 @@
 
 <script>
 import Button from '@nextcloud/vue/dist/Components/Button'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import TurnServer from '../../components/AdminSettings/TurnServer.vue'
 import { loadState } from '@nextcloud/initial-state'
 import Plus from 'vue-material-design-icons/Plus'
@@ -71,10 +70,6 @@ import debounce from 'debounce'
 export default {
 	name: 'TurnServers',
 
-	directives: {
-		tooltip: Tooltip,
-	},
-
 	components: {
 		Button,
 		TurnServer,
@@ -176,13 +171,6 @@ export default {
 		display: flex;
 		align-items: center;
 	}
-
-	&__add-icon {
-		display: inline-block;
-		width: 44px;
-		height: 44px;
-		vertical-align: middle;
-	}
 }
 
 </style>