diff --git a/src/components/misc/modal.vue b/src/components/misc/modal.vue
index 3ba34cd336..18eec52a4f 100644
--- a/src/components/misc/modal.vue
+++ b/src/components/misc/modal.vue
@@ -99,6 +99,9 @@ watchEffect(() => {
diff --git a/src/composables/useRouteWithModal.ts b/src/composables/useRouteWithModal.ts
index c7ff459853..d4e17c5c7d 100644
--- a/src/composables/useRouteWithModal.ts
+++ b/src/composables/useRouteWithModal.ts
@@ -19,7 +19,7 @@ export function useRouteWithModal() {
return
}
- // logic from vue-router
+ // this is adapted from vue-router
// https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
const routePropsOption = route.matched[0]?.props.default
const routeProps = routePropsOption
@@ -28,7 +28,9 @@ export function useRouteWithModal() {
: typeof routePropsOption === 'function'
? routePropsOption(route)
: routePropsOption
- : null
+ : {}
+
+ routeProps.backdropView = backdropView.value
const component = route.matched[0]?.components?.default
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 82257ccb7a..ae999f9b0c 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -1,5 +1,12 @@
-
+
@@ -267,15 +274,7 @@
-
import {ref, reactive, toRef, shallowReactive, computed, watch, watchEffect, nextTick, type PropType} from 'vue'
-import {useRoute, useRouter} from 'vue-router'
+import {useRouter, type RouteLocation} from 'vue-router'
import {useI18n} from 'vue-i18n'
import {unrefElement} from '@vueuse/core'
import cloneDeep from 'lodash.clonedeep'
@@ -494,11 +493,13 @@ const props = defineProps({
type: Number as PropType,
required: true,
},
+ backdropView: {
+ type: String as PropType,
+ },
})
defineEmits(['close'])
-const route = useRoute()
const router = useRouter()
const {t} = useI18n({useScope: 'global'})
@@ -567,8 +568,7 @@ const color = computed(() => {
const hasAttachments = computed(() => attachmentStore.attachments.length > 0)
-// HACK:
-const shouldShowClosePopup = computed(() => (route.name as string).includes('kanban'))
+const isModal = computed(() => Boolean(props.backdropView))
function attachmentUpload(file: File, onSuccess?: (url: string) => void) {
return uploadFile(taskId.value, file, onSuccess)
@@ -799,6 +799,7 @@ $flash-background-duration: 750ms;
@media screen and (max-width: $desktop) {
padding-bottom: 0;
}
+}
.subtitle {
color: var(--grey-500);
@@ -965,6 +966,12 @@ $flash-background-duration: 750ms;
}
.action-buttons {
+ @media screen and (min-width: $tablet) {
+ position: sticky;
+ top: $navbar-height + 1.5rem;
+ align-self: flex-start;
+ }
+
.button {
width: 100%;
margin-bottom: .5rem;
@@ -976,6 +983,18 @@ $flash-background-duration: 750ms;
}
}
+ .is-modal .action-buttons {
+ // we need same top margin for the modal close button
+ @media screen and (min-width: $tablet) {
+ top: 6.5rem;
+ }
+ // this is the moment when the fixed close button is outside the modal
+ // => we can fill up the space again
+ @media screen and (min-width: calc(#{$desktop} + 84px)) {
+ top: 0;
+ }
+ }
+
.created {
font-size: .75rem;
color: var(--grey-500);
@@ -985,7 +1004,7 @@ $flash-background-duration: 750ms;
.checklist-summary {
padding-left: .25rem;
}
-}
+
.task-view-container {
padding-bottom: 1rem;