yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

nanka iroiro

Browse source
This commit is contained in:
syuilo 2018-06-20 19:55:34 +09:00
parent 2e22bd2ecf
commit 2458255e22
16 changed files with 130 additions and 200 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/client/app/common/views/components/index.ts
View file

@ -9,7 +9,7 @@ import forkit from './forkit.vue';
import acct from './acct.vue'; import acct from './acct.vue';
import avatar from './avatar.vue'; import avatar from './avatar.vue';
import nav from './nav.vue'; import nav from './nav.vue';
import noteHtml from './note-html'; import misskeyFlavoredMarkdown from './misskey-flavored-markdown';
import poll from './poll.vue'; import poll from './poll.vue';
import pollEditor from './poll-editor.vue'; import pollEditor from './poll-editor.vue';
import reactionIcon from './reaction-icon.vue'; import reactionIcon from './reaction-icon.vue';
@ -47,7 +47,7 @@ Vue.component('mk-forkit', forkit);
Vue.component('mk-acct', acct); Vue.component('mk-acct', acct);
Vue.component('mk-avatar', avatar); Vue.component('mk-avatar', avatar);
Vue.component('mk-nav', nav); Vue.component('mk-nav', nav);
Vue.component('mk-note-html', noteHtml); Vue.component('misskey-flavored-markdown', misskeyFlavoredMarkdown);
Vue.component('mk-poll', poll); Vue.component('mk-poll', poll);
Vue.component('mk-poll-editor', pollEditor); Vue.component('mk-poll-editor', pollEditor);
Vue.component('mk-reaction-icon', reactionIcon); Vue.component('mk-reaction-icon', reactionIcon);

2
src/client/app/common/views/components/messaging-room.message.vue
View file

@ -8,7 +8,7 @@
<img src="/assets/desktop/messaging/delete.png" alt="Delete"/> <img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
</button> </button>
<div class="content" v-if="!message.isDeleted"> <div class="content" v-if="!message.isDeleted">
<mk-note-html class="text" v-if="message.text" ref="text" :text="message.text" :i="$store.state.i"/> <misskey-flavored-markdown class="text" v-if="message.text" ref="text" :text="message.text" :i="$store.state.i"/>
<div class="file" v-if="message.file"> <div class="file" v-if="message.file">
<a :href="message.file.url" target="_blank" :title="message.file.name"> <a :href="message.file.url" target="_blank" :title="message.file.name">
<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/> <img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>

2
src/client/app/common/views/components/note-html.ts → src/client/app/common/views/components/misskey-flavored-markdown.ts
View file

