Skip to content

Frontend : Fixed Activity-Component responsiveness #4473

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

Open
greedy-wudpeckr wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Frontend : Fixed Activity-Component responsiveness #4473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
123 changes: 96 additions & 27 deletions frontend/src/components/activity/Activity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,10 +244,19 @@ export function SingleActivityRenderer({
const rows = 5;
const gapPx = 20;
const box = container.getBoundingClientRect();
const x = (box.width / cols) * (index % 3) + gapPx;
const y = (box.height / rows) * Math.floor(index / 3) + gapPx;
const width = box.width / cols - gapPx * (cols - 2);
const height = box.height / rows - gapPx * (rows - 2);
const row = Math.floor(index / 3);
const col = index % 3;

// Calculate cell dimensions accounting for gaps
const cellWidth = (box.width - gapPx * (cols + 1)) / cols;
const cellHeight = Math.max(150, (box.height - gapPx * (rows + 1)) / rows);

// Position with gaps
const x = gapPx + col * (cellWidth + gapPx);
const y = gapPx + row * (cellHeight + gapPx);

const width = cellWidth;
const height = cellHeight;

oldTranslation = activity.style.transform ?? '';
oldHeight = activity.style.height;
Expand Down Expand Up @@ -390,16 +399,40 @@ export function SingleActivityRenderer({
{isOverview && (
<Box
sx={{
fontSize: '18px',
fontSize: { xs: '1rem', md: '0.875rem' },
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
padding: 1,
gap: 1,
padding: 2,
gap: 1.5,
height: '100%',
minHeight: '150px',
}}
>
<Box sx={{ width: '48px', height: '48px', flexShrink: 0 }}>{icon}</Box> {title}
<Box
sx={{
width: { xs: '32px', sm: '40px', md: '48px' },
height: { xs: '32px', sm: '40px', md: '48px' },
flexShrink: 0,
}}
>
{icon}
</Box>
<Box
sx={{
minWidth: 0,
flex: 1,
textAlign: 'center',
wordBreak: 'break-word',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
}}
>
{title}
</Box>
</Box>
)}
<>
Expand Down Expand Up @@ -427,17 +460,18 @@ export function SingleActivityRenderer({
>
{!hideTitleInHeader && (
<>
<Box sx={{ width: '18px', height: '18px' }}>{icon}</Box>
<Box sx={{ width: '18px', height: '18px', flexShrink: 0 }}>{icon}</Box>
<Typography
color="textSecondary"
fontSize={14}
sx={{
maxWidth: 'calc(45% - 60px)',
maxWidth: { xs: '100px', sm: '150px', md: 'calc(45% - 60px)' },
minWidth: 0,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
flexShrink: 1,
}}
title={typeof title === 'string' ? title : undefined}
>
{title}
</Typography>
Expand All @@ -451,10 +485,19 @@ export function SingleActivityRenderer({
fontSize: '0.875rem',
paddingX: 0.5,
color: theme.palette.text.secondary,
display: 'flex',
alignItems: 'center',
gap: 0.5,
maxWidth: { xs: '80px', sm: '120px', md: 'none' },
minWidth: 0,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
flexShrink: 1,
})}
>
<Icon icon="mdi:hexagon-multiple-outline" />
{cluster}
<Icon icon="mdi:hexagon-multiple-outline" style={{ flexShrink: 0 }} />
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{cluster}</span>
</Box>
)}
{!isOverview && (
Expand Down Expand Up @@ -1130,7 +1173,8 @@ export const ActivityBar = React.memo(function ({
position: 'relative',
alignItems: 'center',
display: 'flex',
minHeight: '56px',
flexWrap: 'nowrap',
minHeight: { xs: '80px', sm: '70px', md: '56px' },
overflowX: 'auto',
scrollbarWidth: 'thin',
})}
Expand All @@ -1148,17 +1192,17 @@ export const ActivityBar = React.memo(function ({
borderTop: 0,
borderColor: lastElement === it.id ? theme.palette.divider : 'transparent',
background: lastElement === it.id ? theme.palette.background.default : 'transparent',
flexShrink: 0,
})}
>
<Button
sx={{
height: '100%',
padding: '0px 5px 0 10px',
lineHeight: 1,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
padding: '8px 5px 8px 10px',
lineHeight: 1.3,
justifyContent: 'start',
minWidth: { xs: '150px', sm: '200px', md: '300px' },
maxWidth: { xs: '150px', sm: '200px', md: '300px' },
}}
onClick={() => {
// Minimize or show Activity, unless it's not active then bring it to front
Expand All @@ -1170,26 +1214,51 @@ export const ActivityBar = React.memo(function ({
}
}}
>
<Box sx={{ width: '22px', height: '22px', flexShrink: 0, marginRight: 1 }}>
{it.icon}
</Box>
<Box
sx={{
marginRight: 'auto',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
gap: 0.5,
overflow: 'hidden',
minWidth: 0,
flex: 1,
}}
>
{it.cluster && <Box sx={{ opacity: 0.7 }}>{it.cluster}</Box>}{' '}
{it.cluster && (
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
width: '100%',
}}
>
<Box sx={{ width: '22px', height: '22px', flexShrink: 0 }}>{it.icon}</Box>
<Box
sx={{
opacity: 0.7,
wordBreak: 'break-word',
fontSize: '0.875rem',
flex: 1,
minWidth: 0,
}}
>
{it.cluster}
</Box>
</Box>
)}
{!it.cluster && (
<Box sx={{ width: '22px', height: '22px', flexShrink: 0, marginBottom: 0.5 }}>
{it.icon}
</Box>
)}
<Box
sx={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
wordBreak: 'break-word',
fontStyle: it.temporary ? 'italic' : undefined,
width: '100%',
fontSize: '0.875rem',
}}
>
{it.title ?? 'Something'}
Expand Down
40 changes: 19 additions & 21 deletions frontend/src/components/activity/__snapshots__/Activity.Basic.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@
class="MuiBox-root css-ha4r1w"
>
<div
class="MuiBox-root css-19rsff"
class="MuiBox-root css-1ww6zew"
/>
<p
class="MuiTypography-root MuiTypography-body1 css-slk4bd-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 css-1ocw23x-MuiTypography-root"
/>
<div
class="MuiBox-root css-1po99kh"
Expand Down Expand Up @@ -80,10 +80,10 @@
class="MuiBox-root css-ha4r1w"
>
<div
class="MuiBox-root css-19rsff"
class="MuiBox-root css-1ww6zew"
/>
<p
class="MuiTypography-root MuiTypography-body1 css-slk4bd-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 css-1ocw23x-MuiTypography-root"
/>
<div
class="MuiBox-root css-1po99kh"
Expand Down Expand Up @@ -129,25 +129,24 @@
</div>
</div>
<div
class="MuiBox-root css-3ykv34"
class="MuiBox-root css-zr2dzt"
>
<div
class="MuiBox-root css-16dgwon"
class="MuiBox-root css-1mw5uhz"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-1jy96qb-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-x3kn3j-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<div
class="MuiBox-root css-zlkkwz"
/>
<div
class="MuiBox-root css-18bzmof"
class="MuiBox-root css-1aihc2e"
>

<div
class="MuiBox-root css-1h2ruwl"
class="MuiBox-root css-1h3s6no"
/>
<div
class="MuiBox-root css-1vxjdql"
>
Something
</div>
Expand All @@ -168,22 +167,21 @@
</button>
</div>
<div
class="MuiBox-root css-15k1pc3"
class="MuiBox-root css-1oygo4f"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-1jy96qb-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-x3kn3j-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<div
class="MuiBox-root css-zlkkwz"
/>
<div
class="MuiBox-root css-18bzmof"
class="MuiBox-root css-1aihc2e"
>

<div
class="MuiBox-root css-1h2ruwl"
class="MuiBox-root css-1h3s6no"
/>
<div
class="MuiBox-root css-1vxjdql"
>
Something
</div>
Expand Down
Loading