natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[wip] darkmode

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
locales/en.yml
View File

@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
customize: "Customize"
settings: "Settings"
signout: "Sign out"
dark: "Fall in dark"
desktop/views/components/ui.header.nav.vue:
home: "Home"

1
locales/fr.yml
View File

@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
customize: "Modifications"
settings: "Réglages"
signout: "Déconnexion"
dark: "Fall in dark"
desktop/views/components/ui.header.nav.vue:
home: "Accueil"

1
locales/ja.yml
View File

@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
customize: "カスタマイズ"
settings: "設定"
signout: "サインアウト"
dark: "闇に飲まれる"
desktop/views/components/ui.header.nav.vue:
home: "ホーム"

33
src/client/app/common/views/components/messaging.vue
View File

@ -169,7 +169,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-messaging
root(isDark)
&[data-compact]
font-size 0.8em
@ -209,7 +209,7 @@ export default Vue.extend({
> .form
padding 8px
background #f7f7f7
background isDark ? #282c37 : #f7f7f7
> label
display block
@ -241,13 +241,14 @@ export default Vue.extend({
line-height 38px
color #000
outline none
border solid 1px #eee
background isDark ? #191b22 : #fff
border solid 1px isDark ? #495156 : #eee
border-radius 5px
box-shadow none
transition color 0.5s ease, border 0.5s ease
&:hover
border solid 1px #ddd
border solid 1px isDark ? #b0b0b0 : #ddd
transition border 0.2s ease
&:focus
@ -328,21 +329,21 @@ export default Vue.extend({
> a
display block
text-decoration none
background #fff
border-bottom solid 1px #eee
background isDark ? #282c37 : #fff
border-bottom solid 1px isDark ? #1c2023 : #eee
*
pointer-events none
user-select none
&:hover
background #fafafa
background isDark ? #1e2129 : #fafafa
> .avatar
filter saturate(200%)
&:active
background #eee
background isDark ? #14161b : #eee
&[data-is-read]
&[data-is-me]
@ -382,17 +383,17 @@ export default Vue.extend({
overflow hidden
text-overflow ellipsis
font-size 1em
color rgba(0, 0, 0, 0.9)
color isDark ? #fff : rgba(0, 0, 0, 0.9)
font-weight bold
transition all 0.1s ease
> .username
margin 0 8px
color rgba(0, 0, 0, 0.5)
color isDark ? #606984 : rgba(0, 0, 0, 0.5)
> .mk-time
margin 0 0 0 auto
color rgba(0, 0, 0, 0.5)
color isDark ? #606984 : rgba(0, 0, 0, 0.5)
font-size 80%
> .avatar
@ -412,10 +413,10 @@ export default Vue.extend({
overflow hidden
overflow-wrap break-word
font-size 1.1em
color rgba(0, 0, 0, 0.8)
color isDark ? #fff : rgba(0, 0, 0, 0.8)
.me
color rgba(0, 0, 0, 0.4)
color isDark ? rgba(#fff, 0.7) : rgba(0, 0, 0, 0.4)
> .image
display block
@ -460,4 +461,10 @@ export default Vue.extend({
> .avatar
margin 0 12px 0 0
.mk-messaging[data-darkmode]
root(true)
.mk-messaging:not([data-darkmode])
root(false)
</style>

19
src/client/app/common/views/components/reaction-picker.vue
View File

@ -110,7 +110,7 @@ export default Vue.extend({
$border-color = rgba(27, 31, 35, 0.15)
.mk-reaction-picker
root(isDark)
position initial
> .backdrop
@ -124,9 +124,10 @@ $border-color = rgba(27, 31, 35, 0.15)
opacity 0
> .popover
$bgcolor = isDark ? #2c303c : #fff
position absolute
z-index 10001
background #fff
background $bgcolor
border 1px solid $border-color
border-radius 4px
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
@ -159,15 +160,15 @@ $border-color = rgba(27, 31, 35, 0.15)
border-top solid $balloon-size transparent
border-left solid $balloon-size transparent
border-right solid $balloon-size transparent
border-bottom solid $balloon-size #fff
border-bottom solid $balloon-size $bgcolor
> p
display block
margin 0
padding 8px 10px
font-size 14px
color #586069
border-bottom solid 1px #e1e4e8
color isDark ? #d6dce2 : #586069
border-bottom solid 1px isDark ? #1c2023 : #e1e4e8
> div
padding 4px
@ -182,10 +183,16 @@ $border-color = rgba(27, 31, 35, 0.15)
border-radius 2px
&:hover
background #eee
background isDark ? #252731 : #eee
&:active
background $theme-color
box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
.mk-reaction-picker[data-darkmode]
root(true)
.mk-reaction-picker:not([data-darkmode])
root(false)
</style>

33
src/client/app/common/views/components/reactions-viewer.vue
View File

@ -1,15 +1,15 @@
<template>
<div class="mk-reactions-viewer">
<template v-if="reactions">
<span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{{ reactions.like }}</span></span>
<span v-if="reactions.love"><mk-reaction-icon reaction='love'/><span>{{ reactions.love }}</span></span>
<span v-if="reactions.laugh"><mk-reaction-icon reaction='laugh'/><span>{{ reactions.laugh }}</span></span>
<span v-if="reactions.hmm"><mk-reaction-icon reaction='hmm'/><span>{{ reactions.hmm }}</span></span>
<span v-if="reactions.surprise"><mk-reaction-icon reaction='surprise'/><span>{{ reactions.surprise }}</span></span>
<span v-if="reactions.congrats"><mk-reaction-icon reaction='congrats'/><span>{{ reactions.congrats }}</span></span>
<span v-if="reactions.angry"><mk-reaction-icon reaction='angry'/><span>{{ reactions.angry }}</span></span>
<span v-if="reactions.confused"><mk-reaction-icon reaction='confused'/><span>{{ reactions.confused }}</span></span>
<span v-if="reactions.pudding"><mk-reaction-icon reaction='pudding'/><span>{{ reactions.pudding }}</span></span>
<span v-if="reactions.like"><mk-reaction-icon reaction="like"/><span>{{ reactions.like }}</span></span>
<span v-if="reactions.love"><mk-reaction-icon reaction="love"/><span>{{ reactions.love }}</span></span>
<span v-if="reactions.laugh"><mk-reaction-icon reaction="laugh"/><span>{{ reactions.laugh }}</span></span>
<span v-if="reactions.hmm"><mk-reaction-icon reaction="hmm"/><span>{{ reactions.hmm }}</span></span>
<span v-if="reactions.surprise"><mk-reaction-icon reaction="surprise"/><span>{{ reactions.surprise }}</span></span>
<span v-if="reactions.congrats"><mk-reaction-icon reaction="congrats"/><span>{{ reactions.congrats }}</span></span>
<span v-if="reactions.angry"><mk-reaction-icon reaction="angry"/><span>{{ reactions.angry }}</span></span>
<span v-if="reactions.confused"><mk-reaction-icon reaction="confused"/><span>{{ reactions.confused }}</span></span>
<span v-if="reactions.pudding"><mk-reaction-icon reaction="pudding"/><span>{{ reactions.pudding }}</span></span>
</template>
</div>
</template>
@ -27,9 +27,10 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-reactions-viewer
border-top dashed 1px #eee
border-bottom dashed 1px #eee
root(isDark)
$borderColor = isDark ? #5e6673 : #eee
border-top dashed 1px $borderColor
border-bottom dashed 1px $borderColor
margin 4px 0
&:empty
@ -44,6 +45,12 @@ export default Vue.extend({
> span
margin-left 4px
font-size 1.2em
color #444
color isDark ? #d1d5dc : #444
.mk-reactions-viewer[data-darkmode]
root(true)
.mk-reactions-viewer:not([data-darkmode])
root(false)
</style>

2
src/client/app/common/views/components/twitter-setting.vue
View File

@ -50,8 +50,6 @@ export default Vue.extend({
<style lang="stylus" scoped>
.mk-twitter-setting
color #4a535a
.account
border solid 1px #e1e8ed
border-radius 4px

16
src/client/app/common/views/widgets/donation.vue
View File

@ -19,9 +19,9 @@ export default define({
</script>
<style lang="stylus" scoped>
.mkw-donation
background #fff
border solid 1px #ead8bb
root(isDark)
background isDark ? #282c37 : #fff
border solid 1px isDark ? #c3831c : #ead8bb
border-radius 6px
> article
@ -30,7 +30,7 @@ export default define({
> h1
margin 0 0 5px 0
font-size 1em
color #888
color isDark ? #b2bac1 : #888
> [data-fa]
margin-right 0.25em
@ -40,7 +40,7 @@ export default define({
z-index 1
margin 0
font-size 0.8em
color #999
color isDark ? #a1a6ab : #999
&[data-mobile]
border none
@ -55,4 +55,10 @@ export default define({
> p
color #777d71
.mkw-donation[data-darkmode]
root(true)
.mkw-donation:not([data-darkmode])
root(false)
</style>

29
src/client/app/common/views/widgets/nav.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="mkw-nav">
<mk-widget-container>
<div :class="$style.body">
<div class="mkw-nav--body">
<mk-nav/>
</div>
</mk-widget-container>
@ -15,17 +15,24 @@ export default define({
});
</script>
<style lang="stylus" module>
.body
padding 16px
font-size 12px
color #aaa
background #fff
<style lang="stylus" scoped>
root(isDark)
.mkw-nav--body
padding 16px
font-size 12px
color isDark ? #9aa4b3 : #aaa
background isDark ? #282c37 : #fff
a
color #999
a
color isDark ? #9aa4b3 : #999
i
color #ccc
i
color isDark ? #9aa4b3 : #ccc
.mkw-nav[data-darkmode]
root(true)
.mkw-nav:not([data-darkmode])
root(false)
</style>

68
src/client/app/common/views/widgets/rss.vue
View File

@ -4,9 +4,11 @@
<template slot="header">%fa:rss-square%RSS</template>
<button slot="func" title="設定" @click="setting">%fa:cog%</button>
<p :class="$style.fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<div :class="$style.feed" v-else>
<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
<div class="mkw-rss--body">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<div class="feed" v-else>
<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
</div>
</div>
</mk-widget-container>
</div>
@ -56,38 +58,46 @@ export default define({
});
</script>
<style lang="stylus" module>
.feed
padding 12px 16px
font-size 0.9em
<style lang="stylus" scoped>
root(isDark)
.mkw-rss--body
.feed
padding 12px 16px
font-size 0.9em
> a
display block
padding 4px 0
color #666
border-bottom dashed 1px #eee
> a
display block
padding 4px 0
color isDark ? #9aa4b3 : #666
border-bottom dashed 1px isDark ? #1c2023 : #eee
&:last-child
border-bottom none
&:last-child
border-bottom none
.fetching
margin 0
padding 16px
text-align center
color #aaa
.fetching
margin 0
padding 16px
text-align center
color #aaa
> [data-fa]
margin-right 4px
> [data-fa]
margin-right 4px
&[data-mobile]
.feed
padding 0
font-size 1em
&[data-mobile]
.feed
padding 0
font-size 1em
> a
padding 8px 16px
> a
padding 8px 16px
&:nth-child(even)
background rgba(0, 0, 0, 0.05)
&:nth-child(even)
background rgba(0, 0, 0, 0.05)
.mkw-rss[data-darkmode]
root(true)
.mkw-rss:not([data-darkmode])
root(false)
</style>

11
src/client/app/common/views/widgets/server.cpu-memory.vue
View File

@ -100,7 +100,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.cpu-memory
root(isDark)
> svg
display block
padding 10px
@ -115,7 +115,7 @@ export default Vue.extend({
> text
font-size 5px
fill rgba(0, 0, 0, 0.55)
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
> tspan
opacity 0.5
@ -124,4 +124,11 @@ export default Vue.extend({
content ""
display block
clear both
.cpu-memory[data-darkmode]
root(true)
.cpu-memory:not([data-darkmode])
root(false)
</style>

70
src/client/app/desktop/ui.styl
View File

@ -65,20 +65,6 @@ button.ui
background $theme-color
border-color $theme-color
html[data-darkmode] button.ui
html[data-darkmode] .button.ui
color #fff
background linear-gradient(to bottom, #313543 0%, #282c37 100%)
border-color #1c2023
&:hover
background linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%)
border-color #151a1d
&:active
background #22262f
border-color #151a1d
input:not([type]).ui
input[type='text'].ui
input[type='password'].ui
@ -137,3 +123,59 @@ textarea.ui
font-size 90%
font-weight bold
color rgba(#373a3c, 0.9)
html[data-darkmode]
button.ui
.button.ui
color #fff
background linear-gradient(to bottom, #313543 0%, #282c37 100%)
border-color #1c2023
&:hover
background linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%)
border-color #151a1d
&:active
background #22262f
border-color #151a1d
&.primary
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:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
border-color $theme-color
&:active:not(:disabled)
background $theme-color
border-color $theme-color
input:not([type]).ui
input[type='text'].ui
input[type='password'].ui
input[type='email'].ui
input[type='date'].ui
input[type='number'].ui
textarea.ui
display block
padding 10px
width 100%
height 40px
font-family sans-serif
font-size 16px
color #dee4e8
background #191b22
border solid 1px #495156
border-radius 4px
&:hover
border-color #b0b0b0
&:focus
border-color $theme-color
.ui.from.group
> p:first-child
color #c0c7cc

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>

25
src/client/app/desktop/views/widgets/messaging.vue
View File

@ -1,7 +1,10 @@
<template>
<div class="mkw-messaging">
<p class="title" v-if="props.design == 0">%fa:comments%%i18n:@title%</p>
<mk-messaging ref="index" compact @navigate="navigate"/>
<mk-widget-container :show-header="props.design == 0">
<template slot="header">%fa:comments%%i18n:@title%</template>
<mk-messaging ref="index" compact @navigate="navigate"/>
</mk-widget-container>
</div>
</template>
@ -34,24 +37,6 @@ export default define({
<style lang="stylus" scoped>
.mkw-messaging
overflow hidden
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
> .title
z-index 2
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07)
> [data-fa]
margin-right 4px
> .mk-messaging
max-height 250px
overflow auto

103
src/client/app/desktop/views/widgets/trends.vue
View File

@ -1,15 +1,18 @@
<template>
<div class="mkw-trends">
<template v-if="!props.compact">
<p class="title">%fa:fire%%i18n:@title%</p>
<button @click="fetch" title="%i18n:@refresh%">%fa:sync%</button>
</template>
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<div class="note" v-else-if="note != null">
<p class="text"><router-link :to="note | notePage">{{ note.text }}</router-link></p>
<p class="author">―<router-link :to="note.user | userPage">@{{ note.user | acct }}</router-link></p>
</div>
<p class="empty" v-else>%i18n:@nothing%</p>
<mk-widget-container :show-header="!props.compact">
<template slot="header">%fa:fire%%i18n:@title%</template>
<button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button>
<div class="mkw-trends--body">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<div class="note" v-else-if="note != null">
<p class="text"><router-link :to="note | notePage">{{ note.text }}</router-link></p>
<p class="author">―<router-link :to="note.user | userPage">@{{ note.user | acct }}</router-link></p>
</div>
<p class="empty" v-else>%i18n:@nothing%</p>
</div>
</mk-widget-container>
</div>
</template>
@ -63,67 +66,41 @@ export default define({
</script>
<style lang="stylus" scoped>
.mkw-trends
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
root(isDark)
.mkw-trends--body
> .note
padding 16px
font-size 12px
font-style oblique
color #555
> .title
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
color #888
border-bottom solid 1px #eee
> p
margin 0
> [data-fa]
margin-right 4px
> .text,
> .author
> a
color inherit
> button
position absolute
z-index 2
top 0
right 0
padding 0
width 42px
font-size 0.9em
line-height 42px
color #ccc
&:hover
> .empty
margin 0
padding 16px
text-align center
color #aaa
&:active
color #999
> .note
padding 16px
font-size 12px
font-style oblique
color #555
> p
> .fetching
margin 0
padding 16px
text-align center
color #aaa
> .text,
> .author
> a
color inherit
> [data-fa]
margin-right 4px
> .empty
margin 0
padding 16px
text-align center
color #aaa
.mkw-trends[data-darkmode]
root(true)
> .fetching
margin 0
padding 16px
text-align center
color #aaa
> [data-fa]
margin-right 4px
.mkw-trends:not([data-darkmode])
root(false)
</style>

111
src/client/app/desktop/views/widgets/users.vue
View File

@ -4,7 +4,7 @@
<template slot="header">%fa:users%%i18n:@title%</template>
<button slot="func" title="%i18n:@refresh%" @click="refresh">%fa:sync%</button>
<div class="mkw-users--body" :data-darkmode="_darkmode_">
<div class="mkw-users--body">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<template v-else-if="users.length != 0">
<div class="user" v-for="_user in users">
@ -75,72 +75,73 @@ export default define({
<style lang="stylus" scoped>
root(isDark)
> .user
padding 16px
border-bottom solid 1px isDark ? #1c2023 : #eee
.mkw-users--body
> .user
padding 16px
border-bottom solid 1px isDark ? #1c2023 : #eee
&:last-child
border-bottom none
&:last-child
border-bottom none
&:after
content ""
display block
clear both
> .avatar-anchor
display block
float left
margin 0 12px 0 0
> .avatar
&:after
content ""
display block
width 42px
height 42px
margin 0
border-radius 8px
vertical-align bottom
clear both
> .body
float left
width calc(100% - 54px)
> .name
margin 0
font-size 16px
line-height 24px
color isDark ? #fff : #555
> .username
> .avatar-anchor
display block
margin 0
font-size 15px
line-height 16px
color isDark ? #606984 : #ccc
float left
margin 0 12px 0 0
> .mk-follow-button
position absolute
top 16px
right 16px
> .avatar
display block
width 42px
height 42px
margin 0
border-radius 8px
vertical-align bottom
> .empty
margin 0
padding 16px
text-align center
color #aaa
> .body
float left
width calc(100% - 54px)
> .fetching
margin 0
padding 16px
text-align center
color #aaa
> .name
margin 0
font-size 16px
line-height 24px
color isDark ? #fff : #555
> [data-fa]
margin-right 4px
> .username
display block
margin 0
font-size 15px
line-height 16px
color isDark ? #606984 : #ccc
.mkw-users--body[data-darkmode]
> .mk-follow-button
position absolute
top 16px
right 16px
> .empty
margin 0
padding 16px
text-align center
color #aaa
> .fetching
margin 0
padding 16px
text-align center
color #aaa
> [data-fa]
margin-right 4px
.mkw-users[data-darkmode]
root(true)
.mkw-users--body:not([data-darkmode])
.mkw-users:not([data-darkmode])
root(false)
</style>