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

Responsive updates.

Browse source
This commit is contained in:
Mike Cao 2025-10-10 17:28:53 -07:00
parent 53929626cf
commit 14981717b9
5 changed files with 231 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/app/(main)/App.tsx
View file

@ -1,5 +1,5 @@
'use client';
import { Grid, Loading, Column } from '@umami/react-zen';
import { Grid, Loading, Column, Row } from '@umami/react-zen';
import Script from 'next/script';
import { UpdateNotice } from './UpdateNotice';
import { SideNav } from '@/app/(main)/SideNav';
@ -28,11 +28,14 @@ export function App({ children }) {
}
return (
<Grid height="100vh" width="100%" columns="auto 1fr" backgroundColor="2">
<Column>
<Grid columns={{ xs: '1fr', md: 'auto 1fr' }} height="100vh" width="100%" backgroundColor="2">
<Row display={{ xs: 'flex', md: 'none' }} alignItems="center" gap>
oh hi
</Row>
<Column display={{ xs: 'none', md: 'flex' }}>
<SideNav />
</Column>
<Column alignItems="center" overflow="auto" position="relative">
<Column alignItems="center" overflowY="auto" overflowX="hidden" position="relative">
{children}
</Column>
<UpdateNotice user={user} config={config} />

70
src/app/(main)/SideNav.tsx
View file

@ -49,41 +49,39 @@ export function SideNav(props: SidebarProps) {
};
return (
<Row height="100%" backgroundColor>
<Sidebar {...props} isCollapsed={isCollapsed || hasNav}>
<SidebarSection onClick={() => setIsCollapsed(false)}>
<SidebarHeader
label="umami"
icon={isCollapsed && !hasNav ? <PanelLeft /> : <Logo />}
style={{ maxHeight: 40 }}
>
{!isCollapsed && !hasNav && <PanelButton />}
</SidebarHeader>
</SidebarSection>
<SidebarSection paddingTop="0" paddingBottom="0" justifyContent="center">
<NavButton showText={!hasNav && !isCollapsed} onAction={handleSelect} />
</SidebarSection>
<SidebarSection flexGrow={1}>
{links.map(({ id, path, label, icon }) => {
return (
<Link key={id} href={renderUrl(path, false)} role="button">
<SidebarItem
label={label}
icon={icon}
isSelected={pathname.includes(path)}
role="button"
/>
</Link>
);
})}
</SidebarSection>
<SidebarSection justifyContent="flex-start">
<Row wrap="wrap">
<LanguageButton />
<ThemeButton />
</Row>
</SidebarSection>
</Sidebar>
</Row>
<Sidebar {...props} isCollapsed={isCollapsed || hasNav} backgroundColor>
<SidebarSection onClick={() => setIsCollapsed(false)}>
<SidebarHeader
label="umami"
icon={isCollapsed && !hasNav ? <PanelLeft /> : <Logo />}
style={{ maxHeight: 40 }}
>
{!isCollapsed && !hasNav && <PanelButton />}
</SidebarHeader>
</SidebarSection>
<SidebarSection paddingTop="0" paddingBottom="0" justifyContent="center">
<NavButton showText={!hasNav && !isCollapsed} onAction={handleSelect} />
</SidebarSection>
<SidebarSection flexGrow={1}>
{links.map(({ id, path, label, icon }) => {
return (
<Link key={id} href={renderUrl(path, false)} role="button">
<SidebarItem
label={label}
icon={icon}
isSelected={pathname.includes(path)}
role="button"
/>
</Link>
);
})}
</SidebarSection>
<SidebarSection justifyContent="flex-start">
<Row wrap="wrap">
<LanguageButton />
<ThemeButton />
</Row>
</SidebarSection>
</Sidebar>
);
}

177
src/app/(main)/websites/[websiteId]/WebsiteExpandedMenu.tsx Normal file
View file

