watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-13 17:15:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fixed scrolling on expanded view.

Browse source
This commit is contained in:
Mike Cao 2025-08-08 17:39:17 -07:00
parent 4e25c07160
commit 8897c2508d
4 changed files with 30 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
View file

@ -34,7 +34,7 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
</Panel> </Panel>
<WebsiteTableView websiteId={websiteId} /> <WebsiteTableView websiteId={websiteId} />
<Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable> <Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable>
<Dialog style={{ width: '90vw', height: '90vh' }}> <Dialog style={{ maxWidth: 1320, width: '100vw', height: 'calc(100vh - 40px)' }}>
{({ close }) => { {({ close }) => {
return <WebsiteExpandedView websiteId={websiteId} onClose={() => handleClose(close)} />; return <WebsiteExpandedView websiteId={websiteId} onClose={() => handleClose(close)} />;
}} }}

4
src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
View file

@ -133,7 +133,7 @@ export function WebsiteExpandedView({
const DetailsComponent = views[view] || (() => null); const DetailsComponent = views[view] || (() => null);
return ( return (
<Grid columns="auto 1fr" gap="6" height="100%"> <Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
<Column gap="6" width="200px" border="right" paddingRight="3"> <Column gap="6" width="200px" border="right" paddingRight="3">
<NavMenu position="sticky" top="0"> <NavMenu position="sticky" top="0">
{items.map(({ id, label, path }) => { {items.map(({ id, label, path }) => {
@ -145,7 +145,7 @@ export function WebsiteExpandedView({
})} })}
</NavMenu> </NavMenu>
</Column> </Column>
<Column> <Column overflow="hidden">
<DetailsComponent <DetailsComponent
websiteId={websiteId} websiteId={websiteId}
animate={false} animate={false}

2
src/components/common/LoadingPanel.tsx
View file

@ -28,7 +28,7 @@ export function LoadingPanel({
const empty = isEmpty ?? checkEmpty(data); const empty = isEmpty ?? checkEmpty(data);
return ( return (
<Column position="relative" flexGrow={1} {...props}> <Column position="relative" flexGrow={1} overflow="hidden" {...props}>
{/* Show loading spinner only if no data exists */} {/* Show loading spinner only if no data exists */}
{(isLoading || isFetching) && !data && <Loading icon={loadingIcon} position="page" />} {(isLoading || isFetching) && !data && <Loading icon={loadingIcon} position="page" />}

49
src/components/metrics/MetricsTable.tsx
View file

@ -1,3 +1,5 @@
import { ReactNode, useMemo, useState } from 'react';
import { Button, Column, Icon, Row, SearchField, Text, Grid } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton'; import { LinkButton } from '@/components/common/LinkButton';
import { LoadingPanel } from '@/components/common/LoadingPanel'; import { LoadingPanel } from '@/components/common/LoadingPanel';
import { import {
@ -11,8 +13,7 @@ import { Close, Maximize } from '@/components/icons';
import { DownloadButton } from '@/components/input/DownloadButton'; import { DownloadButton } from '@/components/input/DownloadButton';
import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants'; import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
import { percentFilter } from '@/lib/filters'; import { percentFilter } from '@/lib/filters';
import { Button, Column, Icon, Row, SearchField, Text } from '@umami/react-zen';
import { ReactNode, useMemo, useState } from 'react';
import { ListExpandedTable, ListExpandedTableProps } from './ListExpandedTable'; import { ListExpandedTable, ListExpandedTableProps } from './ListExpandedTable';
import { ListTable, ListTableProps } from './ListTable'; import { ListTable, ListTableProps } from './ListTable';
@ -115,11 +116,11 @@ export function MetricsTable({
const downloadData = isExpanded ? data : filteredData; const downloadData = isExpanded ? data : filteredData;
return ( return (
<Column gap="3" justifyContent="space-between"> <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
<LoadingPanel isFetching={isFetching} isLoading={isLoading} error={error} gap> <Grid rows="auto 1fr" height="100%" overflow="hidden" gap>
<Row alignItems="center" justifyContent="space-between"> <Row alignItems="center">
{allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />} {allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
<Row gap> <Row justifyContent="flex-end" flexGrow={1} gap>
{children} {children}
{allowDownload && <DownloadButton filename={type} data={downloadData} />} {allowDownload && <DownloadButton filename={type} data={downloadData} />}
{onClose && ( {onClose && (
@ -131,23 +132,25 @@ export function MetricsTable({
)} )}
</Row> </Row>
</Row> </Row>
{data && <Column overflowY="auto" minHeight="0" height="100%" paddingRight="3" overflow="hidden">
(isExpanded ? ( {data &&
<ListExpandedTable {...(props as ListExpandedTableProps)} data={data} /> (isExpanded ? (
) : ( <ListExpandedTable {...(props as ListExpandedTableProps)} data={data} />
<ListTable {...(props as ListTableProps)} data={filteredData} /> ) : (
))} <ListTable {...(props as ListTableProps)} data={filteredData} />
<Row justifyContent="center"> ))}
{showMore && data && !error && limit && ( {showMore && limit && (
<LinkButton href={updateParams({ view: type })} variant="quiet"> <Row justifyContent="center">
<Icon size="sm"> <LinkButton href={updateParams({ view: type })} variant="quiet">
<Maximize /> <Icon size="sm">
</Icon> <Maximize />
<Text>{formatMessage(labels.more)}</Text> </Icon>
</LinkButton> <Text>{formatMessage(labels.more)}</Text>
</LinkButton>
</Row>
)} )}
</Row> </Column>
</LoadingPanel> </Grid>
</Column> </LoadingPanel>
); );
} }