From ee6311e83da0131a93a1bc5379342689cff23a47 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sat, 21 Mar 2020 13:07:02 +0900 Subject: [PATCH] Resolve #6145 --- src/client/components/remote-caution.vue | 29 ++++++++++++++++++++++++ src/client/pages/note.vue | 4 ++++ src/client/pages/user/index.vue | 15 +++--------- 3 files changed, 36 insertions(+), 12 deletions(-) create mode 100644 src/client/components/remote-caution.vue diff --git a/src/client/components/remote-caution.vue b/src/client/components/remote-caution.vue new file mode 100644 index 000000000..b24b9af2d --- /dev/null +++ b/src/client/components/remote-caution.vue @@ -0,0 +1,29 @@ +<template> +<div class="jmgmzlwq _panel"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $t('remoteUserCaution') }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $t('showOnRemote') }}</a></div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import i18n from '../i18n'; +export default Vue.extend({ + i18n, + props: { + href: { + type: String, + required: true + }, + }, +}); +</script> + +<style lang="scss" scoped> +.jmgmzlwq { + font-size: 0.8em; + padding: 16px; + + > a { + margin-left: 4px; + color: var(--accent); + } +} +</style> diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue index 3f270b115..5f57d0d99 100644 --- a/src/client/pages/note.vue +++ b/src/client/pages/note.vue @@ -9,6 +9,8 @@ </portal> <div v-if="note"> + <mk-remote-caution v-if="note.user.host != null" :href="note.url" style="margin-bottom: var(--margin)"/> + <button class="_panel _button" v-if="hasNext && !showNext" @click="showNext = true" style="margin: 0 auto var(--margin) auto;"><fa :icon="faChevronUp"/></button> <x-notes v-if="showNext" ref="next" :pagination="next"/> <hr v-if="showNext"/> @@ -32,6 +34,7 @@ import i18n from '../i18n'; import Progress from '../scripts/loading'; import XNote from '../components/note.vue'; import XNotes from '../components/notes.vue'; +import MkRemoteCaution from '../components/remote-caution.vue'; export default Vue.extend({ i18n, @@ -43,6 +46,7 @@ export default Vue.extend({ components: { XNote, XNotes, + MkRemoteCaution, }, data() { return { diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue index f7a51c1fb..827f7e1c9 100644 --- a/src/client/pages/user/index.vue +++ b/src/client/pages/user/index.vue @@ -3,7 +3,7 @@ <portal to="title" v-if="user"><mk-user-name :user="user" :nowrap="false" class="name"/></portal> <portal to="avatar" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal> - <div class="remote-caution _panel" v-if="user.host != null"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $t('remoteUserCaution') }}<a :href="user.url" rel="nofollow noopener" target="_blank">{{ $t('showOnRemote') }}</a></div> + <mk-remote-caution v-if="user.host != null" :href="user.url" style="margin-bottom: var(--margin)"/> <div class="profile _panel" :key="user.id"> <div class="banner-container" :style="style"> <div class="banner" ref="banner" :style="style"></div> @@ -113,6 +113,7 @@ import XUserMenu from '../../components/user-menu.vue'; import XNote from '../../components/note.vue'; import MkFollowButton from '../../components/follow-button.vue'; import MkContainer from '../../components/ui/container.vue'; +import MkRemoteCaution from '../../components/remote-caution.vue'; import Progress from '../../scripts/loading'; import parseAcct from '../../../misc/acct/parse'; @@ -122,6 +123,7 @@ export default Vue.extend({ XNote, MkFollowButton, MkContainer, + MkRemoteCaution, XPhotos: () => import('./index.photos.vue').then(m => m.default), XActivity: () => import('./index.activity.vue').then(m => m.default), }, @@ -215,17 +217,6 @@ export default Vue.extend({ <style lang="scss" scoped> .mk-user-page { - > .remote-caution { - font-size: 0.8em; - padding: 16px; - margin-bottom: var(--margin); - - > a { - margin-left: 4px; - color: var(--accent); - } - } - > .profile { position: relative; margin-bottom: var(--margin);