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

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

@ -15,15 +15,11 @@ Coded by www.creative-tim.com
// Material Dashboard 2 PRO React TS Base Styles
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
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const {grey, white} = colors;
const { borderRadius } = borders;
const { tabsBoxShadow } = boxShadows;
// types
type Types = any;
@ -32,15 +28,22 @@ const tabs: Types = {
styleOverrides: {
root: {
position: "relative",
backgroundColor: grey[100],
borderRadius: borderRadius.xl,
borderRadius: 0,
borderBottom: "1px solid",
borderBottomColor: grey[400],
minHeight: "unset",
padding: pxToRem(4),
padding: "0",
margin: "0"
},
scroller: {
marginLeft: "0.5rem"
},
flexContainer: {
height: "100%",
position: "relative",
width: "fit-content",
zIndex: 10,
},
@ -57,9 +60,10 @@ const tabs: Types = {
indicator: {
height: "100%",
borderRadius: borderRadius.lg,
borderRadius: 0,
backgroundColor: white.main,
boxShadow: tabsBoxShadow.indicator,
borderBottom: "2px solid",
borderBottomColor: colors.info.main,
transition: "all 500ms ease",
},
},

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

@ -43,8 +43,10 @@ const tab: Types = {
fontWeight: fontWeightRegular,
textTransform: "none",
lineHeight: "inherit",
padding: pxToRem(4),
borderRadius: borderRadius.lg,
padding: "0.75rem 0.5rem 0.5rem",
margin: "0 0.5rem",
borderRadius: 0,
border: 0,
color: `${dark.main} !important`,
opacity: "1 !important",

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

@ -28,11 +28,12 @@ interface TabPanelProps
children?: React.ReactNode;
index: number;
value: number;
style?: any;
}
export default function TabPanel(props: TabPanelProps)
{
const {children, value, index, ...other} = props;
const {children, value, index, style, ...other} = props;
return (
<div
@ -40,6 +41,7 @@ export default function TabPanel(props: TabPanelProps)
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
style={style}
{...other}
>
{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 item xs={12}>
<>
<Box display="flex" alignItems="center" justifyContent="space-between" gap={2} mt={-6}>
<Typography variant="h5" p={2}></Typography>
<Tabs
sx={{m: 1}}
sx={{m: 0, mb: 1, mt: -3}}
value={selectedTab}
onChange={(event, newValue) => changeTab(newValue)}
variant="standard"
>
<Tab label="Raw Data" id="simple-tab-0" aria-controls="simple-tabpanel-0" sx={{width: "150px"}} />
<Tab label="Data Preview" id="simple-tab-1" aria-controls="simple-tabpanel-1" 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" />
</Tabs>
</Box>
<TabPanel index={0} value={selectedTab}>
<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 item xs={12}>
<>
<Box display="flex" alignItems="center" justifyContent="space-between" gap={2} mt={-6}>
<Typography variant="h5" p={2}></Typography>
<Tabs
sx={{m: 1}}
sx={{m: 0, mb: 1, mt: -3}}
value={selectedTab}
onChange={(event, newValue) => changeTab(newValue)}
variant="standard"
>
<Tab label="Code" id="simple-tab-0" aria-controls="simple-tabpanel-0" sx={{width: "100px"}} />
<Tab label="Logs" id="simple-tab-1" aria-controls="simple-tabpanel-1" sx={{width: "100px"}} />
<Tab label="Test" id="simple-tab-1" aria-controls="simple-tabpanel-2" sx={{width: "100px"}} />
<Tab label="Docs" id="simple-tab-1" aria-controls="simple-tabpanel-3" 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" />
<Tab label="Test" id="simple-tab-1" aria-controls="simple-tabpanel-2" />
<Tab label="Docs" id="simple-tab-1" aria-controls="simple-tabpanel-3" />
</Tabs>
</Box>
<TabPanel index={0} value={selectedTab}>
<Grid container>