Skip to content

Commit acf40d8

Browse files
nakatermnakaterm
committed
HumanListItem 周りを修正
1 parent 9a26071 commit acf40d8

File tree

8 files changed

+86
-155
lines changed

8 files changed

+86
-155
lines changed

‎web/app/chat/layout.tsx‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,19 @@
1-
import { Box } from "@mui/material";
21
import BottomBar from "~/components/BottomBar";
32
import Header from "~/components/Header";
3+
import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
44

55
export default function ChatPageLayout({
66
children,
77
}: {
88
children: React.ReactNode;
99
}) {
1010
return (
11-
<>
11+
<NavigateByAuthState type="toLoginForUnauthenticated">
1212
<Header title="チャット/Chat" />
13-
<Box
14-
sx={{
15-
position: "absolute", // TODO: absolute 指定しない
16-
top: {
17-
xs: "56px",
18-
sm: "64px",
19-
},
20-
bottom: "56px",
21-
left: 0,
22-
right: 0,
23-
overflowY: "auto",
24-
}}
25-
>
13+
<div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
2614
{children}
27-
</Box>
15+
</div>
2816
<BottomBar activeTab="2_chat" />
29-
</>
17+
</NavigateByAuthState>
3018
);
3119
}

‎web/app/chat/page.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { useRoomsOverview } from "~/api/chat/hooks";
77
import RoomList from "~/components/chat/RoomList";
88
import { RoomWindow } from "~/components/chat/RoomWindow";
99
import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
10-
import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
1110

