enhance(client): グループページのデザイン改善

2023-06-17 19:13:13 +09:00 · 2023-06-17 19:13:13 +09:00 · 7017244090
parent f46879ac1a
commit 7017244090
4 changed files with 58 additions and 24 deletions
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@ -75,6 +75,7 @@
 - 노트를 게시했을 때 토스트 알림 표시
 - 노트 액션 버튼 추가 및 편의성 향상
 - 데이터 세이버를 활성화하면 설정을 반영하기 위해 페이지를 새로 고치도록
+- 그룹 페이지의 전반적인 디자인 개선
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
 - Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@ -89,8 +89,9 @@
 			</template>
 			<template v-else-if="notification.type === 'groupInvited'">
 				<span :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}:<span style="font-weight: bold; margin-left: 5px;">{{ notification.invitation.group.name }}</span></span>
-				<div v-if="full && !groupInviteDone">
-					<button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button>
+				<div v-if="full && !groupInviteDone" :class="$style.followRequestCommands">
+					<MkButton :class="$style.followRequestCommandButton" rounded primary @click="acceptGroupInvitation()"><i class="ti ti-check"/> {{ i18n.ts.accept }}</MkButton>
+					<MkButton :class="$style.followRequestCommandButton" rounded danger @click="rejectGroupInvitation()"><i class="ti ti-x"/> {{ i18n.ts.reject }}</MkButton>
 				</div>
 			</template>
 			<span v-else-if="notification.type === 'app'" :class="$style.text">
@ -149,7 +150,7 @@ const acceptGroupInvitation = () => {

 const rejectGroupInvitation = () => {
 	groupInviteDone.value = true;
-	os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
+	os.apiWithDialog('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
 };

 useTooltip(reactionRef, (showing) => {
--- a/packages/frontend/src/pages/my-groups/group.vue
+++ b/packages/frontend/src/pages/my-groups/group.vue
@ -1,19 +1,11 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header>
+		<MkPageHeader v-if="group && $i.id === group.ownerId" :actions="headerActions" :tabs="headerTabs"/>
+		<MkPageHeader v-else :tabs="headerTabs"/>
+	</template>
 	<MkSpacer :contentMax="700">
 		<div>
-			<transition :name="defaultStore.state.animation ? 'zoom' : ''" mode="out-in">
-				<div v-if="group && $i.id === group.ownerId">
-					<div :class="$style.content" style="">
-						<MkButton inline @click="invite()">{{ i18n.ts.invite }}</MkButton>
-						<MkButton inline @click="renameGroup()">{{ i18n.ts.rename }}</MkButton>
-						<MkButton inline @click="transfer()">{{ i18n.ts.transfer }}</MkButton>
-						<MkButton inline danger @click="deleteGroup()">{{ i18n.ts.delete }}</MkButton>
-					</div>
-				</div>
-			</transition>
-
 			<transition :name="defaultStore.state.animation ? 'zoom' : ''" mode="out-in">
 				<div v-if="group" class="_gaps_s">
 					<div style="margin-top: var(--margin);">{{ i18n.ts.members }}</div>
@ -43,7 +35,6 @@

 <script lang="ts" setup>
 import { computed, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
 import { mainRouter } from '@/router';
@ -135,7 +126,31 @@ async function deleteGroup() {

 watch(() => props.listId, fetchGroup, { immediate: true });

-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+	icon: 'ti ti-plus',
+	text: i18n.ts.invite,
+	handler: () => {
+		invite();
+	},
+}, {
+	icon: 'ti ti-edit',
+	text: i18n.ts.rename,
+	handler: () => {
+		renameGroup();
+	},
+}, {
+	icon: 'ti ti-arrows-exchange',
+	text: i18n.ts.transfer,
+	handler: () => {
+		transfer();
+	},
+}, {
+	icon: 'ti ti-trash',
+	text: i18n.ts.delete,
+	handler: () => {
+		deleteGroup();
+	},
+}]);

 const headerTabs = $computed(() => []);

--- a/packages/frontend/src/pages/my-groups/index.vue
+++ b/packages/frontend/src/pages/my-groups/index.vue
@ -6,20 +6,22 @@
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="ownedPagination">
 				<MkA v-for="group in items" :key="group.id" :class="$style.group" class="_panel" :to="`/my/groups/${ group.id }`">
 					<div :class="$style.name">{{ group.name }}</div>
-					<MkAvatars :userIds="group.userIds"/>
+					<MkAvatars :class="$style.avatars" :userIds="group.userIds"/>
 				</MkA>
 			</MkPagination>
 		</div>

 		<div v-else-if="tab === 'joined'">
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="joinedPagination">
-				<MkA v-for="group in items" :key="group.id" :class="$style.group" class="_panel" :to="`/my/groups/${ group.id }`">
-					<div :class="$style.name">{{ group.name }}</div>
-					<MkAvatars :userIds="group.userIds"/>
+				<div v-for="group in items" :class="$style.group" class="_panel">
+					<MkA :key="group.id" :class="$style.groupTop" :to="`/my/groups/${ group.id }`">
+						<div :class="$style.name">{{ group.name }}</div>
+						<MkAvatars :class="$style.avatars" :userIds="group.userIds"/>
+					</MkA>
 					<div :class="$style.actions">
 						<MkButton rounded danger @click="leave(group)">{{ i18n.ts.leaveGroup }}</MkButton>
 					</div>
-				</MkA>
+				</div>
 			</MkPagination>
 		</div>

@ -27,7 +29,7 @@
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="invitationPagination">
 				<MkA v-for="invitation in items" :key="invitation.id" :class="$style.group" class="_panel">
 					<div :class="$style.name">{{ invitation.group.name }}</div>
-					<MkAvatars :userIds="invitation.group.userIds"/>
+					<MkAvatars :class="$style.avatars" :userIds="invitation.group.userIds"/>
 					<div :class="$style.actions">
 						<MkButton primary rounded inline :class="$style.invitesButton" @click="acceptInvite(invitation)"><i class="ti ti-check"></i> {{ i18n.ts.accept }}</MkButton>
 						<MkButton rounded inline :class="$style.invitesButton" @click="rejectInvite(invitation)"><i class="ti ti-x"></i> {{ i18n.ts.reject }}</MkButton>
@ -140,7 +142,10 @@ definePageMetadata({

 <style lang="scss" module>
 .actions {
+	display: flex;
+	justify-content: flex-end;
 	margin-top: 10px;
+	padding: 0 24px 16px;
 }

 .add {
@ -149,7 +154,6 @@ definePageMetadata({

 .group {
 	display: block;
-	padding: 16px;
 	border: solid 1px var(--divider);
 	border-radius: 6px;

@ -159,8 +163,21 @@ definePageMetadata({
 	}
 }

+.groupTop {
+	&:hover {
+		text-decoration: none;
+	}
+}
+
 .name {
 	margin-bottom: 12px;
+	border-bottom: solid 1px var(--divider);
+	padding: 16px 24px;
+	font-weight: bold;
+}
+
+.avatars {
+	padding: 8px 24px 16px;
 }

 .invitesButton {