BUGFIX: Wrong size of table cell in Import Save Comparison UI (#1659)

This commit is contained in:
catloversg 2024-09-21 11:02:57 +07:00 committed by GitHub
parent 70e16bf349
commit ade92ed297
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -48,6 +48,10 @@ const useStyles = makeStyles()((theme: Theme) => ({
"& .MuiTable-root": {
"& .MuiTableCell-root": {
borderBottom: `1px solid ${Settings.theme.welllight}`,
width: "30%",
},
"& .MuiTableCell-root:last-child": {
width: "10%",
},
"& .MuiTableHead-root .MuiTableRow-root": {
@ -94,6 +98,7 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
const [currentData, setCurrentData] = useState<ImportData | undefined>();
const [isImportModalOpen, { on: openImportModal, off: closeImportModal }] = useBoolean(false);
const [isSkillsExpanded, { toggle: toggleSkillsExpand }] = useBoolean(true);
const [isOthersExpanded, { toggle: toggleOthersExpand }] = useBoolean(true);
const [headback, setHeadback] = useState(false);
const handleGoBack = (): void => {
@ -165,7 +170,7 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
<TableCell></TableCell>
<TableCell>Current Game</TableCell>
<TableCell>Being Imported</TableCell>
<TableCell width={56}></TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
@ -230,6 +235,7 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
)}
</TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={4}>
<IconButton aria-label="expand row" size="small" onClick={toggleSkillsExpand}>
@ -252,7 +258,7 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
<TableCell className={classes.skillTitle}>{skill}</TableCell>
<TableCell>{formatNumberNoSuffix(currentSkill, 0)}</TableCell>
<TableCell>{formatNumberNoSuffix(importSkill, 0)}</TableCell>
<TableCell width={56}>
<TableCell>
{currentSkill !== importSkill && <ComparisonIcon isBetter={importSkill > currentSkill} />}
</TableCell>
</TableRow>
@ -268,6 +274,19 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
</TableRow>
<TableRow>{/* empty row to keep even/odd coloring */}</TableRow>
<TableRow>
<TableCell colSpan={4}>
<IconButton aria-label="expand row" size="small" onClick={toggleOthersExpand}>
{isOthersExpanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
Others
</TableCell>
</TableRow>
<TableRow>
<TableCell colSpan={4} padding="none">
<Collapse in={isOthersExpanded}>
<Table>
<TableBody>
<TableRow>
<TableCell>Augmentations</TableCell>
<TableCell>{currentData.playerData?.augmentations}</TableCell>
@ -276,7 +295,8 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
{importData.playerData?.augmentations !== currentData.playerData?.augmentations && (
<ComparisonIcon
isBetter={
(importData.playerData?.augmentations ?? 0) > (currentData.playerData?.augmentations ?? 0)
(importData.playerData?.augmentations ?? 0) >
(currentData.playerData?.augmentations ?? 0)
}
/>
)}
@ -290,7 +310,9 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
<TableCell>
{importData.playerData?.factions !== currentData.playerData?.factions && (
<ComparisonIcon
isBetter={(importData.playerData?.factions ?? 0) > (currentData.playerData?.factions ?? 0)}
isBetter={
(importData.playerData?.factions ?? 0) > (currentData.playerData?.factions ?? 0)
}
/>
)}
</TableCell>
@ -302,7 +324,9 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
<TableCell>
{importData.playerData?.achievements !== currentData.playerData?.achievements && (
<ComparisonIcon
isBetter={(importData.playerData?.achievements ?? 0) > (currentData.playerData?.achievements ?? 0)}
isBetter={
(importData.playerData?.achievements ?? 0) > (currentData.playerData?.achievements ?? 0)
}
/>
)}
</TableCell>
@ -317,7 +341,9 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
<TableCell>
{importData.playerData?.sourceFiles !== currentData.playerData?.sourceFiles && (
<ComparisonIcon
isBetter={(importData.playerData?.sourceFiles ?? 0) > (currentData.playerData?.sourceFiles ?? 0)}
isBetter={
(importData.playerData?.sourceFiles ?? 0) > (currentData.playerData?.sourceFiles ?? 0)
}
/>
)}
</TableCell>
@ -332,7 +358,9 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
<TableCell>
{importData.playerData?.exploits !== currentData.playerData?.exploits && (
<ComparisonIcon
isBetter={(importData.playerData?.exploits ?? 0) > (currentData.playerData?.exploits ?? 0)}
isBetter={
(importData.playerData?.exploits ?? 0) > (currentData.playerData?.exploits ?? 0)
}
/>
)}
</TableCell>
@ -352,6 +380,11 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
</TableRow>
</TableBody>
</Table>
</Collapse>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>