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

@ -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>