@ -10,7 +10,7 @@ const flatten = list => list.reduce(
(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), [] (a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
); );
export default Vue.component('mk-note-html', { export default Vue.component('misskey-flavored-markdown', {
props: { props: {
text: { text: {
type: String, type: String,

2
src/client/app/common/views/components/welcome-timeline.vue
View file

@ -13,7 +13,7 @@
</div> </div>
</header> </header>
<div class="text"> <div class="text">
<mk-note-html v-if="note.text" :text="note.text"/> <misskey-flavored-markdown v-if="note.text" :text="note.text"/>
</div> </div>
</div> </div>
</div> </div>

2
src/client/app/desktop/views/components/note-detail.vue
View file

@ -40,7 +40,7 @@
<div class="text"> <div class="text">
<span v-if="p.isHidden" style="opacity: 0.5">%i18n:@private%</span> <span v-if="p.isHidden" style="opacity: 0.5">%i18n:@private%</span>
<span v-if="p.deletedAt" style="opacity: 0.5">%i18n:@deleted%</span> <span v-if="p.deletedAt" style="opacity: 0.5">%i18n:@deleted%</span>
<mk-note-html v-if="p.text" :text="p.text" :i="$store.state.i"/> <misskey-flavored-markdown v-if="p.text" :text="p.text" :i="$store.state.i"/>
</div> </div>
<div class="media" v-if="p.media.length > 0"> <div class="media" v-if="p.media.length > 0">
<mk-media-list :media-list="p.media" :raw="true"/> <mk-media-list :media-list="p.media" :raw="true"/>

2
src/client/app/desktop/views/components/notes.note.vue
View file

@ -25,7 +25,7 @@
<span v-if="p.isHidden" style="opacity: 0.5">%i18n:@private%</span> <span v-if="p.isHidden" style="opacity: 0.5">%i18n:@private%</span>
<span v-if="p.deletedAt" style="opacity: 0.5">%i18n:@deleted%</span> <span v-if="p.deletedAt" style="opacity: 0.5">%i18n:@deleted%</span>
<a class="reply" v-if="p.reply">%fa:reply%</a> <a class="reply" v-if="p.reply">%fa:reply%</a>
<mk-note-html v-if="p.text && !canHideText(p)" :text="p.text" :i="$store.state.i" :class="$style.text"/> <misskey-flavored-markdown v-if="p.text && !canHideText(p)" :text="p.text" :i="$store.state.i" :class="$style.text"/>
<a class="rp" v-if="p.renote">RP:</a> <a class="rp" v-if="p.renote">RP:</a>
</div> </div>
<div class="media" v-if="p.media.length > 0"> <div class="media" v-if="p.media.length > 0">

2
src/client/app/desktop/views/components/sub-note-content.vue
View file

@ -4,7 +4,7 @@
<span v-if="note.isHidden" style="opacity: 0.5">%i18n:@private%</span> <span v-if="note.isHidden" style="opacity: 0.5">%i18n:@private%</span>
<span v-if="note.deletedAt" style="opacity: 0.5">%i18n:@deleted%</span> <span v-if="note.deletedAt" style="opacity: 0.5">%i18n:@deleted%</span>
<a class="reply" v-if="note.replyId">%fa:reply%</a> <a class="reply" v-if="note.replyId">%fa:reply%</a>
<mk-note-html v-if="note.text" :text="note.text" :i="$store.state.i"/> <misskey-flavored-markdown v-if="note.text" :text="note.text" :i="$store.state.i"/>
<a class="rp" v-if="note.renoteId" :href="`/notes/${note.renoteId}`">RP: ...</a> <a class="rp" v-if="note.renoteId" :href="`/notes/${note.renoteId}`">RP: ...</a>
</div> </div>
<details v-if="note.media.length > 0"> <details v-if="note.media.length > 0">

2
src/client/app/desktop/views/pages/deck/deck.note.vue
View file

@ -25,7 +25,7 @@
<span v-if="p.isHidden" style="opacity: 0.5">(%i18n:@private%)</span> <span v-if="p.isHidden" style="opacity: 0.5">(%i18n:@private%)</span>
<span v-if="p.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span> <span v-if="p.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span>
<a class="reply" v-if="p.reply">%fa:reply%</a> <a class="reply" v-if="p.reply">%fa:reply%</a>
<mk-note-html v-if="p.text && !canHideText(p)" :text="p.text" :i="$store.state.i"/> <misskey-flavored-markdown v-if="p.text && !canHideText(p)" :text="p.text" :i="$store.state.i"/>
<a class="rp" v-if="p.renote != null">RP:</a> <a class="rp" v-if="p.renote != null">RP:</a>
</div> </div>
<div class="media" v-if="p.media.length > 0"> <div class="media" v-if="p.media.length > 0">

95
src/client/app/desktop/views/pages/user/user.header.vue
View file

@ -5,17 +5,15 @@
<div class="banner-container" :style="style"> <div class="banner-container" :style="style">
<div class="banner" ref="banner" :style="style" @click="onBannerClick"></div> <div class="banner" ref="banner" :style="style" @click="onBannerClick"></div>
<div class="fade"></div> <div class="fade"></div>
</div>
<div class="container">
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
<div class="title"> <div class="title">
<p class="name">{{ user | userName }}</p> <p class="name">{{ user | userName }}</p>
<p class="username"><mk-acct :user="user"/></p> <p class="username"><mk-acct :user="user"/></p>
<p class="location" v-if="user.host === null && user.profile.location">%fa:map-marker%{{ user.profile.location }}</p> <p class="location" v-if="user.host === null && user.profile.location">%fa:map-marker%{{ user.profile.location }}</p>
</div> </div>
<footer> </div>
<router-link :to="user | userPage" :data-active="$parent.page == 'home'">%fa:home%ホーム</router-link> <mk-avatar class="avatar" :user="user" :disable-preview="true"/>
</footer> <div class="body">
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
</div> </div>
</div> </div>
</template> </template>
@ -76,12 +74,11 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.header root(isDark)
$footer-height = 58px background isDark ? #282C37 : #fff
border 1px solid rgba(#000, 0.075)
border-radius 6px
overflow hidden overflow hidden
background #f7f7f7
box-shadow 0 1px 1px rgba(#000, 0.075)
> .is-suspended > .is-suspended
> .is-remote > .is-remote
@ -110,7 +107,6 @@ export default Vue.extend({
> .fade > .fade
background linear-gradient(transparent, rgba(#000, 0.7)) background linear-gradient(transparent, rgba(#000, 0.7))
> .container
> .title > .title
color #fff color #fff
@ -118,7 +114,7 @@ export default Vue.extend({
text-shadow 0 0 8px #000 text-shadow 0 0 8px #000
> .banner-container > .banner-container
height 320px height 250px
overflow hidden overflow hidden
background-size cover background-size cover
background-position center background-position center
@ -136,37 +132,21 @@ export default Vue.extend({
width 100% width 100%
height 78px height 78px
> .container
max-width 1200px
margin 0 auto
> .avatar
display block
position absolute
bottom 16px
left 16px
z-index 2
width 160px
height 160px
border solid 3px #fff
border-radius 8px
box-shadow 1px 1px 3px rgba(#000, 0.2)
> .title > .title
position absolute position absolute
bottom $footer-height bottom 0
left 0 left 0
width 100% width 100%
padding 0 0 8px 195px padding 0 0 8px 154px
color #5e6367 color #5e6367
font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif
> .name > .name
display block display block
margin 0 margin 0
line-height 40px line-height 32px
font-weight bold font-weight bold
font-size 2em font-size 1.8em
> .username > .username
> .location > .location
@ -178,41 +158,24 @@ export default Vue.extend({
> i > i
margin-right 4px margin-right 4px
> footer > .avatar
z-index 1 display block
height $footer-height position absolute
padding-left 195px top 170px
left 16px
z-index 2
width 120px
height 120px
box-shadow 1px 1px 3px rgba(#000, 0.2)
> a > .body
display inline-block padding 16px 16px 16px 154px
margin 0 color isDark ? #c5ced6 : #555
padding 0 16px
height $footer-height
line-height $footer-height
color #555
&[data-active] .header[data-darkmode]
border-bottom solid 4px $theme-color root(true)
> i .header:not([data-darkmode])
margin-right 6px root(false)
> button
display block
position absolute
top 0
right 0
margin 8px
padding 0
width $footer-height - 16px
line-height $footer-height - 16px - 2px
font-size 1.2em
color #777
border solid 1px #eee
border-radius 4px
&:hover
color #555
border solid 1px #ddd
</style> </style>

103
src/client/app/desktop/views/pages/user/user.home.vue
View file

@ -1,103 +0,0 @@
<template>
<div class="home">
<div>
<div ref="left">
<x-profile :user="user"/>
<x-photos :user="user"/>
<x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
<p v-if="user.host === null">%i18n:@last-used-at%: <b><mk-time :time="user.lastUsedAt"/></b></p>
</div>
</div>
<main>
<mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/>
<x-timeline class="timeline" ref="tl" :user="user"/>
</main>
<div>
<div ref="right">
<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
<mk-activity :user="user"/>
<x-friends :user="user"/>
<div class="nav"><mk-nav/></div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import XTimeline from './user.timeline.vue';
import XProfile from './user.profile.vue';
import XPhotos from './user.photos.vue';
import XFollowersYouKnow from './user.followers-you-know.vue';
import XFriends from './user.friends.vue';
export default Vue.extend({
components: {
XTimeline,
XProfile,
XPhotos,
XFollowersYouKnow,
XFriends
},
props: ['user'],
methods: {
warp(date) {
(this.$refs.tl as any).warp(date);
}
}
});
</script>
<style lang="stylus" scoped>
.home
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)
> .timeline
border solid 1px rgba(#000, 0.075)
border-radius 6px
> div
width 275px
margin 0
&:first-child > div
padding 16px 0 16px 16px
> p
display block
margin 0
padding 0 12px
text-align center
font-size 0.8em
color #aaa
&:last-child > div
padding 16px 16px 16px 0
> .nav
padding 16px
font-size 12px
color #aaa
background #fff
border solid 1px rgba(#000, 0.075)
border-radius 6px
a
color #999
i
color #ccc
</style>

16
src/client/app/desktop/views/pages/user/user.profile.vue
View file

@ -15,7 +15,6 @@
</button> </button>
<button class="mute ui" @click="list">%fa:list% リストに追加</button> <button class="mute ui" @click="list">%fa:list% リストに追加</button>
</div> </div>
<div class="description" v-if="user.description">{{ user.description }}</div>
<div class="birthday" v-if="user.host === null && user.profile.birthday"> <div class="birthday" v-if="user.host === null && user.profile.birthday">
<p>%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)</p> <p>%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)</p>
</div> </div>
@ -116,8 +115,8 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.profile root(isDark)
background #fff background isDark ? #282C37 : #fff
border solid 1px rgba(#000, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
@ -153,11 +152,6 @@ export default Vue.extend({
&:not(:last-child) &:not(:last-child)
margin-bottom 12px margin-bottom 12px
> .description
padding 16px
color #555
border-top solid 1px #eee
> .birthday > .birthday
padding 16px padding 16px
color #555 color #555
@ -192,4 +186,10 @@ export default Vue.extend({
margin-left 8px margin-left 8px
margin-right 8px margin-right 8px
.profile[data-darkmode]
root(true)
.profile:not([data-darkmode])
root(false)
</style> </style>

88
src/client/app/desktop/views/pages/user/user.vue
View file

@ -1,8 +1,21 @@
<template> <template>
<mk-ui> <mk-ui>
<div class="user" v-if="!fetching"> <div class="zwwan0di1v4356rmdbjmwnn32tptpdp2" v-if="!fetching">
<x-header :user="user"/> <div class="main">
<x-home v-if="page == 'home'" :user="user"/> <x-header :user="user"/>
<mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/>
<x-timeline class="timeline" ref="tl" :user="user"/>
</div>
<div class="side">
<x-profile :user="user"/>
<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
<mk-activity :user="user"/>
<x-photos :user="user"/>
<x-friends :user="user"/>
<x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
<div class="nav"><mk-nav/></div>
<p v-if="user.host === null">%i18n:@last-used-at%: <b><mk-time :time="user.lastUsedAt"/></b></p>
</div>
</div> </div>
</mk-ui> </mk-ui>
</template> </template>
@ -13,17 +26,20 @@ import parseAcct from '../../../../../../acct/parse';
import getUserName from '../../../../../../renderers/get-user-name'; import getUserName from '../../../../../../renderers/get-user-name';
import Progress from '../../../../common/scripts/loading'; import Progress from '../../../../common/scripts/loading';
import XHeader from './user.header.vue'; import XHeader from './user.header.vue';
import XHome from './user.home.vue'; import XTimeline from './user.timeline.vue';
import XProfile from './user.profile.vue';
import XPhotos from './user.photos.vue';
import XFollowersYouKnow from './user.followers-you-know.vue';
import XFriends from './user.friends.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {
XHeader, XHeader,
XHome XTimeline,
}, XProfile,
props: { XPhotos,
page: { XFollowersYouKnow,
default: 'home' XFriends
}
}, },
data() { data() {
return { return {
@ -47,8 +63,60 @@ export default Vue.extend({
Progress.done(); Progress.done();
document.title = getUserName(this.user) + ' | Misskey'; document.title = getUserName(this.user) + ' | Misskey';
}); });
},
warp(date) {
(this.$refs.tl as any).warp(date);
} }
} }
}); });
</script> </script>
<style lang="stylus" scoped>
.zwwan0di1v4356rmdbjmwnn32tptpdp2
display flex
justify-content center
width 980px
padding 16px
margin 0 auto
> .main
> .side
> *:not(:last-child)
margin-bottom 16px
> .main
flex 1
margin-right 16px
> .timeline
border 1px solid rgba(#000, 0.075)
border-radius 6px
> .side
width 275px
> p
display block
margin 0
padding 0 12px
text-align center
font-size 0.8em
color #aaa
> .nav
padding 16px
font-size 12px
color #aaa
background #fff
border solid 1px rgba(#000, 0.075)
border-radius 6px
a
color #999
i
color #ccc
</style>

2
src/client/app/mobile/views/components/note-detail.vue
View file

@ -38,7 +38,7 @@
<div class="text"> <div class="text">
<span v-if="p.isHidden" style="opacity: 0.5">(%i18n:@private%)</span> <span v-if="p.isHidden" style="opacity: 0.5">(%i18n:@private%)</span>
<span v-if="p.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span> <span v-if="p.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span>
<mk-note-html v-if="p.text" :text="p.text" :i="$store.state.i"/> <misskey-flavored-markdown v-if="p.text" :text="p.text" :i="$store.state.i"/>
</div> </div>
<div class="tags" v-if="p.tags && p.tags.length > 0"> <div class="tags" v-if="p.tags && p.tags.length > 0">
<router-link v-for="tag in p.tags" :key="tag" :to="`/tags/${tag}`">{{ tag }}</router-link> <router-link v-for="tag in p.tags" :key="tag" :to="`/tags/${tag}`">{{ tag }}</router-link>

2
src/client/app/mobile/views/components/note.vue
View file

@ -25,7 +25,7 @@
<span v-if="p.isHidden" style="opacity: 0.5">(%i18n:@private%)</span> <span v-if="p.isHidden" style="opacity: 0.5">(%i18n:@private%)</span>
<span v-if="p.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span> <span v-if="p.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span>
<a class="reply" v-if="p.reply">%fa:reply%</a> <a class="reply" v-if="p.reply">%fa:reply%</a>
<mk-note-html v-if="p.text && !canHideText(p)" :text="p.text" :i="$store.state.i" :class="$style.text"/> <misskey-flavored-markdown v-if="p.text && !canHideText(p)" :text="p.text" :i="$store.state.i" :class="$style.text"/>
<a class="rp" v-if="p.renote != null">RP:</a> <a class="rp" v-if="p.renote != null">RP:</a>
</div> </div>
<div class="media" v-if="p.media.length > 0"> <div class="media" v-if="p.media.length > 0">

2
src/client/app/mobile/views/components/sub-note-content.vue
View file

@ -4,7 +4,7 @@
<span v-if="note.isHidden" style="opacity: 0.5">(%i18n:@private%)</span> <span v-if="note.isHidden" style="opacity: 0.5">(%i18n:@private%)</span>
<span v-if="note.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span> <span v-if="note.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span>
<a class="reply" v-if="note.replyId">%fa:reply%</a> <a class="reply" v-if="note.replyId">%fa:reply%</a>
<mk-note-html v-if="note.text" :text="note.text" :i="$store.state.i"/> <misskey-flavored-markdown v-if="note.text" :text="note.text" :i="$store.state.i"/>
<a class="rp" v-if="note.renoteId">RP: ...</a> <a class="rp" v-if="note.renoteId">RP: ...</a>
</div> </div>
<details v-if="note.media.length > 0"> <details v-if="note.media.length > 0">

4
src/client/app/mobile/views/pages/user.vue
View file

@ -18,7 +18,9 @@
<span class="username"><mk-acct :user="user"/></span> <span class="username"><mk-acct :user="user"/></span>
<span class="followed" v-if="user.isFollowed">%i18n:@follows-you%</span> <span class="followed" v-if="user.isFollowed">%i18n:@follows-you%</span>
</div> </div>
<div class="description">{{ user.description }}</div> <div class="description">
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
</div>
<div class="info"> <div class="info">
<p class="location" v-if="user.host === null && user.profile.location"> <p class="location" v-if="user.host === null && user.profile.location">
%fa:map-marker%{{ user.profile.location }} %fa:map-marker%{{ user.profile.location }}