diff options
Diffstat (limited to 'src')
5 files changed, 83 insertions, 56 deletions
diff --git a/src/components/AdminSettings/WebServerSetupChecks.vue b/src/components/AdminSettings/WebServerSetupChecks.vue index 9cb033c9d..f84509d21 100644 --- a/src/components/AdminSettings/WebServerSetupChecks.vue +++ b/src/components/AdminSettings/WebServerSetupChecks.vue @@ -32,35 +32,34 @@ <ul class="web-server-setup-checks"> <li class="background-blur"> {{ t('spreed', 'Files required for background blur can be loaded') }} - <button v-if="backgroundBlurAvailable === false" - v-tooltip="backgroundBlurAvailableToolTip" + <ButtonVue v-tooltip="backgroundBlurAvailableToolTip" + type="tertiary" + class="vue-button-inline" + :class="{'success-button': backgroundBlurAvailable === true, 'error-button': backgroundBlurAvailable === false}" :aria-label="backgroundBlurAvailableAriaLabel" - class="icon" - :class="backgroundBlurAvailableClasses" - @click="checkBackgroundBlur" /> - <button v-else-if="backgroundBlurAvailable === true" - v-tooltip="backgroundBlurAvailableToolTip" - :aria-label="backgroundBlurAvailableAriaLabel" - class="icon" - :class="backgroundBlurAvailableClasses" - @click="checkBackgroundBlur" /> - <span v-else - v-tooltip="backgroundBlurAvailableToolTip" - :aria-label="backgroundBlurAvailableAriaLabel" - class="icon" - :class="backgroundBlurAvailableClasses" /> + @click="checkBackgroundBlur"> + <template #icon> + <AlertCircle v-if="backgroundBlurAvailable === false" size="20" /> + <Check v-else-if="backgroundBlurAvailable === true" size="20" /> + <span v-else class="icon icon-loading-small" /> + </template> + </ButtonVue> </li> </ul> </div> </template> <script> -import { generateFilePath } from '@nextcloud/router' +import AlertCircle from 'vue-material-design-icons/AlertCircle' +import ButtonVue from '@nextcloud/vue/dist/Components/Button' +import Check from 'vue-material-design-icons/Check' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip' -import { VIRTUAL_BACKGROUND_TYPE } from '../../utils/media/effects/virtual-background/constants.js' import JitsiStreamBackgroundEffect from '../../utils/media/effects/virtual-background/JitsiStreamBackgroundEffect.js' import VirtualBackground from '../../utils/media/pipeline/VirtualBackground.js' + +import { generateFilePath } from '@nextcloud/router' import { loadState } from '@nextcloud/initial-state' +import { VIRTUAL_BACKGROUND_TYPE } from '../../utils/media/effects/virtual-background/constants.js' export default { name: 'WebServerSetupChecks', @@ -69,6 +68,12 @@ export default { tooltip: Tooltip, }, + components: { + AlertCircle, + ButtonVue, + Check, + }, + data() { return { backgroundBlurLoaded: undefined, @@ -81,14 +86,6 @@ export default { return this.backgroundBlurLoaded }, - backgroundBlurAvailableClasses() { - return { - 'icon-checkmark': this.backgroundBlurAvailable === true, - 'icon-error': this.backgroundBlurAvailable === false, - 'icon-loading-small': this.backgroundBlurAvailable === undefined, - } - }, - backgroundBlurAvailableAriaLabel() { if (this.backgroundBlurAvailable === false) { return t('spreed', 'Failed') @@ -182,9 +179,15 @@ export default { </script> <style lang="scss" scoped> -button.icon { - background-color: transparent; - border: none; - width: 44px; +.vue-button-inline { + display: inline-block !important; + + &.success-button { + color: var(--color-success); + } + + &.error-button { + color: var(--color-error); + } } </style> diff --git a/src/components/CallView/shared/EmptyCallView.vue b/src/components/CallView/shared/EmptyCallView.vue index 797a02fd0..d2d8fb690 100644 --- a/src/components/CallView/shared/EmptyCallView.vue +++ b/src/components/CallView/shared/EmptyCallView.vue @@ -27,15 +27,16 @@ <p v-if="message" class="emptycontent-additional"> {{ message }} </p> - <button v-if="showLink" - class="primary" + <ButtonVue v-if="showLink" + type="primary" @click.stop.prevent="copyLinkToConversation"> {{ t('spreed', 'Copy link') }} - </button> + </ButtonVue> </div> </template> <script> +import ButtonVue from '@nextcloud/vue/dist/Components/Button' import { showError, showSuccess } from '@nextcloud/dialogs' import { generateUrl } from '@nextcloud/router' import { CONVERSATION, PARTICIPANT } from '../../../constants.js' @@ -44,6 +45,10 @@ export default { name: 'EmptyCallView', + components: { + ButtonVue, + }, + props: { isGrid: { type: Boolean, @@ -175,6 +180,8 @@ export default { align-content: center; justify-content: center; text-align: center; + z-index: 1; // Otherwise the "Copy link" button is not clickable + .icon { background-size: 64px; height: 64px; diff --git a/src/components/ConversationSettings/ConversationPermissionsSettings.vue b/src/components/ConversationSettings/ConversationPermissionsSettings.vue index 3d6da349c..5dec2e2ab 100644 --- a/src/components/ConversationSettings/ConversationPermissionsSettings.vue +++ b/src/components/ConversationSettings/ConversationPermissionsSettings.vue @@ -66,12 +66,14 @@ </CheckboxRadioSwitch> <!-- Edit advanced permissions --> - <button v-show="showEditButton" + <ButtonVue v-show="showEditButton" + type="tertiary" :aria-label="t('spreed', 'Edit permissions')" - class="nc-button nc-button__main" @click="showPermissionsEditor = true"> - <Pencil :size="20" /> - </button> + <template #icon> + <Pencil :size="20" /> + </template> + </ButtonVue> </div> <PermissionEditor v-if="showPermissionsEditor" :conversation-name="conversationName" @@ -84,6 +86,7 @@ <script> import PermissionEditor from '../PermissionsEditor/PermissionsEditor.vue' +import ButtonVue from '@nextcloud/vue/dist/Components/Button' import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch' import Pencil from 'vue-material-design-icons/Pencil.vue' import { PARTICIPANT } from '../../constants.js' @@ -96,6 +99,7 @@ export default { components: { PermissionEditor, + ButtonVue, CheckboxRadioSwitch, Pencil, }, diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue index 64387999b..621eab861 100644 --- a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue +++ b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue @@ -35,7 +35,7 @@ <div class="basic-settings"> <div v-show="!enabled" class="add-part-wrapper"> - <span class="icon icon-add" /> + <Plus class="icon" size="20" /> <Multiselect ref="partMultiselect" v-model="selectedType" label="displayName" @@ -64,10 +64,15 @@ {{ t('spreed', 'Enable bridge') }} ({{ processStateText }}) </label> - <button v-if="enabled" + <ButtonVue v-if="enabled" + type="tertiary" v-tooltip.top="{ content: t('spreed', 'Show Matterbridge log') }" - class="icon icon-edit" - @click="showLogContent" /> + :aria-label="t('spreed', 'Show Matterbridge log')" + @click="showLogContent"> + <template #icon> + <Message size="20" /> + </template> + </ButtonVue> <Modal v-if="logModal" :container="container" @close="closeLogModal"> @@ -100,8 +105,11 @@ import { } from '../../../services/matterbridgeService.js' import { showSuccess } from '@nextcloud/dialogs' import { imagePath } from '@nextcloud/router' +import ButtonVue from '@nextcloud/vue/dist/Components/Button' import Multiselect from '@nextcloud/vue/dist/Components/Multiselect' +import Message from 'vue-material-design-icons/Message' import Modal from '@nextcloud/vue/dist/Components/Modal' +import Plus from 'vue-material-design-icons/Plus' import BridgePart from './BridgePart.vue' import Vue from 'vue' @@ -113,7 +121,10 @@ export default { components: { Multiselect, BridgePart, + ButtonVue, + Message, Modal, + Plus, }, mixins: [ @@ -699,7 +710,8 @@ export default { display: inline-block; width: 40px; height: 34px; - background-position: 14px center; + padding: 6px 10px 0; + vertical-align: middle; } .add-part-wrapper { margin-top: 5px; diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue index 7fcb4308f..eacca0878 100644 --- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue +++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue @@ -31,18 +31,27 @@ <span class="contact-selection-bubble__username"> {{ displayName }} </span> - <button class="icon-close contact-selection-bubble__remove" - @click="removeParticipantFromSelection(participant)" /> + <ButtonVue type="tertiary-no-background" + :aria-label="removeLabel" + @click="removeParticipantFromSelection(participant)"> + <template #icon> + <Close size="16" /> + </template> + </ButtonVue> </div> </template> <script> +import ButtonVue from '@nextcloud/vue/dist/Components/Button' +import Close from 'vue-material-design-icons/Close.vue' import AvatarWrapperSmall from '../../../../AvatarWrapper/AvatarWrapperSmall.vue' export default { name: 'ContactSelectionBubble', components: { AvatarWrapperSmall, + ButtonVue, + Close, }, props: { @@ -58,6 +67,10 @@ export default { // But it causes weird scenarios in formal companies or when people have titles. return this.participant.label }, + + removeLabel() { + return t('spreed', 'Remove participant {name}', { name: this.displayName }) + }, }, methods: { @@ -90,18 +103,6 @@ $bubble-height: 24px; overflow: hidden; text-overflow: ellipsis; } - &__remove { - margin: 0 0 0 4px; - border: none; - border-radius: $bubble-height; - height: $bubble-height; - width: $bubble-height; - background-color: var(--color-primary-active); - &:active, - &:focus { - background-color: transparent !important; - } - } } </style> |