mirror of
https://github.com/kremalicious/umami.git
synced 2024-12-24 18:26:20 +01:00
Updated layout for settings pages.
This commit is contained in:
parent
9260e5bc33
commit
43ef6884df
@ -16,6 +16,6 @@
|
|||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
grid-row: 2 / 3;
|
grid-row: 2 / 3;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
max-height: calc(100vh - 60px);
|
height: calc(100vh - 60px);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Icon, Text } from 'react-basics';
|
import { Icon, Text, Row, Column } from 'react-basics';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import Icons from 'components/icons';
|
import Icons from 'components/icons';
|
||||||
@ -15,42 +15,45 @@ export default function NavBar() {
|
|||||||
const { pathname } = useRouter();
|
const { pathname } = useRouter();
|
||||||
const { cloudMode } = useConfig();
|
const { cloudMode } = useConfig();
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
const [minimized, setMinimized] = useState(false);
|
|
||||||
|
|
||||||
const links = [
|
const links = [
|
||||||
{ label: formatMessage(labels.dashboard), url: '/dashboard', icon: <Icons.Dashboard /> },
|
{ label: formatMessage(labels.dashboard), url: '/dashboard' },
|
||||||
{ label: formatMessage(labels.realtime), url: '/realtime', icon: <Icons.Clock /> },
|
{ label: formatMessage(labels.realtime), url: '/realtime' },
|
||||||
!cloudMode && { label: formatMessage(labels.settings), url: '/settings', icon: <Icons.Gear /> },
|
!cloudMode && { label: formatMessage(labels.settings), url: '/settings' },
|
||||||
].filter(n => n);
|
].filter(n => n);
|
||||||
|
|
||||||
const handleMinimize = () => setMinimized(state => !state);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames(styles.navbar, { [styles.minimized]: minimized })}>
|
<div className={classNames(styles.navbar)}>
|
||||||
<div className={styles.logo} onClick={handleMinimize}>
|
<Row>
|
||||||
<Icon size="lg">
|
<Column className={styles.left}>
|
||||||
<Icons.Logo />
|
<div className={styles.logo}>
|
||||||
</Icon>
|
<Icon size="lg">
|
||||||
<Text className={styles.text}>umami</Text>
|
<Icons.Logo />
|
||||||
</div>
|
</Icon>
|
||||||
<div className={styles.links}>
|
<Text className={styles.text}>umami</Text>
|
||||||
{links.map(({ url, icon, label }) => {
|
</div>
|
||||||
return (
|
<div className={styles.links}>
|
||||||
<Link
|
{links.map(({ url, label }) => {
|
||||||
key={url}
|
return (
|
||||||
href={url}
|
<Link
|
||||||
className={classNames({ [styles.selected]: pathname.startsWith(url) })}
|
key={url}
|
||||||
>
|
href={url}
|
||||||
<Text>{label}</Text>
|
className={classNames({ [styles.selected]: pathname.startsWith(url) })}
|
||||||
</Link>
|
>
|
||||||
);
|
<Text>{label}</Text>
|
||||||
})}
|
</Link>
|
||||||
</div>
|
);
|
||||||
<div className={styles.actions}>
|
})}
|
||||||
<ThemeButton />
|
</div>
|
||||||
<LanguageButton />
|
</Column>
|
||||||
{!cloudMode && <ProfileButton />}
|
<Column className={styles.right}>
|
||||||
</div>
|
<div className={styles.actions}>
|
||||||
|
<ThemeButton />
|
||||||
|
<LanguageButton />
|
||||||
|
{!cloudMode && <ProfileButton />}
|
||||||
|
</div>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -9,10 +9,21 @@
|
|||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.left,
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@ -55,3 +66,10 @@
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.links,
|
||||||
|
.actions {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
|
import { Row, Column } from 'react-basics';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import AppLayout from './AppLayout';
|
|
||||||
import SideNav from './SideNav';
|
import SideNav from './SideNav';
|
||||||
import useUser from 'hooks/useUser';
|
import useUser from 'hooks/useUser';
|
||||||
import useMessages from 'hooks/useMessages';
|
import useMessages from 'hooks/useMessages';
|
||||||
@ -23,13 +23,15 @@ export default function SettingsLayout({ children }) {
|
|||||||
const getKey = () => items.find(({ url }) => pathname.startsWith(url))?.key;
|
const getKey = () => items.find(({ url }) => pathname.startsWith(url))?.key;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppLayout>
|
<Row className={classNames({ [styles.hideMenu]: cloudMode })}>
|
||||||
<div className={styles.container}>
|
{!cloudMode && (
|
||||||
<div className={classNames(styles.menu, { [styles.hidden]: cloudMode })}>
|
<Column className={styles.menu} defaultSize={12} md={3} lg={2} xl={2}>
|
||||||
<SideNav items={items} shallow={true} selectedKey={getKey()} />
|
<SideNav items={items} shallow={true} selectedKey={getKey()} />
|
||||||
</div>
|
</Column>
|
||||||
<div className={styles.content}>{children}</div>
|
)}
|
||||||
</div>
|
<Column className={styles.content} defaultSize={12} md={9} lg={10} xl={10}>
|
||||||
</AppLayout>
|
{children}
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,23 +1,13 @@
|
|||||||
.container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: max-content 1fr;
|
|
||||||
grid-template-rows: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 200px;
|
padding-top: 40px;
|
||||||
padding: 40px 0;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
min-height: 50vh;
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu.hidden {
|
.hideMenu .content {
|
||||||
visibility: hidden;
|
margin: 0 auto;
|
||||||
width: 0;
|
|
||||||
}
|
}
|
||||||
|
@ -13,3 +13,10 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.menu {
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: 10px 0;
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
@ -14,14 +14,16 @@ export default function PasswordChangeButton() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{toast}
|
{toast}
|
||||||
<ModalTrigger modalProps={{ title: formatMessage(labels.changePassword) }}>
|
<ModalTrigger>
|
||||||
<Button>
|
<Button>
|
||||||
<Icon>
|
<Icon>
|
||||||
<Icons.Lock />
|
<Icons.Lock />
|
||||||
</Icon>
|
</Icon>
|
||||||
<Text>{formatMessage(labels.changePassword)}</Text>
|
<Text>{formatMessage(labels.changePassword)}</Text>
|
||||||
</Button>
|
</Button>
|
||||||
<Modal>{close => <PasswordEditForm onSave={handleSave} onClose={close} />}</Modal>
|
<Modal title={formatMessage(labels.changePassword)}>
|
||||||
|
{close => <PasswordEditForm onSave={handleSave} onClose={close} />}
|
||||||
|
</Modal>
|
||||||
</ModalTrigger>
|
</ModalTrigger>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -35,7 +35,7 @@ export default function WebsiteDetails({ websiteId }) {
|
|||||||
showLink={false}
|
showLink={false}
|
||||||
stickyHeader={true}
|
stickyHeader={true}
|
||||||
/>
|
/>
|
||||||
{!chartLoaded && <Loading icon="dots" />}
|
{!chartLoaded && <Loading icon="dots" style={{ minHeight: 300 }} />}
|
||||||
{chartLoaded && (
|
{chartLoaded && (
|
||||||
<>
|
<>
|
||||||
{!view && <WebsiteTableView websiteId={websiteId} />}
|
{!view && <WebsiteTableView websiteId={websiteId} />}
|
||||||
|
@ -1,10 +1,13 @@
|
|||||||
|
import AppLayout from 'components/layout/AppLayout';
|
||||||
import SettingsLayout from 'components/layout/SettingsLayout';
|
import SettingsLayout from 'components/layout/SettingsLayout';
|
||||||
import ProfileSettings from 'components/pages/settings/profile/ProfileSettings';
|
import ProfileSettings from 'components/pages/settings/profile/ProfileSettings';
|
||||||
|
|
||||||
export default function ProfilePage() {
|
export default function ProfilePage() {
|
||||||
return (
|
return (
|
||||||
<SettingsLayout>
|
<AppLayout>
|
||||||
<ProfileSettings />
|
<SettingsLayout>
|
||||||
</SettingsLayout>
|
<ProfileSettings />
|
||||||
|
</SettingsLayout>
|
||||||
|
</AppLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import AppLayout from 'components/layout/AppLayout';
|
||||||
import SettingsLayout from 'components/layout/SettingsLayout';
|
import SettingsLayout from 'components/layout/SettingsLayout';
|
||||||
import TeamSettings from 'components/pages/settings/teams/TeamSettings';
|
import TeamSettings from 'components/pages/settings/teams/TeamSettings';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
@ -11,9 +12,11 @@ export default function TeamDetailPage({ disabled }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SettingsLayout>
|
<AppLayout>
|
||||||
<TeamSettings teamId={id} />
|
<SettingsLayout>
|
||||||
</SettingsLayout>
|
<TeamSettings teamId={id} />
|
||||||
|
</SettingsLayout>
|
||||||
|
</AppLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import AppLayout from 'components/layout/AppLayout';
|
||||||
import SettingsLayout from 'components/layout/SettingsLayout';
|
import SettingsLayout from 'components/layout/SettingsLayout';
|
||||||
import TeamsList from 'components/pages/settings/teams/TeamsList';
|
import TeamsList from 'components/pages/settings/teams/TeamsList';
|
||||||
|
|
||||||
@ -7,9 +8,11 @@ export default function TeamsPage({ disabled }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SettingsLayout>
|
<AppLayout>
|
||||||
<TeamsList />
|
<SettingsLayout>
|
||||||
</SettingsLayout>
|
<TeamsList />
|
||||||
|
</SettingsLayout>
|
||||||
|
</AppLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import AppLayout from 'components/layout/AppLayout';
|
||||||
import SettingsLayout from 'components/layout/SettingsLayout';
|
import SettingsLayout from 'components/layout/SettingsLayout';
|
||||||
import UserSettings from 'components/pages/settings/users/UserSettings';
|
import UserSettings from 'components/pages/settings/users/UserSettings';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
@ -11,9 +12,11 @@ export default function TeamDetailPage({ disabled }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SettingsLayout>
|
<AppLayout>
|
||||||
<UserSettings userId={id} />
|
<SettingsLayout>
|
||||||
</SettingsLayout>
|
<UserSettings userId={id} />
|
||||||
|
</SettingsLayout>
|
||||||
|
</AppLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import AppLayout from 'components/layout/AppLayout';
|
||||||
import SettingsLayout from 'components/layout/SettingsLayout';
|
import SettingsLayout from 'components/layout/SettingsLayout';
|
||||||
import UsersList from 'components/pages/settings/users/UsersList';
|
import UsersList from 'components/pages/settings/users/UsersList';
|
||||||
|
|
||||||
@ -7,9 +8,11 @@ export default function UsersPage({ disabled }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SettingsLayout>
|
<AppLayout>
|
||||||
<UsersList />
|
<SettingsLayout>
|
||||||
</SettingsLayout>
|
<UsersList />
|
||||||
|
</SettingsLayout>
|
||||||
|
</AppLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import AppLayout from 'components/layout/AppLayout';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import WebsiteSettings from 'components/pages/settings/websites/WebsiteSettings';
|
import WebsiteSettings from 'components/pages/settings/websites/WebsiteSettings';
|
||||||
import SettingsLayout from 'components/layout/SettingsLayout';
|
import SettingsLayout from 'components/layout/SettingsLayout';
|
||||||
@ -11,9 +12,11 @@ export default function WebsiteSettingsPage({ disabled }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SettingsLayout>
|
<AppLayout>
|
||||||
<WebsiteSettings websiteId={id} />
|
<SettingsLayout>
|
||||||
</SettingsLayout>
|
<WebsiteSettings websiteId={id} />
|
||||||
|
</SettingsLayout>
|
||||||
|
</AppLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import AppLayout from 'components/layout/AppLayout';
|
||||||
import SettingsLayout from 'components/layout/SettingsLayout';
|
import SettingsLayout from 'components/layout/SettingsLayout';
|
||||||
import WebsitesList from 'components/pages/settings/websites/WebsitesList';
|
import WebsitesList from 'components/pages/settings/websites/WebsitesList';
|
||||||
|
|
||||||
@ -7,9 +8,11 @@ export default function WebsitesPage({ disabled }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SettingsLayout>
|
<AppLayout>
|
||||||
<WebsitesList />
|
<SettingsLayout>
|
||||||
</SettingsLayout>
|
<WebsitesList />
|
||||||
|
</SettingsLayout>
|
||||||
|
</AppLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user