m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-06-20 11:23:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/common/DropDown.js
View File

@ -15,6 +15,7 @@ export default function DropDown({
}) {
const [showMenu, setShowMenu] = useState(false);
const ref = useRef();
const selectedOption = options.find(e => e.value === value);
function handleShowMenu() {
setShowMenu(state => !state);
@ -40,7 +41,13 @@ export default function DropDown({
<Icon icon={<Chevron />} className={styles.icon} size="small" />
</div>
{showMenu && (
<Menu className={menuClassName} options={options} onSelect={handleSelect} float="bottom" />
<Menu
className={menuClassName}
options={options}
selectedOption={selectedOption}
onSelect={handleSelect}
float="bottom"
/>
)}
</div>
);

3
components/common/Menu.js
View File

@ -33,7 +33,8 @@ export default function Menu({
<div
key={value}
className={classNames(styles.option, optionClassName, customClassName, {
[selectedClassName]: selectedOption === value,
[selectedClassName]: selectedOption === option,
[styles.selected]: selectedOption === option,
[styles.divider]: divider,
})}
onClick={e => onSelect(value, e)}

4
components/common/Menu.module.css
View File

@ -44,3 +44,7 @@
.divider {
border-top: 1px solid var(--gray300);
}
.selected {
font-weight: 600;
}

58
components/common/MenuButton.js Normal file
View 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>
);
}

0
components/settings/LanguageButton.module.css → components/common/MenuButton.module.css
View File

25
components/common/UserButton.module.css
View File

@ -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);
}

2
components/layout/Header.js
View File

@ -3,10 +3,10 @@ import { FormattedMessage } from 'react-intl';
import { useSelector } from 'react-redux';
import classNames from 'classnames';
import Link from 'components/common/Link';
import UserButton from 'components/common/UserButton';
import Icon from 'components/common/Icon';
import LanguageButton from 'components/settings/LanguageButton';
import ThemeButton from 'components/settings/ThemeButton';
import UserButton from 'components/settings/UserButton';
import Logo from 'assets/logo.svg';
import styles from './Header.module.css';

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}
/>
</>
);
}

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)`,
},
});

45
components/common/UserButton.js → components/settings/UserButton.js
View File

@ -1,20 +1,15 @@
import React, { useState, useRef } from 'react';
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { useSelector } from 'react-redux';
import { useRouter } from 'next/router';
import Menu from './Menu';
import Icon from './Icon';
import Button from './Button';
import useDocumentClick from 'hooks/useDocumentClick';
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';
import classNames from 'classnames';
export default function UserButton() {
const [showMenu, setShowMenu] = useState(false);
const user = useSelector(state => state.user);
const ref = useRef();
const router = useRouter();
const menuOptions = [
@ -34,8 +29,6 @@ export default function UserButton() {
];
function handleSelect(value) {
setShowMenu(false);
if (value === 'logout') {
router.push('/logout');
} else if (value === 'profile') {
@ -43,32 +36,12 @@ export default function UserButton() {
}
}
useDocumentClick(e => {
if (!ref.current.contains(e.target)) {
setShowMenu(false);
}
});
return (
<div ref={ref} className={styles.container}>
<Button
icon={<User />}
className={classNames({ [styles.open]: showMenu })}
onClick={() => setShowMenu(state => !state)}
size="large"
variant="light"
>
<Icon icon={<Chevron />} size="small" />
</Button>
{showMenu && (
<Menu
className={styles.menu}
options={menuOptions}
onSelect={handleSelect}
float="bottom"
align="right"
/>
)}
</div>
<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);
}

24
lib/lang.js
View File

@ -44,18 +44,18 @@ export const dateLocales = {
};
export const menuOptions = [
{ label: 'English', value: 'en-US', display: 'EN' },
{ label: '中文', value: 'zh-CN', display: 'CN' },
{ label: 'Dansk', value: 'da-DK', display: 'DA' },
{ label: 'Deutsch', value: 'de-DE', display: 'DE' },
{ label: 'Español', value: 'es-MX', display: 'ES' },
{ label: 'Français', value: 'fr-FR', display: 'FR' },
{ label: '日本語', value: 'ja-JP', display: 'JA' },
{ label: 'Монгол', value: 'mn-MN', display: 'MN' },
{ label: 'Nederlands', value: 'nl-NL', display: 'NL' },
{ label: 'Русский', value: 'ru-RU', display: 'RU' },
{ label: 'Svenska', value: 'sv-SE', display: 'SV' },
{ label: 'Turkish', value: 'tr-TR', display: 'TR' },
{ label: 'English', value: 'en-US', display: 'en' },
{ label: '中文', value: 'zh-CN', display: 'cn' },
{ label: 'Dansk', value: 'da-DK', display: 'da' },
{ label: 'Deutsch', value: 'de-DE', display: 'de' },
{ label: 'Español', value: 'es-MX', display: 'es' },
{ label: 'Français', value: 'fr-FR', display: 'fr' },
{ label: '日本語', value: 'ja-JP', display: 'ja' },
{ label: 'Монгол', value: 'mn-MN', display: 'mn' },
{ label: 'Nederlands', value: 'nl-NL', display: 'nl' },
{ label: 'Русский', value: 'ru-RU', display: 'ru' },
{ label: 'Svenska', value: 'sv-SE', display: 'sv' },
{ label: 'Turkish', value: 'tr-TR', display: 'tr' },
];
export function dateFormat(date, str, locale) {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "umami",
"version": "0.45.0",
"version": "0.46.0",
"description": "A simple, fast, website analytics alternative to Google Analytics. ",
"author": "Mike Cao <mike@mikecao.com>",
"license": "MIT",