Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

tweak ui

Browse source
This commit is contained in:
kakkokari-gtyih 2024-06-03 15:01:14 +09:00
parent cee5dd9aa4
commit 87c75af182
2 changed files with 65 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -58,7 +58,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.noteHeaderUsername"><MkAcct :user="appearNote.user"/></div>
</div>
<div :class="$style.noteHeaderInfo">
<img v-if="inEmbedPage" :src="instance.iconUrl || '/favicon.ico'" alt="" :class="$style.noteHeaderInstanceIcon"/>
<a v-if="inEmbedPage" :href="url" :class="$style.noteHeaderInstanceIconLink" target="_blank" rel="noopener noreferrer">
<img :src="instance.iconUrl || '/favicon.ico'" alt="" :class="$style.noteHeaderInstanceIcon"/>
</a>
<template v-else>
<div v-if="appearNote.visibility !== 'public'" :title="i18n.ts._visibility[appearNote.visibility]">
<i v-if="appearNote.visibility === 'home'" class="ti ti-home"></i>
@ -275,6 +277,7 @@ import MkPagination, { type Paging } from '@/components/MkPagination.vue';
import MkReactionIcon from '@/components/MkReactionIcon.vue';
import MkButton from '@/components/MkButton.vue';
import { isEnabledUrlPreview, instance } from '@/instance.js';
import { url } from '@/config.js';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@ -699,11 +702,14 @@ function loadConversation() {
align-items: center;
}
.noteHeaderInstanceIcon {
.noteHeaderInstanceIconLink {
display: inline-block;
margin-left: 4px;
}
.noteHeaderInstanceIcon {
width: 32px;
height: 32px;
margin-left: 4px;
}
.noteHeaderUsername {

57
packages/frontend/src/pages/embed/user-timeline.vue
View file

@ -8,7 +8,25 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkLoading v-if="loading"/>
<template v-else-if="user">
<div v-if="normalizedShowHeader" :class="$style.userHeader">
<MkAvatar :user="user"/>{{ user.name }} のノート
<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer">
<MkAvatar :class="$style.avatar" :user="user"/>
</a>
<div :class="$style.headerTitle">
<I18n :src="i18n.ts.noteOf" tag="div">
<template #user>
<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer">
<Mfm :text="user.name ?? `@${user.username}`" :plain="true"/>
</a>
</template>
</I18n>
<div :class="$style.sub"></div>
</div>
<a :href="url" :class="$style.instanceIconLink" target="_blank" rel="noopener noreferrer">
<img
:class="$style.instanceIcon"
:src="instance.iconUrl || '/favicon.ico'"
/>
</a>
</div>
<MkNotes
:class="$style.userTimelineNotes"
@ -28,6 +46,9 @@ import MkNotes from '@/components/MkNotes.vue';
import XNotFound from '@/pages/not-found.vue';
import type { Paging } from '@/components/MkPagination.vue';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js';
import { url } from '@/config.js';
const props = defineProps<{
username: string;
@ -65,6 +86,40 @@ misskeyApi('users/show', {
flex-direction: column;
}
.userHeader {
padding: 8px 16px;
display: flex;
align-items: center;
gap: var(--margin);
border-bottom: 1px solid var(--divider);
.avatar {
display: inline-block;
width: 32px;
height: 32px;
}
.headerTitle {
font-weight: 700;
.sub {
font-size: 0.8em;
font-weight: 400;
opacity: 0.7;
}
}
.instanceIconLink {
display: block;
margin-left: auto;
}
.instanceIcon {
height: 24px;
border-radius: 4px;
}
}
.userTimelineNotes {
flex: 1;
overflow-y: auto;