diff options
Diffstat (limited to 'src')
7 files changed, 79 insertions, 86 deletions
diff --git a/src/client/app/common/views/components/integrations.integration.vue b/src/client/app/common/views/components/integrations.integration.vue new file mode 100644 index 0000000000..4008054b68 --- /dev/null +++ b/src/client/app/common/views/components/integrations.integration.vue @@ -0,0 +1,44 @@ +<template> +<a class="zxrjzpcj" :href="url" :class="service" target="_blank"> + <fa :icon="icon" size="lg" fixed-width /><span>{{ text }}</span> +</a> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + props: ['url', 'text', 'icon', 'service'] +}); +</script> + +<style lang="stylus" scoped> +.zxrjzpcj + padding 6px 8px 6px 6px + border-radius 32px + + &:hover + text-decoration none + + &.twitter + color #fff + background #1da1f3 + + &:hover + background #0c87cf + + &.github + color #fff + background #171515 + + &:hover + background #000 + + &.discord + color #fff + background #7289da + + &:hover + background #4968ce + +</style> diff --git a/src/client/app/common/views/components/integrations.vue b/src/client/app/common/views/components/integrations.vue new file mode 100644 index 0000000000..7a341a14fd --- /dev/null +++ b/src/client/app/common/views/components/integrations.vue @@ -0,0 +1,26 @@ +<template> +<div class="nbogcrmo" :v-if="user.twitter || user.github || user.discord"> + <x-integration v-if="user.twitter" service="twitter" :url="`https://twitter.com/${user.twitter.screenName}`" :text="user.twitter.screenName" :icon="['fab', 'twitter']"/> + <x-integration v-if="user.github" service="github" :url="`https://github.com/${user.github.login}`" :text="user.github.login" :icon="['fab', 'github']"/> + <x-integration v-if="user.discord" service="discord" :url="`https://discordapp.com/users/${user.discord.id}`" :text="`${user.discord.username}#${user.discord.discriminator}`" :icon="['fab', 'discord']"/> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import XIntegration from './integrations.integration.vue'; + +export default Vue.extend({ + components: { + XIntegration + }, + props: ['user'] +}); +</script> + +<style lang="stylus" scoped> +.nbogcrmo + > * + margin-right 10px + +</style> diff --git a/src/client/app/desktop/views/home/user/user.header.vue b/src/client/app/desktop/views/home/user/user.header.vue index e478506afe..5271c28d0d 100644 --- a/src/client/app/desktop/views/home/user/user.header.vue +++ b/src/client/app/desktop/views/home/user/user.header.vue @@ -23,6 +23,7 @@ <div class="description"> <mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/> <p v-else class="empty">{{ $t('no-description') }}</p> + <x-integrations :user="user" style="margin-top:16px;"/> </div> <div class="fields" v-if="user.fields"> <dl class="field" v-for="(field, i) in user.fields" :key="i"> @@ -52,9 +53,13 @@ import Vue from 'vue'; import i18n from '../../../../i18n'; import * as age from 's-age'; import XUserMenu from '../../../../common/views/components/user-menu.vue'; +import XIntegrations from '../../../../common/views/components/integrations.vue'; export default Vue.extend({ i18n: i18n('desktop/views/pages/user/user.header.vue'), + components: { + XIntegrations + }, props: ['user'], computed: { style(): any { diff --git a/src/client/app/desktop/views/home/user/user.home.vue b/src/client/app/desktop/views/home/user/user.home.vue index b19a02e046..6e69072109 100644 --- a/src/client/app/desktop/views/home/user/user.home.vue +++ b/src/client/app/desktop/views/home/user/user.home.vue @@ -1,6 +1,5 @@ <template> <div class="lnctpgve"> - <x-integrations :user="user" v-if="user.twitter || user.github || user.discord"/> <mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/> <!--<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>--> <div class="activity"> @@ -17,11 +16,8 @@ <script lang="ts"> import Vue from 'vue'; import i18n from '../../../../i18n'; -import parseAcct from '../../../../../../misc/acct/parse'; -import Progress from '../../../../common/scripts/loading'; import XTimeline from './user.timeline.vue'; import XPhotos from './user.photos.vue'; -import XIntegrations from './user.integrations.vue'; import XActivity from '../../../../common/views/components/activity.vue'; export default Vue.extend({ @@ -29,7 +25,6 @@ export default Vue.extend({ components: { XTimeline, XPhotos, - XIntegrations, XActivity }, props: { diff --git a/src/client/app/desktop/views/home/user/user.integrations.integration.vue b/src/client/app/desktop/views/home/user/user.integrations.integration.vue deleted file mode 100644 index 4791226881..0000000000 --- a/src/client/app/desktop/views/home/user/user.integrations.integration.vue +++ /dev/null @@ -1,14 +0,0 @@ -<template> -<a :href="url" :class="service" target="_blank"> - <fa :icon="icon" size="lg" fixed-width /> - <div>{{ text }}</div> -</a> -</template> - -<script lang="ts"> -import Vue from 'vue'; - -export default Vue.extend({ - props: ['url', 'text', 'icon', 'service'] -}); -</script> diff --git a/src/client/app/desktop/views/home/user/user.integrations.vue b/src/client/app/desktop/views/home/user/user.integrations.vue deleted file mode 100644 index a2be48b3b8..0000000000 --- a/src/client/app/desktop/views/home/user/user.integrations.vue +++ /dev/null @@ -1,66 +0,0 @@ -<template> -<div class="usertwitxxxgithxxdiscxxxintegrat" :v-if="user.twitter || user.github || user.discord"> - <x-integration v-if="user.twitter" service="twitter" :url="`https://twitter.com/${user.twitter.screenName}`" :text="user.twitter.screenName" :icon="['fab', 'twitter']"/> - <x-integration v-if="user.github" service="github" :url="`https://github.com/${user.github.login}`" :text="user.github.login" :icon="['fab', 'github']"/> - <x-integration v-if="user.discord" service="discord" :url="`https://discordapp.com/users/${user.discord.id}`" :text="`${user.discord.username}#${user.discord.discriminator}`" :icon="['fab', 'discord']"/> -</div> -</template> - -<script lang="ts"> -import Vue from 'vue'; -import XIntegration from './user.integrations.integration.vue'; - -export default Vue.extend({ - components: { - XIntegration - }, - props: ['user'] -}); -</script> - -<style lang="stylus" scoped> -.usertwitxxxgithxxdiscxxxintegrat - display flex - - > a - display flex - flex 1 - align-items center - padding 16px - box-shadow var(--shadow) - border-radius var(--round) - - &:not(:last-child) - margin-right 16px - - &:hover - text-decoration none - - > div - padding-left .2em - line-height 1.3em - flex 1 0 - word-wrap anywhere - - &.twitter - color #fff - background #1da1f3 - - &:hover - background #0c87cf - - &.github - color #fff - background #171515 - - &:hover - background #000 - - &.discord - color #fff - background #7289da - - &:hover - background #4968ce - -</style> diff --git a/src/client/app/mobile/views/pages/user/index.vue b/src/client/app/mobile/views/pages/user/index.vue index 57d9d2d812..c2c38f9886 100644 --- a/src/client/app/mobile/views/pages/user/index.vue +++ b/src/client/app/mobile/views/pages/user/index.vue @@ -23,6 +23,7 @@ </div> <div class="description"> <mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/> + <x-integrations :user="user" style="margin:16px 0;"/> </div> <div class="fields" v-if="user.fields"> <dl class="field" v-for="(field, i) in user.fields" :key="i"> @@ -86,11 +87,13 @@ import Progress from '../../../../common/scripts/loading'; import XUserMenu from '../../../../common/views/components/user-menu.vue'; import XHome from './home.vue'; import { getStaticImageUrl } from '../../../../common/scripts/get-static-image-url'; +import XIntegrations from '../../../../common/views/components/integrations.vue'; export default Vue.extend({ i18n: i18n('mobile/views/pages/user.vue'), components: { - XHome + XHome, + XIntegrations }, data() { return { |