Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-18 12:11:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(frontend): column header visibility of tables in mobile mui-x v7

Browse Source
This commit is contained in:
Reckless_Satoshi 2024-04-21 22:16:35 +01:00
parent ee9b7147e9
commit f0385f8040
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
3 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/BookTable/index.tsx
View File

@ -39,31 +39,13 @@ import RobotAvatar from '../RobotAvatar';
import { Fullscreen, FullscreenExit, Refresh } from '@mui/icons-material';
import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
import { FederationContext, type UseFederationStoreType } from '../../contexts/FederationContext';
import headerStyleFix from '../DataGrid/HeaderFix';
const ClickThroughDataGrid = styled(DataGrid)({
'& .MuiDataGrid-overlayWrapperInner': {
pointerEvents: 'none',
},
// Temporary fix for regression for hidden column labels on Mobile:
// https://github.com/mui/mui-x/issues/9776#issuecomment-1648306844
'@media (hover: none)': {
'&& .MuiDataGrid-menuIcon': {
width: 0,
visibility: 'hidden',
},
'&& .MuiDataGrid-sortIcon': {
width: 0,
visibility: 'hidden',
},
},
'&& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-menuIcon': {
width: 'auto',
visibility: 'visible',
},
'&& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-sortIcon': {
width: 'auto',
visibility: 'visible',
},
...{ headerStyleFix },
});
const premiumColor = function (baseColor: string, accentColor: string, point: number): string {

24
frontend/src/components/DataGrid/HeaderFix.ts Normal file
View File

@ -0,0 +1,24 @@
// Temporary fix for regression for hidden column labels on Mobile:
// https://github.com/mui/mui-x/issues/9776#issuecomment-1648306844
const headerStyleFix = {
'@media (hover: none)': {
'&& .MuiDataGrid-menuIcon': {
width: 0,
visibility: 'hidden',
},
'&& .MuiDataGrid-sortIcon': {
width: 0,
visibility: 'hidden',
},
},
'&& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-menuIcon': {
width: 'auto',
visibility: 'visible',
},
'&& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-sortIcon': {
width: 'auto',
visibility: 'visible',
},
};
export default headerStyleFix;

2
frontend/src/components/FederationTable/index.tsx
View File

@ -7,6 +7,7 @@ import RobotAvatar from '../RobotAvatar';
import { Link, LinkOff } from '@mui/icons-material';
import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
import { type UseFederationStoreType, FederationContext } from '../../contexts/FederationContext';
import headerStyleFix from '../DataGrid/HeaderFix';
interface FederationTableProps {
maxWidth?: number;
@ -225,6 +226,7 @@ const FederationTable = ({
}
>
<DataGrid
sx={headerStyleFix}
localeText={localeText}
rowHeight={3.714 * theme.typography.fontSize}
headerHeight={3.25 * theme.typography.fontSize}