From 9349f72227a96eb0e70404fa5bfea7044d3231a2 Mon Sep 17 00:00:00 2001 From: tamaina Date: Sat, 11 Feb 2023 16:04:45 +0900 Subject: [PATCH 01/21] refactor(client): Refactor MkPageHeader #9869 (#9878) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * disable animation * refactor(client): MkPageHeaderのタブをMkPageHeader.tabsに分離 animationをフォローするように * update CHANGELOG.md * remove unnecessary props --- CHANGELOG.md | 7 + .../components/global/MkPageHeader.tabs.vue | 218 ++++++++++++++++++ .../src/components/global/MkPageHeader.vue | 200 +--------------- packages/frontend/src/pages/timeline.vue | 7 +- 4 files changed, 239 insertions(+), 193 deletions(-) create mode 100644 packages/frontend/src/components/global/MkPageHeader.tabs.vue diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b650e7de9..097195d531 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,13 @@ You should also include the user name that made the change. --> +## 13.x.x (unreleased) + +### Improvements +- アニメーションを少なくする設定の時、MkPageHeaderのタブアニメーションを無効化 + +### Bugfixes +- ## 13.6.0 (2023/02/11) diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.vue b/packages/frontend/src/components/global/MkPageHeader.tabs.vue new file mode 100644 index 0000000000..9b19c5dc87 --- /dev/null +++ b/packages/frontend/src/components/global/MkPageHeader.tabs.vue @@ -0,0 +1,218 @@ + + + + + + + diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue index 23a39b9ac9..d39fcde1b5 100644 --- a/packages/frontend/src/components/global/MkPageHeader.vue +++ b/packages/frontend/src/components/global/MkPageHeader.vue @@ -19,27 +19,7 @@ -
-
- -
-
-
+
@@ -418,68 +302,4 @@ onUnmounted(() => { } } } - -.tabs { - display: block; - position: relative; - margin: 0; - height: var(--height); - font-size: 0.8em; - text-align: center; - overflow-x: auto; - overflow-y: hidden; - scrollbar-width: none; - - &::-webkit-scrollbar { - display: none; - } -} - -.tabsInner { - display: inline-block; - height: var(--height); - white-space: nowrap; -} - -.tab { - display: inline-block; - position: relative; - padding: 0 10px; - height: 100%; - font-weight: normal; - opacity: 0.7; - transition: opacity 0.2s ease; - - &:hover { - opacity: 1; - } - - &.active { - opacity: 1; - } -} - -.tabInner { - display: flex; - align-items: center; -} - -.tabIcon + .tabTitle { - margin-left: 8px; -} - -.tabTitle { - overflow: hidden; - transition: width 0.15s ease-in-out; -} - -.tabHighlight { - position: absolute; - bottom: 0; - height: 3px; - background: var(--accent); - border-radius: 999px; - transition: width 0.15s ease, left 0.15s ease; - pointer-events: none; -} diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue index 31f4793dc4..a071361150 100644 --- a/packages/frontend/src/pages/timeline.vue +++ b/packages/frontend/src/pages/timeline.vue @@ -32,6 +32,7 @@ import { i18n } from '@/i18n'; import { instance } from '@/instance'; import { $i } from '@/account'; import { definePageMetadata } from '@/scripts/page-metadata'; +import type { Tab } from '@/components/global/MkPageHeader.tabs.vue'; provide('shouldOmitHeaderTitle', true); @@ -57,7 +58,7 @@ function queueUpdated(q: number): void { } function top(): void { - scroll(rootEl, { top: 0 }); + if (rootEl) scroll(rootEl, { top: 0 }); } async function chooseList(ev: MouseEvent): Promise { @@ -150,7 +151,7 @@ const headerTabs = $computed(() => [{ title: i18n.ts.channel, iconOnly: true, onClick: chooseChannel, -}]); +}] as Tab[]); const headerTabsWhenNotLogin = $computed(() => [ ...(isLocalTimelineAvailable ? [{ @@ -165,7 +166,7 @@ const headerTabsWhenNotLogin = $computed(() => [ icon: 'ti ti-whirl', iconOnly: true, }] : []), -]); +] as Tab[]); definePageMetadata(computed(() => ({ title: i18n.ts.timeline, From 19c0027605dca3bb2af3a2943d7984165badc9c2 Mon Sep 17 00:00:00 2001 From: tamaina Date: Sat, 11 Feb 2023 07:17:50 +0000 Subject: [PATCH 02/21] =?UTF-8?q?fix(client):=20=E3=83=A6=E3=83=BC?= =?UTF-8?q?=E3=82=B6=E3=83=BC=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=A7=E3=82=A2?= =?UTF-8?q?=E3=82=AF=E3=83=86=E3=82=A3=E3=83=93=E3=83=86=E3=82=A3=E3=82=92?= =?UTF-8?q?=E8=A6=8B=E3=82=8B=E3=81=93=E3=81=A8=E3=81=8C=E3=81=A7=E3=81=8D?= =?UTF-8?q?=E3=81=AA=E3=81=84=E3=81=AE=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 2 +- packages/frontend/src/pages/user/index.vue | 10 +++------- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 097195d531..c11d186926 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,7 +14,7 @@ You should also include the user name that made the change. - アニメーションを少なくする設定の時、MkPageHeaderのタブアニメーションを無効化 ### Bugfixes -- +- Client: ユーザーページでアクティビティを見ることができない問題を修正 ## 13.6.0 (2023/02/11) diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue index 84909f72c2..29aef21859 100644 --- a/packages/frontend/src/pages/user/index.vue +++ b/packages/frontend/src/pages/user/index.vue @@ -6,6 +6,7 @@
+ @@ -20,13 +21,10 @@