summaryrefslogtreecommitdiff
path: root/src/client/components/mention.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/components/mention.vue')
-rw-r--r--src/client/components/mention.vue86
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>