feat: wrap edit-task with card (#948)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: vikunja/frontend#948
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
This commit is contained in:
dpschen 2021-11-13 14:13:56 +00:00 committed by konrad
parent 20e059c921
commit 8e6e52bf02
9 changed files with 51 additions and 41 deletions

View File

@ -4,7 +4,13 @@
<p class="card-header-title">
{{ title }}
</p>
<a @click="$emit('close')" class="card-header-icon" v-if="hasClose">
<a
v-if="hasClose"
class="card-header-icon"
:aria-label="$t('misc.close')"
@click="$emit('close')"
v-tooltip="$t('misc.close')"
>
<span class="icon">
<icon :icon="closeIcon"/>
</span>
@ -36,7 +42,7 @@ export default {
},
closeIcon: {
type: String,
default: 'angle-right',
default: 'times',
},
shadow: {
type: Boolean,

View File

@ -6,7 +6,6 @@
:padding="false"
class="has-text-left has-overflow"
:has-close="true"
close-icon="times"
@close="$router.back()"
:loading="loading"
>

View File

@ -1,6 +1,6 @@
<template>
<modal @close="close()">
<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
<card class="has-no-shadow" :title="$t('keyboardShortcuts.title')">
<div class="message is-primary">
<div class="message-body">
{{ $t('keyboardShortcuts.allPages') }}

View File

@ -1,4 +1,10 @@
<template>
<card
class="taskedit"
:title="$t('list.list.editTask')"
@close="$emit('close')"
:has-close="true"
>
<form @submit.prevent="editTaskSubmit()">
<div class="field">
<label class="label" for="tasktext">{{ $t('task.attributes.title') }}</label>
@ -66,6 +72,7 @@
{{ $t('task.openDetail') }}
</router-link>
</form>
</card>
</template>
<script>

View File

@ -167,15 +167,13 @@
</x-button>
</form>
<transition name="fade">
<card
<edit-task
v-if="isTaskEdit"
class="taskedit"
:title="$t('list.list.editTask')"
@close="() => {isTaskEdit = false;taskToEdit = null}"
:has-close="true"
>
<edit-task :task="taskToEdit"/>
</card>
:task="taskToEdit"
/>
</transition>
</div>
</template>
@ -612,7 +610,6 @@ $gantt-vertical-border-color: $grey-100;
.taskedit {
position: fixed;
min-height: 0;
top: 10vh;
right: 10vw;
z-index: 5;

View File

@ -11,7 +11,7 @@
:overflow="true"
variant="hint-modal"
>
<card class="has-background-white has-no-shadow" :title="$t('task.quickAddMagic.title')">
<card class="has-no-shadow" :title="$t('task.quickAddMagic.title')">
<p>{{ $t('task.quickAddMagic.intro') }}</p>
<h3>{{ $t('task.attributes.labels') }}</h3>

View File

@ -5,30 +5,29 @@
variant="hint-modal"
>
<card
class="has-background-white has-no-shadow"
:title="$t('about.title')"
:has-close="true"
close-icon="times"
@close="$router.back()"
:padding="false"
>
<div class="p-4">
<p>
{{ $t('about.frontendVersion', {version: this.frontendVersion}) }}
</p>
<p>
{{ $t('about.apiVersion', {version: this.apiVersion}) }}
</p>
</div>
<footer class="modal-card-foot is-flex is-justify-content-flex-end">
<x-button
type="secondary"
@click.prevent.stop="$router.back()"
>
{{ $t('misc.close') }}
</x-button>
</footer>
</card>
class="has-no-shadow"
:title="$t('about.title')"
:has-close="true"
@close="$router.back()"
:padding="false"
>
<div class="p-4">
<p>
{{ $t('about.frontendVersion', {version: this.frontendVersion}) }}
</p>
<p>
{{ $t('about.apiVersion', {version: this.apiVersion}) }}
</p>
</div>
<footer class="modal-card-foot is-flex is-justify-content-flex-end">
<x-button
type="secondary"
@click.prevent.stop="$router.back()"
>
{{ $t('misc.close') }}
</x-button>
</footer>
</card>
</modal>
</template>

View File

@ -3,7 +3,7 @@
@close="$router.back()"
variant="hint-modal"
>
<card class="has-background-white has-no-shadow" :title="$t('filters.create.title')">
<card class="has-no-shadow" :title="$t('filters.create.title')">
<p>
{{ $t('filters.create.description') }}
</p>

View File

@ -116,13 +116,14 @@
</template>
</draggable>
</div>
<card
<edit-task
v-if="isTaskEdit"
class="taskedit mt-0" :title="$t('list.list.editTask')" :has-close="true"
class="taskedit mt-0"
:title="$t('list.list.editTask')"
@close="() => isTaskEdit = false"
:shadow="false">
<edit-task :task="taskEditTask"/>
</card>
:shadow="false"
:task="taskEditTask"
/>
</div>
<Pagination
@ -344,6 +345,7 @@ export default {
width: 33%;
margin-right: 1rem;
margin-left: .5rem;
min-height: calc(100% - 1rem);
@media screen and (max-width: $tablet) {
width: 100%;