feat: router load indicator + UI fixes

pull/5698/head
Nicolas Giard 2 years ago
parent c3bd7ff97e
commit bae96fbcbf
No known key found for this signature in database
GPG Key ID: 85061B8F9D55B7C8

@ -478,11 +478,11 @@ exports.up = async knex => {
localeNamespaces: [],
theme: {
dark: false,
colorPrimary: '#1976d2',
colorSecondary: '#02c39a',
colorAccent: '#f03a47',
colorPrimary: '#1976D2',
colorSecondary: '#02C39A',
colorAccent: '#FF9800',
colorHeader: '#000000',
colorSidebar: '#1976d2',
colorSidebar: '#1976D2',
injectCSS: '',
injectHead: '',
injectBody: '',

@ -86,14 +86,15 @@ module.exports = class Site extends Model {
localeNamespaces: [],
theme: {
dark: false,
colorPrimary: '#1976d2',
colorSecondary: '#02c39a',
colorAccent: '#f03a47',
colorPrimary: '#1976D2',
colorSecondary: '#02C39A',
colorAccent: '#FF9800',
colorHeader: '#000000',
colorSidebar: '#1976d2',
colorSidebar: '#1976D2',
injectCSS: '',
injectHead: '',
injectBody: '',
contentWidth: 'full',
sidebarPosition: 'left',
tocPosition: 'right',
showSharingMenu: true,

@ -50,6 +50,7 @@ if (typeof siteConfig !== 'undefined') {
}
router.beforeEach(async (to, from) => {
siteStore.routerLoading = true
if (!siteStore.id) {
console.info('No pre-cached site config. Loading site info...')
await siteStore.loadSite(window.location.hostname)
@ -62,5 +63,6 @@ router.afterEach(() => {
state.isInitialized = true
document.querySelector('.init-loading').remove()
}
siteStore.routerLoading = false
})
</script>

@ -55,9 +55,9 @@ q-header.bg-header.text-white.site-header(
)
q-space
transition(name='syncing')
q-spinner-rings.q-mr-sm(
q-spinner-rings(
v-show='siteStore.routerLoading'
color='orange'
color='accent'
size='34px'
)
q-btn.q-ml-md(
@ -113,18 +113,5 @@ const state = reactive({
</script>
<style lang="scss">
.syncing-enter-active {
animation: syncing-anim .1s;
}
.syncing-leave-active {
animation: syncing-anim 1s reverse;
}
@keyframes syncing-anim {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

@ -564,7 +564,7 @@ const localAuthId = computed(() => {
const localAuth = computed({
get () {
return localAuthId.value ? _get(state.user.auth, localAuthId.value, {}) : {}
return localAuthId.value ? state.user.auth?.[localAuthId.value] || {} : {}
},
set (val) {
if (localAuthId.value) {

@ -108,7 +108,7 @@ body::-webkit-scrollbar-thumb {
// BUTTONS
// ------------------------------------------------------------------
#app .acrylic-btn {
.q-btn.acrylic-btn {
.q-focus-helper {
background-color: currentColor;
opacity: .1;
@ -168,6 +168,25 @@ body::-webkit-scrollbar-thumb {
}
}
// ------------------------------------------------------------------
// LOADING ANIMATIONS
// ------------------------------------------------------------------
.syncing-enter-active {
animation: syncing-anim .1s;
}
.syncing-leave-active {
animation: syncing-anim 1s reverse;
}
@keyframes syncing-anim {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
// ------------------------------------------------------------------
// IMPORTS
// ------------------------------------------------------------------

@ -16,10 +16,11 @@ q-layout.admin(view='hHh Lpr lff')
)
q-toolbar(style='height: 64px;', dark)
q-space
q-spinner-tail(
transition(name='syncing')
q-spinner-rings(
v-show='siteStore.routerLoading'
color='blue'
size='sm'
color='accent'
size='34px'
)
q-btn.q-ml-md(flat, dense, icon='las la-times-circle', label='Exit' color='pink', to='/')
account-menu

@ -85,7 +85,7 @@ q-page.admin-groups
q-btn.acrylic-btn(
flat
icon='las la-trash'
:color='props.row.isSystem ? `grey` : `accent`'
:color='props.row.isSystem ? `grey` : `negative`'
:disabled='props.row.isSystem'
@click='deleteGroup(props.row)'
)

@ -92,7 +92,7 @@ q-page.admin-locale
q-btn.acrylic-btn(
flat
icon='las la-trash'
color='accent'
color='negative'
@click='deleteSite(site)'
)
</template>

@ -400,6 +400,7 @@ Total RAM: ${state.info.ramTotal}`
clip.on('success', () => {
$q.notify({
type: 'positive',
message: 'Info copied successfully',
icon: 'las la-clipboard'
})

@ -358,7 +358,7 @@ function resetColors () {
state.config.dark = false
state.config.colorPrimary = '#1976D2'
state.config.colorSecondary = '#02C39A'
state.config.colorAccent = '#f03a47'
state.config.colorAccent = '#FF9800'
state.config.colorHeader = '#000'
state.config.colorSidebar = '#1976D2'
}

@ -99,7 +99,7 @@ q-page.admin-groups
v-if='!props.row.isSystem'
flat
icon='las la-trash'
color='accent'
color='negative'
@click='deleteUser(props.row)'
)
</template>

Loading…
Cancel
Save