ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: add message component (#1082)

Browse Source 
This PR adds a simple message component that replaces bulma's default message.

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1082
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad
2021-11-28 14:18:27 +00:00
committed by dpschen
parent 59e915cc10
commit f8d009a6aa
23 changed files with 170 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,27 +30,25 @@
<a @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</a>
</div>
<div
class="notification is-success mt-2"
v-if="successMsg !== '' && errorMsg === ''"
>
<message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2">
{{ successMsg }}
</div>
<div
class="notification is-danger mt-2"
v-if="errorMsg !== '' && successMsg === ''"
>
</message>
<message variant="danger" v-if="errorMsg !== '' && successMsg === ''" class="mt-2">
{{ errorMsg }}
</div>
</message>
</div>
</template>
<script>
import Message from '@/components/misc/message'
import {parseURL} from 'ufo'
import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
export default {
name: 'apiConfig',
components: {
Message,
},
data() {
return {
configureApi: false,

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

@ -1,15 +1,18 @@
<template>
<div class="notification is-danger">
<message variant="danger">
<i18n-t keypath="loadingError.failed">
<a @click="reload">{{ $t('loadingError.tryAgain') }}</a>
<a href="https://vikunja.io/contact/" rel="noreferrer noopener nofollow" target="_blank">{{ $t('loadingError.contact') }}</a>
</i18n-t>
</div>
</message>
</template>
<script>
import Message from '@/components/misc/message'
export default {
name: 'error',
components: {Message},
methods: {
reload() {
window.location.reload()

18
src/components/misc/keyboard-shortcuts/index.vue
View File

@ -4,13 +4,11 @@
<template v-for="(s, i) in shortcuts" :key="i">
<h3>{{ $t(s.title) }}</h3>
<div class="message is-primary">
<div class="message-body">
{{
s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
}}
</div>
</div>
<message>
{{
s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
}}
</message>
<dl class="shortcut-list">
<template v-for="(sc, si) in s.shortcuts" :key="si">
@ -30,11 +28,15 @@
<script>
import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
import Shortcut from '@/components/misc/shortcut.vue'
import Message from '@/components/misc/message'
import {KEYBOARD_SHORTCUTS} from './shortcuts'
export default {
name: 'keyboard-shortcuts',
components: {Shortcut},
components: {
Message,
Shortcut,
},
data() {
return {
shortcuts: KEYBOARD_SHORTCUTS,

41
src/components/misc/message.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div class="message" :class="variant">
<slot/>
</div>
</template>
<script setup>
defineProps({
variant: {
type: String,
default: 'info',
},
})
</script>
<style lang="scss" scoped>
.message {
padding: .75rem 1rem;
border-radius: $radius;
}
.info {
border: 1px solid var(--primary);
background: hsla(var(--primary-hsl), .05);
}
.danger {
border: 1px solid var(--danger);
background: hsla(var(--danger-h), var(--danger-s), var(--danger-l), .05);
}
.warning {
border: 1px solid var(--warning);
background: hsla(var(--warning-h), var(--warning-s), var(--warning-l), .05);
}
.success {
border: 1px solid var(--success);
background: hsla(var(--success-h), var(--success-s), var(--success-l), .05);
}
</style>

12
src/components/misc/no-auth-wrapper.vue
View File

@ -2,14 +2,9 @@
<div class="no-auth-wrapper">
<div class="noauth-container">
<Logo class="logo" width="400" height="117" />
<div class="message is-info" v-if="motd !== ''">
<div class="message-header">
<p>{{ $t('misc.info') }}</p>
</div>
<div class="message-body">
{{ motd }}
</div>
</div>
<message v-if="motd !== ''" class="my-2">
{{ motd }}
</message>
<slot/>
</div>
</div>
@ -17,6 +12,7 @@
<script setup>
import Logo from '@/components/home/Logo.vue'
import message from '@/components/misc/message'
import {useStore} from 'vuex'
import {computed} from 'vue'

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

@ -16,7 +16,7 @@
<p v-if="error === errorNoApiUrl">
{{ $t('ready.noApiUrlConfigured') }}
</p>
<div class="notification is-danger" v-else>
<message variant="danger" v-else>
<p>
{{ $t('ready.errorOccured') }}<br/>
{{ error }}
@ -24,7 +24,7 @@
<p>
{{ $t('ready.checkApiUrl') }}
</p>
</div>
</message>
<api-config :configure-open="true" @found-api="load"/>
</card>
</no-auth-wrapper>
@ -43,6 +43,7 @@
<script>
import Logo from '@/assets/logo.svg?component'
import ApiConfig from '@/components/misc/api-config'
import Message from '@/components/misc/message'
import NoAuthWrapper from '@/components/misc/no-auth-wrapper'
import {mapState} from 'vuex'
import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
@ -50,6 +51,7 @@ import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
export default {
name: 'ready',
components: {
Message,
Logo,
NoAuthWrapper,
ApiConfig,