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

wip

This commit is contained in:
syuilo 2018-09-28 15:34:34 +09:00
parent c627288bde
commit 13f258308e
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
16 changed files with 45 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,6 @@ import MkUser from './views/pages/user/user.vue';
import MkFavorites from './views/pages/favorites.vue';
import MkSelectDrive from './views/pages/selectdrive.vue';
import MkDrive from './views/pages/drive.vue';
import MkUserList from './views/pages/user-list.vue';
import MkHomeCustomize from './views/pages/home-customize.vue';
import MkMessagingRoom from './views/pages/messaging-room.vue';
import MkNote from './views/pages/note.vue';
@ -63,7 +62,6 @@ init(async (launch) => {
{ path: '/i/messaging/:user', component: MkMessagingRoom },
{ path: '/i/drive', component: MkDrive },
{ path: '/i/drive/folder/:folder', component: MkDrive },
{ path: '/i/lists/:list', component: MkUserList },
{ path: '/selectdrive', component: MkSelectDrive },
{ path: '/search', component: MkSearch },
{ path: '/tags/:tag', component: MkTag },

11
src/client/app/desktop/views/components/received-follow-requests-window.vue
View File

@ -47,8 +47,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.slpqaxdoxhvglersgjukmvizkqbmbokc
padding 16px
> button
@ -57,16 +56,10 @@ root(isDark)
> div
display flex
padding 16px
border solid 1px isDark ? #1c2023 : #eee
border solid 1px var(--faceDivider)
border-radius 4px
> span
margin 0 0 0 auto
.slpqaxdoxhvglersgjukmvizkqbmbokc[data-darkmode]
root(true)
.slpqaxdoxhvglersgjukmvizkqbmbokc:not([data-darkmode])
root(false)
</style>

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

@ -57,16 +57,13 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.mk-renote-form
> .preview
margin 16px 22px
> footer
height 72px
background isDark ? #313543 : var(--primaryLighten95)
background var(--desktopRenoteFormFooter)
> .quote
position absolute
@ -87,10 +84,4 @@ root(isDark)
&.ok
right 16px
.mk-renote-form[data-darkmode]
root(true)
.mk-renote-form:not([data-darkmode])
root(false)
</style>

14
src/client/app/desktop/views/components/ui-notification.vue
View File

@ -36,7 +36,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.mk-ui-notification
display block
position fixed
z-index 10000
@ -46,10 +46,10 @@ root(isDark)
margin 0 auto
padding 128px 0 0 0
width 500px
color rgba(isDark ? #fff : #000, 0.6)
//background rgba(var(--face), 0.9)
color var(--desktopNotificationFg)
background var(--desktopNotificationBg)
border-radius 0 0 8px 8px
box-shadow 0 2px 4px rgba(#000, isDark ? 0.4 : 0.2)
box-shadow 0 2px 4px var(--desktopNotificationShadow)
transform translateY(-64px)
opacity 0
@ -58,10 +58,4 @@ root(isDark)
line-height 64px
text-align center
.mk-ui-notification[data-darkmode]
root(true)
.mk-ui-notification:not([data-darkmode])
root(false)
</style>

11
src/client/app/desktop/views/components/user-lists-window.vue
View File

@ -47,8 +47,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.xkxvokkjlptzyewouewmceqcxhpgzprp
padding 16px
> button
@ -57,13 +56,7 @@ root(isDark)
> a
display block
padding 16px
border solid 1px isDark ? #1c2023 : #eee
border solid 1px var(--faceDivider)
border-radius 4px
.xkxvokkjlptzyewouewmceqcxhpgzprp[data-darkmode]
root(true)
.xkxvokkjlptzyewouewmceqcxhpgzprp:not([data-darkmode])
root(false)
</style>

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

@ -83,9 +83,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.mk-user-preview
position absolute
z-index 2048
margin-top -8px
@ -99,7 +97,7 @@ root(isDark)
> .banner
height 84px
background-color isDark ? #1c1e26 : #f5f5f5
background-color rgba(0, 0, 0, 0.1)
background-size cover
background-position center
@ -123,19 +121,20 @@ root(isDark)
margin 0
font-weight bold
line-height 16px
color isDark ? #fff : #656565
color var(--text)
> .username
display block
margin 0
line-height 16px
font-size 0.8em
color isDark ? #606984 : #999
color var(--text)
opacity 0.7
> .description
padding 0 16px
font-size 0.7em
color isDark ? #9ea4ad : #555
color var(--text)
> .status
padding 8px 16px
@ -147,7 +146,7 @@ root(isDark)
> p
margin 0
font-size 0.7em
color #aaa
color var(--text)
> span
font-size 1em
@ -158,10 +157,4 @@ root(isDark)
top 92px
right 8px
.mk-user-preview[data-darkmode]
root(true)
.mk-user-preview:not([data-darkmode])
root(false)
</style>

14
src/client/app/desktop/views/pages/deck/deck.column.vue
View File

@ -269,9 +269,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs
$header-height = 42px
width 330px
@ -301,7 +299,7 @@ root(isDark)
min-width 285px
&.naked
background rgba(#000, isDark ? 0.25 : 0.1)
background var(--deckAcrylicColumnBg)
> header
background transparent
@ -350,7 +348,7 @@ root(isDark)
color var(--faceTextButtonHover)
&:active
color isDark ? #b2c1d5 : #999
color var(--faceTextButtonActive)
> .toggleActive
margin-left -16px
@ -364,10 +362,4 @@ root(isDark)
overflow auto
overflow-x hidden
.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs[data-darkmode]
root(true)
.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs:not([data-darkmode])
root(false)
</style>

20
src/client/app/desktop/views/pages/deck/deck.note.vue
View File

@ -214,9 +214,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
mediaRoot(isDark)
.srwrkujossgfuhrbnvqkybtzxpblgchi
font-size 13px
margin 4px 12px
@ -226,7 +224,7 @@ mediaRoot(isDark)
&:last-child
margin-bottom 12px
root(isDark)
.zyjjkidcqjnlegkqebitfviomuqmseqk
font-size 13px
border-bottom solid 1px var(--faceDivider)
@ -409,7 +407,7 @@ root(isDark)
margin-right 28px
&:hover
color isDark ? #9198af : #666
color var(--noteActionsHover)
> .count
display inline
@ -419,16 +417,4 @@ root(isDark)
&.reacted
color var(--primary)
.zyjjkidcqjnlegkqebitfviomuqmseqk[data-darkmode]
root(true)
.zyjjkidcqjnlegkqebitfviomuqmseqk:not([data-darkmode])
root(false)
.srwrkujossgfuhrbnvqkybtzxpblgchi[data-darkmode]
mediaRoot(true)
.srwrkujossgfuhrbnvqkybtzxpblgchi:not([data-darkmode])
mediaRoot(false)
</style>

14
src/client/app/desktop/views/pages/deck/deck.notes.vue
View File

@ -195,9 +195,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.eamppglmnmimdhrlzhplwpvyeaqmmhxu
.transition
.mk-notes-enter
.mk-notes-leave-to
@ -238,15 +236,9 @@ root(isDark)
border-bottom-right-radius 6px
&:hover
background isDark ? #2e3440 : #f5f5f5
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
&:active
background isDark ? #21242b : #eee
.eamppglmnmimdhrlzhplwpvyeaqmmhxu[data-darkmode]
root(true)
.eamppglmnmimdhrlzhplwpvyeaqmmhxu:not([data-darkmode])
root(false)
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
</style>

2
src/client/app/desktop/views/pages/deck/deck.notification.vue
View File

@ -142,7 +142,7 @@ root(isDark)
> .mk-time
margin-left auto
color isDark ? #606984 : #c0c0c0
color var(--noteHeaderInfo)
font-size 0.9em
> .note-preview

16
src/client/app/desktop/views/pages/deck/deck.vue
View File

@ -221,9 +221,7 @@ export default Vue.extend({
</style>
<style lang="stylus" scoped>
root(isDark)
.qlvquzbjribqcaozciifydkngcwtyzje
display flex
flex 1
padding 16px 0 16px 16px
@ -251,18 +249,12 @@ root(isDark)
> button
padding 0 16px
color isDark ? #93a0a5 : #888
color var(--faceTextButton)
&:hover
color isDark ? #b8c5ca : #777
color var(--faceTextButtonHover)
&:active
color isDark ? #fff : #555
.qlvquzbjribqcaozciifydkngcwtyzje[data-darkmode]
root(true)
.qlvquzbjribqcaozciifydkngcwtyzje:not([data-darkmode])
root(false)
color var(--faceTextButtonActive)
</style>

13
src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
View File

@ -135,9 +135,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.wtdtxvecapixsepjtcupubtsmometobz
.gqpwvtwtprsbmnssnbicggtwqhmylhnq
> header
padding 16px
@ -169,14 +167,5 @@ root(isDark)
background rgba(#000, 0.7)
border-radius 4px
> header
color isDark ? #fff : #000
.wtdtxvecapixsepjtcupubtsmometobz[data-darkmode]
root(true)
.wtdtxvecapixsepjtcupubtsmometobz:not([data-darkmode])
root(false)
</style>

125
src/client/app/desktop/views/pages/user-list.users.vue
View File

@ -1,125 +0,0 @@
<template>
<div>
<mk-widget-container>
<template slot="header">%fa:users% %i18n:@users%</template>
<button slot="func" title="%i18n:@add-user%" @click="add">%fa:plus%</button>
<div data-id="d0b63759-a822-4556-a5ce-373ab966e08a">
<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">
<mk-avatar class="avatar" :user="_user"/>
<div class="body">
<router-link class="name" :to="_user | userPage" v-user-preview="_user.id">{{ _user | userName }}</router-link>
<p class="username">@{{ _user | acct }}</p>
</div>
</div>
</template>
<p class="empty" v-else>%i18n:@no-one%</p>
</div>
</mk-widget-container>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
list: {
type: Object,
required: true
}
},
data() {
return {
fetching: true,
users: []
};
},
mounted() {
(this as any).api('users/show', {
userIds: this.list.userIds
}).then(users => {
this.users = users;
this.fetching = false;
});
},
methods: {
add() {
(this as any).apis.input({
title: '%i18n:@username%',
}).then(async (username: string) => {
if (username.startsWith('@')) username = username.slice(1);
const user = await (this as any).api('users/show', {
username
});
(this as any).api('users/lists/push', {
listId: this.list.id,
userId: user.id
});
});
}
}
});
</script>
<style lang="stylus" scoped>
root(isDark)
> .user
padding 16px
border-bottom solid 1px isDark ? #1c2023 : #eee
&:last-child
border-bottom none
&:after
content ""
display block
clear both
> .avatar
display block
float left
margin 0 12px 0 0
width 42px
height 42px
border-radius 8px
> .body
float left
width calc(100% - 54px)
> .name
margin 0
font-size 16px
line-height 24px
color isDark ? #fff : #555
> .username
display block
margin 0
font-size 15px
line-height 16px
color isDark ? #606984 : #ccc
> .empty
margin 0
padding 16px
text-align center
color #aaa
> .fetching
margin 0
padding 16px
text-align center
color #aaa
[data-id="d0b63759-a822-4556-a5ce-373ab966e08a"][data-darkmode]
root(true)
[data-id="d0b63759-a822-4556-a5ce-373ab966e08a"]:not([data-darkmode])
root(false)
</style>

71
src/client/app/desktop/views/pages/user-list.vue
View File

@ -1,71 +0,0 @@
<template>
<mk-ui>
<div v-if="!fetching" data-id="02010e15-cc48-4245-8636-16078a9b623c">
<div>
<div><h1>{{ list.title }}</h1></div>
<x-users :list="list"/>
</div>
<main>
<mk-user-list-timeline :list="list"/>
</main>
</div>
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
import XUsers from './user-list.users.vue';
export default Vue.extend({
components: {
XUsers
},
data() {
return {
fetching: true,
list: null
};
},
watch: {
$route: 'fetch'
},
mounted() {
this.fetch();
},
methods: {
fetch() {
this.fetching = true;
(this as any).api('users/lists/show', {
listId: this.$route.params.list
}).then(list => {
this.list = list;
this.fetching = false;
});
}
}
});
</script>
<style lang="stylus" scoped>
[data-id="02010e15-cc48-4245-8636-16078a9b623c"]
display flex
justify-content center
margin 0 auto
max-width 1200px
> main
> div > div
> *:not(:last-child)
margin-bottom 16px
> main
padding 16px
width calc(100% - 275px * 2)
> div
width 275px
margin 0
padding 16px 0 16px 16px
</style>

6
src/client/theme/dark.json
View File

@ -126,9 +126,13 @@
"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",
"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
"desktopHeaderSearchFg": "#fff",
"desktopNotificationBg": ":alpha<0.9<$secondary",
"desktopNotificationFg": ":alpha<0.7<$text",
"desktopNotificationShadow": "rgba(0, 0, 0, 0.4)",
"desktopPostFormBg": "@face",
"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
"desktopPostFormTextareaFg": "#fff",
"desktopRenoteFormFooter": ":lighten<5<$secondary",
"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
"desktopTimelineSrc": "@faceTextButton",
"desktopTimelineSrcHover": "@faceTextButtonHover",
@ -136,6 +140,8 @@
"desktopSettingsNavItem": ":alpha<0.8<$text",
"desktopSettingsNavItemHover": ":lighten<10<$text",
"deckAcrylicColumnBg": "rgba(0, 0, 0, 0.25)",
"mobileHeaderBg": ":lighten<5<$secondary",
"mobileHeaderFg": "$text",
"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",

8
src/client/theme/light.json
View File

@ -126,9 +126,13 @@
"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
"desktopHeaderSearchHoverBg": "rgba(0, 0, 0, 0.08)",
"desktopHeaderSearchFg": "#000",
"desktopPostFormBg": "#fff6f6",
"desktopNotificationBg": ":alpha<0.9<$secondary",
"desktopNotificationFg": ":alpha<0.7<$text",
"desktopNotificationShadow": "rgba(0, 0, 0, 0.2)",
"desktopPostFormBg": ":lighten<33<$primary",
"desktopPostFormTextareaBg": "#fff",
"desktopPostFormTextareaFg": "#333",
"desktopRenoteFormFooter": ":lighten<33<$primary",
"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
"desktopTimelineSrc": "#6f7477",
"desktopTimelineSrcHover": "#525a5f",
@ -136,6 +140,8 @@
"desktopSettingsNavItem": ":alpha<0.8<$text",
"desktopSettingsNavItemHover": ":darken<10<$text",
"deckAcrylicColumnBg": "rgba(0, 0, 0, 0.1)",
"mobileHeaderBg": ":lighten<5<$secondary",
"mobileHeaderFg": "$text",
"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",