diff options
author | Joas Schilling <coding@schilljs.com> | 2022-07-26 11:06:19 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2022-07-26 11:06:19 +0300 |
commit | e501d3f9946edddcd5ed5d224379a70d48ac830f (patch) | |
tree | cea023a4ca80fae604c7d7efd45d6b7d894ff65f /src/components | |
parent | 1f2aca431abf9ab83d553e0bb616c829033b7cb6 (diff) |
Move TURN and STUN to Vue components
Signed-off-by: Joas Schilling <coding@schilljs.com>
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AdminSettings/StunServer.vue | 29 | ||||
-rw-r--r-- | src/components/AdminSettings/StunServers.vue | 47 | ||||
-rw-r--r-- | src/components/AdminSettings/TurnServer.vue | 41 | ||||
-rw-r--r-- | src/components/AdminSettings/TurnServers.vue | 43 | ||||
-rw-r--r-- | src/components/missingMaterialDesignIcons/CategoryMonitoring.vue | 39 |
5 files changed, 159 insertions, 40 deletions
diff --git a/src/components/AdminSettings/StunServer.vue b/src/components/AdminSettings/StunServer.vue index 9ab2729fe..27bd4b8d7 100644 --- a/src/components/AdminSettings/StunServer.vue +++ b/src/components/AdminSettings/StunServer.vue @@ -32,16 +32,29 @@ :disabled="loading" :aria-label="t('spreed', 'STUN server URL')" @input="update"> - <span v-show="!isValidServer" class="icon icon-error" /> - <a v-show="!loading" - v-tooltip.auto="t('spreed', 'Delete this server')" - class="icon icon-delete" - @click="removeServer" /> + <Button v-show="!isValidServer" + type="tertiary-no-background" + :aria-label="t('spreed', 'The server address is invalid')"> + <template #icon> + <AlertCircle /> + </template> + </Button> + <Button v-show="!loading" + type="tertiary-no-background" + :aria-label="t('spreed', 'Delete this server')" + @click="removeServer"> + <template #icon> + <Delete /> + </template> + </Button> </div> </template> <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', @@ -50,6 +63,12 @@ export default { tooltip: Tooltip, }, + components: { + Button, + AlertCircle, + Delete, + }, + props: { server: { type: String, diff --git a/src/components/AdminSettings/StunServers.vue b/src/components/AdminSettings/StunServers.vue index 1b9d3bb23..f583dacb4 100644 --- a/src/components/AdminSettings/StunServers.vue +++ b/src/components/AdminSettings/StunServers.vue @@ -21,17 +21,19 @@ --> <template> - <div id="stun_server" class="videocalls section"> + <div id="stun_server" class="videocalls section stun-server"> <h2> {{ t('spreed', 'STUN servers') }} - <span v-if="saved" class="icon icon-checkmark-color" :title="t('spreed', 'Saved')" /> - <a v-else-if="!loading" - v-tooltip.auto="t('spreed', 'Add a new server')" - class="icon icon-add" + + <Button v-if="!loading" + class="stun-server__add-icon" + type="tertiary-no-background" + :aria-label="t('spreed', 'Add a new STUN server')" @click="newServer"> - <span class="hidden-visually">{{ t('spreed', 'Add a new server') }}</span> - </a> - <span v-else class="icon icon-loading-small" /> + <template #icon> + <Plus /> + </template> + </Button> </h2> <p class="settings-hint"> @@ -54,9 +56,12 @@ <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' +import { showSuccess } from '@nextcloud/dialogs' export default { name: 'StunServers', @@ -66,7 +71,9 @@ export default { }, components: { + Button, StunServer, + Plus, }, data() { @@ -126,6 +133,7 @@ export default { OCP.AppConfig.setValue('spreed', 'stun_servers', JSON.stringify(servers), { success() { + showSuccess(t('spreed', 'STUN settings saved')) self.loading = false self.toggleSave() }, @@ -143,16 +151,19 @@ export default { </script> <style lang="scss"> -.turn-server { - height: 44px; - display: flex; - align-items: center; +.stun-server { + h2 { + height: 44px; + display: flex; + align-items: center; + } + + &__add-icon { + display: inline-block; + width: 44px; + height: 44px; + vertical-align: middle; + } } -.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 366b65ddd..1f4d2c636 100644 --- a/src/components/AdminSettings/TurnServer.vue +++ b/src/components/AdminSettings/TurnServer.vue @@ -73,23 +73,38 @@ </option> </select> - <a v-show="!loading" - v-tooltip.auto="testResult" - class="icon" - :class="testIconClasses" - @click="testServer" /> - <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="testResult" + @click="testServer"> + <template #icon> + <span v-if="testing" class="icon icon-loading-small" /> + <AlertCircle v-else-if="testingError" /> + <Check v-else-if="testingSuccess" /> + <CategoryMonitoring v-else /> + </template> + </Button> + <Button v-show="!loading" + type="tertiary-no-background" + :aria-label="t('spreed', 'Delete this server')" + @click="removeServer"> + <template #icon> + <Delete /> + </template> + </Button> </div> </template> <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 Check from 'vue-material-design-icons/Check' +import Delete from 'vue-material-design-icons/Delete' import hmacSHA1 from 'crypto-js/hmac-sha1' import Base64 from 'crypto-js/enc-base64' import debounce from 'debounce' +import CategoryMonitoring from '../missingMaterialDesignIcons/CategoryMonitoring.vue' export default { name: 'TurnServer', @@ -98,6 +113,14 @@ export default { tooltip: Tooltip, }, + components: { + Button, + AlertCircle, + CategoryMonitoring, + Check, + Delete, + }, + props: { schemes: { type: String, diff --git a/src/components/AdminSettings/TurnServers.vue b/src/components/AdminSettings/TurnServers.vue index 537aba5bd..bcf9f5539 100644 --- a/src/components/AdminSettings/TurnServers.vue +++ b/src/components/AdminSettings/TurnServers.vue @@ -21,17 +21,19 @@ --> <template> - <div id="turn_server" class="videocalls section"> + <div id="turn_server" class="videocalls section turn-server"> <h2> {{ t('spreed', 'TURN servers') }} - <span v-if="saved" class="icon icon-checkmark-color" :title="t('spreed', 'Saved')" /> - <a v-else-if="!loading" - v-tooltip.auto="t('spreed', 'Add a new server')" - class="icon icon-add" + + <Button v-if="!loading" + class="turn-server__add-icon" + type="tertiary-no-background" + :aria-label="t('spreed', 'Add a new TURN server')" @click="newServer"> - <span class="hidden-visually">{{ t('spreed', 'Add a new server') }}</span> - </a> - <span v-else class="icon icon-loading-small" /> + <template #icon> + <Plus /> + </template> + </Button> </h2> <!-- eslint-disable-next-line vue/no-v-html --> @@ -58,9 +60,12 @@ </template> <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' +import { showSuccess } from '@nextcloud/dialogs' import debounce from 'debounce' export default { @@ -71,7 +76,9 @@ export default { }, components: { + Button, TurnServer, + Plus, }, data() { @@ -142,6 +149,7 @@ export default { this.loading = true OCP.AppConfig.setValue('spreed', 'turn_servers', JSON.stringify(servers), { success() { + showSuccess(t('spreed', 'TURN settings saved')) self.loading = false self.toggleSave() }, @@ -149,6 +157,7 @@ export default { }, toggleSave() { + this.saved = true setTimeout(() => { this.saved = false @@ -157,3 +166,21 @@ export default { }, } </script> + +<style lang="scss"> +.turn-server { + h2 { + height: 44px; + display: flex; + align-items: center; + } + + &__add-icon { + display: inline-block; + width: 44px; + height: 44px; + vertical-align: middle; + } +} + +</style> diff --git a/src/components/missingMaterialDesignIcons/CategoryMonitoring.vue b/src/components/missingMaterialDesignIcons/CategoryMonitoring.vue new file mode 100644 index 000000000..aa6c34b5b --- /dev/null +++ b/src/components/missingMaterialDesignIcons/CategoryMonitoring.vue @@ -0,0 +1,39 @@ +<template> + <span :aria-hidden="!title" + :aria-label="title" + class="material-design-icon category-monitoring-icon" + role="img" + v-bind="$attrs" + @click="$emit('click', $event)"> + <svg :width="size" + :height="size" + viewBox="0 0 16 16"> + <path d="m1 8h4l1.5-4.0935 3 8.1875 1.5-4.094h4" + :stroke="fillColor" + fill="none" + stroke-miterlimit="4" + stroke-width="2" /> + </svg> + + </span> +</template> + +<script> +export default { + name: 'CategoryMonitoring', + props: { + title: { + type: String, + default: '', + }, + fillColor: { + type: String, + default: 'currentColor', + }, + size: { + type: Number, + default: 24, + }, + }, +} +</script> |