sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[wip] darkmode

Browse Source
This commit is contained in:
syuilo
2018-04-20 07:45:37 +09:00
parent 9b3ee877a6
commit 8daa9c8062
31 changed files with 448 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/client/app/desktop/views/components/context-menu.menu.vue
View File

@@ -31,7 +31,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.menu
root(isDark)
$width = 240px
$item-height = 38px
$padding = 10px
@@ -46,7 +46,7 @@ export default Vue.extend({
&.divider
margin-top $padding
padding-top $padding
border-top solid 1px #eee
border-top solid 1px isDark ? #1c2023 : #eee
&.nest
> p
@@ -75,7 +75,7 @@ export default Vue.extend({
margin 0
padding 0 32px 0 38px
line-height $item-height
color #868C8C
color isDark ? #c8cece : #868C8C
text-decoration none
cursor pointer
@@ -104,11 +104,17 @@ export default Vue.extend({
left $width
margin-top -($padding)
width $width
background #fff
background isDark ? #282c37 :#fff
border-radius 0 4px 4px 4px
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
transition visibility 0s linear 0.2s
.menu[data-darkmode]
root(true)
.menu:not([data-darkmode])
root(false)
</style>
<style lang="stylus" module>

10
src/client/app/desktop/views/components/context-menu.vue
View File

@@ -54,7 +54,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.context-menu
root(isDark)
$width = 240px
$item-height = 38px
$padding = 10px
@@ -66,9 +66,15 @@ export default Vue.extend({
z-index 4096
width $width
font-size 0.8em
background #fff
background isDark ? #282c37 : #fff
border-radius 0 4px 4px 4px
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
opacity 0
.context-menu[data-darkmode]
root(true)
.context-menu:not([data-darkmode])
root(false)
</style>

10
src/client/app/desktop/views/components/drive.file.vue
View File

@@ -186,7 +186,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.root.file
root(isDark)
padding 8px 0 0 0
height 180px
border-radius 4px
@@ -308,10 +308,16 @@ export default Vue.extend({
font-size 0.8em
text-align center
word-break break-all
color #444
color isDark ? #fff : #444
overflow hidden
> .ext
opacity 0.5
.root.file[data-darkmode]
root(true)
.root.file:not([data-darkmode])
root(false)
</style>

14
src/client/app/desktop/views/components/drive.vue
View File

@@ -577,7 +577,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-drive
root(isDark)
> nav
display block
@@ -585,9 +585,8 @@ export default Vue.extend({
width 100%
overflow auto
font-size 0.9em
color #555
background #fff
//border-bottom 1px solid #dfdfdf
color isDark ? #d2d9dc : #555
background isDark ? #282c37 : #fff
box-shadow 0 1px 0 rgba(0, 0, 0, 0.05)
&, *
@@ -665,6 +664,7 @@ export default Vue.extend({
padding 8px
height calc(100% - 38px)
overflow auto
background isDark ? #191b22 : #fff
&, *
user-select none
@@ -770,4 +770,10 @@ export default Vue.extend({
> input
display none
.mk-drive[data-darkmode]
root(true)
.mk-drive:not([data-darkmode])
root(false)
</style>

22
src/client/app/desktop/views/components/follow-button.vue
View File

@@ -94,7 +94,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-follow-button
root(isDark)
display block
cursor pointer
padding 0
@@ -121,17 +121,17 @@ export default Vue.extend({
border-radius 8px
&.follow
color #888
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
border solid 1px #e2e2e2
color isDark ? #fff : #888
background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
border solid 1px isDark ? #1c2023 : #e2e2e2
&:hover
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
border-color #dcdcdc
background isDark ? linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%) : linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
border-color isDark ? #151a1d : #dcdcdc
&:active
background #ececec
border-color #dcdcdc
background isDark ? #22262f : #ececec
border-color isDark ? #151a1d : #dcdcdc
&.unfollow
color $theme-color-foreground
@@ -161,4 +161,10 @@ export default Vue.extend({
i
margin-right 8px
.mk-follow-button[data-darkmode]
root(true)
.mk-follow-button:not([data-darkmode])
root(false)
</style>

21
src/client/app/desktop/views/components/note-preview.vue
View File

@@ -33,19 +33,14 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-note-preview
root(isDark)
font-size 0.9em
background #fff
&:after
content ""
display block
clear both
&:hover
> .main > footer > button
color #888
> .avatar-anchor
display block
float left
@@ -70,7 +65,7 @@ export default Vue.extend({
> .name
margin 0 .5em 0 0
padding 0
color #607073
color isDark ? #fff : #607073
font-size 1em
font-weight bold
text-decoration none
@@ -81,11 +76,11 @@ export default Vue.extend({
> .username
margin 0 .5em 0 0
color #d1d8da
color isDark ? #606984 : #d1d8da
> .time
margin-left auto
color #b2b8bb
color isDark ? #606984 : #b2b8bb
> .body
@@ -94,6 +89,12 @@ export default Vue.extend({
margin 0
padding 0
font-size 1.1em
color #717171
color isDark ? #959ba7 : #717171
.mk-note-preview[data-darkmode]
root(true)
.mk-note-preview:not([data-darkmode])
root(false)
</style>

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

@@ -33,7 +33,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.sub
root(isDark)
margin 0
padding 16px
font-size 0.9em
@@ -43,10 +43,6 @@ export default Vue.extend({
display block
clear both
&:hover
> .main > footer > button
color #888
> .avatar-anchor
display block
float left
@@ -75,7 +71,7 @@ export default Vue.extend({
margin 0 .5em 0 0
padding 0
overflow hidden
color #607073
color isDark ? #fff : #607073
font-size 1em
font-weight bold
text-decoration none
@@ -86,11 +82,11 @@ export default Vue.extend({
> .username
margin 0 .5em 0 0
color #d1d8da
color isDark ? #606984 : #d1d8da
> .created-at
margin-left auto
color #b2b8bb
color isDark ? #606984 : #b2b8bb
> .body
max-height 128px
@@ -101,10 +97,16 @@ export default Vue.extend({
margin 0
padding 0
font-size 1.1em
color #717171
color isDark ? #959ba7 : #717171
pre
max-height 120px
font-size 80%
.sub[data-darkmode]
root(true)
.sub:not([data-darkmode])
root(false)
</style>

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

@@ -297,14 +297,15 @@ root(isDark)
background isDark ? #282C37 : #fff
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
&:first-child
border-top-left-radius 6px
border-top-right-radius 6px
> .renote
&[data-round]
&:first-child
border-top-left-radius 6px
border-top-right-radius 6px
> .renote
border-top-left-radius 6px
border-top-right-radius 6px
&:last-of-type
border-bottom none
@@ -324,7 +325,7 @@ root(isDark)
> .renote
color #9dbb00
background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
> p
margin 0
@@ -434,7 +435,7 @@ root(isDark)
> .mobile
margin-right 8px
color #ccc
color isDark ? #606984 : #ccc
> .app
margin-right 8px

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

@@ -185,14 +185,14 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-notifications
root(isDark)
> .notifications
> .notification
margin 0
padding 16px
overflow-wrap break-word
font-size 0.9em
border-bottom solid 1px rgba(0, 0, 0, 0.05)
border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
&:last-child
border-bottom none
@@ -203,7 +203,7 @@ export default Vue.extend({
top 16px
right 12px
vertical-align top
color rgba(0, 0, 0, 0.6)
color isDark ? #606984 : rgba(0, 0, 0, 0.6)
font-size small
&:after
@@ -238,10 +238,10 @@ export default Vue.extend({
margin-right 4px
.note-preview
color rgba(0, 0, 0, 0.7)
color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
.note-ref
color rgba(0, 0, 0, 0.7)
color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
[data-fa]
font-size 1em
@@ -268,9 +268,9 @@ export default Vue.extend({
line-height 32px
text-align center
font-size 0.8em
color #aaa
background #fdfdfd
border-bottom solid 1px rgba(0, 0, 0, 0.05)
color isDark ? #666b79 : #aaa
background isDark ? #242731 : #fdfdfd
border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
span
margin 0 16px
@@ -312,4 +312,10 @@ export default Vue.extend({
> [data-fa]
margin-right 4px
.mk-notifications[data-darkmode]
root(true)
.mk-notifications:not([data-darkmode])
root(false)
</style>

2
src/client/app/desktop/views/components/post-form.vue
View File

@@ -341,7 +341,7 @@ root(isDark)
> .medias
margin 0
padding 0
background lighten($theme-color, 98%)
background isDark ? #181b23 : lighten($theme-color, 98%)
border solid 1px rgba($theme-color, 0.1)
border-top none
border-radius 0 0 4px 4px

59
src/client/app/desktop/views/components/renote-form.vue
View File

@@ -4,8 +4,8 @@
<template v-if="!quote">
<footer>
<a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a>
<button class="cancel" @click="cancel">%i18n:@cancel%</button>
<button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:!@reposting%' : '%i18n:!@renote%' }}</button>
<button class="ui cancel" @click="cancel">%i18n:@cancel%</button>
<button class="ui primary ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:!@reposting%' : '%i18n:!@renote%' }}</button>
</footer>
</template>
<template v-if="quote">
@@ -59,14 +59,14 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-renote-form
root(isDark)
> .mk-note-preview
margin 16px 22px
> footer
height 72px
background lighten($theme-color, 95%)
background isDark ? #313543 : lighten($theme-color, 95%)
> .quote
position absolute
@@ -78,54 +78,19 @@ export default Vue.extend({
display block
position absolute
bottom 16px
cursor pointer
padding 0
margin 0
width 120px
height 40px
font-size 1em
outline none
border-radius 4px
&:focus
&:after
content ""
pointer-events none
position absolute
top -5px
right -5px
bottom -5px
left -5px
border 2px solid rgba($theme-color, 0.3)
border-radius 8px
&.cancel
right 148px
> .cancel
right 148px
color #888
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
border solid 1px #e2e2e2
&.ok
right 16px
&:hover
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
border-color #dcdcdc
.mk-renote-form[data-darkmode]
root(true)
&:active
background #ececec
border-color #dcdcdc
> .ok
right 16px
font-weight bold
color $theme-color-foreground
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
border solid 1px lighten($theme-color, 15%)
&:hover
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
border-color $theme-color
&:active
background $theme-color
border-color $theme-color
.mk-renote-form:not([data-darkmode])
root(false)
</style>

131
src/client/app/desktop/views/components/repost-form.vue
View File

@@ -1,131 +0,0 @@
<template>
<div class="mk-renote-form">
<mk-note-preview :note="note"/>
<template v-if="!quote">
<footer>
<a class="quote" v-if="!quote" @click="onQuote">%i18n:desktop.tags.mk-renote-form.quote%</a>
<button class="cancel" @click="cancel">%i18n:desktop.tags.mk-renote-form.cancel%</button>
<button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:!desktop.tags.mk-renote-form.reposting%' : '%i18n:!desktop.tags.mk-renote-form.renote%' }}</button>
</footer>
</template>
<template v-if="quote">
<mk-post-form ref="form" :renote="note" @posted="onChildFormPosted"/>
</template>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['note'],
data() {
return {
wait: false,
quote: false
};
},
methods: {
ok() {
this.wait = true;
(this as any).api('notes/create', {
renoteId: this.note.id
}).then(data => {
this.$emit('posted');
(this as any).apis.notify('%i18n:!desktop.tags.mk-renote-form.success%');
}).catch(err => {
(this as any).apis.notify('%i18n:!desktop.tags.mk-renote-form.failure%');
}).then(() => {
this.wait = false;
});
},
cancel() {
this.$emit('canceled');
},
onQuote() {
this.quote = true;
this.$nextTick(() => {
(this.$refs.form as any).focus();
});
},
onChildFormPosted() {
this.$emit('posted');
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-renote-form
> .mk-note-preview
margin 16px 22px
> footer
height 72px
background lighten($theme-color, 95%)
> .quote
position absolute
bottom 16px
left 28px
line-height 40px
button
display block
position absolute
bottom 16px
cursor pointer
padding 0
margin 0
width 120px
height 40px
font-size 1em
outline none
border-radius 4px
&:focus
&:after
content ""
pointer-events none
position absolute
top -5px
right -5px
bottom -5px
left -5px
border 2px solid rgba($theme-color, 0.3)
border-radius 8px
> .cancel
right 148px
color #888
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
border solid 1px #e2e2e2
&:hover
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
border-color #dcdcdc
&:active
background #ececec
border-color #dcdcdc
> .ok
right 16px
font-weight bold
color $theme-color-foreground
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
border solid 1px lighten($theme-color, 15%)
&:hover
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
border-color $theme-color
&:active
background $theme-color
border-color $theme-color
</style>

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

@@ -29,8 +29,6 @@ export default Vue.extend({
<style lang="stylus" scoped>
.root.api
color #4a535a
code
display inline-block
padding 4px 6px

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

@@ -434,8 +434,8 @@ root(isDark)
margin 0 0 1em 0
padding 0 0 8px 0
font-size 1em
color #555
border-bottom solid 1px #eee
color isDark ? #e3e7ea : #555
border-bottom solid 1px isDark ? #1c2023 : #eee
> .web
> .div

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

@@ -8,23 +8,28 @@
<div class="menu" v-if="isOpen">
<ul>
<li>
<router-link :to="`/@${ os.i.username }`">%fa:user%%i18n:@profile%%fa:angle-right%</router-link>
<router-link :to="`/@${ os.i.username }`">%fa:user%<span>%i18n:@profile%</span>%fa:angle-right%</router-link>
</li>
<li @click="drive">
<p>%fa:cloud%%i18n:@drive%%fa:angle-right%</p>
<p>%fa:cloud%<span>%i18n:@drive%</span>%fa:angle-right%</p>
</li>
</ul>
<ul>
<li>
<a href="/i/customize-home">%fa:wrench%%i18n:@customize%%fa:angle-right%</a>
<a href="/i/customize-home">%fa:wrench%<span>%i18n:@customize%</span>%fa:angle-right%</a>
</li>
<li @click="settings">
<p>%fa:cog%%i18n:@settings%%fa:angle-right%</p>
<p>%fa:cog%<span>%i18n:@settings%</span>%fa:angle-right%</p>
</li>
</ul>
<ul>
<li @click="signout">
<p>%fa:power-off%%i18n:@signout%%fa:angle-right%</p>
<p>%fa:power-off%<span>%i18n:@signout%</span></p>
</li>
</ul>
<ul>
<li @click="dark">
<p><span>%i18n:@dark%</span><template v-if="_darkmode_">%fa:moon%</template><template v-else>%fa:R moon%</template></p>
</li>
</ul>
</div>
@@ -78,6 +83,12 @@ export default Vue.extend({
},
signout() {
(this as any).os.signout();
},
dark() {
(this as any).api('i/update_client_setting', {
name: 'dark',
value: !(this as any)._darkmode_
});
}
}
});
@@ -86,7 +97,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.account
root(isDark)
> .header
display block
margin 0
@@ -101,13 +112,13 @@ export default Vue.extend({
&:hover
&[data-active='true']
color darken(#9eaba8, 20%)
color isDark ? #fff : darken(#9eaba8, 20%)
> .avatar
filter saturate(150%)
&:active
color darken(#9eaba8, 30%)
color isDark ? #fff : darken(#9eaba8, 30%)
> .username
display block
@@ -134,13 +145,14 @@ export default Vue.extend({
transition filter 100ms ease
> .menu
$bgcolor = isDark ? #282c37 : #fff
display block
position absolute
top 56px
right -2px
width 230px
font-size 0.8em
background #fff
background $bgcolor
border-radius 4px
box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
@@ -165,7 +177,7 @@ export default Vue.extend({
right 12px
border-top solid 14px transparent
border-right solid 14px transparent
border-bottom solid 14px #fff
border-bottom solid 14px $bgcolor
border-left solid 14px transparent
ul
@@ -176,7 +188,7 @@ export default Vue.extend({
& + ul
padding-top 10px
border-top solid 1px #eee
border-top solid 1px isDark ? #1c2023 : #eee
> li
display block
@@ -190,16 +202,20 @@ export default Vue.extend({
padding 0 28px
margin 0
line-height 40px
color #868C8C
color isDark ? #c8cece : #868C8C
cursor pointer
*
pointer-events none
> [data-fa]:first-of-type
margin-right 6px
> span:first-child
padding-left 16px
> [data-fa]:last-of-type
> [data-fa]:first-child
margin-right 6px
width 16px
> [data-fa]:last-child
display block
position absolute
top 0
@@ -222,4 +238,10 @@ export default Vue.extend({
transform-origin: center -16px;
}
.account[data-darkmode]
root(true)
.account:not([data-darkmode])
root(false)
</style>

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

@@ -84,7 +84,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.notifications
root(isDark)
> button
display block
@@ -101,10 +101,10 @@ export default Vue.extend({
&:hover
&[data-active='true']
color darken(#9eaba8, 20%)
color isDark ? #fff : darken(#9eaba8, 20%)
&:active
color darken(#9eaba8, 30%)
color isDark ? #fff : darken(#9eaba8, 30%)
> [data-fa].bell
font-size 1.2em
@@ -117,12 +117,13 @@ export default Vue.extend({
color $theme-color
> .pop
$bgcolor = isDark ? #282c37 : #fff
display block
position absolute
top 56px
right -72px
width 300px
background #fff
background $bgcolor
border-radius 4px
box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
@@ -147,7 +148,7 @@ export default Vue.extend({
right 74px
border-top solid 14px transparent
border-right solid 14px transparent
border-bottom solid 14px #fff
border-bottom solid 14px $bgcolor
border-left solid 14px transparent
> .mk-notifications
@@ -155,4 +156,10 @@ export default Vue.extend({
font-size 1rem
overflow auto
.notifications[data-darkmode]
root(true)
.notifications:not([data-darkmode])
root(false)
</style>