This commit is contained in:
syuilo 2018-04-15 18:38:40 +09:00
parent 10e3411020
commit a9ea405c0c
6 changed files with 53 additions and 9 deletions

View file

@ -403,6 +403,10 @@ desktop/views/pages/user/user.friends.vue:
loading: "Loading" loading: "Loading"
no-users: "No users" no-users: "No users"
desktop/views/pages/user/user.header.vue:
is-remote: "This user is not a user of Misskey, so the information is not accurate."
view-remote: "See accurate information"
desktop/views/pages/user/user.home.vue: desktop/views/pages/user/user.home.vue:
last-used-at: "Last used at" last-used-at: "Last used at"
@ -585,6 +589,8 @@ mobile/views/pages/user.vue:
overview: "Overview" overview: "Overview"
timeline: "Timeline" timeline: "Timeline"
media: "Media" media: "Media"
is-remote: "This user is not a user of Misskey, so the information is not accurate."
view-remote: "See accurate information"
mobile/views/pages/user/home.vue: mobile/views/pages/user/home.vue:
recent-notes: "Recent notes" recent-notes: "Recent notes"

View file

@ -403,6 +403,10 @@ desktop/views/pages/user/user.friends.vue:
loading: "読み込み中" loading: "読み込み中"
no-users: "よく話すユーザーはいません" no-users: "よく話すユーザーはいません"
desktop/views/pages/user/user.header.vue:
is-remote: "このユーザーはMisskeyのユーザーではないため情報が正確ではありません。"
view-remote: "正確な情報を見る"
desktop/views/pages/user/user.home.vue: desktop/views/pages/user/user.home.vue:
last-used-at: "最終アクセス" last-used-at: "最終アクセス"
@ -585,6 +589,8 @@ mobile/views/pages/user.vue:
overview: "概要" overview: "概要"
timeline: "タイムライン" timeline: "タイムライン"
media: "メディア" media: "メディア"
is-remote: "このユーザーはMisskeyのユーザーではないため情報が正確ではありません。"
view-remote: "正確な情報を見る"
mobile/views/pages/user/home.vue: mobile/views/pages/user/home.vue:
recent-notes: "最近の投稿" recent-notes: "最近の投稿"

View file

@ -1,5 +1,6 @@
<template> <template>
<div class="header" :data-is-dark-background="user.bannerUrl != null"> <div class="header" :data-is-dark-background="user.bannerUrl != null">
<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote% <a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
<div class="banner-container" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''"> <div class="banner-container" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''">
<div class="banner" ref="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''" @click="onBannerClick"></div> <div class="banner" ref="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''" @click="onBannerClick"></div>
</div> </div>
@ -26,14 +27,18 @@ import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: ['user'], props: ['user'],
mounted() { mounted() {
if (this.user.bannerUrl) {
window.addEventListener('load', this.onScroll); window.addEventListener('load', this.onScroll);
window.addEventListener('scroll', this.onScroll); window.addEventListener('scroll', this.onScroll);
window.addEventListener('resize', this.onScroll); window.addEventListener('resize', this.onScroll);
}
}, },
beforeDestroy() { beforeDestroy() {
if (this.user.bannerUrl) {
window.removeEventListener('load', this.onScroll); window.removeEventListener('load', this.onScroll);
window.removeEventListener('scroll', this.onScroll); window.removeEventListener('scroll', this.onScroll);
window.removeEventListener('resize', this.onScroll); window.removeEventListener('resize', this.onScroll);
}
}, },
methods: { methods: {
onScroll() { onScroll() {
@ -68,9 +73,21 @@ export default Vue.extend({
$footer-height = 58px $footer-height = 58px
overflow hidden overflow hidden
background #f7f7f7 background #bfccd0
box-shadow 0 1px 1px rgba(0, 0, 0, 0.075) box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
> .is-remote
padding 16px
color #573c08
background #fff0db
> p
margin 0 auto
max-width 1024px
> a
font-weight bold
&[data-is-dark-background] &[data-is-dark-background]
> .banner-container > .banner-container
> .banner > .banner
@ -130,7 +147,7 @@ export default Vue.extend({
left 0 left 0
width 100% width 100%
padding 0 0 8px 195px padding 0 0 8px 195px
color #656565 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

View file

@ -2,6 +2,7 @@
<mk-ui> <mk-ui>
<span slot="header" v-if="!fetching">%fa:user% {{ user | userName }}</span> <span slot="header" v-if="!fetching">%fa:user% {{ user | userName }}</span>
<main v-if="!fetching"> <main v-if="!fetching">
<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote% <a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
<header> <header>
<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=1024)` : ''"></div> <div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=1024)` : ''"></div>
<div class="body"> <div class="body">
@ -109,6 +110,18 @@ export default Vue.extend({
@import '~const.styl' @import '~const.styl'
main main
> .is-remote
padding 16px
color #573c08
background #fff0db
> p
margin 0 auto
max-width 1024px
> a
font-weight bold
> header > header
> .banner > .banner

View file

@ -88,6 +88,7 @@ export interface ILocalUser extends IUserBase {
export interface IRemoteUser extends IUserBase { export interface IRemoteUser extends IUserBase {
inbox: string; inbox: string;
uri: string; uri: string;
url?: string;
publicKey: { publicKey: {
id: string; id: string;
publicKeyPem: string; publicKeyPem: string;

View file

@ -96,7 +96,8 @@ export async function createPerson(value: any, resolver?: Resolver): Promise<IUs
publicKeyPem: person.publicKey.publicKeyPem publicKeyPem: person.publicKey.publicKeyPem
}, },
inbox: person.inbox, inbox: person.inbox,
uri: person.id uri: person.id,
url: person.url
}) as IRemoteUser; }) as IRemoteUser;
//#region アイコンとヘッダー画像をフェッチ //#region アイコンとヘッダー画像をフェッチ