|
|
@@ -21,23 +21,33 @@ |
|
|
|
--> |
|
|
|
|
|
|
|
<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 { NcButton } from '@nextcloud/vue' |
|
|
|
import { translate as t } from '@nextcloud/l10n' |
|
|
|
|
|
|
|
export default defineComponent({ |
|
|
|
name: 'PrimaryActionButton', |
|
|
|
|
|
|
|
components: { |
|
|
|
NcButton, |
|
|
|
}, |
|
|
|
|
|
|
|
props: { |
|
|
|
disabled: { |
|
|
|
type: Boolean, |
|
|
@@ -58,46 +68,14 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
computed: { |
|
|
|
colorPrimaryText() { |
|
|
|
// For some reason the returned string has prepended whitespace |
|
|
|
return getComputedStyle(document.body).getPropertyValue('--color-primary-element-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-element-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> |