diff options
Diffstat (limited to 'core/src/components/Profile/PrimaryActionButton.vue')
| -rw-r--r-- | core/src/components/Profile/PrimaryActionButton.vue | 91 |
1 files changed, 26 insertions, 65 deletions
diff --git a/core/src/components/Profile/PrimaryActionButton.vue b/core/src/components/Profile/PrimaryActionButton.vue index 7a1f031b60c..dbc446b3d90 100644 --- a/core/src/components/Profile/PrimaryActionButton.vue +++ b/core/src/components/Profile/PrimaryActionButton.vue @@ -1,43 +1,36 @@ <!-- - - @copyright 2021, Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.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/>. - - + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> - <a class="profile__primary-action-button" - :class="{ 'disabled': disabled }" + <NcButton type="primary" :href="href" + alignment="center" :target="target" - rel="noopener noreferrer nofollow" - v-on="$listeners"> - <img class="icon" - :class="[icon, { 'icon-invert': colorPrimaryText === '#ffffff' }]" - :src="icon"> + :disabled="disabled"> + <template #icon> + <img class="icon" + aria-hidden="true" + :src="icon" + alt=""> + </template> <slot /> - </a> + </NcButton> </template> <script> -export default { +import { defineComponent } from 'vue' +import { t } from '@nextcloud/l10n' +import NcButton from '@nextcloud/vue/components/NcButton' + +export default defineComponent({ name: 'PrimaryActionButton', + components: { + NcButton, + }, + props: { disabled: { type: Boolean, @@ -58,46 +51,14 @@ export default { }, }, - computed: { - colorPrimaryText() { - // For some reason the returned string has prepended whitespace - return getComputedStyle(document.body).getPropertyValue('--color-primary-text').trim() - }, + methods: { + t, }, -} +}) </script> <style lang="scss" scoped> - .profile__primary-action-button { - font-size: var(--default-font-size); - font-weight: bold; - width: 188px; - height: 44px; - padding: 0 16px; - line-height: 44px; - text-align: center; - border-radius: var(--border-radius-pill); - color: var(--color-primary-text); - background-color: var(--color-primary-element); - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - .icon { - display: inline-block; - vertical-align: middle; - margin-bottom: 2px; - margin-right: 4px; - - &.icon-invert { - filter: invert(1); - } - } - - &:hover, - &:focus, - &:active { - background-color: var(--color-primary-element-light); - } + .icon { + filter: var(--primary-invert-if-dark); } </style> |