@ -0,0 +1,177 @@
import { useMessages, useNavigation } from '@/components/hooks';
import { SideMenu } from '@/components/common/SideMenu';
import {
LogOut,
LogIn,
Search,
Type,
SquareSlash,
Share2,
Megaphone,
Earth,
Globe,
Landmark,
MapPin,
AppWindow,
Laptop,
Languages,
Monitor,
Cpu,
Network,
Tag,
} from '@/components/icons';
import { Lightning } from '@/components/svg';
export function WebsiteExpandedMenu({ excludedIds = [] }: { excludedIds?: string[] }) {
const { formatMessage, labels } = useMessages();
const {
updateParams,
query: { view },
} = useNavigation();
const filterExcluded = (item: { id: string }) => !excludedIds.includes(item.id);
const items = [
{
label: 'URL',
items: [
{
id: 'path',
label: formatMessage(labels.path),
path: updateParams({ view: 'path' }),
icon: <SquareSlash />,
},
{
id: 'entry',
label: formatMessage(labels.entry),
path: updateParams({ view: 'entry' }),
icon: <LogIn />,
},
{
id: 'exit',
label: formatMessage(labels.exit),
path: updateParams({ view: 'exit' }),
icon: <LogOut />,
},
{
id: 'title',
label: formatMessage(labels.title),
path: updateParams({ view: 'title' }),
icon: <Type />,
},
{
id: 'query',
label: formatMessage(labels.query),
path: updateParams({ view: 'query' }),
icon: <Search />,
},
].filter(filterExcluded),
},
{
label: formatMessage(labels.sources),
items: [
{
id: 'referrer',
label: formatMessage(labels.referrer),
path: updateParams({ view: 'referrer' }),
icon: <Share2 />,
},
{
id: 'channel',
label: formatMessage(labels.channel),
path: updateParams({ view: 'channel' }),
icon: <Megaphone />,
},
{
id: 'domain',
label: formatMessage(labels.domain),
path: updateParams({ view: 'domain' }),
icon: <Globe />,
},
].filter(filterExcluded),
},
{
label: formatMessage(labels.location),
items: [
{
id: 'country',
label: formatMessage(labels.country),
path: updateParams({ view: 'country' }),
icon: <Earth />,
},
{
id: 'region',
label: formatMessage(labels.region),
path: updateParams({ view: 'region' }),
icon: <MapPin />,
},
{
id: 'city',
label: formatMessage(labels.city),
path: updateParams({ view: 'city' }),
icon: <Landmark />,
},
].filter(filterExcluded),
},
{
label: formatMessage(labels.environment),
items: [
{
id: 'browser',
label: formatMessage(labels.browser),
path: updateParams({ view: 'browser' }),
icon: <AppWindow />,
},
{
id: 'os',
label: formatMessage(labels.os),
path: updateParams({ view: 'os' }),
icon: <Cpu />,
},
{
id: 'device',
label: formatMessage(labels.device),
path: updateParams({ view: 'device' }),
icon: <Laptop />,
},
{
id: 'language',
label: formatMessage(labels.language),
path: updateParams({ view: 'language' }),
icon: <Languages />,
},
{
id: 'screen',
label: formatMessage(labels.screen),
path: updateParams({ view: 'screen' }),
icon: <Monitor />,
},
].filter(filterExcluded),
},
{
label: formatMessage(labels.other),
items: [
{
id: 'event',
label: formatMessage(labels.event),
path: updateParams({ view: 'event' }),
icon: <Lightning />,
},
{
id: 'hostname',
label: formatMessage(labels.hostname),
path: updateParams({ view: 'hostname' }),
icon: <Network />,
},
{
id: 'tag',
label: formatMessage(labels.tag),
path: updateParams({ view: 'tag' }),
icon: <Tag />,
},
].filter(filterExcluded),
},
];
return <SideMenu items={items} selectedKey={view} />;
}

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

