1
0

Merge branch 'main' into feature/vue3-modals-with-router-4

# Conflicts:
#	src/router/index.ts
#	src/views/tasks/TaskDetailView.vue
This commit is contained in:
kolaente
2022-01-18 21:47:17 +01:00
62 changed files with 1180 additions and 1107 deletions

View File

@ -254,4 +254,13 @@ export default {
background-color: var(--primary-dark);
}
}
@media (prefers-reduced-motion: reduce) {
@keyframes wave {
10% {
transform: translate(0, 0);
background-color: var(--primary);
}
}
}
</style>

View File

@ -24,17 +24,17 @@ export const MIGRATORS: IMigratorRecord = {
todoist: {
id: 'todoist',
name: 'Todoist',
icon: todoistIcon,
icon: todoistIcon as string,
},
trello: {
id: 'trello',
name: 'Trello',
icon: trelloIcon,
icon: trelloIcon as string,
},
'microsoft-todo': {
id: 'microsoft-todo',
name: 'Microsoft Todo',
icon: microsoftTodoIcon,
icon: microsoftTodoIcon as string,
},
'vikunja-file': {
id: 'vikunja-file',

View File

@ -1,15 +1,19 @@
<template>
<div class="content namespaces-list loader-container" :class="{'is-loading': loading}">
<x-button :to="{name: 'namespace.create'}" class="new-namespace" icon="plus">
{{ $t('namespace.create.title') }}
</x-button>
<x-button :to="{name: 'filters.create'}" class="new-namespace" icon="filter">
{{ $t('filters.create.title') }}
</x-button>
<div class="content loader-container" :class="{'is-loading': loading}" v-cy="'namespaces-list'">
<header class="namespace-header">
<fancycheckbox v-model="showArchived" @change="saveShowArchivedState" v-cy="'show-archived-check'">
{{ $t('namespace.showArchived') }}
</fancycheckbox>
<fancycheckbox class="show-archived-check" v-model="showArchived" @change="saveShowArchivedState">
{{ $t('namespace.showArchived') }}
</fancycheckbox>
<div class="action-buttons">
<x-button :to="{name: 'filters.create'}" icon="filter">
{{ $t('filters.create.title') }}
</x-button>
<x-button :to="{name: 'namespace.create'}" icon="plus" v-cy="'new-namespace'">
{{ $t('namespace.create.title') }}
</x-button>
</div>
</header>
<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="namespaces.length === 0">
{{ $t('namespace.noneAvailable') }}
@ -18,7 +22,7 @@
</router-link>
</p>
<div :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
<section :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
<x-button
:to="{name: 'list.create', params: {namespaceId: n.id}}"
class="is-pulled-right"
@ -38,12 +42,12 @@
{{ $t('namespace.unarchive') }}
</x-button>
<h1>
<span>{{ getNamespaceTitle(n) }}</span>
<h2 class="namespace-title">
<span v-cy="'namespace-title'">{{ getNamespaceTitle(n) }}</span>
<span class="is-archived" v-if="n.isArchived">
{{ $t('namespace.archived') }}
</span>
</h1>
</h2>
<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="n.lists.length === 0">
{{ $t('namespace.noLists') }}
@ -60,7 +64,7 @@
:show-archived="showArchived"
/>
</div>
</div>
</section>
</div>
</template>
@ -103,47 +107,53 @@ export default {
</script>
<style lang="scss" scoped>
.namespaces-list {
.button.new-namespace {
float: right;
margin-left: 1rem;
.namespace-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
@media screen and (max-width: $mobile) {
float: none;
width: 100%;
margin-bottom: 1rem;
}
}
@media screen and (max-width: $tablet) {
flex-direction: column;
}
}
.show-archived-check {
margin-bottom: 1rem;
}
.action-buttons {
display: flex;
justify-content: space-between;
gap: 1rem;
.namespace {
&:not(:last-child) {
margin-bottom: 1rem;
}
@media screen and (max-width: $tablet) {
width: 100%;
flex-direction: column;
align-items: stretch;
}
}
h1 {
display: flex;
align-items: center;
}
.namespace {
& + & {
margin-top: 1rem;
}
}
.is-archived {
font-size: 0.75rem;
border: 1px solid var(--grey-500);
color: $grey !important;
padding: 2px 4px;
border-radius: 3px;
font-family: $vikunja-font;
background: var(--white-translucent);
margin-left: .5rem;
}
.namespace-title {
display: flex;
align-items: center;
}
.lists {
display: flex;
flex-flow: row wrap;
}
}
.is-archived {
font-size: 0.75rem;
border: 1px solid var(--grey-500);
color: $grey !important;
padding: 2px 4px;
border-radius: 3px;
font-family: $vikunja-font;
background: var(--white-translucent);
margin-left: .5rem;
}
.lists {
display: flex;
flex-flow: row wrap;
}
</style>

View File

@ -44,7 +44,7 @@ import Message from '@/components/misc/message.vue'
const {t} = useI18n()
useTitle(t('sharing.authenticating'))
async function useAuth() {
function useAuth() {
const store = useStore()
const route = useRoute()
const router = useRouter()
@ -75,21 +75,21 @@ async function useAuth() {
password: password.value,
})
router.push({name: 'list.list', params: {listId}})
} catch (e) {
} catch (e: any) {
if (e.response?.data?.code === 13001) {
authenticateWithPassword.value = true
return
}
// TODO: Put this logic in a global errorMessage handler method which checks all auth codes
let errorMessage = t('sharing.error')
let err = t('sharing.error')
if (e.response?.data?.message) {
errorMessage = e.response.data.message
err = e.response.data.message
}
if (e.response?.data?.code === 13002) {
errorMessage = t('sharing.invalidPassword')
err = t('sharing.invalidPassword')
}
errorMessage.value = errorMessage
errorMessage.value = err
} finally {
loading.value = false
}

View File

@ -9,7 +9,7 @@
<script lang="ts" setup>
import { ref } from 'vue'
import ShowTasks from './ShowTasks'
import ShowTasks from './ShowTasks.vue'
function getNextWeekDate() {
return new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)

View File

@ -386,22 +386,28 @@
<!-- Created / Updated [by] -->
<p class="created">
<i18n-t keypath="task.detail.created">
<span v-tooltip="formatDate(task.created)">{{ formatDateSince(task.created) }}</span>
{{ task.createdBy.getDisplayName() }}
</i18n-t>
<time :datetime="formatISO(task.created)" v-tooltip="formatDate(task.created)">
<i18n-t keypath="task.detail.created">
<span>{{ formatDateSince(task.created) }}</span>
{{ task.createdBy.getDisplayName() }}
</i18n-t>
</time>
<template v-if="+new Date(task.created) !== +new Date(task.updated)">
<br/>
<!-- Computed properties to show the actual date every time it gets updated -->
<i18n-t keypath="task.detail.updated">
<span v-tooltip="updatedFormatted">{{ updatedSince }}</span>
</i18n-t>
<time :datetime="formatISO(task.updated)" v-tooltip="updatedFormatted">
<i18n-t keypath="task.detail.updated">
<span>{{ updatedSince }}</span>
</i18n-t>
</time>
</template>
<template v-if="task.done">
<br/>
<i18n-t keypath="task.detail.doneAt">
<span v-tooltip="doneFormatted">{{ doneSince }}</span>
</i18n-t>
<time :datetime="formatISO(task.doneAt)" v-tooltip="doneFormatted">
<i18n-t keypath="task.detail.doneAt">
<span>{{ doneSince }}</span>
</i18n-t>
</time>
</template>
</p>
</div>
@ -633,7 +639,6 @@ export default {
}
this.task = await this.$store.dispatch('tasks/update', this.task)
this.setActiveFields()
if (!showNotification) {
return
@ -877,7 +882,7 @@ $flash-background-duration: 750ms;
}
.action-buttons {
a.button {
.button {
width: 100%;
margin-bottom: .5rem;
justify-content: left;
@ -939,5 +944,13 @@ $flash-background-duration: 750ms;
}
}
@media (prefers-reduced-motion: reduce) {
@keyframes flash-background {
0% {
background: transparent;
}
}
}
@include modal-transition();
</style>