From 5cb72b716a0d4d3ed1a14396dd94d244000abf41 Mon Sep 17 00:00:00 2001 From: NoriDev Date: Fri, 25 Aug 2023 16:38:05 +0900 Subject: [PATCH] =?UTF-8?q?enhance(frontend):=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=83=98=E3=83=83?= =?UTF-8?q?=E3=83=80=E3=83=BC=E3=81=AB=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC?= =?UTF-8?q?=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=A8=E3=83=95=E3=82=A9?= =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG_CHERRYPICK.md | 1 + .../src/components/MkFollowButton.vue | 8 +++++- .../src/components/global/CPPageHeader.vue | 25 ++++++++++++++++++- .../src/components/global/MkPageHeader.vue | 25 ++++++++++++++++++- packages/frontend/src/pages/user/index.vue | 13 +++++++++- 5 files changed, 68 insertions(+), 4 deletions(-) diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md index f437e49c53..088020c98a 100644 --- a/CHANGELOG_CHERRYPICK.md +++ b/CHANGELOG_CHERRYPICK.md @@ -41,6 +41,7 @@ - Enhance: '제어판 - 신고' 페이지의 버튼 가독성 향상 - Enhance: '모달에 흐림 효과 사용' 옵션이 비활성화된 경우, 이미지를 탭하여 표시할 때 표시되는 배경을 어둡게 조정 - Enhance: 대화 페이지 디자인 개선 +- Enhance: 유저 페이지 헤더에 유저 메뉴, 팔로우 버튼 추가 - Fix: (Friendly) 흐림 효과를 사용할 때 하단 내비게이션 바의 가독성이 매우 떨어지는 문제 - Fix: (Friendly) 위젯 버튼에서 'UI 애니메이션 줄이기' 옵션이 적용되지 않는 문제 - Fix: (Friendly) 스크롤을 해도 위젯 버튼이 숨겨지지 않는 문제 diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue index 0ec983dba7..583fadef83 100644 --- a/packages/frontend/src/components/MkFollowButton.vue +++ b/packages/frontend/src/components/MkFollowButton.vue @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only -
+
+
+ + +
@@ -61,6 +65,10 @@ import { mainRouter } from '@/router'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { defaultStore } from '@/store'; +import MkFollowButton from '@/components/MkFollowButton.vue'; +import { eventBus } from '@/scripts/cherrypick/eventBus'; + +let showFollowButton = $ref(false); const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly'); const canBack = ref(['index', 'explore', 'my-notifications', 'messaging'].includes(mainRouter.currentRoute.value.name)); @@ -210,6 +218,10 @@ onMounted(() => { calcBg(); globalEvents.on('themeChanged', calcBg); + + eventBus.on('showFollowButton', (showFollowButton_receive) => { + showFollowButton = showFollowButton_receive; + }); }); onUnmounted(() => { @@ -284,6 +296,11 @@ onUnmounted(() => { margin: 0 0 0 var(--margin); } +.followButton { + composes: buttons; + margin: 0 var(--margin) 0 0; +} + .goBack { margin-left: 8px; @@ -419,4 +436,10 @@ onUnmounted(() => { transition: all 0.2s ease; pointer-events: none; } + +@container (max-width: 500px) { + .followButton { + margin: 0; + } +} diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue index d5629107b6..95ccffe774 100644 --- a/packages/frontend/src/components/global/MkPageHeader.vue +++ b/packages/frontend/src/components/global/MkPageHeader.vue @@ -32,13 +32,17 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+
+
+ + +
@@ -59,6 +63,10 @@ import { mainRouter } from '@/router'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { defaultStore } from '@/store'; +import MkFollowButton from '@/components/MkFollowButton.vue'; +import { eventBus } from '@/scripts/cherrypick/eventBus'; + +let showFollowButton = $ref(false); const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly'); const canBack = ref(['index', 'explore', 'my-notifications', 'messaging'].includes(mainRouter.currentRoute.value.name)); @@ -152,6 +160,10 @@ onMounted(() => { calcBg(); globalEvents.on('themeChanged', calcBg); + + eventBus.on('showFollowButton', (showFollowButton_receive) => { + showFollowButton = showFollowButton_receive; + }); }); onUnmounted(() => { @@ -252,6 +264,11 @@ onUnmounted(() => { margin: 0 0 0 var(--margin); } +.followButton { + composes: buttons; + margin: 0 var(--margin) 0 0; +} + .goBack { margin-left: 8px; @@ -358,4 +375,10 @@ onUnmounted(() => { } } } + +@container (max-width: 500px) { + .followButton { + margin: 0; + } +} diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue index da63be4efc..9f4a5fa501 100644 --- a/packages/frontend/src/pages/user/index.vue +++ b/packages/frontend/src/pages/user/index.vue @@ -35,6 +35,8 @@ import * as os from '@/os'; import { definePageMetadata } from '@/scripts/page-metadata'; import { i18n } from '@/i18n'; import { $i } from '@/account'; +import { getUserMenu } from '@/scripts/get-user-menu'; +import { mainRouter } from '@/router'; const XHome = defineAsyncComponent(() => import('./home.vue')); const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue')); @@ -73,7 +75,11 @@ watch(() => props.acct, fetchUser, { immediate: true, }); -const headerActions = $computed(() => []); +const headerActions = $computed(() => [{ + icon: 'ti ti-dots', + text: i18n.ts.menu, + handler: menu, +}]); const headerTabs = $computed(() => user ? [{ key: 'home', @@ -121,6 +127,11 @@ const headerTabs = $computed(() => user ? [{ icon: 'ti ti-icons', }] : []); +function menu(ev) { + const { menu, cleanup } = getUserMenu(user, mainRouter); + os.popupMenu(menu, ev.currentTarget ?? ev.target).finally(cleanup); +} + definePageMetadata(computed(() => user ? { icon: 'ti ti-user', title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,