wip
This commit is contained in:
syuilo
parent
c627288bde
commit
13f258308e
16 changed files with 45 additions and 316 deletions
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ root(isDark)
|
|||
|
||||
> .mk-time
|
||||
margin-left auto
|
||||
color isDark ? #606984 : #c0c0c0
|
||||
color var(--noteHeaderInfo)
|
||||
font-size 0.9em
|
||||
|
||||
> .note-preview
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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)",
|
||||
|
|
|
|||
|
|
@ -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)",
|
||||
|
|
|
|||
Loading…
Reference in a new issue