Merge pull request #180 from symysak/develop

Fix style and UI

src/components/Dashboard/Dashboard.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import {
   ThemeProvider,
   CssBaseline,
@@ -43,6 +43,7 @@ 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';
 
 const drawerWidth = 240
 
@@ -62,9 +63,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 +109,34 @@ const Drawer = styled(MuiDrawer, {
   }),
 }))
 
-export default function Dashboard(props: any) {
+
+interface DashboardProps {
+  title?: string
+  children?: React.ReactNode
+  sx?: CSSObject
+  forceDrawerClosed?: boolean
+}
+export default function Dashboard(props: DashboardProps) {
   const navigate = useNavigate()
   // Menu Bar
-  const [open, setOpen] = React.useState(true)
+  // useMediaQuery("(min-width:800px)")でmobileかどうかを判定
+  const [open, setOpen] = React.useState(useMediaQuery("(min-width:600px)"))
+
+  // 画面サイズが変わったときにopenを変更
+  // closeが強制されているときは、openをfalseにする
+  const isMobile = !useMediaQuery("(min-width:600px)");
+  useEffect(() => {
+    if(props.forceDrawerClosed){
+      setOpen(false)
+    }
+    else if(isMobile){
+      setOpen(false)
+    }
+    else{
+      setOpen(true)
+    }
+  }, [isMobile, props.forceDrawerClosed])
+
   const handleDrawerOpen = () => {
     setOpen(true)
   }
@@ -233,14 +260,13 @@ export default function Dashboard(props: any) {
             <Divider />
           </List>
         </Drawer>
-        <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+        <Box component="main" sx={{ flexGrow: 1, p: 3, ...props.sx}}>
           <StyledDivDashboardToolBarIcon />
 
           <StyledTypographyPageTitle
             // component="h2"
             variant="h5"
             color="inherit"
-            noWrap
           >
             {props.title}
           </StyledTypographyPageTitle>

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(
     <Provider store={store}>
-      <SnackbarProvider maxSnack={3}>
+      <SnackbarProvider
+        maxSnack={3}
+        autoHideDuration={5000}
+        action={(snackbarId) => (
+          <IconButton onClick={() => closeSnackbar(snackbarId)}>
+            <CloseIcon />
+          </IconButton>
+        )}
+      >
         <App />
       </SnackbarProvider>
     </Provider>

src/pages/Dashboard/Dashboard.tsx

@@ -18,6 +18,8 @@ import Cookies from 'js-cookie'
 import { useNavigate } from 'react-router-dom'
 import { restfulApiConfig } from '../../api/Config'
 import { StyledCardRoot3, StyledTypographyTitle } from '../../style'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 
 export default function Dashboard() {
   const [data, setData] = React.useState<InfoData>()
@@ -110,7 +112,7 @@ export default function Dashboard() {
   return (
     <DashboardComponent title="Dashboard">
       <Grid container spacing={3}>
-        <Grid item xs={8}>
+        <Grid item xs={12} md={8}>
           {restfulApiConfig.enableMoney &&
             data?.group?.is_expired &&
             !data?.info?.length && (
@@ -177,7 +179,12 @@ export default function Dashboard() {
                   {notice.fault && <Chip label="障害" color="secondary" />}
                 </StyledTypographyTitle>
                 <br />
-                {notice.data}
+                <ReactMarkdown
+                  skipHtml={true}
+                  remarkPlugins={[remarkGfm]}
+                >
+                  {notice.data}
+                </ReactMarkdown>
               </CardContent>
               <CardActions>
                 {/*<Button color="secondary" size="small" variant="outlined"*/}
@@ -188,7 +195,7 @@ export default function Dashboard() {
             </StyledCardRoot3>
           ))}
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={12} md={4}>
           {restfulApiConfig.enableMoney && (
             <StyledCardRoot3 key={'student'}>
               <CardContent>

src/pages/Support/Support.tsx

@@ -176,7 +176,7 @@ export default function Support() {
                 {ticket.solved && (
                   <Button
                     size="small"
-                    color="primary"
+                    color="secondary"
                     onClick={() => clickSolvedStatus(ticket.id, false)}
                   >
                     未解決

src/pages/Support/SupportAddDialog.tsx

@@ -10,13 +10,16 @@ import {
   Grid,
   Radio,
   RadioGroup,
+  Typography,
 } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import { DefaultSupportAddData } from '../../interface'
 import { useSnackbar } from 'notistack'
 import { Post } from '../../api/Support'
 import { Get } from '../../api/Info'
 import { StyledTextFieldVeryLong } from '../../style'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 
 export function SupportAddDialog(props: { groupEnable: boolean }) {
   const { groupEnable } = props
@@ -95,6 +98,10 @@ export function SupportAddDialog(props: { groupEnable: boolean }) {
                 />
               </RadioGroup>
               <br />
+              <Typography variant="inherit">
+                このチャットはMarkdownに準拠しております。
+              </Typography>
+              <br />
               <StyledTextFieldVeryLong
                 id="title"
                 label="Title"
@@ -119,6 +126,16 @@ export function SupportAddDialog(props: { groupEnable: boolean }) {
                 variant="outlined"
               />
             </Grid>
+            <Grid item xs={12}>
+              <h3>内容のプレビュー ↓</h3>
+              <ReactMarkdown
+                skipHtml={true}
+                remarkPlugins={[remarkGfm]}
+              >
+                {data.data}
+              </ReactMarkdown>
+              内容のプレビュー ↑
+            </Grid>
           </Grid>
         </DialogContent>
         <DialogActions>

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,29 @@ export const MessageLeft = (props: {
   const divRef = useRef<HTMLDivElement>(null)
 
   return (
-    <Box sx={{ display: 'flex' }}>
-      <Avatar sx={{ bgcolor: deepOrange[500] }}>{displayName}</Avatar>
+    <Box sx={{ display: 'flex', paddingLeft: "6px" }}>
+      <Avatar sx={{ 
+        bgcolor: deepOrange[500],
+        fontSize: "medium",
+      }}>
+        {displayName}
+      </Avatar>
       <StyledBlueMessage>
         <div
           ref={divRef}
           style={{
             borderRadius: 15,
-            width: '50vw',
+            minWidth: "50vw",
+            maxWidth: "70vw",
           }}
         >
-          <StyledReactMarkdownMessageContent
+          <StyledReactMarkdownMessageContentLeft
             children={message}
             skipHtml={true}
             remarkPlugins={[remarkGfm]}
           />
         </div>
-        <StyledMessageTimeStampRight>{timestamp}</StyledMessageTimeStampRight>
+        <StyledMessageTimeStampLeft>{timestamp}</StyledMessageTimeStampLeft>
       </StyledBlueMessage>
     </Box>
   )
@@ -58,19 +65,20 @@ export const MessageRight = (props: {
           ref={divRef}
           style={{
             borderRadius: 15,
-            width: '50vw',
+            minWidth: "50vw",
+            maxWidth: "70vw",
           }}
         >
-          <StyledReactMarkdownMessageContent
+          <StyledReactMarkdownMessageContentRight
             children={message}
             skipHtml={true}
             remarkPlugins={[remarkGfm]}
             // escapeHtml={false}
           />
         </div>
-        <StyledMessageTimeStampRight>
-          ({displayName}) {timestamp}
-        </StyledMessageTimeStampRight>
+        <StyledMessageTimeStampLeft>
+          ({displayName}) <br/> {timestamp}
+        </StyledMessageTimeStampLeft>
       </StyledOrangeMessage>
     </Box>
   )

src/pages/Support/SupportDetail/SupportDetail.tsx

@@ -12,10 +12,9 @@ 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'
 
 export default function SupportDetail() {
   let id: string | undefined
@@ -162,40 +161,38 @@ export default function SupportDetail() {
 
   return (
     <div>
-      {id === undefined && <h2>IDの値が取得できません</h2>}
-      {baseChatData === undefined && <h2>データがありません</h2>}
+      {id === undefined && <DashboardComponent><h2>IDの値が取得できません</h2></DashboardComponent>}
+      {baseChatData === undefined && <DashboardComponent><h2>データがありません</h2></DashboardComponent>}
       {baseChatData != null && (
-        <StyledDivContainer>
-          <StyledPaper1>
-            <StyledPaperMessage id="style-1">
-              <b>このチャットはMarkdownに準拠しております。</b>
-              {baseChatData.map((chat, index) =>
-                !chat.admin ? (
-                  <MessageRight
-                    key={index}
-                    message={chat.data}
-                    timestamp={chat.created_at}
-                    displayName={getUser(chat.user_id)}
-                  />
-                ) : (
-                  <MessageLeft
-                    key={index}
-                    message={chat.data}
-                    timestamp={chat.created_at}
-                    displayName={'運営'}
-                  />
-                )
-              )}
-              <div ref={ref} />
-            </StyledPaperMessage>
-            <TextInput
-              key={'textInput'}
-              inputChat={inputChatData}
-              setInputChat={setInputChatData}
-              setSendPush={setSendPush}
-            />
-          </StyledPaper1>
-        </StyledDivContainer>
+        <DashboardComponent title={"ID: "+ tickets?.id + " " + tickets?.title} sx={{ padding: "2px" }} forceDrawerClosed={true}>
+          <StyledPaperMessage id="style-1">
+            <b>このチャットはMarkdownに準拠しております。</b>
+            {baseChatData.map((chat, index) =>
+              !chat.admin ? (
+                <MessageRight
+                  key={index}
+                  message={chat.data}
+                  timestamp={chat.created_at}
+                  displayName={getUser(chat.user_id)}
+                />
+              ) : (
+                <MessageLeft
+                  key={index}
+                  message={chat.data}
+                  timestamp={chat.created_at}
+                  displayName={'運営'}
+                />
+              )
+            )}
+            <div ref={ref} />
+          </StyledPaperMessage>
+          <TextInput
+            key={'textInput'}
+            inputChat={inputChatData}
+            setInputChat={setInputChatData}
+            setSendPush={setSendPush}
+          />
+        </DashboardComponent>
       )}
     </div>
   )

src/pages/Support/SupportDetail/TextInput.tsx

@@ -20,13 +20,25 @@ export const TextInput = (props: {
           //margin="normal"
           multiline
           rows={5}
+
+          // TextFieldの枠線の色を変更
+          // 無理やり変更する方法しかないみたいなので、したみたいな実装になっている
+          sx={{
+            "& .MuiOutlinedInput-root": {
+              "& > fieldset": { borderColor: "black" },
+            },
+          }}
           onChange={(event) => {
             setInputChat(event.target.value)
           }}
         />
         <Button
           variant="contained"
           color="primary"
+          style={{
+            border: "3px solid #000000",
+            borderRadius: "10px",
+          }}
           onClick={() => setSendPush(true)}
         >
           <SendIcon />