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

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>