moris/misskey
1
0
Fork 0
forked from mirror/misskey
Code Pull Requests Activity

wip

Browse Source
This commit is contained in:
syuilo 2024-08-27 19:47:25 +09:00
parent 55b62e3246
commit e41ba1d177
6 changed files with 61 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/frontend-embed/src/components/EmAcct.vue Normal file
View File

@ -0,0 +1,24 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<span>
<span>@{{ user.username }}</span>
<span v-if="user.host || detail" style="opacity: 0.5;">@{{ user.host || host }}</span>
</span>
</template>
<script lang="ts" setup>
import * as Misskey from 'misskey-js';
import { toUnicode } from 'punycode/';
import { host as hostRaw } from '@/config.js';
defineProps<{
user: Misskey.entities.UserLite;
detail?: boolean;
}>();
const host = toUnicode(hostRaw);
</script>

12
packages/frontend-embed/src/components/EmMention.vue
View File

@ -5,7 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkA v-user-preview="canonical" :class="[$style.root]" :to="url" :style="{ background: bgCss }">
<img :class="$style.icon" :src="avatarUrl" alt="">
<span>
<span>@{{ username }}</span>
<span v-if="(host != localHost)" :class="$style.host">@{{ toUnicode(host) }}</span>
@ -31,8 +30,6 @@ const url = `/${canonical}`;
const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--mention'));
bg.setAlpha(0.1);
const bgCss = bg.toRgbString();
const avatarUrl = `/avatar/@${props.username}@${props.host}`;
</script>
<style lang="scss" module>
@ -43,15 +40,6 @@ const avatarUrl = `/avatar/@${props.username}@${props.host}`;
color: var(--mention);
}
.icon {
width: 1.5em;
height: 1.5em;
object-fit: cover;
margin: 0 0.2em 0 0;
vertical-align: bottom;
border-radius: 100%;
}
.host {
opacity: 0.5;
}

2
packages/frontend-embed/src/components/EmNoteDetailed.vue
View File

@ -136,6 +136,8 @@ import EmPoll from '@/components/EmPoll.vue';
import EmA from '@/components/EmA.vue';
import EmAvatar from '@/components/EmAvatar.vue';
import EmTime from '@/components/EmTime.vue';
import EmUserName from '@/components/EmUserName.vue';
import EmAcct from '@/components/EmAcct.vue';
import { userPage } from '@/utils.js';
import { notePage } from '@/utils.js';
import { i18n } from '@/i18n.js';

21
packages/frontend-embed/src/components/EmUserName.vue Normal file
View File

@ -0,0 +1,21 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<EmMfm :text="user.name ?? user.username" :author="user" :plain="true" :nowrap="nowrap" :emojiUrls="user.emojis"/>
</template>
<script lang="ts" setup>
import { } from 'vue';
import * as Misskey from 'misskey-js';
import EmMfm from './EmMfm.js';
const props = withDefaults(defineProps<{
user: Misskey.entities.User;
nowrap?: boolean;
}>(), {
nowrap: true,
});
</script>

7
packages/frontend-embed/src/style.scss
View File

@ -108,6 +108,13 @@ rt {
text-align: center;
}
._nowrap {
white-space: pre !important;
word-wrap: normal !important; // https://codeday.me/jp/qa/20190424/690106.html
overflow: hidden;
text-overflow: ellipsis;
}
._button {
user-select: none;
-webkit-user-select: none;

18
packages/frontend/src/components/MkEmbedCodeGenDialog.vue
View File

@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
>
<MkLoading v-if="iframeLoading" :class="$style.embedCodeGenPreviewSpinner"/>
<div :class="$style.embedCodeGenPreviewWrapper">
<div :class="$style.embedCodeGenPreviewTitle">{{ i18n.ts.preview }}</div>
<div class="_acrylic" :class="$style.embedCodeGenPreviewTitle">{{ i18n.ts.preview }}</div>
<div ref="resizerRootEl" :class="$style.embedCodeGenPreviewResizerRoot" inert>
<div
:class="$style.embedCodeGenPreviewResizer"
@ -326,16 +326,12 @@ onUnmounted(() => {
}
.embedCodeGenPreviewTitle {
width: fit-content;
flex-shrink: 0;
padding: 0 8px;
background-color: var(--panel);
border-right: 1px solid var(--divider);
border-bottom: 1px solid var(--divider);
border-bottom-right-radius: var(--radius);
height: 28px;
line-height: 28px;
box-sizing: border-box;
position: absolute;
z-index: 100;
top: 8px;
left: 8px;
padding: 6px 8px;
border-radius: 6px;
}
.embedCodeGenPreviewSpinner {