diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 5b2fa084fb..e2cba2e53b 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -9,7 +9,7 @@ import forkit from './forkit.vue'; import acct from './acct.vue'; import avatar from './avatar.vue'; import nav from './nav.vue'; -import noteHtml from './note-html'; +import misskeyFlavoredMarkdown from './misskey-flavored-markdown'; import poll from './poll.vue'; import pollEditor from './poll-editor.vue'; import reactionIcon from './reaction-icon.vue'; @@ -47,7 +47,7 @@ Vue.component('mk-forkit', forkit); Vue.component('mk-acct', acct); Vue.component('mk-avatar', avatar); 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-editor', pollEditor); Vue.component('mk-reaction-icon', reactionIcon); diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue index a77b5f3658..d7e7c6dcb5 100644 --- a/src/client/app/common/views/components/messaging-room.message.vue +++ b/src/client/app/common/views/components/messaging-room.message.vue @@ -8,7 +8,7 @@ <img src="/assets/desktop/messaging/delete.png" alt="Delete"/> </button> <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"> <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"/> diff --git a/src/client/app/common/views/components/note-html.ts b/src/client/app/common/views/components/misskey-flavored-markdown.ts similarity index 98% rename from src/client/app/common/views/components/note-html.ts rename to src/client/app/common/views/components/misskey-flavored-markdown.ts index 8fa5f380dd..61dbc02d9a 100644 --- a/src/client/app/common/views/components/note-html.ts +++ b/src/client/app/common/views/components/misskey-flavored-markdown.ts @@ -10,7 +10,7 @@ const flatten = list => list.reduce( (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: { text: { type: String, diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue index f3372bf062..bf2c653766 100644 --- a/src/client/app/common/views/components/welcome-timeline.vue +++ b/src/client/app/common/views/components/welcome-timeline.vue @@ -13,7 +13,7 @@ </div> </header> <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> diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue index 4b5e5bebdf..017f599e31 100644 --- a/src/client/app/desktop/views/components/note-detail.vue +++ b/src/client/app/desktop/views/components/note-detail.vue @@ -40,7 +40,7 @@ <div class="text"> <span v-if="p.isHidden" style="opacity: 0.5">%i18n:@private%</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 class="media" v-if="p.media.length > 0"> <mk-media-list :media-list="p.media" :raw="true"/> diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue index ee11fcc55f..661223ee25 100644 --- a/src/client/app/desktop/views/components/notes.note.vue +++ b/src/client/app/desktop/views/components/notes.note.vue @@ -25,7 +25,7 @@ <span v-if="p.isHidden" style="opacity: 0.5">%i18n:@private%</span> <span v-if="p.deletedAt" style="opacity: 0.5">%i18n:@deleted%</span> <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> </div> <div class="media" v-if="p.media.length > 0"> diff --git a/src/client/app/desktop/views/components/sub-note-content.vue b/src/client/app/desktop/views/components/sub-note-content.vue index 45ce6a6f8f..cb0374b910 100644 --- a/src/client/app/desktop/views/components/sub-note-content.vue +++ b/src/client/app/desktop/views/components/sub-note-content.vue @@ -4,7 +4,7 @@ <span v-if="note.isHidden" style="opacity: 0.5">%i18n:@private%</span> <span v-if="note.deletedAt" style="opacity: 0.5">%i18n:@deleted%</span> <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> </div> <details v-if="note.media.length > 0"> diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue index 5a8dc2ea65..067297af37 100644 --- a/src/client/app/desktop/views/pages/deck/deck.note.vue +++ b/src/client/app/desktop/views/pages/deck/deck.note.vue @@ -25,7 +25,7 @@ <span v-if="p.isHidden" style="opacity: 0.5">(%i18n:@private%)</span> <span v-if="p.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span> <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> </div> <div class="media" v-if="p.media.length > 0"> diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue index d52c6b762c..d0976a32e1 100644 --- a/src/client/app/desktop/views/pages/user/user.header.vue +++ b/src/client/app/desktop/views/pages/user/user.header.vue @@ -5,17 +5,15 @@ <div class="banner-container" :style="style"> <div class="banner" ref="banner" :style="style" @click="onBannerClick"></div> <div class="fade"></div> - </div> - <div class="container"> - <mk-avatar class="avatar" :user="user" :disable-preview="true"/> <div class="title"> <p class="name">{{ user | userName }}</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> </div> - <footer> - <router-link :to="user | userPage" :data-active="$parent.page == 'home'">%fa:home%ホーム</router-link> - </footer> + </div> + <mk-avatar class="avatar" :user="user" :disable-preview="true"/> + <div class="body"> + <misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/> </div> </div> </template> @@ -76,12 +74,11 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.header - $footer-height = 58px - +root(isDark) + background isDark ? #282C37 : #fff + border 1px solid rgba(#000, 0.075) + border-radius 6px overflow hidden - background #f7f7f7 - box-shadow 0 1px 1px rgba(#000, 0.075) > .is-suspended > .is-remote @@ -110,7 +107,6 @@ export default Vue.extend({ > .fade background linear-gradient(transparent, rgba(#000, 0.7)) - > .container > .title color #fff @@ -118,7 +114,7 @@ export default Vue.extend({ text-shadow 0 0 8px #000 > .banner-container - height 320px + height 250px overflow hidden background-size cover background-position center @@ -136,37 +132,21 @@ export default Vue.extend({ width 100% 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 position absolute - bottom $footer-height + bottom 0 left 0 width 100% - padding 0 0 8px 195px + padding 0 0 8px 154px color #5e6367 font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif > .name display block margin 0 - line-height 40px + line-height 32px font-weight bold - font-size 2em + font-size 1.8em > .username > .location @@ -178,41 +158,24 @@ export default Vue.extend({ > i margin-right 4px - > footer - z-index 1 - height $footer-height - padding-left 195px + > .avatar + display block + position absolute + top 170px + left 16px + z-index 2 + width 120px + height 120px + box-shadow 1px 1px 3px rgba(#000, 0.2) - > a - display inline-block - margin 0 - padding 0 16px - height $footer-height - line-height $footer-height - color #555 + > .body + padding 16px 16px 16px 154px + color isDark ? #c5ced6 : #555 - &[data-active] - border-bottom solid 4px $theme-color +.header[data-darkmode] + root(true) - > i - margin-right 6px - - > 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 +.header:not([data-darkmode]) + root(false) </style> diff --git a/src/client/app/desktop/views/pages/user/user.home.vue b/src/client/app/desktop/views/pages/user/user.home.vue deleted file mode 100644 index afaf97dc9e..0000000000 --- a/src/client/app/desktop/views/pages/user/user.home.vue +++ /dev/null @@ -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> diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue index 5aa08f7c85..8afa7122b3 100644 --- a/src/client/app/desktop/views/pages/user/user.profile.vue +++ b/src/client/app/desktop/views/pages/user/user.profile.vue @@ -15,7 +15,6 @@ </button> <button class="mute ui" @click="list">%fa:list% リストに追加</button> </div> - <div class="description" v-if="user.description">{{ user.description }}</div> <div class="birthday" v-if="user.host === null && user.profile.birthday"> <p>%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)</p> </div> @@ -116,8 +115,8 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -.profile - background #fff +root(isDark) + background isDark ? #282C37 : #fff border solid 1px rgba(#000, 0.075) border-radius 6px @@ -153,11 +152,6 @@ export default Vue.extend({ &:not(:last-child) margin-bottom 12px - > .description - padding 16px - color #555 - border-top solid 1px #eee - > .birthday padding 16px color #555 @@ -192,4 +186,10 @@ export default Vue.extend({ margin-left 8px margin-right 8px +.profile[data-darkmode] + root(true) + +.profile:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue index 3644286fbc..3741629b72 100644 --- a/src/client/app/desktop/views/pages/user/user.vue +++ b/src/client/app/desktop/views/pages/user/user.vue @@ -1,8 +1,21 @@ <template> <mk-ui> - <div class="user" v-if="!fetching"> - <x-header :user="user"/> - <x-home v-if="page == 'home'" :user="user"/> + <div class="zwwan0di1v4356rmdbjmwnn32tptpdp2" v-if="!fetching"> + <div class="main"> + <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> </mk-ui> </template> @@ -13,17 +26,20 @@ import parseAcct from '../../../../../../acct/parse'; import getUserName from '../../../../../../renderers/get-user-name'; import Progress from '../../../../common/scripts/loading'; 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({ components: { XHeader, - XHome - }, - props: { - page: { - default: 'home' - } + XTimeline, + XProfile, + XPhotos, + XFollowersYouKnow, + XFriends }, data() { return { @@ -47,8 +63,60 @@ export default Vue.extend({ Progress.done(); document.title = getUserName(this.user) + ' | Misskey'; }); + }, + + warp(date) { + (this.$refs.tl as any).warp(date); } } }); </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> diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue index f3e77d7062..6499f78f1b 100644 --- a/src/client/app/mobile/views/components/note-detail.vue +++ b/src/client/app/mobile/views/components/note-detail.vue @@ -38,7 +38,7 @@ <div class="text"> <span v-if="p.isHidden" style="opacity: 0.5">(%i18n:@private%)</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 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> diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue index 4498bb5633..77513a6591 100644 --- a/src/client/app/mobile/views/components/note.vue +++ b/src/client/app/mobile/views/components/note.vue @@ -25,7 +25,7 @@ <span v-if="p.isHidden" style="opacity: 0.5">(%i18n:@private%)</span> <span v-if="p.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span> <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> </div> <div class="media" v-if="p.media.length > 0"> diff --git a/src/client/app/mobile/views/components/sub-note-content.vue b/src/client/app/mobile/views/components/sub-note-content.vue index 4ad90b97df..a4ce49786e 100644 --- a/src/client/app/mobile/views/components/sub-note-content.vue +++ b/src/client/app/mobile/views/components/sub-note-content.vue @@ -4,7 +4,7 @@ <span v-if="note.isHidden" style="opacity: 0.5">(%i18n:@private%)</span> <span v-if="note.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span> <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> </div> <details v-if="note.media.length > 0"> diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue index 3d37015906..ba9de9f8a6 100644 --- a/src/client/app/mobile/views/pages/user.vue +++ b/src/client/app/mobile/views/pages/user.vue @@ -18,7 +18,9 @@ <span class="username"><mk-acct :user="user"/></span> <span class="followed" v-if="user.isFollowed">%i18n:@follows-you%</span> </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"> <p class="location" v-if="user.host === null && user.profile.location"> %fa:map-marker%{{ user.profile.location }}