MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix app rendering

This commit is contained in:
Kasper Seweryn 2022-04-18 02:40:34 +02:00 committed by Georg Krause
parent b33af58147
commit 615a801b89
5 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/index.html
View File

@ -59,7 +59,7 @@
</style> </style>
</head> </head>
<body class="theme-light" id="body"> <body id="body">
<div id="fake-app"> <div id="fake-app">
<div id="fake-sidebar"> <div id="fake-sidebar">
<div id="orange-square"></div> <div id="orange-square"></div>

1
front/src/components/Sidebar.vue
View File

@ -480,6 +480,7 @@ import Modal from '@/components/semantic/Modal.vue'
import $ from 'jquery' import $ from 'jquery'
import useThemeList from '@/composables/useThemeList' import useThemeList from '@/composables/useThemeList'
import useTheme from '@/composables/useTheme'
export default { export default {
name: 'Sidebar', name: 'Sidebar',

14
front/src/composables/useTheme.ts
View File

@ -1,12 +1,12 @@
import { useColorMode } from '@vueuse/core' import { useColorMode } from '@vueuse/core'
import { watch } from '@vue/composition-api'
const theme = useColorMode() const theme = useColorMode({
selector: 'body',
document.body.classList.add(`theme-${theme.value}`) modes: {
watch(theme, (newValue, oldValue) => { auto: '',
document.body.classList.remove(`theme-${oldValue}`) light: 'theme-light',
document.body.classList.add(`theme-${newValue}`) dark: 'theme-dark'
}
}) })
export default () => theme export default () => theme

9
front/src/main.ts
View File

@ -4,7 +4,9 @@ import VueLazyload from 'vue-lazyload'
import store from '~/store' import store from '~/store'
import { sync } from 'vuex-router-sync' import { sync } from 'vuex-router-sync'
import VueCompositionAPI, { createApp } from '@vue/composition-api' import VueCompositionAPI, { createApp } from '@vue/composition-api'
import { CreateElement } from 'vue' import Vue, { CreateElement } from 'vue'
Vue.config.devtools = true
logger.default.info('Loading environment:', import.meta.env.MODE) logger.default.info('Loading environment:', import.meta.env.MODE)
logger.default.debug('Environment variables:', import.meta.env) logger.default.debug('Environment variables:', import.meta.env)
@ -14,13 +16,16 @@ sync(store, router)
const app = createApp({ const app = createApp({
store, store,
router, router,
components: {
App: () => import('~/App.vue')
},
data: () => ({ isMounted: false }), data: () => ({ isMounted: false }),
async mounted () { async mounted () {
this.isMounted = true this.isMounted = true
}, },
render (h: CreateElement) { render (h: CreateElement) {
if (this.isMounted) { if (this.isMounted) {
return import('~/App.vue') return h('app')
} }
// TODO (wvffle): Import fake app component // TODO (wvffle): Import fake app component

2
front/src/modules/locale.ts
View File

@ -58,7 +58,7 @@ export const install: AppModule = ({ store, app }) => {
document.documentElement.setAttribute('lang', htmlLocale) document.documentElement.setAttribute('lang', htmlLocale)
if (locale === 'en_US') { if (locale === 'en_US') {
Vue.prototype.$language.current = locale Vue.config.language = locale
store.commit('ui/momentLocale', 'en') store.commit('ui/momentLocale', 'en')
} }
}, { immediate: true }) }, { immediate: true })