sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(client): blur effect for modal

Browse Source
This commit is contained in:
syuilo
2020-07-12 18:14:59 +09:00
parent 426c2fa5d1
commit aae9bc4cf4
11 changed files with 64 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/client/init.ts
View File

@ -106,36 +106,17 @@ document.body.innerHTML = '<div id="app"></div>';
const store = createStore();
window.addEventListener('storage', e => {
if (e.key === 'vuex') {
store.replaceState(JSON.parse(localStorage['vuex']));
} else if (e.key === 'i') {
location.reload();
}
}, false);
const os = new MiOS(store);
os.init(async () => {
window.addEventListener('storage', e => {
if (e.key === 'vuex') {
store.replaceState(JSON.parse(localStorage['vuex']));
} else if (e.key === 'i') {
location.reload();
}
}, false);
store.watch(state => state.device.darkMode, darkMode => {
import('./scripts/theme').then(({ builtinThemes }) => {
const themes = builtinThemes.concat(store.state.device.themes);
applyTheme(themes.find(x => x.id === (darkMode ? store.state.device.darkTheme : store.state.device.lightTheme)));
});
});
//#region Sync dark mode
if (store.state.device.syncDeviceDarkMode) {
store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() });
}
window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
if (store.state.device.syncDeviceDarkMode) {
store.commit('device/set', { key: 'darkMode', value: mql.matches });
}
});
//#endregion
//#region Fetch locale data
const i18n = new VueI18n();
@ -148,13 +129,6 @@ os.init(async () => {
});
//#endregion
if ('Notification' in window && store.getters.isSignedIn) {
// 許可を得ていなかったらリクエスト
if (Notification.permission === 'default') {
Notification.requestPermission();
}
}
const app = new Vue({
store: store,
i18n,
@ -228,6 +202,29 @@ os.init(async () => {
// マウント
app.$mount('#app');
store.watch(state => state.device.darkMode, darkMode => {
import('./scripts/theme').then(({ builtinThemes }) => {
const themes = builtinThemes.concat(store.state.device.themes);
applyTheme(themes.find(x => x.id === (darkMode ? store.state.device.darkTheme : store.state.device.lightTheme)));
});
});
//#region Sync dark mode
if (store.state.device.syncDeviceDarkMode) {
store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() });
}
window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
if (store.state.device.syncDeviceDarkMode) {
store.commit('device/set', { key: 'darkMode', value: mql.matches });
}
});
//#endregion
store.watch(state => state.device.useBlurEffectForModal, v => {
document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
}, { immediate: true });
os.stream.on('emojiAdded', data => {
// TODO
//store.commit('instance/set', );
@ -263,6 +260,13 @@ os.init(async () => {
}
if (store.getters.isSignedIn) {
if ('Notification' in window) {
// 許可を得ていなかったらリクエスト
if (Notification.permission === 'default') {
Notification.requestPermission();
}
}
const main = os.stream.useSharedConnection('main');
// 自分の情報が更新されたとき