125 lines
3.0 KiB
Vue
125 lines
3.0 KiB
Vue
<template>
|
|
<div
|
|
id="project-info"
|
|
:style="{ height: headerHeight + 'px', minHeight: '48px' }"
|
|
class="flex row items-center justify-between no-wrap w100 q-gutter-x-sm"
|
|
style="overflow: hidden; transition: height 0.3s ease-in-out; margin-left: 0"
|
|
>
|
|
<div class="ellipsis overflow-hidden q-pa-none q-ma-none">
|
|
<q-resize-observer @resize="onResize" />
|
|
<transition
|
|
enter-active-class="animated slideInUp"
|
|
leave-active-class="animated slideOutUp"
|
|
mode="out-in"
|
|
>
|
|
<div
|
|
v-if="!expandProjectInfo"
|
|
@click="toggleExpand"
|
|
class="text-h6 ellipsis no-wrap w100 q-pa-none q-ma-none"
|
|
key="compact"
|
|
>
|
|
{{ project.name }}
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
class="flex items-center no-wrap q-hoverable q-animate--slideUp q-py-sm"
|
|
@click="toggleExpand"
|
|
key="expanded"
|
|
>
|
|
<pn-auto-avatar
|
|
:img="project.logo"
|
|
:name="project.name"
|
|
type="rounded"
|
|
size="lg"
|
|
/>
|
|
|
|
<div class="flex column text-white fit">
|
|
<div
|
|
class="text-h6 q-pl-sm text-field"
|
|
>
|
|
{{ project.name }}
|
|
</div>
|
|
|
|
<div
|
|
class="text-caption q-pl-sm text-field"
|
|
>
|
|
{{ project.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
|
|
<q-btn
|
|
@click="toProjects"
|
|
flat
|
|
no-caps
|
|
dense
|
|
rounded
|
|
class="q-ml-lg"
|
|
>
|
|
<span class="flex items-center no-wrap q-pl-sm">
|
|
{{ $t('header__to_projects') }}
|
|
<q-icon name="mdi-chevron-right"/>
|
|
</span>
|
|
</q-btn>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useProjectsStore } from 'stores/projects'
|
|
|
|
const router = useRouter()
|
|
const projectsStore = useProjectsStore()
|
|
|
|
const expandProjectInfo = ref<boolean>(false)
|
|
const currentProjectId = computed(() => projectsStore.currentProjectId)
|
|
|
|
const project = computed(() => {
|
|
const currentProject =
|
|
currentProjectId.value && projectsStore.projectById(currentProjectId.value)
|
|
|
|
return currentProject
|
|
? {
|
|
name: currentProject.name,
|
|
description: currentProject.description ?? '',
|
|
logo: currentProject.logo ?? ''
|
|
}
|
|
: {
|
|
name: '',
|
|
description: '',
|
|
logo: ''
|
|
}
|
|
})
|
|
|
|
function toggleExpand () {
|
|
expandProjectInfo.value = !expandProjectInfo.value
|
|
}
|
|
|
|
async function toProjects () {
|
|
await router.push({ name: 'projects' })
|
|
}
|
|
|
|
interface sizeParams {
|
|
height: number,
|
|
width: number
|
|
}
|
|
|
|
const headerHeight = ref<number>(0)
|
|
|
|
function onResize (size :sizeParams) {
|
|
headerHeight.value = size.height
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.text-field {
|
|
max-width: -webkit-fill-available;
|
|
white-space: pre-line;
|
|
}
|
|
</style>
|