mirror of
https://github.com/directus/directus.git
synced 2026-02-10 09:25:40 -05:00
7aa4911caa
* icon width * updated pagination style * file preview zoom WIP — shouldn’t show up on MODAL preview * overlay/modal close button styling * duplicate key * bookmark styling * card fade also adds an rgb value for the page background variable * style per page dropdown * cards per page dropdown color * inset non-dense notifications within sidebar * reduce border radius for xs avatars * hide non-expanded prepend/append * reduce sidebar padding this gives content a bit more room * WIP: split and update comments and revisions work in progress * fix collections module name * fix file library title * consistent border on disabled * fix title/breadcrumb positioning * breadcrumb fixes * add “open” button to image interface WIP — this needs the actual logic, and we might want to remove a button * hide presets delete until selection * image shadow and subtext color * Remove breadcrumb calculation * increase contrast for image subtitle * fix textarea hover style * Update src/modules/collections/index.ts * Fix typing of translateresult to format * Add undefined check to collection name * Put v-if on dialog instead of button * Remove breadcrumb logic * Remove breadcrumb calculation * Rename shadow to collapsed in header bar * fix rating star display going over table header * show collection breadcrumb for bookmarks WIP — needs the formatted collection title * shorter error to avoid wrapping * remove periods * Fix standard font-size of divider label, use large in interface * Add extra date format strings * Structure comments, support date headers * Add ability to delete comments * Add edited on status badge Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
82 lines
1.7 KiB
Vue
82 lines
1.7 KiB
Vue
<template>
|
|
<div id="app" :style="brandStyle">
|
|
<transition name="fade">
|
|
<div class="hydrating" v-if="hydrating">
|
|
<v-progress-circular indeterminate />
|
|
</div>
|
|
</transition>
|
|
<router-view v-if="!hydrating" />
|
|
|
|
<portal-target name="outlet" multiple />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, toRefs, watch, computed } from '@vue/composition-api';
|
|
import { useAppStore } from '@/stores/app';
|
|
import { useUserStore } from '@/stores/user';
|
|
import { useProjectsStore } from '@/stores/projects';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const appStore = useAppStore();
|
|
const userStore = useUserStore();
|
|
const projectsStore = useProjectsStore();
|
|
|
|
const { hydrating } = toRefs(appStore.state);
|
|
|
|
const brandStyle = computed(() => {
|
|
return {
|
|
'--brand': projectsStore.currentProject.value?.color || 'var(--primary)',
|
|
};
|
|
});
|
|
|
|
watch(
|
|
() => userStore.state.currentUser,
|
|
(newUser) => {
|
|
document.body.classList.remove('dark');
|
|
document.body.classList.remove('light');
|
|
document.body.classList.remove('auto');
|
|
|
|
if (newUser !== undefined && newUser !== null) {
|
|
document.body.classList.add(newUser.theme);
|
|
} else {
|
|
// Default to light mode
|
|
document.body.classList.add('light');
|
|
}
|
|
}
|
|
);
|
|
|
|
return { hydrating, brandStyle };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#app {
|
|
height: 100%;
|
|
}
|
|
|
|
.hydrating {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity var(--medium) var(--transition);
|
|
}
|
|
|
|
.fade-enter,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|