ami/tl-vikunja
1
0
Fork 0
Code Activity

fix: add ButtonLink component

Browse Source 
Add ButtonLink component to fix occasions where the BaseButton needs to be styled in a link color.
This commit is contained in:
Dominik Pschenitschni
2022-06-22 21:37:23 +02:00
committed by Gitea
parent 02f985d8a3
commit 12544c52ca
4 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/misc/ButtonLink.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<BaseButton class="button-link"><slot/></BaseButton>
</template>
<script setup lang="ts">
import BaseButton from '@/components/base/BaseButton.vue'
</script>
<style lang="scss">
.button-link {
color: var(--link);
&:hover {
color: var(--link-hover);
}
}
</style>

4
src/components/misc/api-config.vue
View File

@ -27,7 +27,7 @@
<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
</i18n-t>
<br/>
<BaseButton class="api-config__change-button" @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</BaseButton>
<ButtonLink class="api-config__change-button" @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</ButtonLink>
</div>
<message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2">
@ -48,7 +48,7 @@ import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
import {success} from '@/message'
import Message from '@/components/misc/message.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import ButtonLink from '@/components/misc/ButtonLink.vue'
const props = defineProps({
configureOpen: {

6
src/components/misc/error.vue
View File

@ -1,15 +1,15 @@
<template>
<message variant="danger">
<i18n-t keypath="loadingError.failed">
<BaseButton @click="reload">{{ $t('loadingError.tryAgain') }}</BaseButton>
<BaseButton href="https://vikunja.io/contact/">{{ $t('loadingError.contact') }}</BaseButton>
<ButtonLink @click="reload">{{ $t('loadingError.tryAgain') }}</ButtonLink>
<ButtonLink href="https://vikunja.io/contact/">{{ $t('loadingError.contact') }}</ButtonLink>
</i18n-t>
</message>
</template>
<script lang="ts" setup>
import Message from '@/components/misc/message.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import ButtonLink from '@/components/misc/ButtonLink.vue'
function reload() {
window.location.reload()