mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 05:10:45 +00:00
CE-604 Update global tab-styles
This commit is contained in:
@ -1,68 +1,72 @@
|
|||||||
/**
|
/**
|
||||||
=========================================================
|
=========================================================
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||||
=========================================================
|
=========================================================
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
Coded by www.creative-tim.com
|
||||||
|
|
||||||
=========================================================
|
=========================================================
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS Base Styles
|
// Material Dashboard 2 PRO React TS Base Styles
|
||||||
import colors from "qqq/assets/theme/base/colors";
|
import colors from "qqq/assets/theme/base/colors";
|
||||||
import borders from "qqq/assets/theme/base/borders";
|
|
||||||
import boxShadows from "qqq/assets/theme/base/boxShadows";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS Helper Functions
|
// Material Dashboard 2 PRO React TS Helper Functions
|
||||||
import pxToRem from "qqq/assets/theme/functions/pxToRem";
|
import pxToRem from "qqq/assets/theme/functions/pxToRem";
|
||||||
|
|
||||||
const { grey, white } = colors;
|
const {grey, white} = colors;
|
||||||
const { borderRadius } = borders;
|
|
||||||
const { tabsBoxShadow } = boxShadows;
|
|
||||||
|
|
||||||
// types
|
// types
|
||||||
type Types = any;
|
type Types = any;
|
||||||
|
|
||||||
const tabs: Types = {
|
const tabs: Types = {
|
||||||
styleOverrides: {
|
styleOverrides: {
|
||||||
root: {
|
root: {
|
||||||
position: "relative",
|
position: "relative",
|
||||||
backgroundColor: grey[100],
|
borderRadius: 0,
|
||||||
borderRadius: borderRadius.xl,
|
borderBottom: "1px solid",
|
||||||
minHeight: "unset",
|
borderBottomColor: grey[400],
|
||||||
padding: pxToRem(4),
|
minHeight: "unset",
|
||||||
},
|
padding: "0",
|
||||||
|
margin: "0"
|
||||||
flexContainer: {
|
|
||||||
height: "100%",
|
|
||||||
position: "relative",
|
|
||||||
zIndex: 10,
|
|
||||||
},
|
|
||||||
|
|
||||||
fixed: {
|
|
||||||
overflow: "unset !important",
|
|
||||||
overflowX: "unset !important",
|
|
||||||
},
|
|
||||||
|
|
||||||
vertical: {
|
|
||||||
"& .MuiTabs-indicator": {
|
|
||||||
width: "100%",
|
|
||||||
},
|
},
|
||||||
},
|
|
||||||
|
|
||||||
indicator: {
|
scroller: {
|
||||||
height: "100%",
|
marginLeft: "0.5rem"
|
||||||
borderRadius: borderRadius.lg,
|
},
|
||||||
backgroundColor: white.main,
|
|
||||||
boxShadow: tabsBoxShadow.indicator,
|
flexContainer: {
|
||||||
transition: "all 500ms ease",
|
height: "100%",
|
||||||
},
|
position: "relative",
|
||||||
},
|
width: "fit-content",
|
||||||
|
zIndex: 10,
|
||||||
|
},
|
||||||
|
|
||||||
|
fixed: {
|
||||||
|
overflow: "unset !important",
|
||||||
|
overflowX: "unset !important",
|
||||||
|
},
|
||||||
|
|
||||||
|
vertical: {
|
||||||
|
"& .MuiTabs-indicator": {
|
||||||
|
width: "100%",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
indicator: {
|
||||||
|
height: "100%",
|
||||||
|
borderRadius: 0,
|
||||||
|
backgroundColor: white.main,
|
||||||
|
borderBottom: "2px solid",
|
||||||
|
borderBottomColor: colors.info.main,
|
||||||
|
transition: "all 500ms ease",
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default tabs;
|
export default tabs;
|
||||||
|
|||||||
@ -1,17 +1,17 @@
|
|||||||
/**
|
/**
|
||||||
=========================================================
|
=========================================================
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||||
=========================================================
|
=========================================================
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
Coded by www.creative-tim.com
|
||||||
|
|
||||||
=========================================================
|
=========================================================
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS Base Styles
|
// Material Dashboard 2 PRO React TS Base Styles
|
||||||
import typography from "qqq/assets/theme/base/typography";
|
import typography from "qqq/assets/theme/base/typography";
|
||||||
@ -21,48 +21,50 @@ import colors from "qqq/assets/theme/base/colors";
|
|||||||
// Material Dashboard 2 PRO React TS Helper Functions
|
// Material Dashboard 2 PRO React TS Helper Functions
|
||||||
import pxToRem from "qqq/assets/theme/functions/pxToRem";
|
import pxToRem from "qqq/assets/theme/functions/pxToRem";
|
||||||
|
|
||||||
const { size, fontWeightRegular } = typography;
|
const {size, fontWeightRegular} = typography;
|
||||||
const { borderRadius } = borders;
|
const {borderRadius} = borders;
|
||||||
const { dark } = colors;
|
const {dark} = colors;
|
||||||
|
|
||||||
// types
|
// types
|
||||||
type Types = any;
|
type Types = any;
|
||||||
|
|
||||||
const tab: Types = {
|
const tab: Types = {
|
||||||
styleOverrides: {
|
styleOverrides: {
|
||||||
root: {
|
root: {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
flex: "1 1 auto",
|
flex: "1 1 auto",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
maxWidth: "unset !important",
|
maxWidth: "unset !important",
|
||||||
minWidth: "unset !important",
|
minWidth: "unset !important",
|
||||||
minHeight: "unset !important",
|
minHeight: "unset !important",
|
||||||
fontSize: size.md,
|
fontSize: size.md,
|
||||||
fontWeight: fontWeightRegular,
|
fontWeight: fontWeightRegular,
|
||||||
textTransform: "none",
|
textTransform: "none",
|
||||||
lineHeight: "inherit",
|
lineHeight: "inherit",
|
||||||
padding: pxToRem(4),
|
padding: "0.75rem 0.5rem 0.5rem",
|
||||||
borderRadius: borderRadius.lg,
|
margin: "0 0.5rem",
|
||||||
color: `${dark.main} !important`,
|
borderRadius: 0,
|
||||||
opacity: "1 !important",
|
border: 0,
|
||||||
|
color: `${dark.main} !important`,
|
||||||
|
opacity: "1 !important",
|
||||||
|
|
||||||
"& .material-icons, .material-icons-round": {
|
"& .material-icons, .material-icons-round": {
|
||||||
marginBottom: "0 !important",
|
marginBottom: "0 !important",
|
||||||
marginRight: pxToRem(6),
|
marginRight: pxToRem(6),
|
||||||
|
},
|
||||||
|
|
||||||
|
"& svg": {
|
||||||
|
marginBottom: "0 !important",
|
||||||
|
marginRight: pxToRem(6),
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
"& svg": {
|
labelIcon: {
|
||||||
marginBottom: "0 !important",
|
paddingTop: pxToRem(4),
|
||||||
marginRight: pxToRem(6),
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
labelIcon: {
|
|
||||||
paddingTop: pxToRem(4),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default tab;
|
export default tab;
|
||||||
|
|||||||
@ -28,11 +28,12 @@ interface TabPanelProps
|
|||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
index: number;
|
index: number;
|
||||||
value: number;
|
value: number;
|
||||||
|
style?: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function TabPanel(props: TabPanelProps)
|
export default function TabPanel(props: TabPanelProps)
|
||||||
{
|
{
|
||||||
const {children, value, index, ...other} = props;
|
const {children, value, index, style, ...other} = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -40,6 +41,7 @@ export default function TabPanel(props: TabPanelProps)
|
|||||||
hidden={value !== index}
|
hidden={value !== index}
|
||||||
id={`simple-tabpanel-${index}`}
|
id={`simple-tabpanel-${index}`}
|
||||||
aria-labelledby={`simple-tab-${index}`}
|
aria-labelledby={`simple-tab-${index}`}
|
||||||
|
style={style}
|
||||||
{...other}
|
{...other}
|
||||||
>
|
>
|
||||||
{value === index && (
|
{value === index && (
|
||||||
|
|||||||
@ -286,18 +286,15 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
|
|||||||
<Grid container spacing={3}>
|
<Grid container spacing={3}>
|
||||||
<Grid item xs={12}>
|
<Grid item xs={12}>
|
||||||
<>
|
<>
|
||||||
<Box display="flex" alignItems="center" justifyContent="space-between" gap={2} mt={-6}>
|
<Tabs
|
||||||
<Typography variant="h5" p={2}></Typography>
|
sx={{m: 0, mb: 1, mt: -3}}
|
||||||
<Tabs
|
value={selectedTab}
|
||||||
sx={{m: 1}}
|
onChange={(event, newValue) => changeTab(newValue)}
|
||||||
value={selectedTab}
|
variant="standard"
|
||||||
onChange={(event, newValue) => changeTab(newValue)}
|
>
|
||||||
variant="standard"
|
<Tab label="Raw Data" id="simple-tab-0" aria-controls="simple-tabpanel-0" />
|
||||||
>
|
<Tab label="Data Preview" id="simple-tab-1" aria-controls="simple-tabpanel-1" />
|
||||||
<Tab label="Raw Data" id="simple-tab-0" aria-controls="simple-tabpanel-0" sx={{width: "150px"}} />
|
</Tabs>
|
||||||
<Tab label="Data Preview" id="simple-tab-1" aria-controls="simple-tabpanel-1" sx={{width: "150px"}} />
|
|
||||||
</Tabs>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<TabPanel index={0} value={selectedTab}>
|
<TabPanel index={0} value={selectedTab}>
|
||||||
<Grid container>
|
<Grid container>
|
||||||
|
|||||||
@ -430,20 +430,17 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
|
|||||||
<Grid container spacing={3}>
|
<Grid container spacing={3}>
|
||||||
<Grid item xs={12}>
|
<Grid item xs={12}>
|
||||||
<>
|
<>
|
||||||
<Box display="flex" alignItems="center" justifyContent="space-between" gap={2} mt={-6}>
|
<Tabs
|
||||||
<Typography variant="h5" p={2}></Typography>
|
sx={{m: 0, mb: 1, mt: -3}}
|
||||||
<Tabs
|
value={selectedTab}
|
||||||
sx={{m: 1}}
|
onChange={(event, newValue) => changeTab(newValue)}
|
||||||
value={selectedTab}
|
variant="standard"
|
||||||
onChange={(event, newValue) => changeTab(newValue)}
|
>
|
||||||
variant="standard"
|
<Tab label="Code" id="simple-tab-0" aria-controls="simple-tabpanel-0" />
|
||||||
>
|
<Tab label="Logs" id="simple-tab-1" aria-controls="simple-tabpanel-1" />
|
||||||
<Tab label="Code" id="simple-tab-0" aria-controls="simple-tabpanel-0" sx={{width: "100px"}} />
|
<Tab label="Test" id="simple-tab-1" aria-controls="simple-tabpanel-2" />
|
||||||
<Tab label="Logs" id="simple-tab-1" aria-controls="simple-tabpanel-1" sx={{width: "100px"}} />
|
<Tab label="Docs" id="simple-tab-1" aria-controls="simple-tabpanel-3" />
|
||||||
<Tab label="Test" id="simple-tab-1" aria-controls="simple-tabpanel-2" sx={{width: "100px"}} />
|
</Tabs>
|
||||||
<Tab label="Docs" id="simple-tab-1" aria-controls="simple-tabpanel-3" sx={{width: "100px"}} />
|
|
||||||
</Tabs>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<TabPanel index={0} value={selectedTab}>
|
<TabPanel index={0} value={selectedTab}>
|
||||||
<Grid container>
|
<Grid container>
|
||||||
|
|||||||
Reference in New Issue
Block a user