52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<template>
|
|
<section class="homepage">
|
|
<h2>{{ $t("homepage.title") }}</h2>
|
|
<div class="flex col small-gap">
|
|
<div class="flex col">
|
|
<el-button
|
|
:icon="ElIconCalendar"
|
|
type="primary"
|
|
plain
|
|
@click="openCalendarDialog"
|
|
>
|
|
{{ $t("homepage.connect_to_calendar") }}
|
|
</el-button>
|
|
</div>
|
|
<div class="flex col">
|
|
<el-button :icon="ElIconMostlyCloudy" type="primary" plain>
|
|
{{ $t("homepage.connect_to_files") }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<el-dialog
|
|
v-model="dialogCalendarVisible"
|
|
:title="$t('calendar_login_dialog.title')"
|
|
width="500"
|
|
>
|
|
<calendar-connection></calendar-connection>
|
|
</el-dialog>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const dialogCalendarVisible = ref(false);
|
|
|
|
function openCalendarDialog() {
|
|
dialogCalendarVisible.value = true;
|
|
}
|
|
|
|
function closeCalendarDialog() {
|
|
dialogCalendarVisible.value = false;
|
|
}
|
|
</script>
|
|
<style>
|
|
.homepage {
|
|
max-width: 1000px;
|
|
margin: 1rem auto;
|
|
border: 1px solid var(--el-border-color);
|
|
border-radius: 4px;
|
|
padding: 1rem;
|
|
box-shadow: var(--el-box-shadow-lighter);
|
|
}
|
|
</style>
|