QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 05:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

CE-604 Update global tab-styles

Browse Source
This commit is contained in:
darin.kelkhoff
2023-10-20 10:26:43 -05:00
parent 47fca52437
commit 123d1742e7
5 changed files with 115 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/qqq/assets/theme/components/tabs/index.ts
View File

@ -1,29 +1,25 @@
/** /**
========================================================= =========================================================
* 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;
@ -32,15 +28,22 @@ const tabs: Types = {
styleOverrides: { styleOverrides: {
root: { root: {
position: "relative", position: "relative",
backgroundColor: grey[100], borderRadius: 0,
borderRadius: borderRadius.xl, borderBottom: "1px solid",
borderBottomColor: grey[400],
minHeight: "unset", minHeight: "unset",
padding: pxToRem(4), padding: "0",
margin: "0"
},
scroller: {
marginLeft: "0.5rem"
}, },
flexContainer: { flexContainer: {
height: "100%", height: "100%",
position: "relative", position: "relative",
width: "fit-content",
zIndex: 10, zIndex: 10,
}, },
@ -57,9 +60,10 @@ const tabs: Types = {
indicator: { indicator: {
height: "100%", height: "100%",
borderRadius: borderRadius.lg, borderRadius: 0,
backgroundColor: white.main, backgroundColor: white.main,
boxShadow: tabsBoxShadow.indicator, borderBottom: "2px solid",
borderBottomColor: colors.info.main,
transition: "all 500ms ease", transition: "all 500ms ease",
}, },
}, },

28
src/qqq/assets/theme/components/tabs/tab.ts
View File

@ -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,9 +21,9 @@ 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;
@ -43,8 +43,10 @@ const tab: Types = {
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",
borderRadius: 0,
border: 0,
color: `${dark.main} !important`, color: `${dark.main} !important`,
opacity: "1 !important", opacity: "1 !important",

4
src/qqq/components/misc/TabPanel.tsx
View File

@ -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 && (

9
src/qqq/components/widgets/misc/DataBagViewer.tsx
View File

@ -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}>
<Typography variant="h5" p={2}></Typography>
<Tabs <Tabs
sx={{m: 1}} sx={{m: 0, mb: 1, mt: -3}}
value={selectedTab} value={selectedTab}
onChange={(event, newValue) => changeTab(newValue)} onChange={(event, newValue) => changeTab(newValue)}
variant="standard" variant="standard"
> >
<Tab label="Raw Data" id="simple-tab-0" aria-controls="simple-tabpanel-0" sx={{width: "150px"}} /> <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" sx={{width: "150px"}} /> <Tab label="Data Preview" id="simple-tab-1" aria-controls="simple-tabpanel-1" />
</Tabs> </Tabs>
</Box>
<TabPanel index={0} value={selectedTab}> <TabPanel index={0} value={selectedTab}>
<Grid container> <Grid container>

13
src/qqq/components/widgets/misc/ScriptViewer.tsx
View File

@ -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}>
<Typography variant="h5" p={2}></Typography>
<Tabs <Tabs
sx={{m: 1}} sx={{m: 0, mb: 1, mt: -3}}
value={selectedTab} value={selectedTab}
onChange={(event, newValue) => changeTab(newValue)} onChange={(event, newValue) => changeTab(newValue)}
variant="standard" variant="standard"
> >
<Tab label="Code" id="simple-tab-0" aria-controls="simple-tabpanel-0" sx={{width: "100px"}} /> <Tab label="Code" id="simple-tab-0" aria-controls="simple-tabpanel-0" />
<Tab label="Logs" id="simple-tab-1" aria-controls="simple-tabpanel-1" sx={{width: "100px"}} /> <Tab label="Logs" id="simple-tab-1" aria-controls="simple-tabpanel-1" />
<Tab label="Test" id="simple-tab-1" aria-controls="simple-tabpanel-2" sx={{width: "100px"}} /> <Tab label="Test" id="simple-tab-1" aria-controls="simple-tabpanel-2" />
<Tab label="Docs" id="simple-tab-1" aria-controls="simple-tabpanel-3" sx={{width: "100px"}} /> <Tab label="Docs" id="simple-tab-1" aria-controls="simple-tabpanel-3" />
</Tabs> </Tabs>
</Box>
<TabPanel index={0} value={selectedTab}> <TabPanel index={0} value={selectedTab}>
<Grid container> <Grid container>