From 1b14667c9fd2755c01af5e9694af194c8f33d3f8 Mon Sep 17 00:00:00 2001 From: symysak Date: Sun, 30 Apr 2023 17:14:00 +0900 Subject: [PATCH 01/17] add close button to snackBar --- src/index.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index b492253..37bc843 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,17 +2,27 @@ import React from 'react' import './index.css' import App from './App' import reportWebVitals from './reportWebVitals' -import { SnackbarProvider } from 'notistack' +import { SnackbarProvider, closeSnackbar } from 'notistack' import { Provider } from 'react-redux' import { createRoot } from 'react-dom/client' import store from './store' +import { IconButton } from '@mui/material' +import CloseIcon from '@mui/icons-material/Close'; const container = document.getElementById('root') if (container) { const root = createRoot(container) root.render( - + ( + closeSnackbar(snackbarId)}> + + + )} + > From 1b1a3bc0a310c005ac2ce800538c156e596206e7 Mon Sep 17 00:00:00 2001 From: symysak Date: Sun, 30 Apr 2023 17:14:41 +0900 Subject: [PATCH 02/17] fix dashboard responsive problem --- src/pages/Dashboard/Dashboard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx index d6d74ac..016152d 100644 --- a/src/pages/Dashboard/Dashboard.tsx +++ b/src/pages/Dashboard/Dashboard.tsx @@ -110,7 +110,7 @@ export default function Dashboard() { return ( - + {restfulApiConfig.enableMoney && data?.group?.is_expired && !data?.info?.length && ( @@ -188,7 +188,7 @@ export default function Dashboard() { ))} - + {restfulApiConfig.enableMoney && ( From e863456f8d6156868828146cd48150a2d4bca678 Mon Sep 17 00:00:00 2001 From: symysak Date: Sun, 30 Apr 2023 17:15:07 +0900 Subject: [PATCH 03/17] change support page UI --- .../Support/SupportDetail/SupportDetail.tsx | 65 +++++++++---------- src/style.ts | 13 ++-- 2 files changed, 39 insertions(+), 39 deletions(-) diff --git a/src/pages/Support/SupportDetail/SupportDetail.tsx b/src/pages/Support/SupportDetail/SupportDetail.tsx index 72f7099..9f5eec4 100644 --- a/src/pages/Support/SupportDetail/SupportDetail.tsx +++ b/src/pages/Support/SupportDetail/SupportDetail.tsx @@ -16,6 +16,7 @@ import { StyledPaper1, StyledPaperMessage, } from '../../../style' +import DashboardComponent from '../../../components/Dashboard/Dashboard' export default function SupportDetail() { let id: string | undefined @@ -162,40 +163,38 @@ export default function SupportDetail() { return (
- {id === undefined &&

IDの値が取得できません

} - {baseChatData === undefined &&

データがありません

} + {id === undefined &&

IDの値が取得できません

} + {baseChatData === undefined &&

データがありません

} {baseChatData != null && ( - - - - このチャットはMarkdownに準拠しております。 - {baseChatData.map((chat, index) => - !chat.admin ? ( - - ) : ( - - ) - )} -
- - - - + + + このチャットはMarkdownに準拠しております。 + {baseChatData.map((chat, index) => + !chat.admin ? ( + + ) : ( + + ) + )} +
+ + + )}
) diff --git a/src/style.ts b/src/style.ts index c8daaa1..8349b26 100644 --- a/src/style.ts +++ b/src/style.ts @@ -14,6 +14,7 @@ import { TextField, Typography, } from '@mui/material' +import { grey } from '@mui/material/colors' //search export const StyledSearchInput = styled(InputBase)(({ theme }) => ({ @@ -52,12 +53,12 @@ export const StyledPaper1 = styled(Paper)(() => ({ })) export const StyledPaperMessage = styled(Paper)(() => ({ - width: 'calc( 100% - 20px )', - margin: 10, + width: "100%", + //margin: 10, backgroundColor: 'rgb(113, 147, 193)', - // overflowX: 'hidden', + //overflowX: 'hidden', overflowY: 'scroll', - height: 'calc( 100% - 80px )', + height: "calc(100vh - 305px)", })) export const StyledBlueMessage = styled('div')(() => ({ @@ -101,7 +102,7 @@ export const StyledOrangeMessage = styled('div')(() => ({ marginBottom: '10px', padding: '10px', backgroundColor: '#85e249', - width: '60%', + width: '80%', textAlign: 'left', font: "400 .9em 'Open Sans', sans-serif", border: '1px solid #85e249', @@ -152,7 +153,7 @@ export const StyledTable2 = styled(Table)(() => ({ export const StyledWrapForm = styled('form')(({ theme }) => ({ display: 'flex', justifyContent: 'center', - width: '95%', + width: "100%", margin: `${theme.spacing(0)} auto`, height: '150px', })) From 59e69c407950e6697cd20ac15ef96948ff42d6bb Mon Sep 17 00:00:00 2001 From: symysak Date: Sun, 30 Apr 2023 17:17:01 +0900 Subject: [PATCH 04/17] fix dashboard component behavior and style --- src/components/Dashboard/Dashboard.tsx | 34 +++++++++++++++++++++----- 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx index fc504de..8ee9795 100644 --- a/src/components/Dashboard/Dashboard.tsx +++ b/src/components/Dashboard/Dashboard.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect } from 'react' import { ThemeProvider, CssBaseline, @@ -43,6 +43,8 @@ import { clearInfos, clearTemplates } from '../../store/action/Actions' import DashboardIcon from '@mui/icons-material/Dashboard' import { restfulApiConfig } from '../../api/Config' import { muiColorTheme } from '../Theme' +import useMediaQuery from '@mui/material/useMediaQuery'; +import { useTheme } from '@emotion/react' const drawerWidth = 240 @@ -62,9 +64,11 @@ const closedMixin = (theme: Theme): CSSObject => ({ }), overflowX: 'hidden', width: `calc(${theme.spacing(7)} + 1px)`, - [theme.breakpoints.up('sm')]: { - width: `calc(${theme.spacing(9)} + 1px)`, - }, + // 大きい画面の時に、drawerを閉じた時に、アイコンが中心にならないため、コメントアウト + // width: `calc(${theme.spacing(7)} + 1px)`, + // [theme.breakpoints.up('sm')]: { + // width: `calc(${theme.spacing(9)} + 1px)`, + // }, }) interface AppBarProps extends MuiAppBarProps { @@ -106,10 +110,28 @@ const Drawer = styled(MuiDrawer, { }), })) -export default function Dashboard(props: any) { + +interface DashboardProps { + title?: string + children?: React.ReactNode +} +export default function Dashboard(props: DashboardProps) { const navigate = useNavigate() // Menu Bar - const [open, setOpen] = React.useState(true) + // useMediaQuery("(min-width:600px)")でmobileかどうかを判定 + const [open, setOpen] = React.useState(useMediaQuery("(min-width:600px)")) + + // 画面サイズが変わったときにopenを変更 + const isMobile = !useMediaQuery("(min-width:600px)"); + useEffect(() => { + if(isMobile){ + setOpen(false) + } + else{ + setOpen(true) + } + }, [isMobile]) + const handleDrawerOpen = () => { setOpen(true) } From c0268f90f2680e78493e3feee3607ad83ab51379 Mon Sep 17 00:00:00 2001 From: symysak Date: Sun, 30 Apr 2023 17:25:46 +0900 Subject: [PATCH 05/17] Delete unused imports --- src/components/Dashboard/Dashboard.tsx | 1 - src/pages/Support/SupportDetail/SupportDetail.tsx | 2 -- 2 files changed, 3 deletions(-) diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx index 8ee9795..654f644 100644 --- a/src/components/Dashboard/Dashboard.tsx +++ b/src/components/Dashboard/Dashboard.tsx @@ -44,7 +44,6 @@ import DashboardIcon from '@mui/icons-material/Dashboard' import { restfulApiConfig } from '../../api/Config' import { muiColorTheme } from '../Theme' import useMediaQuery from '@mui/material/useMediaQuery'; -import { useTheme } from '@emotion/react' const drawerWidth = 240 diff --git a/src/pages/Support/SupportDetail/SupportDetail.tsx b/src/pages/Support/SupportDetail/SupportDetail.tsx index 9f5eec4..c84725e 100644 --- a/src/pages/Support/SupportDetail/SupportDetail.tsx +++ b/src/pages/Support/SupportDetail/SupportDetail.tsx @@ -12,8 +12,6 @@ import Cookies from 'js-cookie' import { clearInfos, clearTemplates } from '../../../store/action/Actions' import { Get } from '../../../api/Info' import { - StyledDivContainer, - StyledPaper1, StyledPaperMessage, } from '../../../style' import DashboardComponent from '../../../components/Dashboard/Dashboard' From 07c088000bb95e99cd7d06b42e999f62667c1704 Mon Sep 17 00:00:00 2001 From: symysak Date: Sun, 30 Apr 2023 17:26:24 +0900 Subject: [PATCH 06/17] Delete unused imports --- src/style.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/style.ts b/src/style.ts index 8349b26..e4ccd84 100644 --- a/src/style.ts +++ b/src/style.ts @@ -14,7 +14,6 @@ import { TextField, Typography, } from '@mui/material' -import { grey } from '@mui/material/colors' //search export const StyledSearchInput = styled(InputBase)(({ theme }) => ({ From 194ad9f7f8d0fd030cc4014de46079b2253b7475 Mon Sep 17 00:00:00 2001 From: symysak Date: Sun, 30 Apr 2023 19:59:14 +0900 Subject: [PATCH 07/17] add sx props to dsbd component --- src/components/Dashboard/Dashboard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx index 654f644..80ca816 100644 --- a/src/components/Dashboard/Dashboard.tsx +++ b/src/components/Dashboard/Dashboard.tsx @@ -113,6 +113,7 @@ const Drawer = styled(MuiDrawer, { interface DashboardProps { title?: string children?: React.ReactNode + sx?: CSSObject } export default function Dashboard(props: DashboardProps) { const navigate = useNavigate() @@ -254,7 +255,7 @@ export default function Dashboard(props: DashboardProps) { - + Date: Sun, 30 Apr 2023 19:59:37 +0900 Subject: [PATCH 08/17] change chat page UI --- src/pages/Support/SupportDetail/Message.tsx | 30 +++++++++------- .../Support/SupportDetail/SupportDetail.tsx | 2 +- src/pages/Support/SupportDetail/TextInput.tsx | 12 +++++++ src/pages/Support/SupportDetail/styles.ts | 26 ++++++++++---- src/style.ts | 35 ++++++++++++------- 5 files changed, 74 insertions(+), 31 deletions(-) diff --git a/src/pages/Support/SupportDetail/Message.tsx b/src/pages/Support/SupportDetail/Message.tsx index dbe0b55..2b9c336 100644 --- a/src/pages/Support/SupportDetail/Message.tsx +++ b/src/pages/Support/SupportDetail/Message.tsx @@ -1,8 +1,9 @@ import React, { useRef } from 'react' import remarkGfm from 'remark-gfm' import { - StyledMessageTimeStampRight, - StyledReactMarkdownMessageContent, + StyledMessageTimeStampLeft, + StyledReactMarkdownMessageContentRight, + StyledReactMarkdownMessageContentLeft, } from './styles' import { Avatar, Box } from '@mui/material' import { StyledBlueMessage, StyledOrangeMessage } from '../../../style' @@ -19,23 +20,28 @@ export const MessageLeft = (props: { const divRef = useRef(null) return ( - - {displayName} + + + {displayName} +
-
- {timestamp} + {timestamp} ) @@ -58,19 +64,19 @@ export const MessageRight = (props: { ref={divRef} style={{ borderRadius: 15, - width: '50vw', + width: '60vw', }} > -
- - ({displayName}) {timestamp} - + + ({displayName})
{timestamp} + ) diff --git a/src/pages/Support/SupportDetail/SupportDetail.tsx b/src/pages/Support/SupportDetail/SupportDetail.tsx index c84725e..139fe04 100644 --- a/src/pages/Support/SupportDetail/SupportDetail.tsx +++ b/src/pages/Support/SupportDetail/SupportDetail.tsx @@ -164,7 +164,7 @@ export default function SupportDetail() { {id === undefined &&

IDの値が取得できません

} {baseChatData === undefined &&

データがありません

} {baseChatData != null && ( - + このチャットはMarkdownに準拠しております。 {baseChatData.map((chat, index) => diff --git a/src/pages/Support/SupportDetail/TextInput.tsx b/src/pages/Support/SupportDetail/TextInput.tsx index 9277c8d..70e2d10 100644 --- a/src/pages/Support/SupportDetail/TextInput.tsx +++ b/src/pages/Support/SupportDetail/TextInput.tsx @@ -20,6 +20,14 @@ export const TextInput = (props: { //margin="normal" multiline rows={5} + + // TextFieldの枠線の色を変更 + // 無理やり変更する方法しかないみたいなので、したみたいな実装になっている + sx={{ + "& .MuiOutlinedInput-root": { + "& > fieldset": { borderColor: "black" }, + }, + }} onChange={(event) => { setInputChat(event.target.value) }} @@ -27,6 +35,10 @@ export const TextInput = (props: {