From c95da270191293b8171f4f1197ef609905a9b911 Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 26 Dec 2022 08:40:13 +0900 Subject: [PATCH] enhance(client): use container queries if available to improve perf --- CHANGELOG.md | 1 + .../client/src/components/MkContainer.vue | 11 +++ .../src/components/MkDateSeparatedList.vue | 2 + packages/client/src/components/MkNote.vue | 18 +++-- .../client/src/components/MkNoteDetailed.vue | 68 +++++++++++++++++++ .../client/src/components/MkNotePreview.vue | 20 ++++++ .../client/src/components/MkNoteSimple.vue | 20 ++++++ packages/client/src/components/MkNoteSub.vue | 10 +++ .../client/src/components/MkNotification.vue | 14 ++++ packages/client/src/components/MkPostForm.vue | 57 ++++++++++++++++ .../client/src/components/MkUrlPreview.vue | 67 ++++++++++++++++++ packages/client/src/components/MkWidgets.vue | 2 + .../client/src/components/global/MkSpacer.vue | 1 + packages/client/src/directives/size.ts | 8 +++ .../client/src/pages/antenna-timeline.vue | 7 ++ packages/client/src/pages/messaging/index.vue | 24 +++++++ .../messaging/messaging-room.message.vue | 35 +++++++++- packages/client/src/pages/page.vue | 2 +- .../client/src/pages/user-list-timeline.vue | 7 ++ packages/client/src/pages/user/home.vue | 52 ++++++++++++++ 20 files changed, 420 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e38d7e63c..13c2876a82 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -42,6 +42,7 @@ You should also include the user name that made the change. - Client: Implement the button to subscribe push notification @tamaina - Client: Implement the toggle to or not to close push notifications when notifications or messages are read @tamaina - Client: show Unicode emoji tooltip with its name in MkReactionsViewer.reaction @saschanaz +- Client: improve overall performance of client @syuilo ### Bugfixes - Server: 引用内の文章がnyaizeされてしまう問題を修正 @kabo2468 diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue index c097946c19..6d4d5be2bc 100644 --- a/packages/client/src/components/MkContainer.vue +++ b/packages/client/src/components/MkContainer.vue @@ -246,6 +246,17 @@ export default defineComponent({ } } +@container (max-width: 380px) { + .ukygtjoj { + > header { + > .title { + padding: 8px 10px; + font-size: 0.9em; + } + } + } +} + ._forceContainerFull_ .ukygtjoj { > header { > .title { diff --git a/packages/client/src/components/MkDateSeparatedList.vue b/packages/client/src/components/MkDateSeparatedList.vue index 68903f3526..1f88bdf137 100644 --- a/packages/client/src/components/MkDateSeparatedList.vue +++ b/packages/client/src/components/MkDateSeparatedList.vue @@ -108,6 +108,8 @@ export default defineComponent({ diff --git a/packages/client/src/components/MkNoteSimple.vue b/packages/client/src/components/MkNoteSimple.vue index 1bbbe0e1a6..96d29831d2 100644 --- a/packages/client/src/components/MkNoteSimple.vue +++ b/packages/client/src/components/MkNoteSimple.vue @@ -96,4 +96,24 @@ const showContent = $ref(false); } } } + +@container (min-width: 350px) { + .yohlumlk { + > .avatar { + margin: 0 10px 0 0; + width: 44px; + height: 44px; + } + } +} + +@container (min-width: 500px) { + .yohlumlk { + > .avatar { + margin: 0 12px 0 0; + width: 48px; + height: 48px; + } + } +} diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue index 95b6b71be9..d03ce7c434 100644 --- a/packages/client/src/components/MkNoteSub.vue +++ b/packages/client/src/components/MkNoteSub.vue @@ -127,4 +127,14 @@ if (props.detail) { padding: 10px 0 0 16px; } } + +@container (max-width: 450px) { + .wrpstxzv { + padding: 14px 16px; + + &.children { + padding: 10px 0 0 8px; + } + } +} diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue index 82965212f3..8b8d3f452d 100644 --- a/packages/client/src/components/MkNotification.vue +++ b/packages/client/src/components/MkNotification.vue @@ -306,4 +306,18 @@ useTooltip(reactionRef, (showing) => { } } } + +@container (max-width: 600px) { + .qglefbjs { + padding: 16px; + font-size: 0.9em; + } +} + +@container (max-width: 500px) { + .qglefbjs { + padding: 12px; + font-size: 0.85em; + } +} diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue index eb302ccc96..f79e5a32cd 100644 --- a/packages/client/src/components/MkPostForm.vue +++ b/packages/client/src/components/MkPostForm.vue @@ -990,4 +990,61 @@ onMounted(() => { } } } + +@container (max-width: 500px) { + .gafaadew { + > header { + height: 50px; + + > .cancel { + width: 50px; + line-height: 50px; + } + + > .right { + > .text-count { + line-height: 50px; + } + + > .submit { + margin: 8px; + } + } + } + + > .form { + > .to-specified { + padding: 6px 16px; + } + + > .cw, + > .hashtags, + > .text { + padding: 0 16px; + } + + > .text { + min-height: 80px; + } + + > footer { + padding: 0 8px 8px 8px; + } + } + } +} + +@container (max-width: 310px) { + .gafaadew { + > .form { + > footer { + > button { + font-size: 14px; + width: 44px; + height: 44px; + } + } + } + } +} diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue index ac03559bea..b2d16ddb01 100644 --- a/packages/client/src/components/MkUrlPreview.vue +++ b/packages/client/src/components/MkUrlPreview.vue @@ -313,4 +313,71 @@ onUnmounted(() => { } } } + +@container (max-width: 400px) { + .mk-url-preview { + > .link { + font-size: 12px; + + > .thumbnail { + height: 80px; + } + + > article { + padding: 12px; + } + } + } +} + +@container (max-width: 350px) { + .mk-url-preview { + > .link { + font-size: 10px; + + > .thumbnail { + height: 70px; + } + + > article { + padding: 8px; + + > header { + margin-bottom: 4px; + } + + > footer { + margin-top: 4px; + + > img { + width: 12px; + height: 12px; + } + } + } + + &.compact { + > .thumbnail { + position: absolute; + width: 56px; + height: 100%; + } + + > article { + left: 56px; + width: calc(100% - 56px); + padding: 4px; + + > header { + margin-bottom: 2px; + } + + > footer { + margin-top: 2px; + } + } + } + } + } +} diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue index a0c77f91a9..fff89117ce 100644 --- a/packages/client/src/components/MkWidgets.vue +++ b/packages/client/src/components/MkWidgets.vue @@ -111,6 +111,8 @@ function onContextmenu(widget: Widget, ev: MouseEvent) { diff --git a/packages/client/src/directives/size.ts b/packages/client/src/directives/size.ts index c8f446e3a8..b514f4e38b 100644 --- a/packages/client/src/directives/size.ts +++ b/packages/client/src/directives/size.ts @@ -15,6 +15,8 @@ type ClassOrder = { remove: string[]; }; +const isContainerQueriesSupported = ('container' in document.documentElement.style); + const cache = new Map(); function getClassOrder(width: number, queue: Value): ClassOrder { @@ -78,6 +80,8 @@ function calc(el: Element) { export default { mounted(src, binding, vn) { + if (isContainerQueriesSupported) return; + const resize = new ResizeObserver((entries, observer) => { calc(src); }); @@ -93,11 +97,15 @@ export default { }, updated(src, binding, vn) { + if (isContainerQueriesSupported) return; + mountings.set(src, Object.assign({}, mountings.get(src), { value: binding.value })); calc(src); }, unmounted(src, binding, vn) { + if (isContainerQueriesSupported) return; + const info = mountings.get(src); if (!info) return; info.resize.disconnect(); diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue index 592131b2a8..0b2c284c99 100644 --- a/packages/client/src/pages/antenna-timeline.vue +++ b/packages/client/src/pages/antenna-timeline.vue @@ -118,4 +118,11 @@ definePageMetadata(computed(() => antenna ? { margin: 0 auto; } } + +@container (min-width: 800px) { + .tqmomfks { + max-width: 800px; + margin: 0 auto; + } +} diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue index b4cec5f5e9..0d30998330 100644 --- a/packages/client/src/pages/messaging/index.vue +++ b/packages/client/src/pages/messaging/index.vue @@ -300,4 +300,28 @@ definePageMetadata({ } } } + +@container (max-width: 400px) { + .yweeujhr { + > .history { + > .message { + &:not(.isMe):not(.isRead) { + > div { + background-image: none; + border-left: solid 4px #3aa2dc; + } + } + + > div { + padding: 16px; + font-size: 0.9em; + + > .avatar { + margin: 0 12px 0 0; + } + } + } + } + } +} diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue index e7cf54a066..dbf0e37b73 100644 --- a/packages/client/src/pages/messaging/messaging-room.message.vue +++ b/packages/client/src/pages/messaging/messaging-room.message.vue @@ -2,7 +2,7 @@
-
+
@@ -331,4 +331,37 @@ function del(): void { } } } + +@container (max-width: 400px) { + .thvuemwp { + > .avatar { + width: 48px; + height: 48px; + } + + > .content { + > .balloon { + > .content { + > .text { + font-size: 0.9em; + } + } + } + } + } +} + +@container (max-width: 500px) { + .thvuemwp { + > .content { + > .balloon { + > .content { + > .text { + padding: 8px 16px; + } + } + } + } + } +} diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue index 7072b8ef03..a95bfe485c 100644 --- a/packages/client/src/pages/page.vue +++ b/packages/client/src/pages/page.vue @@ -3,7 +3,7 @@ -
+