Nicolas Drolet
ac6744ff18
removed modal for shift creation/update to better match current timesheet app and avoid adding superfluous user actions. Tweaked appearance of timesheet and overall theme to remove overcrowding of colors/elements
63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import MenuHeader from 'src/modules/profile/components/shared/menu-header.vue';
|
|
|
|
const { initialMenu } = defineProps<{
|
|
firstName: string;
|
|
lastName: string;
|
|
initialMenu: string;
|
|
}>();
|
|
|
|
const current_menu = ref<string>(initialMenu);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="$q.screen.lt.md ? 'column no-wrap' : 'row'"
|
|
:style="$q.screen.lt.md ? 'width: 90vw;' : 'width: 40vw;'"
|
|
>
|
|
<MenuHeader
|
|
:user-first-name="firstName"
|
|
:user-last-name="lastName"
|
|
/>
|
|
|
|
<div
|
|
class="col-3 no-wrap"
|
|
:class="$q.screen.lt.md ? '' : 'column'"
|
|
>
|
|
<q-card
|
|
class="col-auto q-pa-xs"
|
|
:class="$q.screen.lt.md ? 'q-mb-sm' : 'q-mr-sm'"
|
|
>
|
|
<q-tabs
|
|
v-model="current_menu"
|
|
:vertical="$q.screen.gt.sm"
|
|
dense
|
|
active-color="accent"
|
|
indicator-color="accent"
|
|
>
|
|
<slot name="tabs"></slot>
|
|
</q-tabs>
|
|
</q-card>
|
|
<div class="col"></div>
|
|
</div>
|
|
|
|
<q-card
|
|
class="col"
|
|
:class="$q.screen.lt.md ? '' : 'q-ml-sm'"
|
|
>
|
|
<q-tab-panels
|
|
v-model="current_menu"
|
|
animated
|
|
vertical
|
|
transition-prev="jump-up"
|
|
transition-next="jump-up"
|
|
class="rounded-5"
|
|
style="height: 50vh;"
|
|
>
|
|
<slot name="panels"></slot>
|
|
</q-tab-panels>
|
|
</q-card>
|
|
|
|
</div>
|
|
</template> |