Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[feat] Update Headers #180

Merged
merged 10 commits into from
Nov 1, 2024
Merged

[feat] Update Headers #180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
51ec80e
update headers to be single column
amyjchen Oct 30, 2024
7c80e77
adjust group header to respond to screen width
amyjchen Oct 31, 2024
62745c7
rename button and update alignment
amyjchen Oct 31, 2024
a472037
remove excessive breakpoints
amyjchen Oct 31, 2024
da4ff79
adjust tooltips to be upward and make buttons disabled if onclick is …
amyjchen Oct 31, 2024
9362ab1
consistent text align center
amyjchen Oct 31, 2024
56410ed
revert tag typography
amyjchen Oct 31, 2024
9e421c2
justify center
amyjchen Nov 1, 2024
b6ce85d
Reduce the header padding
somethingnew2-0 Nov 1, 2024
4299684
hide divider section if no actions will show
amyjchen Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions src/components/AvatarButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {Avatar, ButtonBase, Typography} from '@mui/material';
import {ReactNode} from 'react';

interface AvatarButtonProps {
icon: ReactNode;
text?: string;
strikethrough?: boolean;
onClick?: () => void;
}

export default function AvatarButton({icon, text, strikethrough, onClick}: AvatarButtonProps) {
return (
<ButtonBase
disabled={onClick == null}
sx={{display: 'flex', flexDirection: 'column', gap: 0.5, p: 0.5, borderRadius: 2, width: 100}}
onClick={onClick}>
<Avatar sx={{bgcolor: 'primary.main'}}>{icon}</Avatar>
{text && (
<Typography variant="body2" sx={{...(strikethrough && {textDecoration: 'line-through'})}}>
{text}
</Typography>
)}
</ButtonBase>
);
}
94 changes: 48 additions & 46 deletions src/pages/apps/Read.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,56 +71,58 @@ export default function ReadApp() {

const moveTooltip = {modifiers: [{name: 'offset', options: {offset: [0, -10]}}]};

const hasActions = isAccessAdmin(currentUser) || isAppOwnerGroupOwner(currentUser, app?.id ?? '');
return (
<React.Fragment>
<Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
<Container maxWidth="lg" sx={{my: 4}}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper
sx={{
p: 2,
height: 240,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
textAlign: 'center',
position: 'relative',
}}>
<Typography variant="h3" sx={{margin: '5px 40px 0px 10px'}}>
{app.name}
</Typography>
<Typography variant="h5" sx={{margin: '5px 40px 0px 10px'}}>
{app.description}
</Typography>
{app.active_app_tags ? (
<Box>
{app.active_app_tags.map((tagMap) => (
<Chip
key={'tag' + tagMap.active_tag!.id}
label={tagMap.active_tag!.name}
color="primary"
onClick={() => navigate(`/tags/${tagMap.active_tag!.name}`)}
icon={<TagIcon />}
sx={{
margin: '2px',
marginTop: '5px',
bgcolor: (theme) => (tagMap.active_tag!.enabled ? 'primary' : theme.palette.action.disabled),
}}
/>
))}
</Box>
) : null}
<Stack style={{position: 'absolute', right: '10px'}}>
<Tooltip title="Edit" placement="right" PopperProps={moveTooltip}>
<div>
<CreateUpdateApp currentUser={currentUser} app={app} />
</div>
</Tooltip>
<Tooltip title="Delete" placement="right" PopperProps={moveTooltip}>
<div>
<DeleteApp currentUser={currentUser} app={app} />
</div>
</Tooltip>
<Paper sx={{p: 2}}>
<Stack direction="column" gap={2}>
<Stack alignItems="center" direction="column" gap={1}>
<Typography variant="h3" textAlign="center">
{app.name}
</Typography>
<Typography variant="h5" textAlign="center">
{app.description}
</Typography>
{app.active_app_tags ? (
<Box>
{app.active_app_tags.map((tagMap) => (
<Chip
key={'tag' + tagMap.active_tag!.id}
label={tagMap.active_tag!.name}
color="primary"
onClick={() => navigate(`/tags/${tagMap.active_tag!.name}`)}
icon={<TagIcon />}
sx={{
margin: '2px',
marginTop: '5px',
bgcolor: (theme) =>
tagMap.active_tag!.enabled ? 'primary' : theme.palette.action.disabled,
}}
/>
))}
</Box>
) : null}
</Stack>
{hasActions && (
<>
<Divider />
<Stack direction="row" justifyContent="center">
<Tooltip title="Edit" placement="top" PopperProps={moveTooltip}>
<div>
<CreateUpdateApp currentUser={currentUser} app={app} />
</div>
</Tooltip>
<Tooltip title="Delete" placement="top" PopperProps={moveTooltip}>
<div>
<DeleteApp currentUser={currentUser} app={app} />
</div>
</Tooltip>
</Stack>
</>
)}
</Stack>
</Paper>
</Grid>
Expand Down
12 changes: 12 additions & 0 deletions src/pages/groups/AppLinkButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import {useNavigate} from 'react-router-dom';

import {AppGroup} from '../../api/apiSchemas';
import AppIcon from '@mui/icons-material/AppShortcut';
import AvatarButton from '../../components/AvatarButton';

export default function AppLink({group}: {group: AppGroup}) {
const navigate = useNavigate();
const deleted = group.app?.deleted_at != null;
const handleClick = deleted ? undefined : () => navigate(`/apps/${group.app?.name}`);
return <AvatarButton icon={<AppIcon />} text={group.app?.name} strikethrough={deleted} onClick={handleClick} />;
}
15 changes: 2 additions & 13 deletions src/pages/groups/ExternallyManaged.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,19 @@ import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import Link from '@mui/material/Avatar';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';

import ExternalIcon from '@mui/icons-material/Outbound';

import {useGetGroupById} from '../../api/apiComponents';
import {PolymorphicGroup} from '../../api/apiSchemas';
import AvatarButton from '../../components/AvatarButton';

interface ExternallyManagedButtonProps {
setOpen(open: boolean): any;
}

function ExternallyManagedButton(props: ExternallyManagedButtonProps) {
return (
<ListItemButton key="managedexternally" onClick={() => props.setOpen(true)}>
<ListItemAvatar>
<Avatar sx={{bgcolor: 'primary.main'}}>
<ExternalIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="Managed Externally" />
</ListItemButton>
);
return <AvatarButton icon={<ExternalIcon />} onClick={() => props.setOpen(true)} text="Managed Externally" />;
}

interface RuleLinksProps {
Expand Down
Loading