1211
function ChatListContent() {
1312
const searchParams = useSearchParams();
@@ -32,10 +31,8 @@ function ChatListContent() {
3231

3332
export default function Chat() {
3433
return (
35-
<NavigateByAuthState type="toLoginForUnauthenticated">
36-
<Suspense fallback={<FullScreenCircularProgress />}>
37-
<ChatListContent />
38-
</Suspense>
39-
</NavigateByAuthState>
34+
<Suspense fallback={<FullScreenCircularProgress />}>
35+
<ChatListContent />
36+
</Suspense>
4037
);
4138
}

‎web/app/edit/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function EditPageLayout({
99
return (
1010
<NavigateByAuthState type="toLoginForUnauthenticated">
1111
<Header title="編集/Edit" />
12-
<div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
12+
<div className="absolute top-14 right-0 left-0 overflow-y-auto sm:top-16">
1313
{children}
1414
</div>
1515
</NavigateByAuthState>

‎web/app/friends/layout.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Box } from "@mui/material";
21
import BottomBar from "~/components/BottomBar";
32
import Header from "~/components/Header";
43

@@ -10,21 +9,9 @@ export default function FriendsPageLayout({
109
return (
1110
<>
1211
<Header title="フレンド/Friends" />
13-
<Box
14-
sx={{
15-
position: "absolute", // TODO: absolute 指定しない
16-
top: {
17-
xs: "56px",
18-
sm: "64px",
19-
},
20-
bottom: "56px",
21-
left: 0,
22-
right: 0,
23-
overflowY: "auto",
24-
}}
25-
>
12+
<div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
2613
{children}
27-
</Box>
14+
</div>
2815
<BottomBar activeTab="1_friends" />
2916
</>
3017
);

‎web/app/friends/page.tsx‎

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { Box, Tab, Tabs } from "@mui/material";
3+
import { Tab, Tabs } from "@mui/material";
44
import { useState } from "react";
55
import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
66
import Matchings from "~/components/match/matching";
@@ -15,34 +15,17 @@ export default function Friends() {
1515

1616
return (
1717
<NavigateByAuthState type="toLoginForUnauthenticated">
18-
<Box
19-
sx={{
20-
width: "100%",
21-
borderBottom: 1,
22-
borderColor: "divider",
23-
position: "fixed",
24-
backgroundColor: "white",
25-
zIndex: 500,
26-
}}
27-
>
18+
<div className="fixed z-50 w-full border-gray-200 border-b-[1px] bg-white">
2819
<Tabs value={open} onChange={handleChange} variant="fullWidth">
2920
<Tab label="マッチ中" {...a11yProps(0)} sx={{ width: "50%" }} />
3021
<Tab label="リクエスト" {...a11yProps(1)} sx={{ width: "50%" }} />
3122
</Tabs>
32-
</Box>
33-
<Box
34-
sx={{
35-
position: "absolute",
36-
top: "36px",
37-
left: 0,
38-
right: 0,
39-
overflowY: "auto",
40-
}}
41-
>
23+
</div>
24+
<div className="absolute top-9 right-0 left-0 overflow-y-auto">
4225
<TabPanel open={open}>
4326
{open === 0 ? <Matchings /> : open === 1 ? <Requests /> : null}
4427
</TabPanel>
45-
</Box>
28+
</div>
4629
</NavigateByAuthState>
4730
);
4831
}
@@ -60,7 +43,7 @@ function TabPanel({
6043
id={`tabpanel-${open}`}
6144
aria-labelledby={`tab-${open}`}
6245
>
63-
<Box>{children}</Box>
46+
<div>{children}</div>
6447
</div>
6548
);
6649
}

‎web/app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@
99
}
1010

1111
.cm-li-btn {
12-
@apply no-animation w-full justify-start rounded-none border-none bg-white px-4 py-2 text-left font-normal text-base hover:bg-zinc-100 focus:bg-zinc-300;
12+
@apply no-animation h-auto w-full justify-start rounded-none border-none bg-white px-4 py-4 text-left font-normal text-base shadow-none hover:bg-zinc-100 focus:bg-zinc-300;
1313
}

‎web/components/BottomBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default function BottomBar(props: Props) {
5858
<ChatIcon
5959
sx={{
6060
color:
61-
activeTab === "2_chat" ? "#primary.main" : "secondary.main",
61+
activeTab === "2_chat" ? "primary.main" : "secondary.main",
6262
}}
6363
/>
6464
}

‎web/components/human/humanListItem.tsx‎

Lines changed: 67 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
import {
2-
Box,
3-
ListItem,
4-
ListItemAvatar,
5-
Stack,
6-
Typography,
7-
} from "@mui/material";
81
import UserAvatar from "./avatar";
92

103
import Dots from "../common/Dots";
@@ -48,91 +41,30 @@ export function HumanListItem(props: HumanListItemProps) {
4841
};
4942

5043
return (
51-
<ListItem
52-
key={id.toString()}
53-
secondaryAction={
54-
<Stack direction="row" spacing={1}>
55-
{onAccept && (
56-
<button
57-
type="button"
58-
onClick={() => onAccept(id)}
59-
className="btn border-primary bg-white text-primary"
60-
>
61-
承認
62-
</button>
63-
)}
64-
{onReject && (
65-
<button
66-
type="button"
67-
onClick={() => onReject(id)}
68-
className="btn border-primary bg-white text-primary"
69-
>
70-
拒否
71-
</button>
72-
)}
73-
{onCancel && (
74-
<button
75-
type="button"
76-
onClick={() => onCancel(id)}
77-
className="btn border-primary bg-white text-primary"
78-
>
79-
キャンセル
80-
</button>
81-
)}
82-
</Stack>
83-
}
84-
sx={{
85-
pr: 2,
86-
}}
87-
>
88-
<button
89-
type="button"
90-
onClick={handleOpenClick}
91-
className="w-full items-center justify-start"
92-
>
93-
<ListItemAvatar sx={{ marginLeft: "8px" }}>
44+
<li key={id.toString()}>
45+
<button type="button" onClick={handleOpenClick} className="btn cm-li-btn">
46+
<div className="flex flex-1 gap-6">
9447
<UserAvatar pictureUrl={pictureUrl} width="50px" height="50px" />
95-
</ListItemAvatar>
96-
<Box
97-
sx={{
98-
display: "flex",
99-
flexDirection: "column",
100-
justifyContent: "center",
101-
marginLeft: "20px",
102-
}}
103-
>
104-
<Typography
105-
variant="body1"
106-
noWrap
107-
color={"text.primary"}
108-
sx={{ textAlign: "left" }}
109-
>
110-
{name}
111-
</Typography>
112-
{rollUpName && (
113-
<Typography
114-
variant="body2"
115-
color="text.secondary"
116-
noWrap
117-
sx={{
118-
minHeight: "1rem",
119-
maxWidth: "60vw",
120-
}}
121-
>
122-
{lastMessage}
123-
</Typography>
124-
)}
125-
</Box>
48+
<div className="flex flex-1 flex-col justify-center">
49+
<p className="whitespace-nowrap text-left text-lg">{name}</p>
50+
{rollUpName && (
51+
<p className="min-h-[1rem] max-w-[60vw] whitespace-nowrap text-left text-gray-500 text-sm">
52+
{lastMessage}
53+
</p>
54+
)}
55+
</div>
56+
</div>
57+
<ActionMenu
58+
onAccept={onAccept}
59+
onReject={onReject}
60+
onCancel={onCancel}
61+
id={id}
62+
/>
12663
</button>
64+
65+
{/* TODO: button の中に移す */}
12766
{hasDots && (
128-
<Box
129-
sx={{
130-
position: "absolute",
131-
right: "16px",
132-
top: "50%",
133-
transform: "translateY(-50%)", // コンポーネントの自身の高さの半分だけ上にずらす
134-
}}
135-
>
67+
<div className="absolute top-[50%] right-4 translate-y-[-50%]">
13668
<Dots
13769
actions={[
13870
{
@@ -154,8 +86,52 @@ export function HumanListItem(props: HumanListItemProps) {
15486
},
15587
]}
15688
/>
157-
</Box>
89+
</div>
90+
)}
91+
</li>
92+
);
93+
}
94+
95+
function ActionMenu({
96+
onAccept,
97+
onReject,
98+
onCancel,
99+
id,
100+
}: {
101+
onAccept?: (id: number) => void;
102+
onReject?: (id: number) => void;
103+
onCancel?: (id: number) => void;
104+
id: number;
105+
}) {
106+
return (
107+
<div className="flex items-center gap-2">
108+
{onAccept && (
109+
<button
110+
type="button"
111+
onClick={() => onAccept(id)}
112+
className="btn btn-sm btn-primary"
113+
>
114+
承認
115+
</button>
116+
)}
117+
{onReject && (
118+
<button
119+
type="button"
120+
onClick={() => onReject(id)}
121+
className="btn btn-sm btn-outline btn-primary"
122+
>
123+
拒否
124+
</button>
125+
)}
126+
{onCancel && (
127+
<button
128+
type="button"
129+
onClick={() => onCancel(id)}
130+
className="btn btn-sm btn-outline btn-primary"
131+
>
132+
キャンセル
133+
</button>
158134
)}
159-
</ListItem>
135+
</div>
160136
);
161137
}

0 commit comments

Comments
 (0)