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

Refactored menu buttons.

Browse source
This commit is contained in:
Mike Cao 2020-09-20 21:31:53 -07:00
parent 92d1fddf8b
commit 6319a8c6e0
13 changed files with 114 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

50
components/settings/LanguageButton.js
View file

@ -1,35 +1,17 @@
import React, { useState, useRef } from 'react';
import classNames from 'classnames';
import React from 'react';
import Head from 'next/head';
import Menu from 'components/common/Menu';
import Button from 'components/common/Button';
import { menuOptions } from 'lib/lang';
import useLocale from 'hooks/useLocale';
import useDocumentClick from 'hooks/useDocumentClick';
import MenuButton from 'components/common/MenuButton';
import Globe from 'assets/globe.svg';
import styles from './LanguageButton.module.css';
export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) {
const [showMenu, setShowMenu] = useState(false);
export default function LanguageButton() {
const [locale, setLocale] = useLocale();
const ref = useRef();
const selectedLocale = menuOptions.find(e => e.value === locale)?.display;
function handleSelect(value) {
setLocale(value);
setShowMenu(false);
}
function toggleMenu() {
setShowMenu(state => !state);
}
useDocumentClick(e => {
if (!ref.current.contains(e.target)) {
setShowMenu(false);
}
});
return (
<>
<Head>
@ -46,25 +28,13 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
/>
)}
</Head>
<div ref={ref} className={styles.container}>
<Button
icon={<Globe />}
className={classNames({ [styles.open]: showMenu })}
onClick={toggleMenu}
variant="light"
>
<div className={styles.text}>{selectedLocale}</div>
</Button>
{showMenu && (
<Menu
className={styles.menu}
options={menuOptions}
onSelect={handleSelect}
float={menuPosition}
align={menuAlign}
/>
)}
</div>
<MenuButton
icon={<Globe />}
options={menuOptions}
value={locale}
renderValue={option => option?.display}
onSelect={handleSelect}
/>
</>
);
}

21
components/settings/LanguageButton.module.css
View file

@ -1,21 +0,0 @@
.container {
display: flex;
position: relative;
cursor: pointer;
}
.menu {
z-index: 100;
}
.text {
font-size: var(--font-size-small);
}
.open {
background: var(--gray200);
}
.open:hover {
background: var(--gray200);
}

4
components/settings/ThemeButton.js
View file

@ -13,12 +13,12 @@ export default function ThemeButton() {
const transitions = useTransition(theme, theme => theme, {
from: {
opacity: 0,
transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
},
enter: { opacity: 1, transform: 'translateY(0px) scale(1)' },
leave: {
opacity: 0,
transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
},
});

47
components/settings/UserButton.js Normal file
View file

@ -0,0 +1,47 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { useSelector } from 'react-redux';
import { useRouter } from 'next/router';
import MenuButton from 'components/common/MenuButton';
import Icon from 'components/common/Icon';
import User from 'assets/user.svg';
import Chevron from 'assets/chevron-down.svg';
import styles from './UserButton.module.css';
export default function UserButton() {
const user = useSelector(state => state.user);
const router = useRouter();
const menuOptions = [
{
label: (
<FormattedMessage
id="label.logged-in-as"
defaultMessage="Logged in as {username}"
values={{ username: <b>{user.username}</b> }}
/>
),
value: 'username',
className: styles.username,
},
{ label: <FormattedMessage id="label.profile" defaultMessage="Profile" />, value: 'profile' },
{ label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: 'logout' },
];
function handleSelect(value) {
if (value === 'logout') {
router.push('/logout');
} else if (value === 'profile') {
router.push('/settings/profile');
}
}
return (
<MenuButton
icon={<Icon icon={<User />} size="large" />}
value={<Icon icon={<Chevron />} size="small" />}
options={menuOptions}
onSelect={handleSelect}
/>
);
}

7
components/settings/UserButton.module.css Normal file
View file

@ -0,0 +1,7 @@
.username {
border-bottom: 1px solid var(--gray500);
}
.username:hover {
background: var(--gray50);
}