@ -1,28 +1,7 @@
import { Grid, Column } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
import { SideMenu } from '@/components/common/SideMenu';
import {
LogOut,
LogIn,
Search,
Type,
SquareSlash,
Share2,
Megaphone,
Earth,
Globe,
Landmark,
MapPin,
AppWindow,
Laptop,
Languages,
Monitor,
Cpu,
Network,
Tag,
} from '@/components/icons';
import { Lightning } from '@/components/svg';
import { WebsiteExpandedMenu } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedMenu';
export function WebsiteExpandedView({
websiteId,
@ -35,158 +14,19 @@ export function WebsiteExpandedView({
}) {
const { formatMessage, labels } = useMessages();
const {
updateParams,
query: { view },
} = useNavigation();
const filterExcluded = (item: { id: string }) => !excludedIds.includes(item.id);
const items = [
{
label: 'URL',
items: [
{
id: 'path',
label: formatMessage(labels.path),
path: updateParams({ view: 'path' }),
icon: <SquareSlash />,
},
{
id: 'entry',
label: formatMessage(labels.entry),
path: updateParams({ view: 'entry' }),
icon: <LogIn />,
},
{
id: 'exit',
label: formatMessage(labels.exit),
path: updateParams({ view: 'exit' }),
icon: <LogOut />,
},
{
id: 'title',
label: formatMessage(labels.title),
path: updateParams({ view: 'title' }),
icon: <Type />,
},
{
id: 'query',
label: formatMessage(labels.query),
path: updateParams({ view: 'query' }),
icon: <Search />,
},
].filter(filterExcluded),
},
{
label: formatMessage(labels.sources),
items: [
{
id: 'referrer',
label: formatMessage(labels.referrer),
path: updateParams({ view: 'referrer' }),
icon: <Share2 />,
},
{
id: 'channel',
label: formatMessage(labels.channel),
path: updateParams({ view: 'channel' }),
icon: <Megaphone />,
},
{
id: 'domain',
label: formatMessage(labels.domain),
path: updateParams({ view: 'domain' }),
icon: <Globe />,
},
].filter(filterExcluded),
},
{
label: formatMessage(labels.location),
items: [
{
id: 'country',
label: formatMessage(labels.country),
path: updateParams({ view: 'country' }),
icon: <Earth />,
},
{
id: 'region',
label: formatMessage(labels.region),
path: updateParams({ view: 'region' }),
icon: <MapPin />,
},
{
id: 'city',
label: formatMessage(labels.city),
path: updateParams({ view: 'city' }),
icon: <Landmark />,
},
].filter(filterExcluded),
},
{
label: formatMessage(labels.environment),
items: [
{
id: 'browser',
label: formatMessage(labels.browser),
path: updateParams({ view: 'browser' }),
icon: <AppWindow />,
},
{
id: 'os',
label: formatMessage(labels.os),
path: updateParams({ view: 'os' }),
icon: <Cpu />,
},
{
id: 'device',
label: formatMessage(labels.device),
path: updateParams({ view: 'device' }),
icon: <Laptop />,
},
{
id: 'language',
label: formatMessage(labels.language),
path: updateParams({ view: 'language' }),
icon: <Languages />,
},
{
id: 'screen',
label: formatMessage(labels.screen),
path: updateParams({ view: 'screen' }),
icon: <Monitor />,
},
].filter(filterExcluded),
},
{
label: formatMessage(labels.other),
items: [
{
id: 'event',
label: formatMessage(labels.event),
path: updateParams({ view: 'event' }),
icon: <Lightning />,
},
{
id: 'hostname',
label: formatMessage(labels.hostname),
path: updateParams({ view: 'hostname' }),
icon: <Network />,
},
{
id: 'tag',
label: formatMessage(labels.tag),
path: updateParams({ view: 'tag' }),
icon: <Tag />,
},
].filter(filterExcluded),
},
];
return (
<Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
<Column gap="6" border="right" paddingRight="3" overflowY="auto">
<SideMenu items={items} selectedKey={view} />
<Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap="6" height="100%" overflow="hidden">
<Column
display={{ xs: 'none', md: 'flex' }}
gap="6"
border="right"
paddingRight="3"
overflowY="auto"
>
<WebsiteExpandedMenu excludedIds={excludedIds} />
</Column>
<Column overflow="hidden">
<MetricsExpandedTable

5
src/components/common/Panel.tsx
View file

@ -37,7 +37,8 @@ export function Panel({ title, allowFullscreen, style, children, ...props }: Pan
return (
<Column
padding={{ xs: '3', md: '6' }}
paddingY="6"
paddingX={{ xs: '3', md: '6' }}
border
borderRadius="3"
backgroundColor
@ -50,7 +51,7 @@ export function Panel({ title, allowFullscreen, style, children, ...props }: Pan
{allowFullscreen && (
<Row justifyContent="flex-end" alignItems="center">
<TooltipTrigger delay={0} isDisabled={isFullscreen}>
<Button variant="quiet" onPress={handleFullscreen}>
<Button size="sm" variant="quiet" onPress={handleFullscreen}>
<Icon>{isFullscreen ? <X /> : <Maximize />}</Icon>
</Button>
<Tooltip>{formatMessage(labels.maximize)}</Tooltip>