local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: merge TaskDetailViewModal with modal

Browse source
This commit is contained in:
Dominik Pschenitschni 2022-02-05 17:29:15 +01:00
parent de626eab31
commit 6827390b77
No known key found for this signature in database
GPG key ID: B257AC0149F43A77
3 changed files with 54 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/home/contentAuth.vue
View file

@ -36,9 +36,14 @@
</router-view>
<transition name="modal">
<TaskDetailViewModal v-if="currentModal" >
<modal
v-if="currentModal"
@close="closeModal()"
variant="scrolling"
class="task-detail-view-modal"
>
<component :is="currentModal" />
</TaskDetailViewModal>
</modal>
</transition>
<a
@ -62,7 +67,6 @@ import {useEventListener} from '@vueuse/core'
import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
import Navigation from '@/components/home/navigation.vue'
import QuickActions from '@/components/quick-actions/quick-actions.vue'
import TaskDetailViewModal from '@/views/tasks/TaskDetailViewModal.vue'
import BaseButton from '@/components/base/BaseButton.vue'
function useRouteWithModal() {
@ -100,10 +104,22 @@ function useRouteWithModal() {
)
})
return { routeWithModal, currentModal }
function closeModal() {
const historyState = computed(() => route.fullPath && window.history.state)
if (historyState.value) {
router.back()
} else {
const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
router.push(backdropRoute)
}
}
return { routeWithModal, currentModal, closeModal }
}
const { routeWithModal, currentModal } = useRouteWithModal()
const { routeWithModal, currentModal, closeModal } = useRouteWithModal()
const store = useStore()

33
src/components/modal/modal.vue
View file

@ -22,6 +22,13 @@
'is-wide': wide
}"
>
<BaseButton
@click="emit('close')"
class="close"
>
<icon icon="times"/>
</BaseButton>
<slot>
<div class="header">
<slot name="header"></slot>
@ -54,6 +61,8 @@
</template>
<script>
import BaseButton from '@/components/base/BaseButton.vue'
export const TRANSITION_NAMES = {
MODAL: 'modal',
FADE: 'fade',
@ -71,6 +80,11 @@ function validValue(values) {
export default {
name: 'modal',
components: {
BaseButton,
},
mounted() {
document.addEventListener('keydown', (e) => {
// Close the model when escape is pressed
@ -197,4 +211,23 @@ export default {
}
}
}
.close {
position: fixed;
top: 5px;
right: 26px;
color: var(--white);
font-size: 2rem;
@media screen and (max-width: $desktop) {
color: var(--dark);
}
}
</style>
<style lang="scss">
// Close icon SVG uses currentColor, change the color to keep it visible
.dark .task-detail-view-modal .close {
color: var(--grey-900);
}
</style>

53
src/views/tasks/TaskDetailViewModal.vue
View file

@ -1,53 +0,0 @@
<template>
<modal
@close="close()"
variant="scrolling"
class="task-detail-view-modal"
>
<BaseButton @click="close()" class="close">
<icon icon="times"/>
</BaseButton>
<slot />
</modal>
</template>
<script setup lang="ts">
import {computed} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import BaseButton from '@/components/base/BaseButton.vue'
const route = useRoute()
const historyState = computed(() => route.fullPath && window.history.state)
const router = useRouter()
function close() {
if (historyState.value) {
router.back()
} else {
const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
router.push(backdropRoute)
}
}
</script>
<style lang="scss" scoped>
.close {
position: fixed;
top: 5px;
right: 26px;
color: var(--white);
font-size: 2rem;
@media screen and (max-width: $desktop) {
color: var(--dark);
}
}
</style>
<style lang="scss">
// Close icon SVG uses currentColor, change the color to keep it visible
.dark .task-detail-view-modal .close {
color: var(--grey-900);
}
</style>