2021-07-18 16:10:36 +02:00
|
|
|
<template>
|
|
|
|
<div class="column col-12 empty">
|
|
|
|
<div class="empty-icon">
|
2022-06-04 18:37:16 +02:00
|
|
|
<img :src="logos[applicationTheme]" width="200">
|
2021-07-18 16:10:36 +02:00
|
|
|
</div>
|
|
|
|
<p class="h6 empty-subtitle">
|
2023-08-03 18:28:50 +02:00
|
|
|
{{ t('application.noOpenTabs') }}
|
2021-07-18 16:10:36 +02:00
|
|
|
</p>
|
|
|
|
<div class="empty-action">
|
2022-11-30 13:09:07 +01:00
|
|
|
<button class="btn btn-primary d-flex" @click="emit('new-tab')">
|
2021-07-18 16:10:36 +02:00
|
|
|
<i class="mdi mdi-24px mdi-tab-plus mr-2" />
|
2023-08-03 18:28:50 +02:00
|
|
|
{{ t('application.openNewTab') }}
|
2021-07-18 16:10:36 +02:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
2022-06-04 18:37:16 +02:00
|
|
|
<script setup lang="ts">
|
|
|
|
import { computed } from 'vue';
|
|
|
|
import { storeToRefs } from 'pinia';
|
2022-04-30 00:47:37 +02:00
|
|
|
import { useSettingsStore } from '@/stores/settings';
|
|
|
|
import { useWorkspacesStore } from '@/stores/workspaces';
|
2022-06-04 18:37:16 +02:00
|
|
|
import { useI18n } from 'vue-i18n';
|
2022-04-30 00:47:37 +02:00
|
|
|
|
2022-06-04 18:37:16 +02:00
|
|
|
const { t } = useI18n();
|
2022-04-30 00:47:37 +02:00
|
|
|
|
2022-06-04 18:37:16 +02:00
|
|
|
const emit = defineEmits(['new-tab']);
|
2022-04-30 00:47:37 +02:00
|
|
|
|
2022-06-04 18:37:16 +02:00
|
|
|
const logos = {
|
|
|
|
light: require('../images/logo-light.svg') as string,
|
|
|
|
dark: require('../images/logo-dark.svg') as string
|
2021-07-18 16:10:36 +02:00
|
|
|
};
|
2022-06-04 18:37:16 +02:00
|
|
|
|
|
|
|
const settingsStore = useSettingsStore();
|
|
|
|
const workspacesStore = useWorkspacesStore();
|
|
|
|
|
|
|
|
const { applicationTheme } = storeToRefs(settingsStore);
|
|
|
|
const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
|
|
|
|
|
|
|
|
const { getWorkspace, changeBreadcrumbs } = workspacesStore;
|
|
|
|
|
|
|
|
const workspace = computed(() => {
|
|
|
|
return getWorkspace(selectedWorkspace.value);
|
|
|
|
});
|
|
|
|
|
|
|
|
changeBreadcrumbs({ schema: workspace.value.breadcrumbs.schema });
|
2021-07-18 16:10:36 +02:00
|
|
|
</script>
|
|
|
|
|
2022-11-30 15:57:48 +01:00
|
|
|
<style lang="scss" scoped>
|
2021-07-18 16:10:36 +02:00
|
|
|
.empty {
|
|
|
|
height: 100%;
|
|
|
|
border-radius: 0;
|
|
|
|
background: transparent;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
|
|
|
}
|
|
|
|
</style>
|