diff options
Diffstat (limited to 'src/client/components/mention.vue')
| -rw-r--r-- | src/client/components/mention.vue | 86 |
1 files changed, 0 insertions, 86 deletions
diff --git a/src/client/components/mention.vue b/src/client/components/mention.vue deleted file mode 100644 index da13dcdddd..0000000000 --- a/src/client/components/mention.vue +++ /dev/null @@ -1,86 +0,0 @@ -<template> -<MkA v-if="url.startsWith('/')" class="ldlomzub" :class="{ isMe }" :to="url" v-user-preview="canonical" :style="{ background: bg }"> - <img class="icon" :src="`/avatar/@${username}@${host}`" alt=""> - <span class="main"> - <span class="username">@{{ username }}</span> - <span class="host" v-if="(host != localHost) || $store.state.showFullAcct">@{{ toUnicode(host) }}</span> - </span> -</MkA> -<a v-else class="ldlomzub" :href="url" target="_blank" rel="noopener" :style="{ background: bg }"> - <span class="main"> - <span class="username">@{{ username }}</span> - <span class="host">@{{ toUnicode(host) }}</span> - </span> -</a> -</template> - -<script lang="ts"> -import { defineComponent } from 'vue'; -import * as tinycolor from 'tinycolor2'; -import { toUnicode } from 'punycode'; -import { host as localHost } from '@client/config'; -import { wellKnownServices } from '../../well-known-services'; -import { $i } from '@client/account'; - -export default defineComponent({ - props: { - username: { - type: String, - required: true - }, - host: { - type: String, - required: true - } - }, - - setup(props) { - const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`; - - const wellKnown = wellKnownServices.find(x => x[0] === props.host); - const url = wellKnown ? wellKnown[1](props.username) : `/${canonical}`; - - const isMe = $i && ( - `@${props.username}@${toUnicode(props.host)}` === `@${$i.username}@${toUnicode(localHost)}`.toLowerCase() - ); - - const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue(isMe ? '--mentionMe' : '--mention')); - bg.setAlpha(0.20); - - return { - localHost, - isMe, - url, - canonical, - toUnicode, - bg: bg.toRgbString(), - }; - }, -}); -</script> - -<style lang="scss" scoped> -.ldlomzub { - display: inline-block; - padding: 4px 8px 4px 4px; - border-radius: 999px; - color: var(--mention); - - &.isMe { - color: var(--mentionMe); - } - - > .icon { - width: 1.5em; - margin: 0 0.2em 0 0; - vertical-align: bottom; - border-radius: 100%; - } - - > .main { - > .host { - opacity: 0.5; - } - } -} -</style> |