m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-11-15 09:45:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1917 from atmonshi/ui-rtl

Browse Source 
UI rtl
This commit is contained in:
Mike Cao 2023-04-19 17:02:25 -07:00 committed by GitHub
commit f2c0b4253a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/input/LanguageButton.js
View File

@ -6,7 +6,7 @@ import Icons from 'components/icons';
import styles from './LanguageButton.module.css';
export default function LanguageButton() {
const { locale, saveLocale } = useLocale();
const { locale, saveLocale, dir } = useLocale();
const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
function handleSelect(value) {
@ -20,7 +20,7 @@ export default function LanguageButton() {
<Icons.Globe />
</Icon>
</Button>
<Popup position="bottom" alignment="end">
<Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
<div className={styles.menu}>
{items.map(({ value, label }) => {
return (

4
components/input/ProfileButton.js
View File

@ -5,12 +5,14 @@ import useMessages from 'hooks/useMessages';
import useUser from 'hooks/useUser';
import useConfig from 'hooks/useConfig';
import styles from './ProfileButton.module.css';
import useLocale from 'hooks/useLocale';
export default function ProfileButton() {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const { cloudMode } = useConfig();
const router = useRouter();
const { dir } = useLocale();
const handleSelect = key => {
if (key === 'profile') {
@ -31,7 +33,7 @@ export default function ProfileButton() {
<Icons.ChevronDown />
</Icon>
</Button>
<Popup position="bottom" alignment="end">
<Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
<Menu variant="popup" onSelect={handleSelect} className={styles.menu}>
<Item key="user" className={styles.item}>
<Text>{user.username}</Text>

4
components/metrics/MetricsTable.js
View File

@ -13,6 +13,7 @@ import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import Icons from 'components/icons';
import useMessages from 'hooks/useMessages';
import styles from './MetricsTable.module.css';
import useLocale from 'hooks/useLocale';
export default function MetricsTable({
websiteId,
@ -69,6 +70,7 @@ export default function MetricsTable({
}
return [];
}, [data, error, dataFilter, filterOptions]);
const { dir } = useLocale();
return (
<div className={classNames(styles.container, className)}>
@ -80,7 +82,7 @@ export default function MetricsTable({
<Link href={router.pathname} as={resolveUrl({ view: type })}>
<Button variant="quiet">
<Text>{formatMessage(labels.more)}</Text>
<Icon size="sm">
<Icon size="sm" rotate={dir === 'rtl' ? 180 : 0}>
<Icons.ArrowRight />
</Icon>
</Button>

6
components/metrics/WebsiteChart.js
View File

@ -18,6 +18,7 @@ import Icons from 'components/icons';
import useSticky from 'hooks/useSticky';
import useMessages from 'hooks/useMessages';
import styles from './WebsiteChart.module.css';
import useLocale from 'hooks/useLocale';
export default function WebsiteChart({
websiteId,
@ -72,6 +73,7 @@ export default function WebsiteChart({
return { pageviews: [], sessions: [] };
}, [data, modified]);
const { dir } = useLocale();
return (
<>
<WebsiteHeader websiteId={websiteId} name={name} domain={domain}>
@ -80,7 +82,9 @@ export default function WebsiteChart({
<Button variant="primary">
<Text>{formatMessage(labels.viewDetails)}</Text>
<Icon>
<Icons.ArrowRight />
<Icon rotate={dir === 'rtl' ? 180 : 0}>
<Icons.ArrowRight />
</Icon>
</Icon>
</Button>
</Link>