Improve options layout

trakt-tools · May 22, 2021 · 14b8eb1 · 14b8eb1
1 parent 7192b10
commit 14b8eb1
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 104 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<StreamingServiceOptionProps> = (
 
 	const service = streamingServices[id];
 
+	const onLinkClick = async (url: string): Promise<void> => {
+		await Tabs.open(url);
+	};
+
 	const onScrobbleChange = async () => {
 		await EventDispatcher.dispatch('STREAMING_SERVICE_OPTIONS_CHANGE', null, [
 			{
@@ -78,66 +85,96 @@ export const StreamingServiceOption: React.FC<StreamingServiceOptionProps> = (
 	};
 
 	return (
-		<Grid container className="options-grid-container">
-			<Grid item className="options-grid-item" xs={4}>
-				<Typography>{service.name}</Typography>
-			</Grid>
-			<Grid item className="options-grid-item options-grid-item--centered" xs={1}>
-				{service.hasScrobbler ? (
-					<Switch checked={value.scrobble} color="primary" onChange={onScrobbleChange} />
-				) : (
-					<Tooltip title={I18N.translate('notAvailable')}>
-						<BlockIcon />
-					</Tooltip>
-				)}
-			</Grid>
-			<Grid item className="options-grid-item options-grid-item--centered" xs={1}>
-				{service.hasSync ? (
-					<Switch checked={value.sync} color="primary" onChange={onSyncChange} />
-				) : (
-					<Tooltip title={I18N.translate('notAvailable')}>
-						<BlockIcon />
-					</Tooltip>
-				)}
-			</Grid>
-			<Grid item className="options-grid-item options-grid-item--centered" xs={2}>
-				{service.hasSync && service.hasAutoSync ? (
-					<>
-						<Switch
-							checked={value.autoSync}
-							color="primary"
-							disabled={!value.sync}
-							edge="start"
-							onChange={onAutoSyncChange}
-						/>
-						<TextField
-							className="options-grid-item--text-field"
-							disabled={!value.sync || !value.autoSync}
-							label={I18N.translate('days')}
-							size="small"
-							type="number"
-							value={autoSyncDays}
-							variant="outlined"
-							onChange={onAutoSyncDaysChange}
-						/>
-						<Tooltip title={I18N.translate('clearLastSync')}>
-							<span>
-								<IconButton
-									color="secondary"
-									disabled={!value.sync || !value.autoSync || value.lastSync === 0}
-									size="small"
-									onClick={onClearLastSyncClick}
-								>
-									<ClearIcon fontSize="small" />
-								</IconButton>
-							</span>
+		<Grid item className="options-grid-item" xs={12}>
+			<Grid container className="options-grid-container" spacing={10}>
+				<Grid item xs={3}>
+					<Typography>{service.name}</Typography>
+				</Grid>
+				<Grid item className="options-grid-item--centered" xs={1}>
+					{service.hasScrobbler ? (
+						<Switch checked={value.scrobble} color="primary" onChange={onScrobbleChange} />
+					) : (
+						<Tooltip title={I18N.translate('notAvailable')}>
+							<BlockIcon fontSize="small" />
+						</Tooltip>
+					)}
+				</Grid>
+				<Grid item className="options-grid-item--centered" xs={1}>
+					{service.hasSync ? (
+						<>
+							<Switch checked={value.sync} color="primary" onChange={onSyncChange} />
+							<Tooltip title={I18N.translate('goToHistoryPage')}>
+								<span>
+									<IconButton
+										color="inherit"
+										disabled={!value.sync}
+										size="small"
+										onClick={() =>
+											onLinkClick(browser.runtime.getURL(`html/history.html#/${service.id}`))
+										}
+									>
+										<LaunchIcon fontSize="small" />
+									</IconButton>
+								</span>
+							</Tooltip>
+						</>
+					) : (
+						<Tooltip title={I18N.translate('notAvailable')}>
+							<BlockIcon fontSize="small" />
+						</Tooltip>
+					)}
+				</Grid>
+				<Grid item className="options-grid-item--centered" xs={2}>
+					{service.hasSync && service.hasAutoSync ? (
+						<>
+							<Switch
+								checked={value.autoSync}
+								color="primary"
+								disabled={!value.sync}
+								edge="start"
+								onChange={onAutoSyncChange}
+							/>
+							<Tooltip title={I18N.translate('daysDescription')}>
+								<span>
+									<TextField
+										className="options-grid-item--text-field"
+										disabled={!value.sync || !value.autoSync}
+										label={I18N.translate('days')}
+										size="small"
+										type="number"
+										value={autoSyncDays}
+										variant="outlined"
+										onChange={onAutoSyncDaysChange}
+									/>
+								</span>
+							</Tooltip>
+							{value.sync && value.autoSync && value.lastSync === 0 ? (
+								<Tooltip title={I18N.translate('autoSyncNotActivated')}>
+									<Box ml={0.5}>
+										<ErrorIcon color="error" fontSize="small" />
+									</Box>
+								</Tooltip>
+							) : (
+								<Tooltip title={I18N.translate('clearLastSync')}>
+									<span>
+										<IconButton
+											color="secondary"
+											disabled={!value.sync || !value.autoSync}
+											size="small"
+											onClick={onClearLastSyncClick}
+										>
+											<ClearIcon fontSize="small" />
+										</IconButton>
+									</span>
+								</Tooltip>
+							)}
+						</>
+					) : (
+						<Tooltip title={I18N.translate('notAvailable')}>
+							<BlockIcon fontSize="small" />
 						</Tooltip>
-					</>
-				) : (
-					<Tooltip title={I18N.translate('notAvailable')}>
-						<BlockIcon />
-					</Tooltip>
-				)}
+					)}
+				</Grid>
 			</Grid>
 		</Grid>
 	);

diff --git 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<StreamingServiceOptionsProps> = (
 	const { options } = props;
 	return (
 		<ListItem>
-			<Grid container>
-				<Grid container className="options-grid-container">
-					<Grid item className="options-grid-item" xs={4}>
-						<Typography variant="caption">{I18N.translate('service')}</Typography>
-					</Grid>
-					<Grid item className="options-grid-item options-grid-item--centered" xs={1}>
-						<Typography variant="caption">{I18N.translate('serviceScrobble')}</Typography>
-					</Grid>
-					<Grid item className="options-grid-item options-grid-item--centered" xs={1}>
-						<Typography variant="caption">{I18N.translate('serviceSync')}</Typography>
-					</Grid>
-					<Grid item className="options-grid-item options-grid-item--centered" xs={2}>
-						<Typography variant="caption">{I18N.translate('autoSync')}</Typography>
-						<Tooltip
-							className="tooltip-icon"
-							title={I18N.translate('autoSyncDescription')
-								.split('\n\n')
-								.map((text, i, arr) => (
-									<>
-										{text}
-										{i < arr.length - 1 && (
-											<>
-												<br />
-												<br />
-											</>
-										)}
-									</>
-								))}
-						>
-							<HelpIcon color="primary" fontSize="small" />
-						</Tooltip>
+			<Grid container spacing={2}>
+				<Grid item className="options-grid-item" xs={12}>
+					<Grid container className="options-grid-container" spacing={10}>
+						<Grid item xs={3}>
+							<Typography variant="caption">{I18N.translate('service')}</Typography>
+						</Grid>
+						<Grid item className="options-grid-item--centered" xs={1}>
+							<Typography variant="caption">{I18N.translate('serviceScrobble')}</Typography>
+						</Grid>
+						<Grid item className="options-grid-item--centered" xs={1}>
+							<Typography variant="caption">{I18N.translate('serviceSync')}</Typography>
+						</Grid>
+						<Grid item className="options-grid-item--centered" xs={2}>
+							<Typography variant="caption">{I18N.translate('autoSync')}</Typography>
+						</Grid>
 					</Grid>
 				</Grid>
 				{(Object.entries(options) as [StreamingServiceId, StreamingServiceValue][])

diff --git 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 {