mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-12-02 00:38:14 +09:00
Code

ダークモード情報をアカウントではなくブラウザに保存するように

Browse Source
This commit is contained in:
syuilo 2018-04-22 17:28:21 +09:00
parent d2d3a7d52b
commit 08b8d829f9
4 changed files with 34 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/client/app/boot.js
View File

@ -61,11 +61,8 @@
} }
// Dark/Light // Dark/Light
const me = JSON.parse(localStorage.getItem('me') || null); if (localStorage.getItem('darkmode') == 'true') {
if (me && me.clientSettings) { document.documentElement.setAttribute('data-darkmode', 'true');
if ((app == 'desktop' && me.clientSettings.dark) || (app == 'mobile' && me.clientSettings.darkMobile)) {
document.documentElement.setAttribute('data-darkmode', 'true');
}
} }
// Script version // Script version

6
src/client/app/desktop/views/components/settings.vue
View File

@ -40,7 +40,7 @@
<button class="ui button" @click="customizeHome" style="margin-bottom: 16px">ホームをカスタマイズ</button> <button class="ui button" @click="customizeHome" style="margin-bottom: 16px">ホームをカスタマイズ</button>
</div> </div>
<div class="div"> <div class="div">
<mk-switch v-model="os.i.clientSettings.dark" @change="onChangeDark" text="ダークモード"/> <mk-switch v-model="darkmode" text="ダークモード"/>
<mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/> <mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
</div> </div>
<mk-switch v-model="os.i.clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/> <mk-switch v-model="os.i.clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
@ -234,6 +234,7 @@ export default Vue.extend({
version, version,
latestVersion: undefined, latestVersion: undefined,
checkingForUpdate: false, checkingForUpdate: false,
darkmode: localStorage.getItem('darkmode') == 'true',
enableSounds: localStorage.getItem('enableSounds') == 'true', enableSounds: localStorage.getItem('enableSounds') == 'true',
autoPopout: localStorage.getItem('autoPopout') == 'true', autoPopout: localStorage.getItem('autoPopout') == 'true',
apiViaStream: localStorage.getItem('apiViaStream') ? localStorage.getItem('apiViaStream') == 'true' : true, apiViaStream: localStorage.getItem('apiViaStream') ? localStorage.getItem('apiViaStream') == 'true' : true,
@ -257,6 +258,9 @@ export default Vue.extend({
apiViaStream() { apiViaStream() {
localStorage.setItem('apiViaStream', this.apiViaStream ? 'true' : 'false'); localStorage.setItem('apiViaStream', this.apiViaStream ? 'true' : 'false');
}, },
darkmode() {
(this as any)._updateDarkmode_(this.darkmode);
},
enableSounds() { enableSounds() {
localStorage.setItem('enableSounds', this.enableSounds ? 'true' : 'false'); localStorage.setItem('enableSounds', this.enableSounds ? 'true' : 'false');
}, },

5
src/client/app/desktop/views/components/ui.header.account.vue
View File

@ -88,10 +88,7 @@ export default Vue.extend({
(this as any).os.signout(); (this as any).os.signout();
}, },
dark() { dark() {
(this as any).api('i/update_client_setting', { (this as any)._updateDarkmode_(!(this as any)._darkmode_);
name: 'dark',
value: !(this as any)._darkmode_
});
} }
} }
}); });

47
src/client/app/init.ts
View File

@ -61,39 +61,44 @@ Vue.mixin({
}); });
// Dark/Light // Dark/Light
const bus = new Vue();
Vue.mixin({ Vue.mixin({
data() { data() {
return { return {
_darkmode_: false _darkmode_: localStorage.getItem('darkmode') == 'true'
}; };
}, },
beforeCreate() { beforeCreate() {
// なぜか警告が出るため // なぜか警告が出るので
this._darkmode_ = false; this._darkmode_ = localStorage.getItem('darkmode') == 'true';
},
beforeDestroy() {
bus.$off('updated', this._onDarkmodeUpdated_);
}, },
mounted() { mounted() {
const set = () => { this._onDarkmodeUpdated_(this._darkmode_);
if (!this.$el || !this.$el.setAttribute || !this.os || !this.os.i) return; bus.$on('updated', this._onDarkmodeUpdated_);
if (this.os.i.clientSettings.dark) { },
methods: {
_updateDarkmode_(v) {
localStorage.setItem('darkmode', v.toString());
bus.$emit('updated', v);
if (v) {
document.documentElement.setAttribute('data-darkmode', 'true'); document.documentElement.setAttribute('data-darkmode', 'true');
this.$el.setAttribute('data-darkmode', 'true');
this._darkmode_ = true;
this.$forceUpdate();
} else { } else {
document.documentElement.removeAttribute('data-darkmode'); document.documentElement.removeAttribute('data-darkmode');
this.$el.removeAttribute('data-darkmode');
this._darkmode_ = false;
this.$forceUpdate();
} }
}; },
_onDarkmodeUpdated_(v) {
set(); if (!this.$el || !this.$el.setAttribute) return;
if (v) {
this.$watch('os.i.clientSettings', i => { this.$el.setAttribute('data-darkmode', 'true');
set(); } else {
}, { this.$el.removeAttribute('data-darkmode');
deep: true }
}); this._darkmode_ = v;
this.$forceUpdate();
}
} }
}); });