From 7084ac51bfd3db7398e6c0bbb99579c90851a373 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 22 Apr 2018 17:28:21 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=80=E3=83=BC=E3=82=AF=E3=83=A2=E3=83=BC?=
=?UTF-8?q?=E3=83=89=E6=83=85=E5=A0=B1=E3=82=92=E3=82=A2=E3=82=AB=E3=82=A6?=
=?UTF-8?q?=E3=83=B3=E3=83=88=E3=81=A7=E3=81=AF=E3=81=AA=E3=81=8F=E3=83=96?=
=?UTF-8?q?=E3=83=A9=E3=82=A6=E3=82=B6=E3=81=AB=E4=BF=9D=E5=AD=98=E3=81=99?=
=?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/client/app/boot.js | 7 +--
.../app/desktop/views/components/settings.vue | 6 ++-
.../views/components/ui.header.account.vue | 5 +-
src/client/app/init.ts | 47 ++++++++++---------
4 files changed, 34 insertions(+), 31 deletions(-)
diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index 8a79880fb..f5a1afec6 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -61,11 +61,8 @@
}
// Dark/Light
- const me = JSON.parse(localStorage.getItem('me') || null);
- if (me && me.clientSettings) {
- if ((app == 'desktop' && me.clientSettings.dark) || (app == 'mobile' && me.clientSettings.darkMobile)) {
- document.documentElement.setAttribute('data-darkmode', 'true');
- }
+ if (localStorage.getItem('darkmode') == 'true') {
+ document.documentElement.setAttribute('data-darkmode', 'true');
}
// Script version
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index b5111dabc..9d56042ea 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -40,7 +40,7 @@
<button class="ui button" @click="customizeHome" style="margin-bottom: 16px">ホームをカスタマイズ</button>
</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="ウィンドウのタイトルバーにグラデーションを使用"/>
</div>
<mk-switch v-model="os.i.clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
@@ -234,6 +234,7 @@ export default Vue.extend({
version,
latestVersion: undefined,
checkingForUpdate: false,
+ darkmode: localStorage.getItem('darkmode') == 'true',
enableSounds: localStorage.getItem('enableSounds') == 'true',
autoPopout: localStorage.getItem('autoPopout') == 'true',
apiViaStream: localStorage.getItem('apiViaStream') ? localStorage.getItem('apiViaStream') == 'true' : true,
@@ -257,6 +258,9 @@ export default Vue.extend({
apiViaStream() {
localStorage.setItem('apiViaStream', this.apiViaStream ? 'true' : 'false');
},
+ darkmode() {
+ (this as any)._updateDarkmode_(this.darkmode);
+ },
enableSounds() {
localStorage.setItem('enableSounds', this.enableSounds ? 'true' : 'false');
},
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index ce7fab22c..2d4d23933 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -88,10 +88,7 @@ export default Vue.extend({
(this as any).os.signout();
},
dark() {
- (this as any).api('i/update_client_setting', {
- name: 'dark',
- value: !(this as any)._darkmode_
- });
+ (this as any)._updateDarkmode_(!(this as any)._darkmode_);
}
}
});
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 461093488..2f79e6cab 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -61,39 +61,44 @@ Vue.mixin({
});
// Dark/Light
+const bus = new Vue();
Vue.mixin({
data() {
return {
- _darkmode_: false
+ _darkmode_: localStorage.getItem('darkmode') == 'true'
};
},
beforeCreate() {
- // なぜか警告が出るため
- this._darkmode_ = false;
+ // なぜか警告が出るので
+ this._darkmode_ = localStorage.getItem('darkmode') == 'true';
+ },
+ beforeDestroy() {
+ bus.$off('updated', this._onDarkmodeUpdated_);
},
mounted() {
- const set = () => {
- if (!this.$el || !this.$el.setAttribute || !this.os || !this.os.i) return;
- if (this.os.i.clientSettings.dark) {
+ this._onDarkmodeUpdated_(this._darkmode_);
+ bus.$on('updated', this._onDarkmodeUpdated_);
+ },
+ methods: {
+ _updateDarkmode_(v) {
+ localStorage.setItem('darkmode', v.toString());
+ bus.$emit('updated', v);
+ if (v) {
document.documentElement.setAttribute('data-darkmode', 'true');
- this.$el.setAttribute('data-darkmode', 'true');
- this._darkmode_ = true;
- this.$forceUpdate();
} else {
document.documentElement.removeAttribute('data-darkmode');
- this.$el.removeAttribute('data-darkmode');
- this._darkmode_ = false;
- this.$forceUpdate();
}
- };
-
- set();
-
- this.$watch('os.i.clientSettings', i => {
- set();
- }, {
- deep: true
- });
+ },
+ _onDarkmodeUpdated_(v) {
+ if (!this.$el || !this.$el.setAttribute) return;
+ if (v) {
+ this.$el.setAttribute('data-darkmode', 'true');
+ } else {
+ this.$el.removeAttribute('data-darkmode');
+ }
+ this._darkmode_ = v;
+ this.$forceUpdate();
+ }
}
});