mirror of
https://github.com/umami-software/umami.git
synced 2026-02-09 23:27:12 +01:00
Dark mode.
This commit is contained in:
Mike Cao
parent
4bb95cd997
commit
aa265d1d42
29 changed files with 221 additions and 60 deletions
|
|
@ -3,6 +3,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-normal);
|
||||
color: var(--gray900);
|
||||
background: var(--gray100);
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
|
|
@ -18,7 +19,7 @@
|
|||
}
|
||||
|
||||
.button:active {
|
||||
color: initial;
|
||||
color: var(--gray700);
|
||||
}
|
||||
|
||||
.large {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
.group .button {
|
||||
border-radius: 0;
|
||||
color: var(--gray800);
|
||||
background: var(--gray50);
|
||||
border-left: 1px solid var(--gray500);
|
||||
padding: 4px 8px;
|
||||
|
|
@ -24,6 +25,7 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.selected {
|
||||
.group .button.selected {
|
||||
color: var(--gray900);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,5 +20,5 @@
|
|||
}
|
||||
|
||||
.icon {
|
||||
padding-left: 10px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
import React, { useState, useRef } from 'react';
|
||||
import Head from 'next/head';
|
||||
import Menu from './Menu';
|
||||
import Button from './Button';
|
||||
import { menuOptions } from 'lib/lang';
|
||||
import useLocale from 'hooks/useLocale';
|
||||
import useDocumentClick from 'hooks/useDocumentClick';
|
||||
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);
|
||||
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>
|
||||
{locale === 'zh-CN' && (
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
)}
|
||||
{locale === 'ja-JP' && (
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
)}
|
||||
</Head>
|
||||
<div ref={ref} className={styles.container}>
|
||||
<Button icon={<Globe />} onClick={toggleMenu} size="small">
|
||||
<div>{selectedLocale}</div>
|
||||
</Button>
|
||||
{showMenu && (
|
||||
<Menu
|
||||
className={styles.menu}
|
||||
options={menuOptions}
|
||||
onSelect={handleSelect}
|
||||
float={menuPosition}
|
||||
align={menuAlign}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu {
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ a.link,
|
|||
a.link:active,
|
||||
a.link:visited {
|
||||
position: relative;
|
||||
color: #2c2c2c;
|
||||
color: var(--gray900);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -12,7 +12,7 @@ a.link:before {
|
|||
bottom: -2px;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: #2680eb;
|
||||
background: var(--primary400);
|
||||
opacity: 0.5;
|
||||
transition: width 100ms;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,14 +8,14 @@
|
|||
.option {
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: normal;
|
||||
background: #fff;
|
||||
background: var(--gray50);
|
||||
padding: 4px 16px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background: #f5f5f5;
|
||||
background: var(--gray100);
|
||||
}
|
||||
|
||||
.float {
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: var(--gray900);
|
||||
opacity: 0.1;
|
||||
background: #000;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.menu {
|
||||
color: var(--gray800);
|
||||
border: 1px solid var(--gray500);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
|
@ -16,5 +17,6 @@
|
|||
}
|
||||
|
||||
.selected {
|
||||
color: var(--gray900);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
color: var(--gray50);
|
||||
color: var(--msgColor);
|
||||
background: var(--green400);
|
||||
margin: auto;
|
||||
z-index: 2;
|
||||
|
|
|
|||
|
|
@ -1,44 +1,57 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import ReactTooltip from 'react-tooltip';
|
||||
import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
|
||||
import classNames from 'classnames';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
|
||||
import useTheme from 'hooks/useTheme';
|
||||
import { THEME_COLORS } from 'lib/constants';
|
||||
import styles from './WorldMap.module.css';
|
||||
|
||||
const geoUrl = '/world-110m.json';
|
||||
|
||||
export default function WorldMap({
|
||||
data,
|
||||
className,
|
||||
baseColor = '#e9f3fd',
|
||||
fillColor = '#f5f5f5',
|
||||
strokeColor = '#2680eb',
|
||||
hoverColor = '#2680eb',
|
||||
}) {
|
||||
export default function WorldMap({ data, className }) {
|
||||
const [tooltip, setTooltip] = useState();
|
||||
const [theme] = useTheme();
|
||||
const colors = useMemo(
|
||||
() => ({
|
||||
baseColor: THEME_COLORS[theme].primary,
|
||||
fillColor: THEME_COLORS[theme].gray100,
|
||||
strokeColor: THEME_COLORS[theme].primary,
|
||||
hoverColor: THEME_COLORS[theme].primary,
|
||||
}),
|
||||
[theme],
|
||||
);
|
||||
|
||||
function getFillColor(code) {
|
||||
if (code === 'AQ') return '#ffffff';
|
||||
if (code === 'AQ') return;
|
||||
const country = data?.find(({ x }) => x === code);
|
||||
return country ? tinycolor(baseColor).darken(country.z) : fillColor;
|
||||
|
||||
if (!country) {
|
||||
return colors.fillColor;
|
||||
}
|
||||
|
||||
return tinycolor(colors.baseColor)[theme === 'light' ? 'lighten' : 'darken'](
|
||||
40 * (1.0 - country.z / 100),
|
||||
);
|
||||
}
|
||||
|
||||
function getStrokeColor(code) {
|
||||
return code === 'AQ' ? '#ffffff' : strokeColor;
|
||||
}
|
||||
|
||||
function getHoverColor(code) {
|
||||
return code === 'AQ' ? '#ffffff' : hoverColor;
|
||||
function getOpacity(code) {
|
||||
return code === 'AQ' ? 0 : 1;
|
||||
}
|
||||
|
||||
function handleHover({ ISO_A2: code, NAME: name }) {
|
||||
if (code === 'AQ') return;
|
||||
const country = data?.find(({ x }) => x === code);
|
||||
setTooltip(`${name}: ${country?.y || 0} visitors`);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames(styles.container, className)}>
|
||||
<ComposableMap data-tip="" projection="geoMercator">
|
||||
<div
|
||||
className={classNames(styles.container, className)}
|
||||
data-tip=""
|
||||
data-for="world-map-tooltip"
|
||||
>
|
||||
<ComposableMap projection="geoMercator">
|
||||
<ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
|
||||
<Geographies geography={geoUrl}>
|
||||
{({ geographies }) => {
|
||||
|
|
@ -50,10 +63,11 @@ export default function WorldMap({
|
|||
key={geo.rsmKey}
|
||||
geography={geo}
|
||||
fill={getFillColor(code)}
|
||||
stroke={getStrokeColor(code)}
|
||||
stroke={colors.strokeColor}
|
||||
opacity={getOpacity(code)}
|
||||
style={{
|
||||
default: { outline: 'none' },
|
||||
hover: { outline: 'none', fill: getHoverColor(code) },
|
||||
hover: { outline: 'none', fill: colors.hoverColor },
|
||||
pressed: { outline: 'none' },
|
||||
}}
|
||||
onMouseOver={() => handleHover(geo.properties)}
|
||||
|
|
@ -65,7 +79,7 @@ export default function WorldMap({
|
|||
</Geographies>
|
||||
</ZoomableGroup>
|
||||
</ComposableMap>
|
||||
<ReactTooltip>{tooltip}</ReactTooltip>
|
||||
<ReactTooltip id="world-map-tooltip">{tooltip}</ReactTooltip>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.container {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue