Messages for devices so they can be localized.

2024-12-23 18:04:47 +01:00 · 2020-09-15 20:34:30 -07:00 · 2020-09-15 20:34:30 -07:00 · 2d9523f963
commit 2d9523f963
parent c707b49400
19 changed files with 111 additions and 39 deletions
--- a/components/common/RefreshButton.js
+++ b/components/common/RefreshButton.js
@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
 import { setDateRange } from 'redux/actions/websites';
 import Button from './Button';
 import Refresh from 'assets/redo.svg';
@ -24,5 +25,13 @@ export default function RefreshButton({ websiteId }) {
    setLoading(false);
  }, [completed]);

-  return <Button icon={loading ? <Dots /> : <Refresh />} size="small" onClick={handleClick} />;
+  return (
+    <Button
+      icon={loading ? <Dots /> : <Refresh />}
+      tooltip={<FormattedMessage id="button.refresh" defaultMessage="Refresh" />}
+      tooltipId="button-refresh"
+      size="small"
+      onClick={handleClick}
+    />
+  );
 }
--- a/components/layout/Footer.js
+++ b/components/layout/Footer.js
@ -1,5 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import Link from 'components/common/Link';
 import styles from './Footer.module.css';

 export default function Footer() {
@ -11,12 +12,12 @@ export default function Footer() {
        <div>
          <FormattedMessage
            id="footer.powered-by"
-            defaultMessage="Powered by {name} {version}"
+            defaultMessage="Powered by {name}"
            values={{
              name: (
-                <a href="https://umami.is">
+                <Link href="https://umami.is">
                  <b>umami</b>
-                </a>
+                </Link>
              ),
            }}
          />
--- a/components/messages.js
+++ b/components/messages.js
@ -0,0 +1,17 @@
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+export const labels = defineMessages({
+  unknown: { id: 'label.unknown', defaultMessage: 'Unknown' },
+});
+
+export const devices = defineMessages({
+  desktop: { id: 'device.desktop', defaultMessage: 'Desktop' },
+  laptop: { id: 'device.laptop', defaultMessage: 'Laptop' },
+  tablet: { id: 'device.tablet', defaultMessage: 'Tablet' },
+  mobile: { id: 'device.mobile', defaultMessage: 'Mobile' },
+});
+
+export function getDeviceMessage(device) {
+  return <FormattedMessage {...(devices[device] || labels.unknown)} />;
+}
--- a/components/metrics/DevicesTable.js
+++ b/components/metrics/DevicesTable.js
@ -2,6 +2,7 @@ import React from 'react';
 import MetricsTable from './MetricsTable';
 import { deviceFilter } from 'lib/filters';
 import { FormattedMessage } from 'react-intl';
+import { getDeviceMessage } from 'components/messages';

 export default function DevicesTable({ websiteId, limit, onExpand }) {
  return (
@ -12,6 +13,7 @@ export default function DevicesTable({ websiteId, limit, onExpand }) {
      websiteId={websiteId}
      limit={limit}
      dataFilter={deviceFilter}
+      renderLabel={({ x }) => getDeviceMessage(x)}
      onExpand={onExpand}
    />
  );
--- a/components/metrics/WebsiteHeader.module.css
+++ b/components/metrics/WebsiteHeader.module.css
@ -6,6 +6,7 @@

 .link {
  font-size: var(--font-size-small);
+  font-weight: 600;
 }

 .link svg {
--- a/components/settings/WebsiteSettings.js
+++ b/components/settings/WebsiteSettings.js
@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
+import Link from 'components/common/Link';
 import Table from 'components/common/Table';
 import Button from 'components/common/Button';
 import PageHeader from 'components/layout/PageHeader';
@ -16,7 +17,7 @@ import Pen from 'assets/pen.svg';
 import Trash from 'assets/trash.svg';
 import Plus from 'assets/plus.svg';
 import Code from 'assets/code.svg';
-import Link from 'assets/link.svg';
+import LinkIcon from 'assets/link.svg';
 import useFetch from 'hooks/useFetch';
 import styles from './WebsiteSettings.module.css';

@ -34,7 +35,7 @@ export default function WebsiteSettings() {
    <ButtonLayout>
      {row.share_id && (
        <Button
-          icon={<Link />}
+          icon={<LinkIcon />}
          size="small"
          tooltip={<FormattedMessage id="tooltip.get-share-url" defaultMessage="Get share URL" />}
          tooltipId={`button-share-${row.website_id}`}
@ -63,11 +64,18 @@ export default function WebsiteSettings() {
    </ButtonLayout>
  );

+  const DetailsLink = ({ website_id, name }) => (
+    <Link href="/website/[...id]" as={`/website/${website_id}/${name}`}>
+      {name}
+    </Link>
+  );
+
  const columns = [
    {
      key: 'name',
      label: <FormattedMessage id="label.name" defaultMessage="Name" />,
      className: 'col-6 col-xl-4',
+      render: DetailsLink,
    },
    {
      key: 'domain',
--- a/lang/de-DE.json
+++ b/lang/de-DE.json
@ -10,9 +10,14 @@
  "button.edit": "Bearbeiten",
  "button.login": "Anmelden",
  "button.more": "Mehr",
+  "button.refresh": "Refresh",
  "button.save": "Speichern",
  "button.view-details": "Details anzeigen",
  "button.websites": "Webseiten",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
  "footer.powered-by": "Powered by {name}",
  "header.nav.dashboard": "Übersicht",
  "header.nav.settings": "Einstellungen",
@ -37,6 +42,7 @@
  "label.this-week": "Diese Woche",
  "label.this-year": "Dieses Jahr",
  "label.today": "Heute",
+  "label.unknown": "Unknown",
  "label.username": "Benutzername",
  "message.confirm-delete": "Sind sie sich sicher {target} zu löschen?",
  "message.copied": "In Zwischenablage kopiert!",
--- a/lang/en-US.json
+++ b/lang/en-US.json
@ -10,9 +10,14 @@
  "button.edit": "Edit",
  "button.login": "Login",
  "button.more": "More",
+  "button.refresh": "Refresh",
  "button.save": "Save",
  "button.view-details": "View details",
  "button.websites": "Websites",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
  "footer.powered-by": "Powered by {name}",
  "header.nav.dashboard": "Dashboard",
  "header.nav.settings": "Settings",
@ -37,6 +42,7 @@
  "label.this-week": "This week",
  "label.this-year": "This year",
  "label.today": "Today",
+  "label.unknown": "Unknown",
  "label.username": "Username",
  "message.confirm-delete": "Are your sure you want to delete {target}?",
  "message.copied": "Copied!",
--- a/lang/es-MX.json
+++ b/lang/es-MX.json
@ -10,9 +10,14 @@
  "button.edit": "Editar",
  "button.login": "Iniciar sesión",
  "button.more": "Más",
+  "button.refresh": "Refresh",
  "button.save": "Guardar",
  "button.view-details": "Ver detalles",
  "button.websites": "Sitios",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
  "footer.powered-by": "Desarrollado con {name}",
  "header.nav.dashboard": "Panel de control",
  "header.nav.settings": "Configuraciones",
@ -37,6 +42,7 @@
  "label.this-week": "Esta semana",
  "label.this-year": "Este año",
  "label.today": "Hoy",
+  "label.unknown": "Unknown",
  "label.username": "Nombre de usuario",
  "message.confirm-delete": "¿Estás seguro(a) de querer eliminar {target}?",
  "message.copied": "Copiado!",
--- a/lang/fr-FR.json
+++ b/lang/fr-FR.json
@ -10,10 +10,15 @@
  "button.edit": "Modifier",
  "button.login": "Connexion",
  "button.more": "Plus",
+  "button.refresh": "Refresh",
  "button.save": "Sauvegarder",
  "button.view-details": "Voir les details",
  "button.websites": "Sites",
-  "footer.powered-by": "Propulsé par",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
+  "footer.powered-by": "Propulsé par {name}",
  "header.nav.dashboard": "Tableau de bord",
  "header.nav.settings": "Paramètres",
  "label.administrator": "Administrateur",
@ -37,6 +42,7 @@
  "label.this-week": "Cette semaine",
  "label.this-year": "Cette année",
  "label.today": "Aujourd'hui",
+  "label.unknown": "Unknown",
  "label.username": "Nom d'utilisateur",
  "message.confirm-delete": "Êtes-vous sur de vouloir supprimer {target}?",
  "message.copied": "Copié !",
--- a/lang/ja-JP.json
+++ b/lang/ja-JP.json
@ -10,9 +10,14 @@
  "button.edit": "編集",
  "button.login": "ログイン",
  "button.more": "さらに表示",
+  "button.refresh": "Refresh",
  "button.save": "保存",
  "button.view-details": "詳細表示",
  "button.websites": "Webサイト",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
  "footer.powered-by": "Powered by {name}",
  "header.nav.dashboard": "ダッシュボード",
  "header.nav.settings": "設定",
@ -37,6 +42,7 @@
  "label.this-week": "今週",
  "label.this-year": "今年",
  "label.today": "今日",
+  "label.unknown": "Unknown",
  "label.username": "ユーザー名",
  "message.confirm-delete": "{target}を削除してもよろしいですか？",
  "message.copied": "コピーしました！",
--- a/lang/mn-MN.json
+++ b/lang/mn-MN.json
@ -10,10 +10,15 @@
  "button.edit": "Засах",
  "button.login": "Нэвтрэх",
  "button.more": "Цааш",
+  "button.refresh": "Refresh",
  "button.save": "Хадгалах",
  "button.view-details": "Дэлгэрүүлж харах",
  "button.websites": "Вебүүд",
-  "footer.powered-by": "Powered by",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
+  "footer.powered-by": "Powered by {name}",
  "header.nav.dashboard": "Хянах самбар",
  "header.nav.settings": "Тохиргоо",
  "label.administrator": "Админ",
@ -37,6 +42,7 @@
  "label.this-week": "Энэ долоо хоног",
  "label.this-year": "Энэ жил",
  "label.today": "Өнөөдөр",
+  "label.unknown": "Unknown",
  "label.username": "Хэрэглэгчийн нэр",
  "message.confirm-delete": "Та {target}-г устгахдаа итгэлтэй байна уу?",
  "message.copied": "Хуулсан!",
--- a/lang/nl-NL.json
+++ b/lang/nl-NL.json
@ -10,9 +10,14 @@
  "button.edit": "Bewerken",
  "button.login": "Inloggen",
  "button.more": "Toon meer",
+  "button.refresh": "Refresh",
  "button.save": "Opslaan",
  "button.view-details": "Meer details",
  "button.websites": "Websites",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
  "footer.powered-by": "mogelijk gemaakt door {name}",
  "header.nav.dashboard": "Dashboard",
  "header.nav.settings": "Instellingen",
@ -37,6 +42,7 @@
  "label.this-week": "Deze week",
  "label.this-year": "Dit jaar",
  "label.today": "Vandaag",
+  "label.unknown": "Unknown",
  "label.username": "Gebruikersnaam",
  "message.confirm-delete": "Weet je zeker dat je {target} wilt verwijderen?",
  "message.copied": "Gekopiëerd!",
--- a/lang/ru-RU.json
+++ b/lang/ru-RU.json
@ -10,9 +10,14 @@
  "button.edit": "Редактировать",
  "button.login": "Войти",
  "button.more": "Больше",
+  "button.refresh": "Refresh",
  "button.save": "Сохранить",
  "button.view-details": "Посмотреть детали",
  "button.websites": "Сайты",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
  "footer.powered-by": "на движке {name}",
  "header.nav.dashboard": "Информационная панель",
  "header.nav.settings": "Настройки",
@ -37,6 +42,7 @@
  "label.this-week": "Эта неделя",
  "label.this-year": "Этот год",
  "label.today": "Сегодня",
+  "label.unknown": "Unknown",
  "label.username": "Имя пользователя",
  "message.confirm-delete": "Вы уверены, что хотите удалить {target}?",
  "message.copied": "Скопировано!",
--- a/lang/tr-TR.json
+++ b/lang/tr-TR.json
@ -10,9 +10,14 @@
  "button.edit": "Düzenle",
  "button.login": "Giriş Yap",
  "button.more": "Detaylı göster",
+  "button.refresh": "Refresh",
  "button.save": "Kaydet",
  "button.view-details": "Detayı incele",
  "button.websites": "Web siteleri",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
  "footer.powered-by": "Sağlayıcı: {name}",
  "header.nav.dashboard": "Kontrol Paneli",
  "header.nav.settings": "Ayarlar",
@ -37,6 +42,7 @@
  "label.this-week": "Bu hafta",
  "label.this-year": "Bu yıl",
  "label.today": "Bugün",
+  "label.unknown": "Unknown",
  "label.username": "Kullanıcı adı",
  "message.confirm-delete": "{target} kaydını silmek istediğinizden emin misiniz?",
  "message.copied": "Panoya kopyalandı!",
--- a/lang/zh-CN.json
+++ b/lang/zh-CN.json
@ -10,9 +10,14 @@
  "button.edit": "编辑",
  "button.login": "登录",
  "button.more": "更多",
+  "button.refresh": "Refresh",
  "button.save": "保存",
  "button.view-details": "查看更多",
  "button.websites": "网站",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
  "footer.powered-by": "运行 {name}",
  "header.nav.dashboard": "仪表板",
  "header.nav.settings": "设置",
@ -37,6 +42,7 @@
  "label.this-week": "本周",
  "label.this-year": "今年",
  "label.today": "今天",
+  "label.unknown": "Unknown",
  "label.username": "用户名",
  "message.confirm-delete": "你确定要删除{target}吗?",
  "message.copied": "复制成功!",
--- a/lib/constants.js
+++ b/lib/constants.js
@ -54,13 +54,6 @@ export const DESKTOP_OS = [

 export const MOBILE_OS = ['iOS', 'Android OS', 'BlackBerry OS', 'Windows Mobile', 'Amazon OS'];

-export const DEVICES = {
-  desktop: 'Desktop',
-  laptop: 'Laptop',
-  tablet: 'Tablet',
-  mobile: 'Mobile',
-};
-
 export const BROWSERS = {
  aol: 'AOL',
  edge: 'Edge',
--- a/lib/filters.js
+++ b/lib/filters.js
@ -1,5 +1,5 @@
 import firstBy from 'thenby';
-import { BROWSERS, ISO_COUNTRIES, DEVICES } from './constants';
+import { BROWSERS, ISO_COUNTRIES } from './constants';
 import { removeTrailingSlash, getDomainName } from './url';

 export const urlFilter = (data, { raw }) => {
@ -118,15 +118,14 @@ export const refFilter = (data, { domain, domainOnly, raw }) => {
 };

 export const browserFilter = data =>
-  data.map(({ x, y }) => ({ x: BROWSERS[x], y })).filter(({ x }) => x);
+  data.map(({ x, y }) => ({ x: BROWSERS[x] || x, y })).filter(({ x }) => x);

 export const osFilter = data => data.filter(({ x }) => x);

-export const deviceFilter = data =>
-  data.map(({ x, y }) => ({ x: DEVICES[x], y })).filter(({ x }) => x);
+export const deviceFilter = data => data.filter(({ x }) => x);

 export const countryFilter = data =>
-  data.map(({ x, y }) => ({ x: ISO_COUNTRIES[x], y })).filter(({ x }) => x);
+  data.map(({ x, y }) => ({ x: ISO_COUNTRIES[x] || x, y })).filter(({ x }) => x);

 export const percentFilter = data => {
  const total = data.reduce((n, { y }) => n + y, 0);
--- a/styles/index.css
+++ b/styles/index.css
@ -56,25 +56,7 @@ select {
 a,
 a:active,
 a:visited {
-  position: relative;
-  color: #2c2c2c;
-  text-decoration: none;
-}
-
-a:before {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  width: 0;
-  height: 2px;
-  background: #2680eb;
-  opacity: 0.5;
-  transition: width 100ms;
-}
-
-a:hover:before {
-  width: 100%;
-  transition: width 100ms;
+  color: var(--primary400);
 }

 input[type='text'],