diff --git a/CHANGELOG.md b/CHANGELOG.md index ff77553206..7841db6208 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,6 +38,7 @@ - Enhance: プラグインの管理が強化されました - インストール/アンインストール/設定の変更時にリロード不要になりました - Enhance: ログアウト時、ブラウザに保存されたWebクライアントのデータを全て消去するように +- Enhance: アイコンのスクロール追従を無効化してパフォーマンス向上できるように - Enhance: CWの注釈テキストが入力されていない場合, Postボタンを非アクティブに - Enhance: CWを無効にした場合, 注釈テキストが最大入力文字数を超えていても投稿できるように - Enhance: テーマ設定画面のデザインを改善 diff --git a/locales/index.d.ts b/locales/index.d.ts index d7b1c3b9b0..3dfd0e6029 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5634,6 +5634,10 @@ export interface Locale extends ILocale { * 有効にすると、一部のシチュエーションでのユーザビリティが低下する場合があります。 */ "makeEveryTextElementsSelectable_description": string; + /** + * アイコンをスクロールに追従させる + */ + "useStickyIcons": string; /** * ナビゲーションバーに副ボタンを表示 */ diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 7ab6c24d82..eb1505270c 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1409,6 +1409,7 @@ _settings: timelineAndNote: "タイムラインとノート" makeEveryTextElementsSelectable: "全てのテキスト要素を選択可能にする" makeEveryTextElementsSelectable_description: "有効にすると、一部のシチュエーションでのユーザビリティが低下する場合があります。" + useStickyIcons: "アイコンをスクロールに追従させる" showNavbarSubButtons: "ナビゲーションバーに副ボタンを表示" ifOn: "オンのとき" ifOff: "オフのとき" diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 91aed351c5..8840a6a8bf 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
- +
@@ -850,9 +850,12 @@ function emitUpdReaction(emoji: string, delta: number) { margin: 0 14px 0 0; width: 58px; height: 58px; - position: sticky !important; - top: calc(22px + var(--MI-stickyTop, 0px)); - left: 0; + + &.useSticky { + position: sticky !important; + top: calc(22px + var(--MI-stickyTop, 0px)); + left: 0; + } } .main { @@ -1039,7 +1042,10 @@ function emitUpdReaction(emoji: string, delta: number) { margin: 0 10px 0 0; width: 46px; height: 46px; - top: calc(14px + var(--MI-stickyTop, 0px)); + + &.useSticky { + top: calc(14px + var(--MI-stickyTop, 0px)); + } } } diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts index 7f4f7c5be3..63298d9407 100644 --- a/packages/frontend/src/os.ts +++ b/packages/frontend/src/os.ts @@ -13,6 +13,8 @@ import type { ComponentProps as CP } from 'vue-component-type-helpers'; import type { Form, GetFormResultType } from '@/utility/form.js'; import type { MenuItem } from '@/types/menu.js'; import type { PostFormProps } from '@/types/post-form.js'; +import type MkRoleSelectDialog_TypeReferenceOnly from '@/components/MkRoleSelectDialog.vue'; +import type MkEmojiPickerDialog_TypeReferenceOnly from '@/components/MkEmojiPickerDialog.vue'; import { misskeyApi } from '@/utility/misskey-api.js'; import { prefer } from '@/preferences.js'; import { i18n } from '@/i18n.js'; @@ -23,8 +25,6 @@ import MkToast from '@/components/MkToast.vue'; import MkDialog from '@/components/MkDialog.vue'; import MkPopupMenu from '@/components/MkPopupMenu.vue'; import MkContextMenu from '@/components/MkContextMenu.vue'; -import type MkRoleSelectDialog_TypeReferenceOnly from '@/components/MkRoleSelectDialog.vue'; -import type MkEmojiPickerDialog_TypeReferenceOnly from '@/components/MkEmojiPickerDialog.vue'; import { copyToClipboard } from '@/utility/copy-to-clipboard.js'; import { pleaseLogin } from '@/utility/please-login.js'; import { showMovedDialog } from '@/utility/show-moved-dialog.js'; diff --git a/packages/frontend/src/pages/settings/preferences.vue b/packages/frontend/src/pages/settings/preferences.vue index 6fe5a50e19..7e7ed21dd5 100644 --- a/packages/frontend/src/pages/settings/preferences.vue +++ b/packages/frontend/src/pages/settings/preferences.vue @@ -42,22 +42,6 @@ SPDX-License-Identifier: AGPL-3.0-only
- - - - - - - - - - - - - - - - @@ -395,40 +379,6 @@ SPDX-License-Identifier: AGPL-3.0-only - - - - - -
- {{ i18n.ts.reloadRequiredToApplySettings }} - -
- {{ i18n.ts.enableAll }} - {{ i18n.ts.disableAll }} -
-
- - {{ i18n.ts._dataSaver._media.title }} - - - - {{ i18n.ts._dataSaver._avatar.title }} - - - - {{ i18n.ts._dataSaver._urlPreview.title }} - - - - {{ i18n.ts._dataSaver._code.title }} - - -
-
-
-
- @@ -468,6 +418,76 @@ SPDX-License-Identifier: AGPL-3.0-only + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + + + +
+ {{ i18n.ts.reloadRequiredToApplySettings }} + +
+ {{ i18n.ts.enableAll }} + {{ i18n.ts.disableAll }} +
+
+ + {{ i18n.ts._dataSaver._media.title }} + + + + {{ i18n.ts._dataSaver._avatar.title }} + + + + {{ i18n.ts._dataSaver._urlPreview.title }} + + + + {{ i18n.ts._dataSaver._code.title }} + + +
+
+
+
+ @@ -650,6 +670,7 @@ const useBlurEffect = prefer.model('useBlurEffect'); const defaultFollowWithReplies = prefer.model('defaultFollowWithReplies'); const chatShowSenderName = prefer.model('chat.showSenderName'); const chatSendOnEnter = prefer.model('chat.sendOnEnter'); +const useStickyIcons = prefer.model('useStickyIcons'); watch(lang, () => { miLocalStorage.setItem('lang', lang.value as string); @@ -678,6 +699,7 @@ watch([ highlightSensitiveMedia, enableSeasonalScreenEffect, chatShowSenderName, + useStickyIcons, ], async () => { await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true }); }); diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts index 9fa4e6af35..37fa9471ee 100644 --- a/packages/frontend/src/preferences/def.ts +++ b/packages/frontend/src/preferences/def.ts @@ -198,6 +198,9 @@ export const PREF_DEF = { useBlurEffect: { default: DEFAULT_DEVICE_KIND === 'desktop', }, + useStickyIcons: { + default: true, + }, showFixedPostForm: { default: false, }, diff --git a/packages/frontend/src/utility/autogen/settings-search-index.ts b/packages/frontend/src/utility/autogen/settings-search-index.ts index 8ec9ef99c9..9e1f41e3c7 100644 --- a/packages/frontend/src/utility/autogen/settings-search-index.ts +++ b/packages/frontend/src/utility/autogen/settings-search-index.ts @@ -290,51 +290,41 @@ export const searchIndexes: SearchIndexItem[] = [ }, { id: 'lfI3yMX9g', - label: i18n.ts.useBlurEffect, - keywords: ['blur'], - }, - { - id: '31Y4IcGEf', - label: i18n.ts.useBlurEffectForModal, - keywords: ['blur', 'modal'], - }, - { - id: '78q2asrLS', label: i18n.ts.showAvatarDecorations, keywords: ['avatar', 'icon', 'decoration', 'show'], }, { - id: 'zydOfGYip', + id: '31Y4IcGEf', label: i18n.ts.alwaysConfirmFollow, keywords: ['follow', 'confirm', 'always'], }, { - id: 'wqpOC22Zm', + id: '78q2asrLS', label: i18n.ts.highlightSensitiveMedia, keywords: ['highlight', 'sensitive', 'nsfw', 'image', 'photo', 'picture', 'media', 'thumbnail'], }, { - id: 'c98gbF9c6', + id: 'zydOfGYip', label: i18n.ts.confirmWhenRevealingSensitiveMedia, keywords: ['sensitive', 'nsfw', 'media', 'image', 'photo', 'picture', 'attachment', 'confirm'], }, { - id: '4LxdiOMNh', + id: 'wqpOC22Zm', label: i18n.ts.enableAdvancedMfm, keywords: ['mfm', 'enable', 'show', 'advanced'], }, { - id: '9gTCaLkIf', + id: 'c98gbF9c6', label: i18n.ts.enableInfiniteScroll, keywords: ['auto', 'load', 'auto', 'more', 'scroll'], }, { - id: 'jmJT0twuJ', + id: '6ANRSOaNg', label: i18n.ts.emojiStyle, keywords: ['emoji', 'style', 'native', 'system', 'fluent', 'twemoji'], }, { - id: 'igFN7RIUa', + id: 'wo0s0CaI1', label: i18n.ts.pinnedList, keywords: ['pinned', 'list'], }, @@ -343,85 +333,85 @@ export const searchIndexes: SearchIndexItem[] = [ keywords: ['general'], }, { - id: 'ufc2X9voy', + id: 'l78F2W9Ok', children: [ { - id: 'd2H4E5ys6', + id: 'iOJ3Crlky', label: i18n.ts.showFixedPostForm, keywords: ['post', 'form', 'timeline'], }, { - id: '1LHOhDKGW', + id: 'CQldliCSi', label: i18n.ts.showFixedPostFormInChannel, keywords: ['post', 'form', 'timeline', 'channel'], }, { - id: 'DSzwvTp7i', + id: 'd2H4E5ys6', label: i18n.ts.collapseRenotes, keywords: ['renote', i18n.ts.collapseRenotesDescription], }, { - id: 'jb3HUeyrx', + id: 'yb11lSY1G', label: i18n.ts.showGapBetweenNotesInTimeline, keywords: ['note', 'timeline', 'gap'], }, { - id: '2LNjwv1cr', + id: 'fL49Zxe9i', label: i18n.ts.disableStreamingTimeline, keywords: ['disable', 'streaming', 'timeline'], }, { - id: '7W6g8Dcqz', + id: 'ykifk3NHS', label: i18n.ts.showNoteActionsOnlyHover, keywords: ['hover', 'show', 'footer', 'action'], }, { - id: 'uAOoH3LFF', + id: 'tLGyaQagB', label: i18n.ts.showClipButtonInNoteFooter, keywords: ['footer', 'action', 'clip', 'show'], }, { - id: 'eCiyZLC8n', + id: '7W6g8Dcqz', label: i18n.ts.showReactionsCount, keywords: ['reaction', 'count', 'show'], }, { - id: '68u9uRmFP', + id: 'uAOoH3LFF', label: i18n.ts.confirmOnReact, keywords: ['reaction', 'confirm'], }, { - id: 'rHWm4sXIe', + id: 'eCiyZLC8n', label: i18n.ts.loadRawImages, keywords: ['image', 'photo', 'picture', 'media', 'thumbnail', 'quality', 'raw', 'attachment'], }, { - id: '9L2XGJw7e', + id: '68u9uRmFP', label: i18n.ts.useReactionPickerForContextMenu, keywords: ['reaction', 'picker', 'contextmenu', 'open'], }, { - id: 'uIMCIK7kG', + id: 'yxehrHZ6x', label: i18n.ts.reactionsDisplaySize, keywords: ['reaction', 'size', 'scale', 'display'], }, { - id: 'uMckjO9bz', + id: 'gi8ILaE2Z', label: i18n.ts.limitWidthOfReaction, keywords: ['reaction', 'size', 'scale', 'display', 'width', 'limit'], }, { - id: 'yeghU4qiH', + id: 'cEQJZ7DQG', label: i18n.ts.mediaListWithOneImageAppearance, keywords: ['attachment', 'image', 'photo', 'picture', 'media', 'thumbnail', 'list', 'size', 'height'], }, { - id: 'yYSOPoAKE', + id: 'haX4QVulD', label: i18n.ts.instanceTicker, keywords: ['ticker', 'information', 'label', 'instance', 'server', 'host', 'federation'], }, { - id: 'iOHiIu32L', + id: 'pneYnQekL', label: i18n.ts.displayOfSensitiveMedia, keywords: ['attachment', 'image', 'photo', 'picture', 'media', 'thumbnail', 'nsfw', 'sensitive', 'display', 'show', 'hide', 'visibility'], }, @@ -430,25 +420,25 @@ export const searchIndexes: SearchIndexItem[] = [ keywords: ['timeline', 'note'], }, { - id: 'eROFRMtXv', + id: 'eJ2jme16W', children: [ { - id: 'BaQfrVO82', + id: 'ErMQr6LQk', label: i18n.ts.keepCw, keywords: ['remember', 'keep', 'note', 'cw'], }, { - id: 'vFerPo2he', + id: 'zrJicawH9', label: i18n.ts.rememberNoteVisibility, keywords: ['remember', 'keep', 'note', 'visibility'], }, { - id: 'dcAC0yJcH', + id: 'BaQfrVO82', label: i18n.ts.enableQuickAddMfmFunction, keywords: ['mfm', 'enable', 'show', 'advanced', 'picker', 'form', 'function', 'fn'], }, { - id: 'bECeWZVMb', + id: 'C2WYcVM1d', label: i18n.ts.defaultNoteVisibility, keywords: ['default', 'note', 'visibility'], }, @@ -457,20 +447,20 @@ export const searchIndexes: SearchIndexItem[] = [ keywords: ['post', 'form'], }, { - id: 'tsSP93Cc6', + id: 'sQXSA6gik', children: [ { - id: 'dtw8FepYL', + id: 'rICn8stqk', label: i18n.ts.useGroupedNotifications, keywords: ['group'], }, { - id: 'eb0yCYJTn', + id: 'xFmAg2tDe', label: i18n.ts.position, keywords: ['position'], }, { - id: '1Spt4Gpr5', + id: 'Ek4Cw3VPq', label: i18n.ts.stackAxis, keywords: ['stack', 'axis', 'direction'], }, @@ -479,20 +469,15 @@ export const searchIndexes: SearchIndexItem[] = [ keywords: ['notification'], }, { - id: 'SYmWxGOF', - label: i18n.ts.dataSaver, - keywords: ['datasaver'], - }, - { - id: 'vPQPvmntL', + id: 'gDVCqZfxm', children: [ { - id: 'zZxyXHk3A', + id: 'ei8Ix3s4S', label: i18n.ts._settings._chat.showSenderName, keywords: ['show', 'sender', 'name'], }, { - id: 'omEy5Q3Ev', + id: '2E7vdIUQd', label: i18n.ts._settings._chat.sendOnEnter, keywords: ['send', 'enter', 'newline'], }, @@ -501,50 +486,77 @@ export const searchIndexes: SearchIndexItem[] = [ keywords: ['chat', 'messaging'], }, { - id: '5fy7VEy6i', + id: '96LnS1sxB', children: [ { - id: 'EosiWZvak', + id: '5h8vhCX1S', + label: i18n.ts.turnOffToImprovePerformance, + keywords: ['blur'], + }, + { + id: 'Cbjosj3TG', + label: i18n.ts.turnOffToImprovePerformance, + keywords: ['blur', 'modal'], + }, + { + id: 'BKndoHcCj', + label: i18n.ts.turnOffToImprovePerformance, + keywords: ['sticky'], + }, + ], + label: i18n.ts.performance, + keywords: ['performance'], + }, + { + id: '4yCgcFElF', + label: i18n.ts.dataSaver, + keywords: ['datasaver'], + }, + { + id: 'DILm2LlCn', + children: [ + { + id: 'Fd0rFTSry', label: i18n.ts.squareAvatars, keywords: ['avatar', 'icon', 'square'], }, { - id: 'qY5xTzl35', + id: 'xNsLokqeA', label: i18n.ts.seasonalScreenEffect, keywords: ['effect', 'show'], }, { - id: '2VSnj81vC', + id: 'sZcalFBE8', label: i18n.ts.openImageInNewTab, keywords: ['image', 'photo', 'picture', 'media', 'thumbnail', 'new', 'tab'], }, { - id: 'hdQa7W2H1', + id: 'Eh7vTluDO', label: i18n.ts.withRepliesByDefaultForNewlyFollowed, keywords: ['follow', 'replies'], }, { - id: 'nnj4DkjhP', + id: 'vTRSKf1JA', label: i18n.ts.whenServerDisconnected, keywords: ['server', 'disconnect', 'reconnect', 'reload', 'streaming'], }, { - id: 'Eh7vTluDO', + id: 'zlO5cBZFH', label: i18n.ts.numberOfPageCache, keywords: ['cache', 'page'], }, { - id: 'vTRSKf1JA', + id: 'huQ8nc4iD', label: i18n.ts.forceShowAds, keywords: ['ad', 'show'], }, { - id: 'dwhQfcLGt', + id: 'nJWfqwQ4R', label: i18n.ts.hemisphere, keywords: [], }, { - id: 'Ar1lj7f7U', + id: 'kwEEgTlwR', label: i18n.ts.additionalEmojiDictionary, keywords: ['emoji', 'dictionary', 'additional', 'extra'], },