jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fixup all toplevel views to only have one child node and test with basic animation

Browse Source
This commit is contained in:
Johannes Zellner
2025-03-26 18:36:04 +01:00
parent ae68cc95bb
commit 830db36928
10 changed files with 254 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/Index.vue
+39 -22
View File
@@ -239,28 +239,30 @@ onMounted(async () => {
<div style="flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
<Headerbar :config="config" :subscription="subscription" :profile="profile"/>
<div style="display: flex; justify-content: center; overflow: auto; flex-grow: 1; padding: 0 6px;">
<AppsView v-if="view === VIEWS.APPS" />
<AppConfigureView v-else-if="view === VIEWS.APP" />
<AppstoreView v-else-if="view === VIEWS.APPSTORE" />
<BackupsView v-else-if="view === VIEWS.BACKUPS" />
<BrandingView v-else-if="view === VIEWS.BRANDING" />
<DomainsView v-else-if="view === VIEWS.DOMAINS" />
<EmailView v-else-if="view === VIEWS.EMAIL" />
<EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />
<EmailsEventlogView v-else-if="view === VIEWS.EMAILS_EVENTLOG" />
<EventlogView v-else-if="view === VIEWS.EVENTLOG" />
<MailboxesView v-else-if="view === VIEWS.EMAILS_MAILBOXES" />
<MailinglistsView v-else-if="view === VIEWS.EMAILS_MAILINGLISTS" />
<NetworkView v-else-if="view === VIEWS.NETWORK" />
<ProfileView v-else-if="view === VIEWS.PROFILE" />
<ServicesView v-else-if="view === VIEWS.SERVICES" />
<SettingsView v-else-if="view === VIEWS.SETTINGS" />
<SupportView v-else-if="view === VIEWS.SUPPORT" />
<SystemView v-else-if="view === VIEWS.SYSTEM" />
<UserDirectoryView v-else-if="view === VIEWS.USER_DIRECTORY" />
<UsersView v-else-if="view === VIEWS.USERS" />
<VolumesView v-else-if="view === VIEWS.VOLUMES" />
<div style="display: flex; justify-content: center; overflow: auto; flex-grow: 1; padding: 0 6px; position: relative;">
<Transition name="slide-fade">
<AppsView v-if="view === VIEWS.APPS" />
<AppConfigureView v-else-if="view === VIEWS.APP" />
<AppstoreView v-else-if="view === VIEWS.APPSTORE" />
<BackupsView v-else-if="view === VIEWS.BACKUPS" />
<BrandingView v-else-if="view === VIEWS.BRANDING" />
<DomainsView v-else-if="view === VIEWS.DOMAINS" />
<EmailView v-else-if="view === VIEWS.EMAIL" />
<EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />
<EmailsEventlogView v-else-if="view === VIEWS.EMAILS_EVENTLOG" />
<EventlogView v-else-if="view === VIEWS.EVENTLOG" />
<MailboxesView v-else-if="view === VIEWS.EMAILS_MAILBOXES" />
<MailinglistsView v-else-if="view === VIEWS.EMAILS_MAILINGLISTS" />
<NetworkView v-else-if="view === VIEWS.NETWORK" />
<ProfileView v-else-if="view === VIEWS.PROFILE" />
<ServicesView v-else-if="view === VIEWS.SERVICES" />
<SettingsView v-else-if="view === VIEWS.SETTINGS" />
<SupportView v-else-if="view === VIEWS.SUPPORT" />
<SystemView v-else-if="view === VIEWS.SYSTEM" />
<UserDirectoryView v-else-if="view === VIEWS.USER_DIRECTORY" />
<UsersView v-else-if="view === VIEWS.USERS" />
<VolumesView v-else-if="view === VIEWS.VOLUMES" />
</Transition>
</div>
</div>
</div>
@@ -358,4 +360,19 @@ onMounted(async () => {
max-height: 0;
}
.slide-fade-enter-active {
transition: all 0.1s ease-out;
}
.slide-fade-leave-active {
transition: all 0.1s ease-out;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(20px);
opacity: 0;
}
</style>