diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/AdminSettings/SignalingServer.vue | 20 | ||||
-rw-r--r-- | src/components/AdminSettings/SignalingServers.vue | 38 | ||||
-rw-r--r-- | src/components/AdminSettings/StunServer.vue | 7 | ||||
-rw-r--r-- | src/components/AdminSettings/StunServers.vue | 14 | ||||
-rw-r--r-- | src/components/AdminSettings/TurnServer.vue | 2 | ||||
-rw-r--r-- | src/components/AdminSettings/TurnServers.vue | 14 |
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> |