2020-11-01 17:36:00 +00:00
|
|
|
<template>
|
2022-05-08 21:26:07 +00:00
|
|
|
<div class="content-auth">
|
2022-01-19 22:58:54 +00:00
|
|
|
<BaseButton
|
2023-01-23 21:26:14 +00:00
|
|
|
v-show="menuActive"
|
2022-09-24 13:20:40 +00:00
|
|
|
@click="baseStore.setMenuActive(false)"
|
2022-06-02 21:00:21 +00:00
|
|
|
class="menu-hide-button d-print-none"
|
2022-01-19 22:58:54 +00:00
|
|
|
>
|
2022-04-02 15:05:30 +00:00
|
|
|
<icon icon="times"/>
|
2022-01-19 22:58:54 +00:00
|
|
|
</BaseButton>
|
2020-11-01 17:36:00 +00:00
|
|
|
<div
|
2023-01-23 21:26:26 +00:00
|
|
|
class="app-container"
|
2022-04-02 15:05:30 +00:00
|
|
|
:class="{'has-background': background || blurHash}"
|
|
|
|
:style="{'background-image': blurHash && `url(${blurHash})`}"
|
2020-11-01 17:36:00 +00:00
|
|
|
>
|
2022-04-02 15:05:30 +00:00
|
|
|
<div
|
|
|
|
:class="{'is-visible': background}"
|
2022-06-02 21:00:21 +00:00
|
|
|
class="app-container-background background-fade-in d-print-none"
|
2022-04-02 15:05:30 +00:00
|
|
|
:style="{'background-image': background && `url(${background})`}"></div>
|
2022-06-02 21:00:21 +00:00
|
|
|
<navigation class="d-print-none"/>
|
2022-01-16 17:05:12 +00:00
|
|
|
<main
|
2023-01-23 21:26:26 +00:00
|
|
|
class="app-content"
|
2020-11-01 17:36:00 +00:00
|
|
|
:class="[
|
2021-09-08 09:59:46 +00:00
|
|
|
{ 'is-menu-enabled': menuActive },
|
2020-11-01 17:36:00 +00:00
|
|
|
$route.name,
|
|
|
|
]"
|
|
|
|
>
|
2022-01-19 22:58:54 +00:00
|
|
|
<BaseButton
|
2023-01-23 21:26:14 +00:00
|
|
|
v-show="menuActive"
|
2022-09-24 13:20:40 +00:00
|
|
|
@click="baseStore.setMenuActive(false)"
|
2022-06-02 21:00:21 +00:00
|
|
|
class="mobile-overlay d-print-none"
|
2022-01-19 22:58:54 +00:00
|
|
|
/>
|
2021-04-18 17:32:31 +00:00
|
|
|
|
2021-05-30 18:30:08 +00:00
|
|
|
<quick-actions/>
|
|
|
|
|
2021-12-04 17:15:21 +00:00
|
|
|
<router-view :route="routeWithModal" v-slot="{ Component }">
|
2022-11-13 21:04:57 +00:00
|
|
|
<keep-alive :include="['project.list', 'project.gantt', 'project.table', 'project.kanban']">
|
2022-04-02 15:05:30 +00:00
|
|
|
<component :is="Component"/>
|
2021-12-04 17:15:21 +00:00
|
|
|
</keep-alive>
|
|
|
|
</router-view>
|
2021-04-18 17:32:31 +00:00
|
|
|
|
2022-07-19 14:56:09 +00:00
|
|
|
<modal
|
2022-11-12 18:24:02 +00:00
|
|
|
:enabled="Boolean(currentModal)"
|
2022-07-19 14:56:09 +00:00
|
|
|
@close="closeModal()"
|
|
|
|
variant="scrolling"
|
|
|
|
class="task-detail-view-modal"
|
|
|
|
>
|
|
|
|
<component :is="currentModal"/>
|
|
|
|
</modal>
|
2021-04-18 17:32:31 +00:00
|
|
|
|
2022-05-10 23:14:38 +00:00
|
|
|
<BaseButton
|
2022-06-02 21:00:21 +00:00
|
|
|
class="keyboard-shortcuts-button d-print-none"
|
2021-04-18 17:32:31 +00:00
|
|
|
@click="showKeyboardShortcuts()"
|
2021-11-13 20:28:29 +00:00
|
|
|
v-shortcut="'?'"
|
2021-04-18 17:32:31 +00:00
|
|
|
>
|
2020-11-01 17:36:00 +00:00
|
|
|
<icon icon="keyboard"/>
|
2022-05-10 23:14:38 +00:00
|
|
|
</BaseButton>
|
2022-01-16 17:05:12 +00:00
|
|
|
</main>
|
2020-11-01 17:36:00 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2021-12-08 12:22:39 +00:00
|
|
|
<script lang="ts" setup>
|
2022-10-04 12:10:12 +00:00
|
|
|
import {watch, computed} from 'vue'
|
|
|
|
import {useRoute} from 'vue-router'
|
2021-12-08 12:22:39 +00:00
|
|
|
|
2021-07-25 13:27:15 +00:00
|
|
|
import Navigation from '@/components/home/navigation.vue'
|
|
|
|
import QuickActions from '@/components/quick-actions/quick-actions.vue'
|
2022-01-19 22:58:54 +00:00
|
|
|
import BaseButton from '@/components/base/BaseButton.vue'
|
2022-02-05 16:29:15 +00:00
|
|
|
|
2022-10-04 12:10:12 +00:00
|
|
|
import {useBaseStore} from '@/stores/base'
|
|
|
|
import {useLabelStore} from '@/stores/labels'
|
2022-02-05 16:29:15 +00:00
|
|
|
|
2022-10-04 12:10:12 +00:00
|
|
|
import {useRouteWithModal} from '@/composables/useRouteWithModal'
|
|
|
|
import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
|
2021-10-03 13:54:24 +00:00
|
|
|
|
2022-04-02 15:05:30 +00:00
|
|
|
const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
|
2021-10-03 13:54:24 +00:00
|
|
|
|
2022-09-24 13:20:40 +00:00
|
|
|
const baseStore = useBaseStore()
|
|
|
|
const background = computed(() => baseStore.background)
|
|
|
|
const blurHash = computed(() => baseStore.blurHash)
|
|
|
|
const menuActive = computed(() => baseStore.menuActive)
|
2021-12-08 12:22:39 +00:00
|
|
|
|
|
|
|
function showKeyboardShortcuts() {
|
2022-09-24 13:20:40 +00:00
|
|
|
baseStore.setKeyboardShortcutsActive(true)
|
2020-11-01 17:36:00 +00:00
|
|
|
}
|
2021-12-08 12:22:39 +00:00
|
|
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
2021-12-21 08:02:03 +00:00
|
|
|
// FIXME: this is really error prone
|
2022-11-13 21:04:57 +00:00
|
|
|
// Reset the current project highlight in menu if the current route is not project related.
|
2021-12-21 08:02:03 +00:00
|
|
|
watch(() => route.name as string, (routeName) => {
|
2021-12-08 12:22:39 +00:00
|
|
|
if (
|
2021-12-21 08:02:03 +00:00
|
|
|
routeName &&
|
|
|
|
(
|
|
|
|
[
|
|
|
|
'home',
|
|
|
|
'namespace.edit',
|
|
|
|
'teams.index',
|
|
|
|
'teams.edit',
|
|
|
|
'tasks.range',
|
|
|
|
'labels.index',
|
|
|
|
'migrate.start',
|
|
|
|
'migrate.wunderlist',
|
|
|
|
'namespaces.index',
|
2022-04-02 15:05:30 +00:00
|
|
|
].includes(routeName) ||
|
2021-12-21 08:02:03 +00:00
|
|
|
routeName.startsWith('user.settings')
|
|
|
|
)
|
2021-12-08 12:22:39 +00:00
|
|
|
) {
|
2022-11-13 21:04:57 +00:00
|
|
|
baseStore.handleSetCurrentProject({project: null})
|
2021-12-08 12:22:39 +00:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
// TODO: Reset the title if the page component does not set one itself
|
|
|
|
|
|
|
|
useRenewTokenOnFocus()
|
2022-10-04 12:10:12 +00:00
|
|
|
|
2022-09-21 14:23:57 +00:00
|
|
|
const labelStore = useLabelStore()
|
|
|
|
labelStore.loadAllLabels()
|
2020-11-01 17:36:00 +00:00
|
|
|
</script>
|
2021-10-18 12:20:39 +00:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2021-11-13 14:16:14 +00:00
|
|
|
.menu-hide-button {
|
|
|
|
position: fixed;
|
|
|
|
top: 0.5rem;
|
|
|
|
right: 0.5rem;
|
|
|
|
z-index: 31;
|
|
|
|
width: 3rem;
|
|
|
|
height: 3rem;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
font-size: 2rem;
|
2021-11-22 21:12:54 +00:00
|
|
|
color: var(--grey-400);
|
2021-11-13 14:16:14 +00:00
|
|
|
line-height: 1;
|
|
|
|
transition: all $transition;
|
|
|
|
|
|
|
|
@media screen and (min-width: $tablet) {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
&:focus {
|
2021-11-22 21:12:54 +00:00
|
|
|
color: var(--grey-600);
|
2021-11-13 14:16:14 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-10-18 12:32:59 +00:00
|
|
|
.app-container {
|
2022-04-02 15:05:30 +00:00
|
|
|
min-height: calc(100vh - 65px);
|
2021-10-18 12:32:59 +00:00
|
|
|
|
2022-04-02 15:05:30 +00:00
|
|
|
@media screen and (max-width: $tablet) {
|
|
|
|
padding-top: $navbar-height;
|
|
|
|
}
|
2022-11-12 10:45:24 +00:00
|
|
|
}
|
2021-10-18 12:32:59 +00:00
|
|
|
|
2022-11-12 10:45:24 +00:00
|
|
|
.app-content {
|
|
|
|
z-index: 10;
|
|
|
|
position: relative;
|
2022-11-17 16:17:18 +00:00
|
|
|
padding: 1.5rem 0.5rem 1rem;
|
2023-03-06 18:56:13 +00:00
|
|
|
// TODO refactor: DRY `transition-timing-function` with `./navigation.vue`.
|
|
|
|
transition: margin-left $transition-duration;
|
2021-10-18 12:32:59 +00:00
|
|
|
|
2022-11-12 10:45:24 +00:00
|
|
|
@media screen and (max-width: $tablet) {
|
|
|
|
margin-left: 0;
|
|
|
|
min-height: calc(100vh - 4rem);
|
|
|
|
}
|
2022-04-02 15:05:30 +00:00
|
|
|
|
2022-11-17 16:17:18 +00:00
|
|
|
@media screen and (min-width: $tablet) {
|
|
|
|
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
|
|
|
|
}
|
2022-04-02 15:05:30 +00:00
|
|
|
|
2022-11-17 16:17:18 +00:00
|
|
|
&.is-menu-enabled {
|
|
|
|
@media screen and (min-width: $tablet) {
|
2022-11-12 10:45:24 +00:00
|
|
|
margin-left: $navbar-width;
|
2022-04-02 15:05:30 +00:00
|
|
|
}
|
2022-11-12 10:45:24 +00:00
|
|
|
}
|
2022-04-02 15:05:30 +00:00
|
|
|
|
2022-11-12 10:45:24 +00:00
|
|
|
// Used to make sure the spinner is always in the middle while loading
|
|
|
|
> .loader-container {
|
|
|
|
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
|
|
|
|
}
|
|
|
|
|
|
|
|
// FIXME: This should be somehow defined inside Card.vue
|
|
|
|
.card {
|
|
|
|
background: var(--white);
|
2022-04-02 15:05:30 +00:00
|
|
|
}
|
2021-10-18 12:32:59 +00:00
|
|
|
}
|
|
|
|
|
2021-10-18 12:33:23 +00:00
|
|
|
.mobile-overlay {
|
|
|
|
display: none;
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
2022-03-22 22:00:43 +00:00
|
|
|
height: 100vh;
|
|
|
|
width: 100vw;
|
|
|
|
background: hsla(var(--grey-100-hsl), 0.8);
|
2021-10-18 12:33:23 +00:00
|
|
|
z-index: 5;
|
|
|
|
opacity: 0;
|
|
|
|
transition: all $transition;
|
|
|
|
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
|
|
display: block;
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-10-18 12:20:39 +00:00
|
|
|
.keyboard-shortcuts-button {
|
|
|
|
position: fixed;
|
|
|
|
bottom: calc(1rem - 4px);
|
|
|
|
right: 1rem;
|
|
|
|
z-index: 4500; // The modal has a z-index of 4000
|
|
|
|
|
2021-11-22 21:12:54 +00:00
|
|
|
color: var(--grey-500);
|
2021-10-18 12:20:39 +00:00
|
|
|
transition: color $transition;
|
2022-04-02 15:05:30 +00:00
|
|
|
|
2021-10-18 12:20:39 +00:00
|
|
|
@media screen and (max-width: $tablet) {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
2021-11-08 14:46:39 +00:00
|
|
|
|
2022-04-02 15:05:30 +00:00
|
|
|
.content-auth {
|
|
|
|
position: relative;
|
|
|
|
z-index: 1;
|
2022-04-02 21:09:28 +00:00
|
|
|
}
|
2021-10-18 12:20:39 +00:00
|
|
|
</style>
|