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-1727 - Style adjustments re: mobile processes

Browse Source
This commit is contained in:
darin.kelkhoff
2024-09-20 10:43:37 -05:00
parent 504a43d9c3
commit 2b057768b3
1 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/qqq/components/buttons/DefaultButtons.tsx
View File

@ -30,14 +30,17 @@ import MDButton from "qqq/components/legacy/MDButton";
export const standardWidth = "150px"; export const standardWidth = "150px";
const standardML = {xs: 1, md: 3};
interface QCreateNewButtonProps interface QCreateNewButtonProps
{ {
tablePath: string; tablePath: string;
} }
export function QCreateNewButton({tablePath}: QCreateNewButtonProps): JSX.Element export function QCreateNewButton({tablePath}: QCreateNewButtonProps): JSX.Element
{ {
return ( return (
<Box display="inline-block" ml={3} mr={0} width={standardWidth}> <Box display="inline-block" ml={standardML} mr={0} width={standardWidth}>
<Link to={`${tablePath}/create`}> <Link to={`${tablePath}/create`}>
<MDButton variant="gradient" color="info" fullWidth startIcon={<Icon>add</Icon>}> <MDButton variant="gradient" color="info" fullWidth startIcon={<Icon>add</Icon>}>
Create New Create New
@ -54,6 +57,7 @@ interface QSaveButtonProps
onClickHandler?: any, onClickHandler?: any,
disabled: boolean disabled: boolean
} }
QSaveButton.defaultProps = { QSaveButton.defaultProps = {
label: "Save", label: "Save",
iconName: "save" iconName: "save"
@ -62,7 +66,7 @@ QSaveButton.defaultProps = {
export function QSaveButton({label, iconName, onClickHandler, disabled}: QSaveButtonProps): JSX.Element export function QSaveButton({label, iconName, onClickHandler, disabled}: QSaveButtonProps): JSX.Element
{ {
return ( return (
<Box ml={3} width={standardWidth}> <Box ml={standardML} width={standardWidth}>
<MDButton type="submit" variant="gradient" color="info" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>{iconName}</Icon>} disabled={disabled}> <MDButton type="submit" variant="gradient" color="info" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>{iconName}</Icon>} disabled={disabled}>
{label} {label}
</MDButton> </MDButton>
@ -72,17 +76,18 @@ export function QSaveButton({label, iconName, onClickHandler, disabled}: QSaveBu
interface QDeleteButtonProps interface QDeleteButtonProps
{ {
onClickHandler: any onClickHandler: any;
disabled?: boolean disabled?: boolean;
} }
QDeleteButton.defaultProps = { QDeleteButton.defaultProps = {
disabled: false disabled: false
}; };
export function QDeleteButton({onClickHandler, disabled}: QDeleteButtonProps): JSX.Element export function QDeleteButton({onClickHandler, disabled}: QDeleteButtonProps): JSX.Element
{ {
return ( return (
<Box ml={3} width={standardWidth}> <Box ml={standardML} width={standardWidth}>
<MDButton variant="gradient" color="primary" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>delete</Icon>} disabled={disabled}> <MDButton variant="gradient" color="primary" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>delete</Icon>} disabled={disabled}>
Delete Delete
</MDButton> </MDButton>
@ -93,7 +98,7 @@ export function QDeleteButton({onClickHandler, disabled}: QDeleteButtonProps): J
export function QEditButton(): JSX.Element export function QEditButton(): JSX.Element
{ {
return ( return (
<Box ml={3} width={standardWidth}> <Box ml={standardML} width={standardWidth}>
<Link to="edit"> <Link to="edit">
<MDButton variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>edit</Icon>}> <MDButton variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>edit</Icon>}>
Edit Edit
@ -132,7 +137,7 @@ interface QCancelButtonProps
onClickHandler: any; onClickHandler: any;
disabled: boolean; disabled: boolean;
label?: string; label?: string;
iconName?: string iconName?: string;
} }
export function QCancelButton({ export function QCancelButton({
@ -140,7 +145,7 @@ export function QCancelButton({
}: QCancelButtonProps): JSX.Element }: QCancelButtonProps): JSX.Element
{ {
return ( return (
<Box ml="auto" width={standardWidth}> <Box ml={standardML} mb={2} width={standardWidth}>
<MDButton type="button" variant="outlined" color="dark" size="small" fullWidth startIcon={<Icon>{iconName}</Icon>} onClick={onClickHandler} disabled={disabled}> <MDButton type="button" variant="outlined" color="dark" size="small" fullWidth startIcon={<Icon>{iconName}</Icon>} onClick={onClickHandler} disabled={disabled}>
{label} {label}
</MDButton> </MDButton>
@ -155,15 +160,15 @@ QCancelButton.defaultProps = {
interface QSubmitButtonProps interface QSubmitButtonProps
{ {
label?: string label?: string;
iconName?: string iconName?: string;
disabled: boolean disabled: boolean;
} }
export function QSubmitButton({label, iconName, disabled}: QSubmitButtonProps): JSX.Element export function QSubmitButton({label, iconName, disabled}: QSubmitButtonProps): JSX.Element
{ {
return ( return (
<Box ml={3} width={standardWidth}> <Box ml={standardML} width={standardWidth}>
<MDButton type="submit" variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>{iconName}</Icon>} disabled={disabled}> <MDButton type="submit" variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>{iconName}</Icon>} disabled={disabled}>
{label} {label}
</MDButton> </MDButton>