mirror of
https://github.com/its-a-feature/Mythic
synced 2026-06-08 14:55:38 +00:00
updating datagrid
This commit is contained in:
@@ -447,6 +447,13 @@ const getModernThemeAdditions = (themeMode, preferences = operatorSettingDefault
|
||||
fontSize: "0.86rem",
|
||||
"--DataGrid-rowBorderColor": tableBorderSoft,
|
||||
"--DataGrid-containerBackground": tableHeaderColor,
|
||||
overflow: "hidden",
|
||||
"& .MuiDataGrid-main": {
|
||||
backgroundColor: backgroundPaper,
|
||||
},
|
||||
"& .MuiDataGrid-virtualScroller": {
|
||||
backgroundColor: backgroundPaper,
|
||||
},
|
||||
"& .MuiDataGrid-columnHeaders": {
|
||||
backgroundColor: tableHeaderColor,
|
||||
borderBottom: `1px solid ${borderColor}`,
|
||||
@@ -463,10 +470,16 @@ const getModernThemeAdditions = (themeMode, preferences = operatorSettingDefault
|
||||
letterSpacing: 0,
|
||||
textTransform: "uppercase",
|
||||
},
|
||||
"& .MuiDataGrid-columnSeparator": {
|
||||
color: tableBorderSoft,
|
||||
},
|
||||
"& .MuiDataGrid-cell": {
|
||||
borderBottom: `1px solid ${tableBorderSoft}`,
|
||||
outline: "none",
|
||||
},
|
||||
"& .MuiDataGrid-cell:focus, & .MuiDataGrid-cell:focus-within, & .MuiDataGrid-columnHeader:focus, & .MuiDataGrid-columnHeader:focus-within": {
|
||||
outline: "none",
|
||||
},
|
||||
"& .MuiDataGrid-row:nth-of-type(even)": {
|
||||
backgroundColor: tableRowStripeColor,
|
||||
},
|
||||
@@ -482,11 +495,29 @@ const getModernThemeAdditions = (themeMode, preferences = operatorSettingDefault
|
||||
"& .MuiDataGrid-footerContainer": {
|
||||
borderTop: `1px solid ${borderColor}`,
|
||||
minHeight: 34,
|
||||
color: textSecondary,
|
||||
},
|
||||
"& .MuiDataGrid-toolbarContainer": {
|
||||
borderBottom: `1px solid ${tableBorderSoft}`,
|
||||
minHeight: 34,
|
||||
},
|
||||
"& .MuiDataGrid-overlay": {
|
||||
backgroundColor: backgroundPaper,
|
||||
color: textSecondary,
|
||||
},
|
||||
"& .MuiTablePagination-root, & .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": {
|
||||
color: textSecondary,
|
||||
fontSize: "0.78rem",
|
||||
},
|
||||
"& .MuiSvgIcon-root, & .MuiIconButton-root": {
|
||||
color: textSecondary,
|
||||
},
|
||||
"& .MuiCheckbox-root": {
|
||||
color: textSecondary,
|
||||
"&.Mui-checked, &.MuiCheckbox-indeterminate": {
|
||||
color: primary,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
|
||||
export const MythicDataGrid = ({containerSx = {}, sx = {}, density = "compact", autoPageSize = true, pageSizeOptions = [10, 25, 50, 100], ...props}) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
minHeight: 0,
|
||||
overflow: "hidden",
|
||||
...containerSx,
|
||||
}}
|
||||
>
|
||||
<DataGrid
|
||||
density={density}
|
||||
autoPageSize={autoPageSize}
|
||||
pageSizeOptions={pageSizeOptions}
|
||||
hideFooterSelectedRowCount
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
minHeight: 0,
|
||||
width: "100%",
|
||||
...sx,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -7,7 +7,7 @@ import {useMutation} from '@apollo/client';
|
||||
import {hideCallbacksMutation} from './CallbackMutations';
|
||||
import {snackActions} from "../../utilities/Snackbar";
|
||||
import {CallbacksTableLastCheckinCell, CallbacksTablePayloadTypeCell, CallbacksTableIPCell} from "./CallbacksTableRow";
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
import {MythicDataGrid} from "../../MythicComponents/MythicDataGrid";
|
||||
import DialogContentText from '@mui/material/DialogContentText';
|
||||
|
||||
|
||||
@@ -111,8 +111,8 @@ const CustomSelectTable = ({initialData, selectedData, sortModel}) => {
|
||||
}));
|
||||
}, [initialData]);
|
||||
return (
|
||||
<div style={{height: "calc(80vh)"}}>
|
||||
<DataGrid
|
||||
<div style={{height: "calc(80vh)", minHeight: 0}}>
|
||||
<MythicDataGrid
|
||||
rows={data}
|
||||
columns={columns}
|
||||
initialState={{
|
||||
@@ -130,7 +130,6 @@ const CustomSelectTable = ({initialData, selectedData, sortModel}) => {
|
||||
setRowSelectionModel(newRowSelectionModel);
|
||||
}}
|
||||
rowSelectionModel={rowSelectionModel}
|
||||
density={"compact"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -239,4 +238,3 @@ export function CallbacksTabsSelectMultipleDialog({onClose, onSubmit}) {
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ import DialogActions from '@mui/material/DialogActions';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import {useQuery, gql } from '@apollo/client';
|
||||
import {CallbacksTableLastCheckinCell, CallbacksTablePayloadTypeCell, CallbacksTableIPCell} from "./CallbacksTableRow";
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
import {MythicDataGrid} from "../../MythicComponents/MythicDataGrid";
|
||||
import DialogContentText from '@mui/material/DialogContentText';
|
||||
|
||||
|
||||
@@ -98,8 +98,8 @@ const CustomSelectTable = ({initialData, selectedData, onRowClick}) => {
|
||||
}));
|
||||
}, [initialData]);
|
||||
return (
|
||||
<div style={{height: "calc(80vh)"}}>
|
||||
<DataGrid
|
||||
<div style={{height: "calc(80vh)", minHeight: 0}}>
|
||||
<MythicDataGrid
|
||||
rows={data}
|
||||
columns={columns}
|
||||
initialState={{
|
||||
@@ -113,7 +113,6 @@ const CustomSelectTable = ({initialData, selectedData, onRowClick}) => {
|
||||
}}
|
||||
autoPageSize
|
||||
onRowClick={onRowClick}
|
||||
density={"compact"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -156,4 +155,3 @@ export function CallbacksTabsOpenMultipleDialog({onClose, tabType, onOpenTabs})
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ import {useQuery, gql } from '@apollo/client';
|
||||
import {TaskFromUIButton} from './TaskFromUIButton';
|
||||
import {CallbacksTabsTaskingInput} from "./CallbacksTabsTaskingInput";
|
||||
import {CallbacksTableIPCell, CallbacksTableLastCheckinCell} from "./CallbacksTableRow";
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
import {MythicDataGrid} from "../../MythicComponents/MythicDataGrid";
|
||||
import { validate as uuidValidate } from 'uuid';
|
||||
import {snackActions} from "../../utilities/Snackbar";
|
||||
import DialogContentText from '@mui/material/DialogContentText';
|
||||
@@ -105,8 +105,8 @@ const CustomSelectTable = ({initialData, selectedData}) => {
|
||||
}));
|
||||
}, [initialData]);
|
||||
return (
|
||||
<div style={{height: "calc(80vh)"}}>
|
||||
<DataGrid
|
||||
<div style={{height: "calc(80vh)", minHeight: 0}}>
|
||||
<MythicDataGrid
|
||||
rows={data}
|
||||
columns={columns}
|
||||
initialState={{
|
||||
@@ -124,7 +124,6 @@ const CustomSelectTable = ({initialData, selectedData}) => {
|
||||
setRowSelectionModel(newRowSelectionModel);
|
||||
}}
|
||||
rowSelectionModel={rowSelectionModel}
|
||||
density={"compact"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -32,8 +32,8 @@ import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
import {gql, useMutation} from '@apollo/client';
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||||
import {copyStringToClipboard} from "../../utilities/Clipboard";
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
import {useMythicLazyQuery} from "../../utilities/useMythicLazyQuery";
|
||||
import {MythicDataGrid} from "../../MythicComponents/MythicDataGrid";
|
||||
|
||||
const createAPITokenMutation = gql`
|
||||
mutation createAPITokenMutation($operator_id: Int, $name: String, $scopes: [String!]){
|
||||
@@ -551,8 +551,8 @@ const APITokens = ({apiTokens, onDeleteAPIToken, onToggleActive, showDeleted, me
|
||||
}, []));
|
||||
}, [apiTokens, showDeleted]);
|
||||
return (
|
||||
<div style={{display: "flex", flexDirection: "column", width: "100%", height: "calc(30vh)"}}>
|
||||
<DataGrid
|
||||
<div style={{display: "flex", flexDirection: "column", width: "100%", height: "calc(30vh)", minHeight: 0}}>
|
||||
<MythicDataGrid
|
||||
rows={data}
|
||||
columns={columns}
|
||||
initialState={{
|
||||
@@ -565,7 +565,6 @@ const APITokens = ({apiTokens, onDeleteAPIToken, onToggleActive, showDeleted, me
|
||||
},
|
||||
}}
|
||||
autoPageSize
|
||||
density={"compact"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user