mirror of
https://github.com/kremalicious/umami.git
synced 2024-12-21 08:43:37 +01:00
Refactored menu buttons.
This commit is contained in:
parent
92d1fddf8b
commit
6319a8c6e0
@ -15,6 +15,7 @@ export default function DropDown({
|
|||||||
}) {
|
}) {
|
||||||
const [showMenu, setShowMenu] = useState(false);
|
const [showMenu, setShowMenu] = useState(false);
|
||||||
const ref = useRef();
|
const ref = useRef();
|
||||||
|
const selectedOption = options.find(e => e.value === value);
|
||||||
|
|
||||||
function handleShowMenu() {
|
function handleShowMenu() {
|
||||||
setShowMenu(state => !state);
|
setShowMenu(state => !state);
|
||||||
@ -40,7 +41,13 @@ export default function DropDown({
|
|||||||
<Icon icon={<Chevron />} className={styles.icon} size="small" />
|
<Icon icon={<Chevron />} className={styles.icon} size="small" />
|
||||||
</div>
|
</div>
|
||||||
{showMenu && (
|
{showMenu && (
|
||||||
<Menu className={menuClassName} options={options} onSelect={handleSelect} float="bottom" />
|
<Menu
|
||||||
|
className={menuClassName}
|
||||||
|
options={options}
|
||||||
|
selectedOption={selectedOption}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
float="bottom"
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -33,7 +33,8 @@ export default function Menu({
|
|||||||
<div
|
<div
|
||||||
key={value}
|
key={value}
|
||||||
className={classNames(styles.option, optionClassName, customClassName, {
|
className={classNames(styles.option, optionClassName, customClassName, {
|
||||||
[selectedClassName]: selectedOption === value,
|
[selectedClassName]: selectedOption === option,
|
||||||
|
[styles.selected]: selectedOption === option,
|
||||||
[styles.divider]: divider,
|
[styles.divider]: divider,
|
||||||
})}
|
})}
|
||||||
onClick={e => onSelect(value, e)}
|
onClick={e => onSelect(value, e)}
|
||||||
|
@ -44,3 +44,7 @@
|
|||||||
.divider {
|
.divider {
|
||||||
border-top: 1px solid var(--gray300);
|
border-top: 1px solid var(--gray300);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
58
components/common/MenuButton.js
Normal file
58
components/common/MenuButton.js
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import React, { useState, useRef } from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import Menu from 'components/common/Menu';
|
||||||
|
import Button from 'components/common/Button';
|
||||||
|
import useDocumentClick from 'hooks/useDocumentClick';
|
||||||
|
import styles from './MenuButton.module.css';
|
||||||
|
|
||||||
|
export default function MenuButton({
|
||||||
|
icon,
|
||||||
|
value,
|
||||||
|
options,
|
||||||
|
menuPosition = 'bottom',
|
||||||
|
menuAlign = 'right',
|
||||||
|
onSelect,
|
||||||
|
renderValue,
|
||||||
|
}) {
|
||||||
|
const [showMenu, setShowMenu] = useState(false);
|
||||||
|
const ref = useRef();
|
||||||
|
const selectedOption = options.find(e => e.value === value);
|
||||||
|
|
||||||
|
function handleSelect(value) {
|
||||||
|
onSelect(value);
|
||||||
|
setShowMenu(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleMenu() {
|
||||||
|
setShowMenu(state => !state);
|
||||||
|
}
|
||||||
|
|
||||||
|
useDocumentClick(e => {
|
||||||
|
if (!ref.current.contains(e.target)) {
|
||||||
|
setShowMenu(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.container} ref={ref}>
|
||||||
|
<Button
|
||||||
|
icon={icon}
|
||||||
|
className={classNames({ [styles.open]: showMenu })}
|
||||||
|
onClick={toggleMenu}
|
||||||
|
variant="light"
|
||||||
|
>
|
||||||
|
<div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
|
||||||
|
</Button>
|
||||||
|
{showMenu && (
|
||||||
|
<Menu
|
||||||
|
className={styles.menu}
|
||||||
|
options={options}
|
||||||
|
selectedOption={selectedOption}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
float={menuPosition}
|
||||||
|
align={menuAlign}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -1,25 +0,0 @@
|
|||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.username {
|
|
||||||
border-bottom: 1px solid var(--gray500);
|
|
||||||
}
|
|
||||||
|
|
||||||
.username:hover {
|
|
||||||
background: var(--gray50);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open {
|
|
||||||
background: var(--gray200);
|
|
||||||
}
|
|
||||||
|
|
||||||
.open:hover {
|
|
||||||
background: var(--gray200);
|
|
||||||
}
|
|
@ -3,10 +3,10 @@ import { FormattedMessage } from 'react-intl';
|
|||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import Link from 'components/common/Link';
|
import Link from 'components/common/Link';
|
||||||
import UserButton from 'components/common/UserButton';
|
|
||||||
import Icon from 'components/common/Icon';
|
import Icon from 'components/common/Icon';
|
||||||
import LanguageButton from 'components/settings/LanguageButton';
|
import LanguageButton from 'components/settings/LanguageButton';
|
||||||
import ThemeButton from 'components/settings/ThemeButton';
|
import ThemeButton from 'components/settings/ThemeButton';
|
||||||
|
import UserButton from 'components/settings/UserButton';
|
||||||
import Logo from 'assets/logo.svg';
|
import Logo from 'assets/logo.svg';
|
||||||
import styles from './Header.module.css';
|
import styles from './Header.module.css';
|
||||||
|
|
||||||
|
@ -1,35 +1,17 @@
|
|||||||
import React, { useState, useRef } from 'react';
|
import React from 'react';
|
||||||
import classNames from 'classnames';
|
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Menu from 'components/common/Menu';
|
|
||||||
import Button from 'components/common/Button';
|
|
||||||
import { menuOptions } from 'lib/lang';
|
import { menuOptions } from 'lib/lang';
|
||||||
import useLocale from 'hooks/useLocale';
|
import useLocale from 'hooks/useLocale';
|
||||||
import useDocumentClick from 'hooks/useDocumentClick';
|
import MenuButton from 'components/common/MenuButton';
|
||||||
import Globe from 'assets/globe.svg';
|
import Globe from 'assets/globe.svg';
|
||||||
import styles from './LanguageButton.module.css';
|
|
||||||
|
|
||||||
export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) {
|
export default function LanguageButton() {
|
||||||
const [showMenu, setShowMenu] = useState(false);
|
|
||||||
const [locale, setLocale] = useLocale();
|
const [locale, setLocale] = useLocale();
|
||||||
const ref = useRef();
|
|
||||||
const selectedLocale = menuOptions.find(e => e.value === locale)?.display;
|
|
||||||
|
|
||||||
function handleSelect(value) {
|
function handleSelect(value) {
|
||||||
setLocale(value);
|
setLocale(value);
|
||||||
setShowMenu(false);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleMenu() {
|
|
||||||
setShowMenu(state => !state);
|
|
||||||
}
|
|
||||||
|
|
||||||
useDocumentClick(e => {
|
|
||||||
if (!ref.current.contains(e.target)) {
|
|
||||||
setShowMenu(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
@ -46,25 +28,13 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Head>
|
</Head>
|
||||||
<div ref={ref} className={styles.container}>
|
<MenuButton
|
||||||
<Button
|
icon={<Globe />}
|
||||||
icon={<Globe />}
|
options={menuOptions}
|
||||||
className={classNames({ [styles.open]: showMenu })}
|
value={locale}
|
||||||
onClick={toggleMenu}
|
renderValue={option => option?.display}
|
||||||
variant="light"
|
onSelect={handleSelect}
|
||||||
>
|
/>
|
||||||
<div className={styles.text}>{selectedLocale}</div>
|
|
||||||
</Button>
|
|
||||||
{showMenu && (
|
|
||||||
<Menu
|
|
||||||
className={styles.menu}
|
|
||||||
options={menuOptions}
|
|
||||||
onSelect={handleSelect}
|
|
||||||
float={menuPosition}
|
|
||||||
align={menuAlign}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -13,12 +13,12 @@ export default function ThemeButton() {
|
|||||||
const transitions = useTransition(theme, theme => theme, {
|
const transitions = useTransition(theme, theme => theme, {
|
||||||
from: {
|
from: {
|
||||||
opacity: 0,
|
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)' },
|
enter: { opacity: 1, transform: 'translateY(0px) scale(1)' },
|
||||||
leave: {
|
leave: {
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
|
transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -1,20 +1,15 @@
|
|||||||
import React, { useState, useRef } from 'react';
|
import React from 'react';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import Menu from './Menu';
|
import MenuButton from 'components/common/MenuButton';
|
||||||
import Icon from './Icon';
|
import Icon from 'components/common/Icon';
|
||||||
import Button from './Button';
|
|
||||||
import useDocumentClick from 'hooks/useDocumentClick';
|
|
||||||
import User from 'assets/user.svg';
|
import User from 'assets/user.svg';
|
||||||
import Chevron from 'assets/chevron-down.svg';
|
import Chevron from 'assets/chevron-down.svg';
|
||||||
import styles from './UserButton.module.css';
|
import styles from './UserButton.module.css';
|
||||||
import classNames from 'classnames';
|
|
||||||
|
|
||||||
export default function UserButton() {
|
export default function UserButton() {
|
||||||
const [showMenu, setShowMenu] = useState(false);
|
|
||||||
const user = useSelector(state => state.user);
|
const user = useSelector(state => state.user);
|
||||||
const ref = useRef();
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const menuOptions = [
|
const menuOptions = [
|
||||||
@ -34,8 +29,6 @@ export default function UserButton() {
|
|||||||
];
|
];
|
||||||
|
|
||||||
function handleSelect(value) {
|
function handleSelect(value) {
|
||||||
setShowMenu(false);
|
|
||||||
|
|
||||||
if (value === 'logout') {
|
if (value === 'logout') {
|
||||||
router.push('/logout');
|
router.push('/logout');
|
||||||
} else if (value === 'profile') {
|
} else if (value === 'profile') {
|
||||||
@ -43,32 +36,12 @@ export default function UserButton() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
useDocumentClick(e => {
|
|
||||||
if (!ref.current.contains(e.target)) {
|
|
||||||
setShowMenu(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={ref} className={styles.container}>
|
<MenuButton
|
||||||
<Button
|
icon={<Icon icon={<User />} size="large" />}
|
||||||
icon={<User />}
|
value={<Icon icon={<Chevron />} size="small" />}
|
||||||
className={classNames({ [styles.open]: showMenu })}
|
options={menuOptions}
|
||||||
onClick={() => setShowMenu(state => !state)}
|
onSelect={handleSelect}
|
||||||
size="large"
|
/>
|
||||||
variant="light"
|
|
||||||
>
|
|
||||||
<Icon icon={<Chevron />} size="small" />
|
|
||||||
</Button>
|
|
||||||
{showMenu && (
|
|
||||||
<Menu
|
|
||||||
className={styles.menu}
|
|
||||||
options={menuOptions}
|
|
||||||
onSelect={handleSelect}
|
|
||||||
float="bottom"
|
|
||||||
align="right"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
7
components/settings/UserButton.module.css
Normal file
7
components/settings/UserButton.module.css
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
.username {
|
||||||
|
border-bottom: 1px solid var(--gray500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.username:hover {
|
||||||
|
background: var(--gray50);
|
||||||
|
}
|
24
lib/lang.js
24
lib/lang.js
@ -44,18 +44,18 @@ export const dateLocales = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const menuOptions = [
|
export const menuOptions = [
|
||||||
{ label: 'English', value: 'en-US', display: 'EN' },
|
{ label: 'English', value: 'en-US', display: 'en' },
|
||||||
{ label: '中文', value: 'zh-CN', display: 'CN' },
|
{ label: '中文', value: 'zh-CN', display: 'cn' },
|
||||||
{ label: 'Dansk', value: 'da-DK', display: 'DA' },
|
{ label: 'Dansk', value: 'da-DK', display: 'da' },
|
||||||
{ label: 'Deutsch', value: 'de-DE', display: 'DE' },
|
{ label: 'Deutsch', value: 'de-DE', display: 'de' },
|
||||||
{ label: 'Español', value: 'es-MX', display: 'ES' },
|
{ label: 'Español', value: 'es-MX', display: 'es' },
|
||||||
{ label: 'Français', value: 'fr-FR', display: 'FR' },
|
{ label: 'Français', value: 'fr-FR', display: 'fr' },
|
||||||
{ label: '日本語', value: 'ja-JP', display: 'JA' },
|
{ label: '日本語', value: 'ja-JP', display: 'ja' },
|
||||||
{ label: 'Монгол', value: 'mn-MN', display: 'MN' },
|
{ label: 'Монгол', value: 'mn-MN', display: 'mn' },
|
||||||
{ label: 'Nederlands', value: 'nl-NL', display: 'NL' },
|
{ label: 'Nederlands', value: 'nl-NL', display: 'nl' },
|
||||||
{ label: 'Русский', value: 'ru-RU', display: 'RU' },
|
{ label: 'Русский', value: 'ru-RU', display: 'ru' },
|
||||||
{ label: 'Svenska', value: 'sv-SE', display: 'SV' },
|
{ label: 'Svenska', value: 'sv-SE', display: 'sv' },
|
||||||
{ label: 'Turkish', value: 'tr-TR', display: 'TR' },
|
{ label: 'Turkish', value: 'tr-TR', display: 'tr' },
|
||||||
];
|
];
|
||||||
|
|
||||||
export function dateFormat(date, str, locale) {
|
export function dateFormat(date, str, locale) {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "umami",
|
"name": "umami",
|
||||||
"version": "0.45.0",
|
"version": "0.46.0",
|
||||||
"description": "A simple, fast, website analytics alternative to Google Analytics. ",
|
"description": "A simple, fast, website analytics alternative to Google Analytics. ",
|
||||||
"author": "Mike Cao <mike@mikecao.com>",
|
"author": "Mike Cao <mike@mikecao.com>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
Loading…
Reference in New Issue
Block a user