fix(frontend): チャットのデザイン調整

This commit is contained in:
kakkokari-gtyih 2025-03-25 21:34:24 +09:00
parent 0e417e51ac
commit 608ca0442d
9 changed files with 71 additions and 26 deletions

14
locales/index.d.ts vendored
View File

@ -5358,6 +5358,18 @@ export interface Locale extends ILocale {
*
*/
"migrateOldSettings_description": string;
/**
*
*/
"youAreBlocking": string;
/**
*
*/
"youAreBlocked": string;
/**
*
*/
"youAreMuting": string;
"_chat": {
/**
*
@ -5485,7 +5497,7 @@ export interface Locale extends ILocale {
*/
"thisUserAllowsChatOnlyFromFollowers": string;
/**
*
*
*/
"thisUserAllowsChatOnlyFromFollowing": string;
/**

View File

@ -1335,6 +1335,9 @@ information: "情報"
chat: "チャット"
migrateOldSettings: "旧設定情報を移行"
migrateOldSettings_description: "通常これは自動で行われていますが、何らかの理由により上手く移行されなかった場合は手動で移行処理をトリガーできます。現在の設定情報は上書きされます。"
youAreBlocking: "あなたはこのユーザーをブロックしています。"
youAreBlocked: "あなたはこのユーザーにブロックされています。"
youAreMuting: "あなたはこのユーザーをミュートしています。"
_chat:
noMessagesYet: "まだメッセージはありません"
@ -1368,7 +1371,7 @@ _chat:
cannotChatWithTheUser_description: "チャットが使えない状態になっているか、相手がチャットを開放していません。"
chatWithThisUser: "チャットする"
thisUserAllowsChatOnlyFromFollowers: "このユーザーはフォロワーからのみチャットを受け付けています。"
thisUserAllowsChatOnlyFromFollowing: "このユーザーはフォローしているユーザーからのみチャットを受け付けています。"
thisUserAllowsChatOnlyFromFollowing: "このユーザーは、このユーザーがフォローしているユーザーからのみチャットを受け付けています。"
thisUserAllowsChatOnlyFromMutualFollowing: "このユーザーは相互フォローのユーザーからのみチャットを受け付けています。"
thisUserNotAllowedChatAnyone: "このユーザーは誰からもチャットを受け付けていません。"
chatAllowedUsers: "チャットを許可する相手"

View File

@ -19,8 +19,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<path d="m188.19 87.657c-1.469 2.3218-3.9315 3.8312-6.667 4.0865-2.2309-1.7379-4.9781-2.6816-7.8061-2.6815h-5.1e-4v12.702h12.702v-5.1e-4c2e-5 -1.9998-0.47213-3.9713-1.378-5.754 2.0709-1.6834 3.2732-4.2102 3.273-6.8791-6e-5 -0.49375-0.0413-0.98662-0.1235-1.4735z" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width=".33225" style="paint-order:stroke fill markers"/>
</g>
</svg>
<div :class="$style.content">
<slot></slot>
<div
:class="[$style.content, {
[$style.contentBgPanel]: contentBgPanel,
[$style.small]: small,
}]"
>
<div :class="$style.contentInner">
<slot></slot>
</div>
</div>
</div>
</div>
@ -32,11 +39,15 @@ withDefaults(defineProps<{
negativeMargin?: boolean;
shadow?: boolean;
accented?: boolean;
contentBgPanel?: boolean;
small?: boolean;
}>(), {
tail: 'right',
negativeMargin: false,
shadow: false,
accented: false,
contentBgPanel: false,
small: false,
});
</script>
@ -85,6 +96,26 @@ withDefaults(defineProps<{
.content {
position: relative;
padding: 10px 14px;
&.small {
padding: 6px 10px;
}
&.contentBgPanel::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
background: var(--MI_THEME-panel);
border-radius: calc(var(--fukidashi-radius) - 2px);
}
}
.contentInner {
position: relative;
z-index: 1;
}
.tail {

View File

@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="[$style.root, { [$style.isMe]: isMe }]">
<MkAvatar :class="$style.avatar" :user="message.fromUser" :link="!isMe" :preview="false"/>
<MkAvatar v-if="!isMe" :class="$style.avatar" :user="message.fromUser" :link="!isMe" :preview="false"/>
<div :class="$style.body">
<div v-if="!isMe && prefer.s['chat.showSenderName']" :class="$style.header"><MkUserName :user="message.fromUser"/></div>
<MkFukidashi :class="$style.fukidashi" :tail="isMe ? 'right' : 'left'" :accented="isMe">
<MkFukidashi :tail="isMe ? 'right' : 'left'" :accented="isMe" negativeMargin contentBgPanel small>
<div v-if="!message.isDeleted" :class="$style.content">
<Mfm
v-if="message.text"
@ -204,10 +204,6 @@ function showMenu(ev: MouseEvent) {
flex-direction: row-reverse;
text-align: right;
.content {
color: var(--MI_THEME-fgOnAccent);
}
.footer {
flex-direction: row-reverse;
}
@ -218,12 +214,14 @@ function showMenu(ev: MouseEvent) {
position: sticky;
top: calc(16px + var(--MI-stickyTop, 0px));
display: block;
width: 52px;
height: 52px;
width: 32px;
height: 32px;
}
.body {
padding-top: 4px;
margin: 0 12px;
box-sizing: border-box;
}
.header {
@ -236,9 +234,6 @@ function showMenu(ev: MouseEvent) {
word-break: break-word;
}
.file {
}
.footer {
display: flex;
flex-direction: row;

View File

@ -116,7 +116,8 @@ function start(ev: MouseEvent) {
}
async function startUser() {
os.selectUser().then(user => {
// TODO: localOnly
os.selectUser({ localOnly: true }).then(user => {
router.push(`/chat/user/${user.id}`);
});
}

View File

@ -63,11 +63,11 @@ function save() {
async function del() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.ts.areYouSure,
text: i18n.tsx.deleteAreYouSure({ x: name_.value }),
});
if (canceled) return;
misskeyApi('chat/rooms/delete', {
await os.apiWithDialog('chat/rooms/delete', {
roomId: props.room.id,
});
router.push('/chat');
@ -81,10 +81,6 @@ watch(isMuted, async () => {
mute: isMuted.value,
});
});
onMounted(async () => {
});
</script>
<style lang="scss" module>

View File

@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkUserCardMini :user="room.owner"/>
</MkA>
<hr>
<hr v-if="memberships.length > 0">
<div v-for="membership in memberships" :key="membership.id" :class="$style.membership">
<MkA :class="$style.membershipBody" :to="`${userPage(membership.user)}`">

View File

@ -9,20 +9,25 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="searchQuery"
:placeholder="i18n.ts._chat.searchMessages"
type="search"
@enter="search()"
>
<template #prefix><i class="ti ti-search"></i></template>
</MkInput>
<MkButton v-if="searchQuery.length > 0" primary rounded @click="search">{{ i18n.ts.search }}</MkButton>
<MkButton primary rounded @click="search">{{ i18n.ts.search }}</MkButton>
<MkFoldableSection v-if="searched">
<template #header>{{ i18n.ts.searchResult }}</template>
<div class="_gaps_s">
<div v-if="searchResults.length > 0" class="_gaps_s">
<div v-for="message in searchResults" :key="message.id" :class="$style.searchResultItem">
<XMessage :message="message" :user="message.fromUser" :isSearchResult="true"/>
</div>
</div>
<div v-else class="_fullinfo">
<img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.notFound }}</div>
</div>
</MkFoldableSection>
</div>
</template>
@ -33,6 +38,7 @@ import * as Misskey from 'misskey-js';
import XMessage from './XMessage.vue';
import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n.js';
import { infoImageUrl } from '@/instance.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import * as os from '@/os.js';
import MkInput from '@/components/MkInput.vue';

View File

@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<Transition name="fade">
<div v-show="showIndicator" :class="$style.new">
<button class="_buttonPrimary" :class="$style.newButton" @click="onIndicatorClick">
<i class="fas ti-fw fa-arrow-circle-down" :class="$style.newIcon"></i>{{ i18n.ts.newMessageExists }}
<i class="fas ti-fw fa-arrow-circle-down" :class="$style.newIcon"></i>{{ i18n.ts._chat.newMessage }}
</button>
</div>
</Transition>
@ -384,6 +384,7 @@ const headerActions = computed(() => [{
definePage(computed(() => !initializing.value ? user.value ? {
userName: user,
title: user.value.name ?? user.value.username,
avatar: user,
} : {
title: room.value?.name,