usbharu
/
misskey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

enhance(frontend): アイコンのスクロール追従を無効化する際の適用範囲を強化 

Resolve #16485
This commit is contained in:
syuilo 2025-08-31 10:18:48 +09:00
parent d127d82c5b
commit ebe029458e
3 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -47,6 +47,7 @@
- Enhance: 依存ソフトウェアの更新 - Enhance: 依存ソフトウェアの更新
- Enhance: ノートを非表示にする相対期間を1ヶ月単位で自由に指定できるように - Enhance: ノートを非表示にする相対期間を1ヶ月単位で自由に指定できるように
- Enhance: メールアドレス確認画面のUIを改善 - Enhance: メールアドレス確認画面のUIを改善
- Enhance: アイコンのスクロール追従を無効化する際の適用範囲を強化
- Fix: 投稿フォームでファイルのアップロードが中止または失敗した際のハンドリングを修正 - Fix: 投稿フォームでファイルのアップロードが中止または失敗した際のハンドリングを修正
- Fix: 一部の設定検索結果が存在しないパスになる問題を修正 - Fix: 一部の設定検索結果が存在しないパスになる問題を修正
(Cherry-picked from https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1171) (Cherry-picked from https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1171)

12
packages/frontend/src/components/MkNoteSimple.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div v-if="note" :class="$style.root"> <div v-if="note" :class="$style.root">
<MkAvatar :class="$style.avatar" :user="note.user" link preview/> <MkAvatar :class="[$style.avatar, prefer.s.useStickyIcons ? $style.useSticky : null]" :user="note.user" link preview/>
<div :class="$style.main"> <div :class="$style.main">
<MkNoteHeader :class="$style.header" :note="note" :mini="true"/> <MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
<div> <div>
@ -31,6 +31,7 @@ import MkNoteHeader from '@/components/MkNoteHeader.vue';
import MkSubNoteContent from '@/components/MkSubNoteContent.vue'; import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
import MkCwButton from '@/components/MkCwButton.vue'; import MkCwButton from '@/components/MkCwButton.vue';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { prefer } from '@/preferences.js';
const props = defineProps<{ const props = defineProps<{
note: Misskey.entities.Note | null; note: Misskey.entities.Note | null;
@ -54,9 +55,12 @@ const showContent = ref(false);
width: 34px; width: 34px;
height: 34px; height: 34px;
border-radius: 8px; border-radius: 8px;
position: sticky !important;
top: calc(16px + var(--MI-stickyTop, 0px)); &.useSticky {
left: 0; position: sticky !important;
top: calc(16px + var(--MI-stickyTop, 0px));
left: 0;
}
} }
.main { .main {

9
packages/frontend/src/pages/chat/XMessage.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div :class="[$style.root, { [$style.isMe]: isMe }]"> <div :class="[$style.root, { [$style.isMe]: isMe }]">
<MkAvatar :class="$style.avatar" :user="message.fromUser!" :link="!isMe" :preview="false"/> <MkAvatar :class="[$style.avatar, prefer.s.useStickyIcons ? $style.useSticky : null]" :user="message.fromUser!" :link="!isMe" :preview="false"/>
<div :class="[$style.body, message.file != null ? $style.fullWidth : null]" @contextmenu.stop="onContextmenu"> <div :class="[$style.body, message.file != null ? $style.fullWidth : null]" @contextmenu.stop="onContextmenu">
<div :class="$style.header"><MkUserName v-if="!isMe && prefer.s['chat.showSenderName'] && message.fromUser != null" :user="message.fromUser"/></div> <div :class="$style.header"><MkUserName v-if="!isMe && prefer.s['chat.showSenderName'] && message.fromUser != null" :user="message.fromUser"/></div>
<MkFukidashi :class="$style.fukidashi" :tail="isMe ? 'right' : 'left'" :fullWidth="message.file != null" :accented="isMe"> <MkFukidashi :class="$style.fukidashi" :tail="isMe ? 'right' : 'left'" :fullWidth="message.file != null" :accented="isMe">
@ -231,11 +231,14 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
} }
.avatar { .avatar {
position: sticky;
top: calc(16px + var(--MI-stickyTop, 0px));
display: block; display: block;
width: 50px; width: 50px;
height: 50px; height: 50px;
&.useSticky {
position: sticky;
top: calc(16px + var(--MI-stickyTop, 0px));
}
} }
@container (max-width: 450px) { @container (max-width: 450px) {