Remove main UI loading animation
This commit is contained in:
Johannes Zellner
+70
-73
@@ -247,84 +247,81 @@ onMounted(async () => {
|
||||
<OfflineOverlay ref="offlineOverlay" @online="onOnline()"/>
|
||||
<SubscriptionRequiredDialog ref="subscriptionRequiredDialog"/>
|
||||
|
||||
<Transition name="pankow-animation-pop-up">
|
||||
<div v-if="ready" style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
|
||||
<div v-if="ready" style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
|
||||
|
||||
<!-- <Sidebar :profile="profile" :config="config"/> -->
|
||||
<SideBar v-if="profile.isAtLeastUserManager" ref="sidebar">
|
||||
<a href="#/" class="sidebar-logo" @click="onSidebarClose()">
|
||||
<img :src="avatarUrl" :alt="(config.cloudronName || 'Cloudron') + ' icon'" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
|
||||
</a>
|
||||
<div class="sidebar-list">
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'apps' }" href="#/apps" @click="onSidebarClose()"><i class="fa fa-grip fa-fw"></i> {{ $t('apps.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'appstore' }" v-show="profile.isAtLeastAdmin" href="#/appstore" @click="onSidebarClose()"><i class="fa fa-cloud-download-alt fa-fw"></i> {{ $t('appstore.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'users' }" v-show="profile.isAtLeastUserManager" href="#/users" @click="onSidebarClose()"><i class="fa fa-users fa-fw"></i> {{ $t('main.navbar.users') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'backups' }" v-show="profile.isAtLeastAdmin" href="#/backups" @click="onSidebarClose()"><i class="fa fa-archive fa-fw"></i> {{ $t('backups.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'appearance' }" v-show="profile.isAtLeastAdmin" href="#/appearance" @click="onSidebarClose()"><i class="fa fa-pen-ruler fa-fw"></i> {{ $t('branding.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'domains' }" v-show="profile.isAtLeastAdmin" href="#/domains" @click="onSidebarClose()"><i class="fa fa-globe fa-fw"></i> {{ $t('domains.title') }}</a>
|
||||
<div class="sidebar-item" v-show="profile.isAtLeastMailManager" @click="onToggleGroup('email')"><i class="fa fa-envelope fa-fw"></i> {{ $t('emails.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'email' }" style="margin-left: 6px;"></i></div>
|
||||
<Transition name="sidebar-item-group-animation">
|
||||
<div class="sidebar-item-group" v-if="activeSidebarGroup === 'email'">
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-domain' }" href="#/email-domain" @click="onSidebarClose()"><i class="fa fa-fw fa-globe"></i> Domains</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-mailboxes' }" href="#/email-mailboxes" @click="onSidebarClose()"><i class="fa fa-fw fa-inbox"></i> {{ $t('email.incoming.mailboxes.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-mailinglists' }" href="#/email-mailinglists" @click="onSidebarClose()"><i class="fa fa-fw-solid fa-envelopes-bulk"></i> {{ $t('email.incoming.mailinglists.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-eventlog' }" href="#/email-eventlog" @click="onSidebarClose()"><i class="fa fa-fw fa-list-alt"></i> Logs</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-status' }" href="#/email-status" @click="onSidebarClose()"><i class="fa fa-fw fa-clipboard-check"></i> Status</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-settings' }" href="#/email-settings" @click="onSidebarClose()"><i class="fa fa-fw fa-cog"></i> {{ $t('settings.title') }}</a>
|
||||
</div>
|
||||
</Transition>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'eventlog' }" v-show="profile.isAtLeastAdmin" href="#/eventlog" @click="onSidebarClose()"><i class="fa fa-list-alt fa-fw"></i> {{ $t('eventlog.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'metrics' }" v-show="profile.isAtLeastAdmin" href="#/metrics" @click="onSidebarClose()"><i class="fa fa-chart-area fa-fw"></i> {{ $t('system.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'network' }" v-show="profile.isAtLeastAdmin" href="#/network" @click="onSidebarClose()"><i class="fas fa-network-wired fa-fw"></i> {{ $t('network.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'services' }" v-show="profile.isAtLeastAdmin" href="#/services" @click="onSidebarClose()"><i class="fa fa-cogs fa-fw"></i> {{ $t('services.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'system' }" v-show="profile.isAtLeastAdmin" href="#/system" @click="onSidebarClose()"><i class="fa fa-wrench fa-fw"></i> {{ $t('settings.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'cloudron-account' }" v-show="profile.isAtLeastOwner" href="#/cloudron-account" @click="onSidebarClose()"><i class="fa fa-crown fa-fw"></i> {{ $t('settings.appstoreAccount.title') }}</a>
|
||||
<div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup('user-directory')"><i class="fa fa-users-gear fa-fw"></i> {{ $t('users.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'user-directory' }" style="margin-left: 6px;"></i></div>
|
||||
<Transition name="sidebar-item-group-animation">
|
||||
<div class="sidebar-item-group" v-if="activeSidebarGroup === 'user-directory'">
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory-ldap-provider' }" href="#/user-directory-ldap-provider" @click="onSidebarClose()"><i class="fa fa-fw fa-users-rays"></i> {{ $t('users.exposedLdap.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory-openid-provider' }" href="#/user-directory-openid-provider" @click="onSidebarClose()"><i class="fa fa-fw fa-brands fa-openid"></i> {{ $t('oidc.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory-settings' }" href="#/user-directory-settings" @click="onSidebarClose()"><i class="fa fa-fw fa-cog"></i> {{ $t('settings.title') }}</a>
|
||||
</div>
|
||||
</Transition>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'volumes' }" v-show="profile.isAtLeastAdmin" href="#/volumes" @click="onSidebarClose()"><i class="fa fa-hdd fa-fw"></i> {{ $t('volumes.title') }}</a>
|
||||
</div>
|
||||
</SideBar>
|
||||
<!-- <Sidebar :profile="profile" :config="config"/> -->
|
||||
<SideBar v-if="profile.isAtLeastUserManager" ref="sidebar">
|
||||
<a href="#/" class="sidebar-logo" @click="onSidebarClose()">
|
||||
<img :src="avatarUrl" :alt="(config.cloudronName || 'Cloudron') + ' icon'" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
|
||||
</a>
|
||||
<div class="sidebar-list">
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'apps' }" href="#/apps" @click="onSidebarClose()"><i class="fa fa-grip fa-fw"></i> {{ $t('apps.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'appstore' }" v-show="profile.isAtLeastAdmin" href="#/appstore" @click="onSidebarClose()"><i class="fa fa-cloud-download-alt fa-fw"></i> {{ $t('appstore.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'users' }" v-show="profile.isAtLeastUserManager" href="#/users" @click="onSidebarClose()"><i class="fa fa-users fa-fw"></i> {{ $t('main.navbar.users') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'backups' }" v-show="profile.isAtLeastAdmin" href="#/backups" @click="onSidebarClose()"><i class="fa fa-archive fa-fw"></i> {{ $t('backups.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'appearance' }" v-show="profile.isAtLeastAdmin" href="#/appearance" @click="onSidebarClose()"><i class="fa fa-pen-ruler fa-fw"></i> {{ $t('branding.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'domains' }" v-show="profile.isAtLeastAdmin" href="#/domains" @click="onSidebarClose()"><i class="fa fa-globe fa-fw"></i> {{ $t('domains.title') }}</a>
|
||||
<div class="sidebar-item" v-show="profile.isAtLeastMailManager" @click="onToggleGroup('email')"><i class="fa fa-envelope fa-fw"></i> {{ $t('emails.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'email' }" style="margin-left: 6px;"></i></div>
|
||||
<Transition name="sidebar-item-group-animation">
|
||||
<div class="sidebar-item-group" v-if="activeSidebarGroup === 'email'">
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-domain' }" href="#/email-domain" @click="onSidebarClose()"><i class="fa fa-fw fa-globe"></i> Domains</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-mailboxes' }" href="#/email-mailboxes" @click="onSidebarClose()"><i class="fa fa-fw fa-inbox"></i> {{ $t('email.incoming.mailboxes.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-mailinglists' }" href="#/email-mailinglists" @click="onSidebarClose()"><i class="fa fa-fw-solid fa-envelopes-bulk"></i> {{ $t('email.incoming.mailinglists.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-eventlog' }" href="#/email-eventlog" @click="onSidebarClose()"><i class="fa fa-fw fa-list-alt"></i> Logs</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-status' }" href="#/email-status" @click="onSidebarClose()"><i class="fa fa-fw fa-clipboard-check"></i> Status</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-settings' }" href="#/email-settings" @click="onSidebarClose()"><i class="fa fa-fw fa-cog"></i> {{ $t('settings.title') }}</a>
|
||||
</div>
|
||||
</Transition>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'eventlog' }" v-show="profile.isAtLeastAdmin" href="#/eventlog" @click="onSidebarClose()"><i class="fa fa-list-alt fa-fw"></i> {{ $t('eventlog.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'metrics' }" v-show="profile.isAtLeastAdmin" href="#/metrics" @click="onSidebarClose()"><i class="fa fa-chart-area fa-fw"></i> {{ $t('system.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'network' }" v-show="profile.isAtLeastAdmin" href="#/network" @click="onSidebarClose()"><i class="fas fa-network-wired fa-fw"></i> {{ $t('network.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'services' }" v-show="profile.isAtLeastAdmin" href="#/services" @click="onSidebarClose()"><i class="fa fa-cogs fa-fw"></i> {{ $t('services.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'system' }" v-show="profile.isAtLeastAdmin" href="#/system" @click="onSidebarClose()"><i class="fa fa-wrench fa-fw"></i> {{ $t('settings.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'cloudron-account' }" v-show="profile.isAtLeastOwner" href="#/cloudron-account" @click="onSidebarClose()"><i class="fa fa-crown fa-fw"></i> {{ $t('settings.appstoreAccount.title') }}</a>
|
||||
<div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup('user-directory')"><i class="fa fa-users-gear fa-fw"></i> {{ $t('users.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'user-directory' }" style="margin-left: 6px;"></i></div>
|
||||
<Transition name="sidebar-item-group-animation">
|
||||
<div class="sidebar-item-group" v-if="activeSidebarGroup === 'user-directory'">
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory-ldap-provider' }" href="#/user-directory-ldap-provider" @click="onSidebarClose()"><i class="fa fa-fw fa-users-rays"></i> {{ $t('users.exposedLdap.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory-openid-provider' }" href="#/user-directory-openid-provider" @click="onSidebarClose()"><i class="fa fa-fw fa-brands fa-openid"></i> {{ $t('oidc.title') }}</a>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory-settings' }" href="#/user-directory-settings" @click="onSidebarClose()"><i class="fa fa-fw fa-cog"></i> {{ $t('settings.title') }}</a>
|
||||
</div>
|
||||
</Transition>
|
||||
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'volumes' }" v-show="profile.isAtLeastAdmin" href="#/volumes" @click="onSidebarClose()"><i class="fa fa-hdd fa-fw"></i> {{ $t('volumes.title') }}</a>
|
||||
</div>
|
||||
</SideBar>
|
||||
|
||||
<div style="flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
|
||||
<Headerbar :config="config" :subscription="subscription" :profile="profile"/>
|
||||
<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; position: relative;">
|
||||
<AppsView v-if="view === VIEWS.APPS" />
|
||||
<AppConfigureView v-else-if="view === VIEWS.APP" />
|
||||
<AppearanceView v-else-if="view === VIEWS.APPEARANCE" />
|
||||
<AppstoreView v-else-if="view === VIEWS.APPSTORE" />
|
||||
<BackupsView v-else-if="view === VIEWS.BACKUPS" />
|
||||
<CloudronAccountView v-else-if="view === VIEWS.CLOUDRON_ACCOUNT" />
|
||||
<DomainsView v-else-if="view === VIEWS.DOMAINS" />
|
||||
<EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />
|
||||
<EmailMailboxesView v-else-if="view === VIEWS.EMAIL_MAILBOXES" />
|
||||
<EmailMailinglistsView v-else-if="view === VIEWS.EMAIL_MAILINGLISTS" />
|
||||
<EmailSettingsView v-else-if="view === VIEWS.EMAIL_SETTINGS" />
|
||||
<EmailEventlogView v-else-if="view === VIEWS.EMAIL_EVENTLOG" />
|
||||
<EmailStatusView v-else-if="view === VIEWS.EMAIL_STATUS" />
|
||||
<EventlogView v-else-if="view === VIEWS.EVENTLOG" />
|
||||
<MetricsView v-else-if="view === VIEWS.METRICS" />
|
||||
<NetworkView v-else-if="view === VIEWS.NETWORK" />
|
||||
<ProfileView v-else-if="view === VIEWS.PROFILE" />
|
||||
<ServicesView v-else-if="view === VIEWS.SERVICES" />
|
||||
<SupportView v-else-if="view === VIEWS.SUPPORT" />
|
||||
<SystemView v-else-if="view === VIEWS.SYSTEM" />
|
||||
<UserDirectorySettingsView v-else-if="view === VIEWS.USER_DIRECTORY_SETTINGS" />
|
||||
<UserDirectoryLdapProviderView v-else-if="view === VIEWS.USER_DIRECTORY_LDAP_PROVIDER" />
|
||||
<UserDirectoryOpenIdProviderView v-else-if="view === VIEWS.USER_DIRECTORY_OPENID_PROVIDER" />
|
||||
<UsersView v-else-if="view === VIEWS.USERS" />
|
||||
<VolumesView v-else-if="view === VIEWS.VOLUMES" />
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; overflow: auto; flex-grow: 1; padding: 0 6px; position: relative;">
|
||||
<AppsView v-if="view === VIEWS.APPS" />
|
||||
<AppConfigureView v-else-if="view === VIEWS.APP" />
|
||||
<AppearanceView v-else-if="view === VIEWS.APPEARANCE" />
|
||||
<AppstoreView v-else-if="view === VIEWS.APPSTORE" />
|
||||
<BackupsView v-else-if="view === VIEWS.BACKUPS" />
|
||||
<CloudronAccountView v-else-if="view === VIEWS.CLOUDRON_ACCOUNT" />
|
||||
<DomainsView v-else-if="view === VIEWS.DOMAINS" />
|
||||
<EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />
|
||||
<EmailMailboxesView v-else-if="view === VIEWS.EMAIL_MAILBOXES" />
|
||||
<EmailMailinglistsView v-else-if="view === VIEWS.EMAIL_MAILINGLISTS" />
|
||||
<EmailSettingsView v-else-if="view === VIEWS.EMAIL_SETTINGS" />
|
||||
<EmailEventlogView v-else-if="view === VIEWS.EMAIL_EVENTLOG" />
|
||||
<EmailStatusView v-else-if="view === VIEWS.EMAIL_STATUS" />
|
||||
<EventlogView v-else-if="view === VIEWS.EVENTLOG" />
|
||||
<MetricsView v-else-if="view === VIEWS.METRICS" />
|
||||
<NetworkView v-else-if="view === VIEWS.NETWORK" />
|
||||
<ProfileView v-else-if="view === VIEWS.PROFILE" />
|
||||
<ServicesView v-else-if="view === VIEWS.SERVICES" />
|
||||
<SupportView v-else-if="view === VIEWS.SUPPORT" />
|
||||
<SystemView v-else-if="view === VIEWS.SYSTEM" />
|
||||
<UserDirectorySettingsView v-else-if="view === VIEWS.USER_DIRECTORY_SETTINGS" />
|
||||
<UserDirectoryLdapProviderView v-else-if="view === VIEWS.USER_DIRECTORY_LDAP_PROVIDER" />
|
||||
<UserDirectoryOpenIdProviderView v-else-if="view === VIEWS.USER_DIRECTORY_OPENID_PROVIDER" />
|
||||
<UsersView v-else-if="view === VIEWS.USERS" />
|
||||
<VolumesView v-else-if="view === VIEWS.VOLUMES" />
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user