diff options
Diffstat (limited to 'src')
11 files changed, 9 insertions, 104 deletions
diff --git a/src/assets/buttons.scss b/src/assets/buttons.scss deleted file mode 100644 index 1718a8db7..000000000 --- a/src/assets/buttons.scss +++ /dev/null @@ -1,58 +0,0 @@ -/** - * @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com> - * - * @author Marco Ambrosini <marcoambrosini@icloud.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * - */ - -@import 'variables'; - -.nc-button { - width: $clickable-area; - height: $clickable-area; - flex-shrink: 0; - border: 0; - padding: 0; - z-index: 1; - display: flex; - align-items: center; - justify-content: center; - margin: 0; - &:not(.primary) { - background-color: transparent; - } - &__main { - &:hover, - &:focus { - background-color: var(--color-background-hover); - } - &:disabled { - &:hover { - background-color: var(--color-primary-element); - } - } - } - // Used on top of gray background such as hovered messages - &__main--dark { - &:hover, - &:focus { - background-color: var(--color-background-darker); - } - } - -} diff --git a/src/components/ConversationSettings/ConversationPermissionsSettings.vue b/src/components/ConversationSettings/ConversationPermissionsSettings.vue index 5dec2e2ab..ff5515d82 100644 --- a/src/components/ConversationSettings/ConversationPermissionsSettings.vue +++ b/src/components/ConversationSettings/ConversationPermissionsSettings.vue @@ -236,8 +236,6 @@ export default { </script> <style lang="scss" scoped> -@import '../../assets/buttons'; - ::v-deep .mx-input { margin: 0; } diff --git a/src/components/ConversationSettings/DangerZone.vue b/src/components/ConversationSettings/DangerZone.vue index c0c8398aa..610b9f278 100644 --- a/src/components/ConversationSettings/DangerZone.vue +++ b/src/components/ConversationSettings/DangerZone.vue @@ -178,13 +178,6 @@ export default { </script> <style lang="scss" scoped> -button { - height: 44px; - border: none; - display: block; - margin: 8px 0; -} - h4 { font-weight: bold; } diff --git a/src/components/ConversationSettings/Matterbridge/BridgePart.vue b/src/components/ConversationSettings/Matterbridge/BridgePart.vue index 19dde6197..80aefd666 100644 --- a/src/components/ConversationSettings/Matterbridge/BridgePart.vue +++ b/src/components/ConversationSettings/Matterbridge/BridgePart.vue @@ -185,10 +185,6 @@ export default { padding-top: 10px; } -button { - display: inline-block; -} - h3 { display: flex; margin-bottom: 0; diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue index 621eab861..5a614651d 100644 --- a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue +++ b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue @@ -728,21 +728,6 @@ export default { margin: 0 10px 0 15px; } } - button { - opacity: 0.5; - width: 44px; - height: 44px; - border-radius: var(--border-radius-pill); - background-color: transparent; - border: none; - margin: 0; - - &:hover, - &:focus { - opacity: 1; - background-color: var(--color-background-hover); - } - } } } diff --git a/src/components/Description/Description.vue b/src/components/Description/Description.vue index 17f53b55e..6d9cb9dff 100644 --- a/src/components/Description/Description.vue +++ b/src/components/Description/Description.vue @@ -243,7 +243,6 @@ export default { <style lang="scss" scoped> @import '../../assets/variables'; -@import '../../assets/buttons'; .description { display: flex; diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js index 0c19aea9f..aaf04708d 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js +++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js @@ -5,6 +5,7 @@ import { cloneDeep } from 'lodash' import { EventBus } from '../../../../services/EventBus.js' import storeConfig from '../../../../store/storeConfig.js' import { CONVERSATION, ATTENDEE, PARTICIPANT } from '../../../../constants.js' +import ButtonVue from '@nextcloud/vue/dist/Components/Button' // Components import Check from 'vue-material-design-icons/Check' @@ -665,13 +666,13 @@ describe('Message.vue', () => { expect(wrapper.vm.showReloadButton).toBe(true) - const reloadButtonIcon = reloadButton.find('button') - expect(reloadButtonIcon.exists()).toBe(true) + const reloadButtonVue = wrapper.findComponent(ButtonVue) + expect(reloadButtonVue.exists()).toBe(true) const retryEvent = jest.fn() EventBus.$on('retry-message', retryEvent) - await reloadButtonIcon.trigger('click') + await reloadButtonVue.vm.$emit('click') expect(retryEvent).toHaveBeenCalledWith(123) }) diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index 69fa93422..eb32cc13d 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -79,14 +79,13 @@ the main body of the message as well as a quote. @focus="showReloadButton = true" @mouseleave="showReloadButton = true" @blur="showReloadButton = true"> - <Button v-if="sendingErrorCanRetry && showReloadButton" - class="nc-button nc-button__main--dark" + <ButtonVue v-if="sendingErrorCanRetry && showReloadButton" :aria-label="sendingErrorIconTooltip" @click="handleRetry"> <template #icon> <Reload :size="16" /> </template> - </Button> + </ButtonVue> <AlertCircle v-else :size="16" /> </div> @@ -170,6 +169,7 @@ the main body of the message as well as a quote. </template> <script> +import ButtonVue from '@nextcloud/vue/dist/Components/Button' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip' import CallButton from '../../../TopBar/CallButton.vue' import DeckCard from './MessagePart/DeckCard.vue' @@ -204,6 +204,7 @@ export default { }, components: { + ButtonVue, CallButton, Quote, RichText, @@ -782,7 +783,6 @@ export default { <style lang="scss" scoped> @import '../../../../assets/variables'; -@import '../../../../assets/buttons'; .message:hover .normal-message-body { border-radius: 8px; diff --git a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue index 5425986d2..80d98a751 100644 --- a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue +++ b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue @@ -330,8 +330,6 @@ export default { <style lang="scss" scoped> -@import '../../../assets/buttons'; - .audio-recorder { display: flex; // Audio record button diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index 462840628..792dcfe36 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -561,7 +561,7 @@ export default { </script> <style lang="scss" scoped> -@import '../../assets/buttons'; +@import '../../assets/variables'; .wrapper { display: flex; diff --git a/src/components/PermissionsEditor/PermissionsEditor.vue b/src/components/PermissionsEditor/PermissionsEditor.vue index c1daeff22..a3a731891 100644 --- a/src/components/PermissionsEditor/PermissionsEditor.vue +++ b/src/components/PermissionsEditor/PermissionsEditor.vue @@ -220,13 +220,6 @@ export default { </script> <style lang="scss" scoped> -@import '../../assets/buttons'; - -.nc-button { - width: 100%; - margin-top: 12px; -} - .wrapper { padding: 0 24px 24px 24px; } |