From 14b8eb1b26c72c7875e2bc8480f93aef9845e7e1 Mon Sep 17 00:00:00 2001 From: rafaelgomesxyz Date: Sat, 22 May 2021 17:08:39 -0300 Subject: [PATCH] Improve options layout --- src/_locales/en/messages.json | 10 +- src/_locales/nb/messages.json | 10 +- src/_locales/pt_BR/messages.json | 10 +- src/assets/styles/layout.scss | 4 - .../components/StreamingServiceOption.tsx | 157 +++++++++++------- .../components/StreamingServiceOptions.tsx | 49 ++---- src/modules/options/options.scss | 2 +- 7 files changed, 138 insertions(+), 104 deletions(-) diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 65b2e4e6..5a1da8fa 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -29,8 +29,8 @@ "autoSync": { "message": "Automatic Sync" }, - "autoSyncDescription": { - "message": "The number of days determines how often the automatic sync will happen for the streaming service. For the automatic sync to be activated, you must sync manually in the history page of the streaming service first, so that the last sync date can be saved.\n\nIt's also important to note that when loading the history of the streaming service, it will only load the history until the last item that was automatically synced. To reset this behavior, you have to clear the last sync date for the streaming service." + "autoSyncNotActivated": { + "message": "Automatic sync not activated. You need to sync manually in the history page first, so that the last sync date can be saved." }, "autoSyncPageMessage": { "message": "These are the items that were automatically synced or failed to automatically sync since the last review. If any corrections are needed, apply them, select the items that need to be corrected, and click the Sync button. When you do that, the cache will be deleted and these items will no longer appear on this page. If no corrections are needed, simply click the Clear Sync Cache button and the same thing will happen." @@ -123,6 +123,9 @@ "days": { "message": "Days" }, + "daysDescription": { + "message": "How often the automatic sync will happen." + }, "errorNotification": { "message": "An error has occurred. :(" }, @@ -138,6 +141,9 @@ "from": { "message": "from" }, + "goToHistoryPage": { + "message": "Go to History Page" + }, "grantCookiesDescription": { "message": "With this option enabled, the extension will work with Firefox Containers, by retrieving the cookies from the current container that you are on. Only enable it if you use Firefox Containers." }, diff --git a/src/_locales/nb/messages.json b/src/_locales/nb/messages.json index 257403b0..6a4ec8d4 100644 --- a/src/_locales/nb/messages.json +++ b/src/_locales/nb/messages.json @@ -29,8 +29,8 @@ "autoSync": { "message": "Synkroniser automatisk" }, - "autoSyncDescription": { - "message": "Antall dager avgjør hvor regelmessig automatisk synkronisering vil forekomme for den angitte strømmetjenesten. For å aktivere automatisk synkronisering må du først synkronisere manuelt i historikken en gang, slik at en synkroniseringsdato kan lagres.\n\nNB! Når du laster inn historikken til strømmetjenesten så vil den kun laste inn historikken opp til datoen på siste automatiske synkronisering. For å tilbakestille dette, må du tømme siste historikkdato for den gitte strømmetjenesten." + "autoSyncNotActivated": { + "message": "Automatic sync not activated. You need to sync manually in the history page first, so that the last sync date can be saved." }, "autoSyncPageMessage": { "message": "Dette er elementer som ble automatisk synkronisert eller mislykkes å synkronisere siden forrige gang. Dersom korreksjoner trengs, legg dem til, og velg elementene som trengs korreksjoner, og trykk på Synkroniser-knappen. Når du gjør det, slettes cachen og disse elementene vil ikke så på denne siden lengre. Dersom ingen korreksjoner er nødvendige, kan du trykke på Fjern synkroniseringscache-knappen og det samme vil skje." @@ -123,6 +123,9 @@ "days": { "message": "Dager" }, + "daysDescription": { + "message": "How often the automatic sync will happen." + }, "errorNotification": { "message": "Noe har gått galt. :(" }, @@ -138,6 +141,9 @@ "from": { "message": "fra" }, + "goToHistoryPage": { + "message": "Go to History Page" + }, "grantCookiesDescription": { "message": "Utvidelsen virker sammen med Firefox Containers, ved å hente cookies fra den nåværende container du er på. Kun skru det på dersom du bruker Firefox Containers." }, diff --git a/src/_locales/pt_BR/messages.json b/src/_locales/pt_BR/messages.json index e305c8b6..cd7745f7 100644 --- a/src/_locales/pt_BR/messages.json +++ b/src/_locales/pt_BR/messages.json @@ -29,8 +29,8 @@ "autoSync": { "message": "Sincronização Automática" }, - "autoSyncDescription": { - "message": "O número de dias determina com que frequência a sincronização automática será feita para o serviço de streaming. Para que a sincronização automática seja ativada, você precisa sincronizar manualmente na página de histórico do serviço de streaming primeiro, para que a data da última sincronização possa ser salva.\n\nÉ importante ressaltar que ao carregar o histórico do serviço de streaming, será carregado apenas o histórico até o último item que foi automaticamente sincronizado. Para resetar esse comportamento, você precisa limpar a data da última sincronização para o serviço de streaming." + "autoSyncNotActivated": { + "message": "Sincronização automática não ativada. Você precisa sincronizar manualmente na página de histórico primeiro, para que a data da última sincronização possa ser salva." }, "autoSyncPageMessage": { "message": "Esses são os itens que foram sincronizados automaticamente ou que falharam ao sincronizar automaticamente desde a última revisão. Se correções forem necessárias, aplique-as, selecione os itens que precisam ser corrigidos, e clique no botão Sincronizar. Quando você fizer isso, o cache será deletado e esses itens não aparecerão mais nessa página. Se nenhuma correção for necessária, simplesmente clique no botão Limpar Cache de Sincronização e o mesmo acontecerá." @@ -123,6 +123,9 @@ "days": { "message": "Dias" }, + "daysDescription": { + "message": "Com que frequência a sincronização automática será feita." + }, "errorNotification": { "message": "Ocorreu um erro. :(" }, @@ -138,6 +141,9 @@ "from": { "message": "de" }, + "goToHistoryPage": { + "message": "Ir para a Página de Histórico" + }, "grantCookiesDescription": { "message": "Com essa opção ativada, a extensão funcionará com Firefox Containers, obtendo os cookies do atual container em que você está. Somente a ative se você usa Firefox Containers." }, diff --git a/src/assets/styles/layout.scss b/src/assets/styles/layout.scss index b4ba0734..587128cc 100644 --- a/src/assets/styles/layout.scss +++ b/src/assets/styles/layout.scss @@ -40,7 +40,3 @@ body { .container--left-right--center { align-items: center; } - -.tooltip-icon { - margin-left: 5px; -} diff --git a/src/modules/options/components/StreamingServiceOption.tsx b/src/modules/options/components/StreamingServiceOption.tsx index d8c1c18b..bc5ac9f6 100644 --- a/src/modules/options/components/StreamingServiceOption.tsx +++ b/src/modules/options/components/StreamingServiceOption.tsx @@ -1,10 +1,13 @@ -import { Grid, IconButton, Switch, TextField, Tooltip, Typography } from '@material-ui/core'; +import { Box, Grid, IconButton, Switch, TextField, Tooltip, Typography } from '@material-ui/core'; import BlockIcon from '@material-ui/icons/Block'; import ClearIcon from '@material-ui/icons/Clear'; +import ErrorIcon from '@material-ui/icons/Error'; +import LaunchIcon from '@material-ui/icons/Launch'; import * as React from 'react'; import { StreamingServiceValue } from '../../../common/BrowserStorage'; import { EventDispatcher } from '../../../common/Events'; import { I18N } from '../../../common/I18N'; +import { Tabs } from '../../../common/Tabs'; import { StreamingServiceId, streamingServices, @@ -24,6 +27,10 @@ export const StreamingServiceOption: React.FC = ( const service = streamingServices[id]; + const onLinkClick = async (url: string): Promise => { + await Tabs.open(url); + }; + const onScrobbleChange = async () => { await EventDispatcher.dispatch('STREAMING_SERVICE_OPTIONS_CHANGE', null, [ { @@ -78,66 +85,96 @@ export const StreamingServiceOption: React.FC = ( }; return ( - - - {service.name} - - - {service.hasScrobbler ? ( - - ) : ( - - - - )} - - - {service.hasSync ? ( - - ) : ( - - - - )} - - - {service.hasSync && service.hasAutoSync ? ( - <> - - - - - - - - + + + + {service.name} + + + {service.hasScrobbler ? ( + + ) : ( + + + + )} + + + {service.hasSync ? ( + <> + + + + + onLinkClick(browser.runtime.getURL(`html/history.html#/${service.id}`)) + } + > + + + + + + ) : ( + + + + )} + + + {service.hasSync && service.hasAutoSync ? ( + <> + + + + + + + {value.sync && value.autoSync && value.lastSync === 0 ? ( + + + + + + ) : ( + + + + + + + + )} + + ) : ( + + - - ) : ( - - - - )} + )} + ); diff --git a/src/modules/options/components/StreamingServiceOptions.tsx b/src/modules/options/components/StreamingServiceOptions.tsx index d340c952..7d33dedd 100644 --- a/src/modules/options/components/StreamingServiceOptions.tsx +++ b/src/modules/options/components/StreamingServiceOptions.tsx @@ -1,5 +1,4 @@ -import { Grid, ListItem, Tooltip, Typography } from '@material-ui/core'; -import HelpIcon from '@material-ui/icons/Help'; +import { Grid, ListItem, Typography } from '@material-ui/core'; import * as React from 'react'; import { StreamingServiceValue } from '../../../common/BrowserStorage'; import { I18N } from '../../../common/I18N'; @@ -16,37 +15,21 @@ export const StreamingServiceOptions: React.FC = ( const { options } = props; return ( - - - - {I18N.translate('service')} - - - {I18N.translate('serviceScrobble')} - - - {I18N.translate('serviceSync')} - - - {I18N.translate('autoSync')} - ( - <> - {text} - {i < arr.length - 1 && ( - <> -
-
- - )} - - ))} - > - - + + + + + {I18N.translate('service')} + + + {I18N.translate('serviceScrobble')} + + + {I18N.translate('serviceSync')} + + + {I18N.translate('autoSync')} + {(Object.entries(options) as [StreamingServiceId, StreamingServiceValue][]) diff --git a/src/modules/options/options.scss b/src/modules/options/options.scss index 8e097ec0..e2e318a7 100644 --- a/src/modules/options/options.scss +++ b/src/modules/options/options.scss @@ -37,7 +37,7 @@ } .options-grid-item { - padding: 8px; + overflow: hidden; } .options-grid-item--centered {