From 5e57b26e46e7ab2b0eef9179913c2de5971dbee2 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Tue, 15 Sep 2020 19:16:05 -0700 Subject: [PATCH 01/15] Convert buttons to links. --- .github/stale.yml | 19 ++++++++++++++++ components/common/Link.module.css | 10 ++++----- components/layout/ButtonLayout.module.css | 3 ++- components/layout/Footer.js | 25 ++++++++++++--------- components/layout/Footer.module.css | 8 ------- components/metrics/WebsiteHeader.js | 25 ++++++++------------- components/metrics/WebsiteHeader.module.css | 6 ++++- lang/de-DE.json | 2 +- lang/en-US.json | 2 +- lang/es-MX.json | 2 +- lang/ja-JP.json | 2 +- lang/nl-NL.json | 2 +- lang/ru-RU.json | 2 +- lang/tr-TR.json | 2 +- lang/zh-CN.json | 2 +- styles/index.css | 20 ++++++++++++++++- 16 files changed, 82 insertions(+), 50 deletions(-) create mode 100644 .github/stale.yml diff --git a/.github/stale.yml b/.github/stale.yml new file mode 100644 index 00000000..2dc5b675 --- /dev/null +++ b/.github/stale.yml @@ -0,0 +1,19 @@ +# Number of days of inactivity before an issue becomes stale +daysUntilStale: 60 +# Number of days of inactivity before a stale issue is closed +daysUntilClose: 7 +# Issues with these labels will never be considered stale +exemptLabels: + - pinned + - security + - enhancement + - bug +# Label to use when marking an issue as stale +staleLabel: wontfix +# Comment to post when marking an issue as stale. Set to `false` to disable +markComment: > + This issue has been automatically marked as stale because it has not had + recent activity. It will be closed if no further activity occurs. Thank you + for your contributions. +# Comment to post when closing a stale issue. Set to `false` to disable +closeComment: false diff --git a/components/common/Link.module.css b/components/common/Link.module.css index 54cebc0c..d6dc0536 100644 --- a/components/common/Link.module.css +++ b/components/common/Link.module.css @@ -1,12 +1,12 @@ -.link, -.link:active, -.link:visited { +a.link, +a.link:active, +a.link:visited { position: relative; color: #2c2c2c; text-decoration: none; } -.link:before { +a.link:before { content: ''; position: absolute; bottom: -2px; @@ -17,7 +17,7 @@ transition: width 100ms; } -.link:hover:before { +a.link:hover:before { width: 100%; transition: width 100ms; } diff --git a/components/layout/ButtonLayout.module.css b/components/layout/ButtonLayout.module.css index 73841169..f153ba54 100644 --- a/components/layout/ButtonLayout.module.css +++ b/components/layout/ButtonLayout.module.css @@ -1,7 +1,8 @@ .buttons { display: flex; + align-items: center; } -.buttons button + button { +.buttons button + * { margin-left: 10px; } diff --git a/components/layout/Footer.js b/components/layout/Footer.js index 241ac275..eecc9121 100644 --- a/components/layout/Footer.js +++ b/components/layout/Footer.js @@ -1,21 +1,26 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; -import classNames from 'classnames'; -import Button from 'components/common/Button'; -import Logo from 'assets/logo.svg'; import styles from './Footer.module.css'; export default function Footer() { const version = process.env.VERSION; return ( diff --git a/components/layout/Footer.module.css b/components/layout/Footer.module.css index 87008340..7c671d7e 100644 --- a/components/layout/Footer.module.css +++ b/components/layout/Footer.module.css @@ -5,11 +5,3 @@ font-size: var(--font-size-small); min-height: 100px; } - -.footer a { - text-decoration: none; -} - -.button { - margin: 0 5px; -} diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js index 71d0fa8a..7f34ca2b 100644 --- a/components/metrics/WebsiteHeader.js +++ b/components/metrics/WebsiteHeader.js @@ -1,17 +1,15 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; -import { useRouter } from 'next/router'; +import Link from 'components/common/Link'; import PageHeader from 'components/layout/PageHeader'; -import Button from 'components/common/Button'; import ActiveUsers from './ActiveUsers'; import Arrow from 'assets/arrow-right.svg'; import styles from './WebsiteHeader.module.css'; import RefreshButton from '../common/RefreshButton'; import ButtonLayout from '../layout/ButtonLayout'; +import Icon from '../common/Icon'; export default function WebsiteHeader({ websiteId, title, showLink = false }) { - const router = useRouter(); - return (
{title}
@@ -19,19 +17,14 @@ export default function WebsiteHeader({ websiteId, title, showLink = false }) { {showLink && ( - + + } size="small" /> + )} diff --git a/components/metrics/WebsiteHeader.module.css b/components/metrics/WebsiteHeader.module.css index 99dbd8bc..a1413132 100644 --- a/components/metrics/WebsiteHeader.module.css +++ b/components/metrics/WebsiteHeader.module.css @@ -4,10 +4,14 @@ line-height: var(--font-size-large); } -.button { +.link { font-size: var(--font-size-small); } +.link svg { + margin-left: 10px; +} + @media only screen and (max-width: 576px) { .active { display: none; diff --git a/lang/de-DE.json b/lang/de-DE.json index df6adaa1..5be46132 100644 --- a/lang/de-DE.json +++ b/lang/de-DE.json @@ -13,7 +13,7 @@ "button.save": "Speichern", "button.view-details": "Details anzeigen", "button.websites": "Webseiten", - "footer.powered-by": "Powered by", + "footer.powered-by": "Powered by {name}", "header.nav.dashboard": "Übersicht", "header.nav.settings": "Einstellungen", "label.administrator": "Administrator", diff --git a/lang/en-US.json b/lang/en-US.json index e24b9347..20d82dd0 100644 --- a/lang/en-US.json +++ b/lang/en-US.json @@ -13,7 +13,7 @@ "button.save": "Save", "button.view-details": "View details", "button.websites": "Websites", - "footer.powered-by": "Powered by", + "footer.powered-by": "Powered by {name}", "header.nav.dashboard": "Dashboard", "header.nav.settings": "Settings", "label.administrator": "Administrator", diff --git a/lang/es-MX.json b/lang/es-MX.json index e089ef7f..75fee3b7 100644 --- a/lang/es-MX.json +++ b/lang/es-MX.json @@ -13,7 +13,7 @@ "button.save": "Guardar", "button.view-details": "Ver detalles", "button.websites": "Sitios", - "footer.powered-by": "Desarrollado con", + "footer.powered-by": "Desarrollado con {name}", "header.nav.dashboard": "Panel de control", "header.nav.settings": "Configuraciones", "label.administrator": "Administrador", diff --git a/lang/ja-JP.json b/lang/ja-JP.json index cdeec4c8..7b14ed06 100644 --- a/lang/ja-JP.json +++ b/lang/ja-JP.json @@ -13,7 +13,7 @@ "button.save": "保存", "button.view-details": "詳細表示", "button.websites": "Webサイト", - "footer.powered-by": "Powered by", + "footer.powered-by": "Powered by {name}", "header.nav.dashboard": "ダッシュボード", "header.nav.settings": "設定", "label.administrator": "管理者", diff --git a/lang/nl-NL.json b/lang/nl-NL.json index 8d97ca43..c535da48 100644 --- a/lang/nl-NL.json +++ b/lang/nl-NL.json @@ -13,7 +13,7 @@ "button.save": "Opslaan", "button.view-details": "Meer details", "button.websites": "Websites", - "footer.powered-by": "mogelijk gemaakt door", + "footer.powered-by": "mogelijk gemaakt door {name}", "header.nav.dashboard": "Dashboard", "header.nav.settings": "Instellingen", "label.administrator": "Administrator", diff --git a/lang/ru-RU.json b/lang/ru-RU.json index 5c6e9df7..f254a58a 100644 --- a/lang/ru-RU.json +++ b/lang/ru-RU.json @@ -13,7 +13,7 @@ "button.save": "Сохранить", "button.view-details": "Посмотреть детали", "button.websites": "Сайты", - "footer.powered-by": "на движке", + "footer.powered-by": "на движке {name}", "header.nav.dashboard": "Информационная панель", "header.nav.settings": "Настройки", "label.administrator": "Администратор", diff --git a/lang/tr-TR.json b/lang/tr-TR.json index 8e9f100c..ff4de5b3 100644 --- a/lang/tr-TR.json +++ b/lang/tr-TR.json @@ -13,7 +13,7 @@ "button.save": "Kaydet", "button.view-details": "Detayı incele", "button.websites": "Web siteleri", - "footer.powered-by": "Sağlayıcı:", + "footer.powered-by": "Sağlayıcı: {name}", "header.nav.dashboard": "Kontrol Paneli", "header.nav.settings": "Ayarlar", "label.administrator": "Yönetici", diff --git a/lang/zh-CN.json b/lang/zh-CN.json index 1f21eb0f..3fa4f1c6 100644 --- a/lang/zh-CN.json +++ b/lang/zh-CN.json @@ -13,7 +13,7 @@ "button.save": "保存", "button.view-details": "查看更多", "button.websites": "网站", - "footer.powered-by": "运行", + "footer.powered-by": "运行 {name}", "header.nav.dashboard": "仪表板", "header.nav.settings": "设置", "label.administrator": "管理员", diff --git a/styles/index.css b/styles/index.css index 5435364f..619feecf 100644 --- a/styles/index.css +++ b/styles/index.css @@ -56,7 +56,25 @@ select { a, a:active, a:visited { - color: var(--primary400); + 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; } input[type='text'], From 2d9523f963d29f9db209657e25c4e7a87c3f8bc3 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Tue, 15 Sep 2020 20:34:30 -0700 Subject: [PATCH 02/15] Messages for devices so they can be localized. --- components/common/RefreshButton.js | 11 ++++++++++- components/layout/Footer.js | 7 ++++--- components/messages.js | 17 +++++++++++++++++ components/metrics/DevicesTable.js | 2 ++ components/metrics/WebsiteHeader.module.css | 1 + components/settings/WebsiteSettings.js | 12 ++++++++++-- lang/de-DE.json | 6 ++++++ lang/en-US.json | 6 ++++++ lang/es-MX.json | 6 ++++++ lang/fr-FR.json | 8 +++++++- lang/ja-JP.json | 6 ++++++ lang/mn-MN.json | 8 +++++++- lang/nl-NL.json | 6 ++++++ lang/ru-RU.json | 6 ++++++ lang/tr-TR.json | 6 ++++++ lang/zh-CN.json | 6 ++++++ lib/constants.js | 7 ------- lib/filters.js | 9 ++++----- styles/index.css | 20 +------------------- 19 files changed, 111 insertions(+), 39 deletions(-) create mode 100644 components/messages.js diff --git a/components/common/RefreshButton.js b/components/common/RefreshButton.js index 60d0976e..b3e00a27 100644 --- 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 diff --git a/components/layout/Footer.js b/components/layout/Footer.js index 41810f26..7bd1ebd3 100644 --- a/components/layout/Footer.js +++ b/components/layout/Footer.js @@ -11,7 +11,7 @@ export default function Footer() {
- + - + diff --git a/components/metrics/ActiveUsers.js b/components/metrics/ActiveUsers.js index 83ae00b8..3335bd74 100644 --- a/components/metrics/ActiveUsers.js +++ b/components/metrics/ActiveUsers.js @@ -20,7 +20,7 @@ export default function ActiveUsers({ websiteId, className }) {
diff --git a/components/settings/AccountSettings.js b/components/settings/AccountSettings.js index 21ca04f5..bc555a0f 100644 --- a/components/settings/AccountSettings.js +++ b/components/settings/AccountSettings.js @@ -92,7 +92,7 @@ export default function AccountSettings() { <>
- +
- +
)} {view && ( - + )} diff --git a/components/WebsiteDetails.module.css b/components/WebsiteDetails.module.css index cbde6159..4f117ba1 100644 --- a/components/WebsiteDetails.module.css +++ b/components/WebsiteDetails.module.css @@ -10,6 +10,10 @@ font-size: var(--font-size-small); } +.content { + min-height: 600px; +} + .backButton { align-self: flex-start; margin-bottom: 16px; diff --git a/components/common/RefreshButton.js b/components/common/RefreshButton.js index b3e00a27..1fa02f48 100644 --- a/components/common/RefreshButton.js +++ b/components/common/RefreshButton.js @@ -5,7 +5,7 @@ import { setDateRange } from 'redux/actions/websites'; import Button from './Button'; import Refresh from 'assets/redo.svg'; import Dots from 'assets/ellipsis-h.svg'; -import { useDateRange } from 'hooks/useDateRange'; +import useDateRange from 'hooks/useDateRange'; import { getDateRange } from '../../lib/date'; export default function RefreshButton({ websiteId }) { diff --git a/components/metrics/ActiveUsers.js b/components/metrics/ActiveUsers.js index 3335bd74..3d7b7001 100644 --- a/components/metrics/ActiveUsers.js +++ b/components/metrics/ActiveUsers.js @@ -4,8 +4,8 @@ import useFetch from 'hooks/useFetch'; import styles from './ActiveUsers.module.css'; import { FormattedMessage } from 'react-intl'; -export default function ActiveUsers({ websiteId, className }) { - const { data } = useFetch(`/api/website/${websiteId}/active`, {}, { interval: 60000 }); +export default function ActiveUsers({ websiteId, token, className }) { + const { data } = useFetch(`/api/website/${websiteId}/active`, { token }, { interval: 60000 }); const count = useMemo(() => { return data?.[0]?.x || 0; }, [data]); diff --git a/components/metrics/BrowsersTable.js b/components/metrics/BrowsersTable.js index 36cfe82f..f092e62f 100644 --- a/components/metrics/BrowsersTable.js +++ b/components/metrics/BrowsersTable.js @@ -3,13 +3,14 @@ import { FormattedMessage } from 'react-intl'; import MetricsTable from './MetricsTable'; import { browserFilter } from 'lib/filters'; -export default function BrowsersTable({ websiteId, limit, onExpand }) { +export default function BrowsersTable({ websiteId, token, limit, onExpand }) { return ( } type="browser" metric={} websiteId={websiteId} + token={token} limit={limit} dataFilter={browserFilter} onExpand={onExpand} diff --git a/components/metrics/CountriesTable.js b/components/metrics/CountriesTable.js index e7857b6d..1f516653 100644 --- a/components/metrics/CountriesTable.js +++ b/components/metrics/CountriesTable.js @@ -3,13 +3,20 @@ import MetricsTable from './MetricsTable'; import { countryFilter, percentFilter } from 'lib/filters'; import { FormattedMessage } from 'react-intl'; -export default function CountriesTable({ websiteId, limit, onDataLoad = () => {}, onExpand }) { +export default function CountriesTable({ + websiteId, + token, + limit, + onDataLoad = () => {}, + onExpand, +}) { return ( } type="country" metric={} websiteId={websiteId} + token={token} limit={limit} dataFilter={countryFilter} onDataLoad={data => onDataLoad(percentFilter(data))} diff --git a/components/metrics/DevicesTable.js b/components/metrics/DevicesTable.js index c37d18ea..85d2bdfd 100644 --- a/components/metrics/DevicesTable.js +++ b/components/metrics/DevicesTable.js @@ -4,13 +4,14 @@ import { deviceFilter } from 'lib/filters'; import { FormattedMessage } from 'react-intl'; import { getDeviceMessage } from 'components/messages'; -export default function DevicesTable({ websiteId, limit, onExpand }) { +export default function DevicesTable({ websiteId, token, limit, onExpand }) { return ( } type="device" metric={} websiteId={websiteId} + token={token} limit={limit} dataFilter={deviceFilter} renderLabel={({ x }) => getDeviceMessage(x)} diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js index 1d8bb557..4a49d129 100644 --- a/components/metrics/EventsChart.js +++ b/components/metrics/EventsChart.js @@ -3,7 +3,7 @@ import tinycolor from 'tinycolor2'; import BarChart from './BarChart'; import { getTimezone, getDateArray, getDateLength } from 'lib/date'; import useFetch from 'hooks/useFetch'; -import { useDateRange } from 'hooks/useDateRange'; +import useDateRange from 'hooks/useDateRange'; const COLORS = [ '#2680eb', @@ -16,7 +16,7 @@ const COLORS = [ '#85d044', ]; -export default function EventsChart({ websiteId }) { +export default function EventsChart({ websiteId, token }) { const dateRange = useDateRange(websiteId); const { startDate, endDate, unit, modified } = dateRange; const { data } = useFetch( @@ -26,6 +26,7 @@ export default function EventsChart({ websiteId }) { end_at: +endDate, unit, tz: getTimezone(), + token, }, { update: [modified] }, ); diff --git a/components/metrics/EventsTable.js b/components/metrics/EventsTable.js index ccc13411..948b9f7a 100644 --- a/components/metrics/EventsTable.js +++ b/components/metrics/EventsTable.js @@ -3,13 +3,14 @@ import { FormattedMessage } from 'react-intl'; import MetricsTable from './MetricsTable'; import styles from './EventsTable.module.css'; -export default function EventsTable({ websiteId, limit, onExpand, onDataLoad }) { +export default function EventsTable({ websiteId, token, limit, onExpand, onDataLoad }) { return ( } type="event" metric={} websiteId={websiteId} + token={token} limit={limit} renderLabel={({ x }) =>