ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: add variant hint-modal to modal component (#764)

Browse Source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/764
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-09-24 18:08:48 +00:00
committed by konrad
parent 97416ab2d5
commit 4f2378ff02
17 changed files with 258 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/About.vue
View File

@ -1,14 +1,10 @@
<template>
<transition name="fade">
<div class="modal-mask hint-modal">
<div
class="modal-container"
@click.self="$router.back()"
@shortkey="$router.back()"
v-shortkey="['esc']"
>
<div class="modal-content">
<card
<modal
@close="$router.back()"
transition-name="fade"
variant="hint-modal"
>
<card
class="has-background-white has-no-shadow"
:title="$t('about.title')"
:has-close="true"
@ -33,10 +29,8 @@
</x-button>
</footer>
</card>
</div>
</div>
</div>
</transition>
</modal>
</template>
<script>

16
src/views/filters/CreateSavedFilter.vue
View File

@ -1,12 +1,8 @@
<template>
<div class="modal-mask hint-modal">
<div
class="modal-container"
@click.self="$router.back()"
@shortkey="$router.back()"
v-shortkey="['esc']"
>
<div class="modal-content">
<modal
@close="$router.back()"
variant="hint-modal"
>
<card class="has-background-white has-no-shadow" :title="$t('filters.create.title')">
<p>
{{ $t('filters.create.description') }}
@ -60,9 +56,7 @@
{{ $t('filters.create.action') }}
</x-button>
</card>
</div>
</div>
</div>
</modal>
</template>
<script>

30
src/views/tasks/TaskDetailViewModal.vue
View File

@ -1,19 +1,13 @@
<template>
<div class="modal-mask">
<div
class="modal-container"
@mousedown.self="close()"
v-shortkey="['esc']"
@shortkey="close()"
>
<div class="scrolling-content">
<modal
@close="close()"
variant="scrolling"
>
<a @click="close()" class="close">
<icon icon="times"/>
</a>
<task-detail-view/>
</div>
</div>
</div>
</modal>
</template>
<script>
@ -53,3 +47,17 @@ export default {
},
}
</script>
<style lang="scss" scoped>
.close {
position: fixed;
top: 5px;
right: 26px;
color: $white;
font-size: 2rem;
@media screen and (max-width: $desktop) {
display: none;
}
}
</style>