SWREI/switched
0
0
Fork 0
Code

[wip] darkmode

Browse Source
This commit is contained in:
syuilo 2018-04-20 03:41:24 +09:00
parent d4a2c6cef4
commit f2fea7f3cd
11 changed files with 130 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,6 +62,14 @@
app = isMobile ? 'mobile' : 'desktop';
}
// 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');
}
}
// Script version
const ver = localStorage.getItem('v') || VERSION;

25
src/client/app/desktop/script.ts
View File

@ -2,6 +2,7 @@
* Desktop Client
*/
import Vue from 'vue';
import VueRouter from 'vue-router';
// Style
@ -43,6 +44,30 @@ init(async (launch) => {
require('./views/components');
require('./views/widgets');
// Dark/Light
Vue.mixin({
mounted() {
const set = () => {
if (!this.$el || !this.os || !this.os.i) return;
if (this.os.i.clientSettings.dark) {
document.documentElement.setAttribute('data-darkmode', 'true');
this.$el.setAttribute('data-darkmode', 'true');
} else {
document.documentElement.removeAttribute('data-darkmode');
this.$el.removeAttribute('data-darkmode');
}
};
set();
this.$watch('os.i.clientSettings', i => {
set();
}, {
deep: true
});
}
});
// Init router
const router = new VueRouter({
mode: 'history',

3
src/client/app/desktop/style.styl
View File

@ -44,6 +44,9 @@ html
height 100%
background #f7f7f7
&[data-darkmode]
background #191B22
body
display flex
flex-direction column

34
src/client/app/desktop/views/components/notes.note.vue
View File

@ -291,11 +291,11 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.note
root(isDark)
margin 0
padding 0
background #fff
border-bottom solid 1px #eaeaea
background isDark ? #282C37 : #fff
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
&:first-child
border-top-left-radius 6px
@ -374,7 +374,7 @@ export default Vue.extend({
&:hover
> .main > footer > button
color #888
color isDark ? #707b97 : #888
> .avatar-anchor
display block
@ -407,7 +407,7 @@ export default Vue.extend({
margin 0 .5em 0 0
padding 0
overflow hidden
color #627079
color isDark ? #fff : #627079
font-size 1em
font-weight bold
text-decoration none
@ -426,7 +426,7 @@ export default Vue.extend({
> .username
margin 0 .5em 0 0
color #ccc
color isDark ? #606984 : #ccc
> .info
margin-left auto
@ -443,7 +443,7 @@ export default Vue.extend({
border-right solid 1px #eaeaea
> .created-at
color #c0c0c0
color isDark ? #606984 : #c0c0c0
> .body
@ -454,7 +454,7 @@ export default Vue.extend({
padding 0
overflow-wrap break-word
font-size 1.1em
color #717171
color isDark ? #fff : #717171
>>> .title
display block
@ -462,7 +462,7 @@ export default Vue.extend({
padding 4px
font-size 90%
text-align center
background #eef1f3
background isDark ? #2f3944 : #eef1f3
border-radius 4px
>>> .code
@ -471,12 +471,12 @@ export default Vue.extend({
>>> .quote
margin 8px
padding 6px 12px
color #aaa
border-left solid 3px #eee
color isDark ? #6f808e : #aaa
border-left solid 3px isDark ? #637182 : #eee
> .reply
margin-right 8px
color #717171
color isDark ? #99abbf : #717171
> .rp
margin-left 4px
@ -547,13 +547,13 @@ export default Vue.extend({
padding 0 8px
line-height 32px
font-size 1em
color #ddd
color isDark ? #606984 : #ddd
background transparent
border none
cursor pointer
&:hover
color #666
color isDark ? #9198af : #666
> .count
display inline
@ -572,6 +572,12 @@ export default Vue.extend({
padding-top 4px
background rgba(0, 0, 0, 0.0125)
.note[data-darkmode]
root(true)
.note:not([data-darkmode])
root(false)
</style>
<style lang="stylus" module>

16
src/client/app/desktop/views/components/notes.vue
View File

@ -50,17 +50,16 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-notes
root(isDark)
> .date
display block
margin 0
line-height 32px
font-size 14px
text-align center
color #aaa
background #fdfdfd
border-bottom solid 1px #eaeaea
color isDark ? #666b79 : #aaa
background isDark ? #242731 : #fdfdfd
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
span
margin 0 16px
@ -86,4 +85,11 @@ export default Vue.extend({
&:active
background #eee
.mk-notes[data-darkmode]
root(true)
.mk-notes:not([data-darkmode])
root(false)
</style>

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

@ -37,14 +37,17 @@
<section class="web" v-show="page == 'web'">
<h1>デザインと表示</h1>
<div class="div">
<button class="ui button" @click="customizeHome">ホームをカスタマイズ</button>
<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="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
</div>
<mk-switch v-model="os.i.clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
<mk-switch v-model="os.i.clientSettings.showReplyTarget" @change="onChangeShowReplyTarget" text="リプライ先を表示する"/>
<mk-switch v-model="os.i.clientSettings.showMaps" @change="onChangeShowMaps" text="マップの自動展開">
<span>位置情報が添付された投稿のマップを自動的に展開します。</span>
</mk-switch>
<mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
</section>
<section class="web" v-show="page == 'web'">
@ -298,6 +301,12 @@ export default Vue.extend({
autoWatch: v
});
},
onChangeDark(v) {
(this as any).api('i/update_client_setting', {
name: 'dark',
value: v
});
},
onChangeShowPostFormOnTopOfTl(v) {
(this as any).api('i/update_client_setting', {
name: 'showPostFormOnTopOfTl',
@ -431,7 +440,6 @@ export default Vue.extend({
> .web
> .div
border-bottom solid 1px #eee
padding 0 0 16px 0
margin 0 0 16px 0
margin 16px 0
</style>

16
src/client/app/desktop/views/components/timeline.vue
View File

@ -66,14 +66,16 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-timeline
background #fff
root(isDark)
background isDark ? #282C37 : #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
> header
padding 0 8px
z-index 10
background isDark ? #313543 : #fff
border-radius 6px 6px 0 0
box-shadow 0 1px rgba(0, 0, 0, 0.08)
> span
@ -99,10 +101,16 @@ export default Vue.extend({
background $theme-color
&:not([data-is-active])
color #6f7477
color isDark ? #9aa2a7 : #6f7477
cursor pointer
&:hover
color #525a5f
color isDark ? #d9dcde : #525a5f
.mk-timeline[data-darkmode]
root(true)
.mk-timeline:not([data-darkmode])
root(false)
</style>

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

@ -169,10 +169,10 @@ root(isDark)
> .mk-ui-header-search
display none
.header[data-is-darkmode]
.header[data-darkmode]
root(true)
.header
.header:not([data-darkmode])
root(false)
</style>

23
src/client/app/desktop/views/components/widget-container.vue
View File

@ -34,8 +34,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-widget-container
background #fff
root(isDark)
background isDark ? #282C37 : #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
overflow hidden
@ -45,6 +45,8 @@ export default Vue.extend({
border none !important
> header
background isDark ? #313543 : #fff
> .title
z-index 1
margin 0
@ -52,7 +54,7 @@ export default Vue.extend({
line-height 42px
font-size 0.9em
font-weight bold
color #888
color isDark ? #e3e5e8 : #888
box-shadow 0 1px rgba(0, 0, 0, 0.07)
> [data-fa]
@ -70,16 +72,23 @@ export default Vue.extend({
width 42px
font-size 0.9em
line-height 42px
color #ccc
color isDark ? #9baec8 : #ccc
&:hover
color #aaa
color isDark ? #b2c1d5 : #aaa
&:active
color #999
color isDark ? #b2c1d5 : #999
&.withGradient
> .title
background linear-gradient(to bottom, #fff, #ececec)
background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
box-shadow 0 1px rgba(#000, 0.11)
.mk-widget-container[data-darkmode]
root(true)
.mk-widget-container:not([data-darkmode])
root(false)
</style>

22
src/client/app/desktop/views/components/window.vue
View File

@ -465,7 +465,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-window
root(isDark)
display block
> .bg
@ -559,7 +559,7 @@ export default Vue.extend({
> .body
height 100%
overflow hidden
background #fff
background isDark ? #282C37 : #fff
border-radius 6px
box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2)
@ -571,12 +571,12 @@ export default Vue.extend({
overflow hidden
white-space nowrap
cursor move
background #fff
background isDark ? #313543 : #fff
border-radius 6px 6px 0 0
box-shadow 0 1px 0 rgba(#000, 0.1)
&.withGradient
background linear-gradient(to bottom, #fff, #ececec)
background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
box-shadow 0 1px 0 rgba(#000, 0.15)
&, *
@ -593,7 +593,7 @@ export default Vue.extend({
font-size 1em
line-height $header-height
font-weight normal
color #666
color isDark ? #e3e5e8 : #666
> div:last-child
position absolute
@ -608,16 +608,16 @@ export default Vue.extend({
padding 0
cursor pointer
font-size 1em
color rgba(#000, 0.4)
color isDark ? #9baec8 : rgba(#000, 0.4)
border none
outline none
background transparent
&:hover
color rgba(#000, 0.6)
color isDark ? #b2c1d5 : rgba(#000, 0.6)
&:active
color darken(#000, 30%)
color isDark ? #b2c1d5 : darken(#000, 30%)
> [data-fa]
padding 0
@ -632,4 +632,10 @@ export default Vue.extend({
> .main > .body > .content
height calc(100% - 40px)
.mk-window[data-darkmode]
root(true)
.mk-window:not([data-darkmode])
root(false)
</style>

7
src/client/app/init.css
View File

@ -56,6 +56,13 @@ body > noscript {
animation-delay: 0.32s;
}
html[data-darkmode] #ini {
background: #191b22;
}
html[data-darkmode] #ini > p {
color: #fff;
}
@keyframes ini {
0%, 80%, 100% {
opacity: 1;