Skip to content

Commit

Permalink
Added more translation keys to the app (#2442)
Browse files Browse the repository at this point in the history 
* added more translation keys

* added more keys

* added a lot of additional translation for every language available

* more translations

* fixed keys spelling
  • Loading branch information
@artsiom-voitas
artsiom-voitas authored May 2, 2024
1 parent da9fb95 commit d338593
Show file tree
Hide file tree
Showing 33 changed files with 935 additions and 319 deletions.
5 changes: 3 additions & 2 deletions interface/app/$libraryId/Explorer/Inspector/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ export const Inspector = forwardRef<HTMLDivElement, Props>(
explorerStore.showMoreInfo = false;
}, [pathname]);

const { t } = useLocale();
return (
<div ref={ref} style={{ width: INSPECTOR_WIDTH, ...style }} {...props}>
<Sticky
Expand All @@ -120,7 +121,7 @@ export const Inspector = forwardRef<HTMLDivElement, Props>(
<div className="flex select-text flex-col overflow-hidden rounded-lg border border-app-line bg-app-box py-0.5 shadow-app-shade/10">
{!isNonEmpty(selectedItems) ? (
<div className="flex h-[390px] items-center justify-center text-sm text-ink-dull">
Nothing selected
{t('nothing_selected')}
</div>
) : selectedItems.length === 1 ? (
<SingleItemMetadata item={selectedItems[0]} />
Expand Down Expand Up @@ -342,7 +343,7 @@ export const SingleItemMetadata = ({ item }: { item: ExplorerItem }) => {
onClick={() => {
if (fullPath) {
navigator.clipboard.writeText(fullPath);
toast.info('Copied path to clipboard');
toast.info(t('path_copied_to_clipboard_title'));
}
}}
/>
Expand Down
29 changes: 15 additions & 14 deletions interface/app/$libraryId/Explorer/store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
type ExplorerSettings,
type Ordering
} from '@sd/client';
import i18n from '~/app/I18n';

import {
DEFAULT_LIST_VIEW_ICON_SIZE,
Expand Down Expand Up @@ -150,24 +151,24 @@ export function isCut(item: ExplorerItem, cutCopyState: CutCopyState) {
}

export const filePathOrderingKeysSchema = z.union([
z.literal('name').describe('Name'),
z.literal('sizeInBytes').describe('Size'),
z.literal('dateModified').describe('Date Modified'),
z.literal('dateIndexed').describe('Date Indexed'),
z.literal('dateCreated').describe('Date Created'),
z.literal('object.dateAccessed').describe('Date Accessed'),
z.literal('object.mediaData.epochTime').describe('Date Taken')
z.literal('name').describe(i18n.t('name')),
z.literal('sizeInBytes').describe(i18n.t('size')),
z.literal('dateModified').describe(i18n.t('date_modified')),
z.literal('dateIndexed').describe(i18n.t('date_indexed')),
z.literal('dateCreated').describe(i18n.t('date_created')),
z.literal('object.dateAccessed').describe(i18n.t('date_accessed')),
z.literal('object.mediaData.epochTime').describe(i18n.t('date_taken'))
]);

export const objectOrderingKeysSchema = z.union([
z.literal('dateAccessed').describe('Date Accessed'),
z.literal('kind').describe('Kind'),
z.literal('mediaData.epochTime').describe('Date Taken')
z.literal('dateAccessed').describe(i18n.t('date_accessed')),
z.literal('kind').describe(i18n.t('kind')),
z.literal('mediaData.epochTime').describe(i18n.t('date_taken'))
]);

export const nonIndexedPathOrderingSchema = z.union([
z.literal('name').describe('Name'),
z.literal('sizeInBytes').describe('Size'),
z.literal('dateCreated').describe('Date Created'),
z.literal('dateModified').describe('Date Modified')
z.literal('name').describe(i18n.t('name')),
z.literal('sizeInBytes').describe(i18n.t('size')),
z.literal('dateCreated').describe(i18n.t('date_created')),
z.literal('dateModified').describe(i18n.t('date_modified'))
]);
61 changes: 31 additions & 30 deletions interface/app/$libraryId/Explorer/util.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,65 +71,66 @@ export function loadDayjsLocale(language: string) {
// Generate list of localized formats available in the app
export function generateLocaleDateFormats(language: string) {
language = language.replace('_', '-');
const defaultDate = '01/01/2024 23:19';
const DATE_FORMATS = [
{
value: 'L',
label: dayjs().locale(language).format('L')
label: dayjs(defaultDate).locale(language).format('L')
},
{
value: 'L LT',
label: dayjs().locale(language).format('L LT')
value: 'L, LT',
label: dayjs(defaultDate).locale(language).format('L, LT')
},
{
value: 'll',
label: dayjs(defaultDate).locale(language).format('ll')
},
// {
// value: 'll',
// label: dayjs().locale(language).format('ll')
// },
{
value: 'LL',
label: dayjs().locale(language).format('LL')
label: dayjs(defaultDate).locale(language).format('LL')
},
{
value: 'lll',
label: dayjs(defaultDate).locale(language).format('lll')
},
// {
// value: 'lll',
// label: dayjs().locale(language).format('lll')
// },
{
value: 'LLL',
label: dayjs().locale(language).format('LLL')
label: dayjs(defaultDate).locale(language).format('LLL')
},
{
value: 'llll',
label: dayjs().locale(language).format('llll')
label: dayjs(defaultDate).locale(language).format('llll')
}
];
if (language === 'en') {
const additionalFormats = [
{
value: 'DD/MM/YYYY',
label: dayjs().locale('en').format('DD/MM/YYYY')
label: dayjs(defaultDate).locale('en').format('DD/MM/YYYY')
},
{
value: 'DD/MM/YYYY HH:mm',
label: dayjs().locale('en').format('DD/MM/YYYY HH:mm')
label: dayjs(defaultDate).locale('en').format('DD/MM/YYYY HH:mm')
},
{
value: 'D MMM, YYYY',
label: dayjs(defaultDate).locale('en').format('D MMM, YYYY')
},
{
value: 'D MMMM, YYYY',
label: dayjs(defaultDate).locale('en').format('D MMMM, YYYY')
},
// {
// value: 'D MMM YYYY',
// label: dayjs().locale('en').format('D MMM YYYY')
// },
{
value: 'D MMMM YYYY',
label: dayjs().locale('en').format('D MMMM YYYY')
value: 'D MMM, YYYY HH:mm',
label: dayjs(defaultDate).locale('en').format('D MMM, YYYY HH:mm')
},
// {
// value: 'D MMM YYYY HH:mm',
// label: dayjs().locale('en').format('D MMM YYYY HH:mm')
// },
{
value: 'D MMMM YYYY HH:mm',
label: dayjs().locale('en').format('D MMMM YYYY HH:mm')
value: 'D MMMM, YYYY HH:mm',
label: dayjs(defaultDate).locale('en').format('D MMMM, YYYY HH:mm')
},
{
value: 'ddd, D MMM YYYY HH:mm',
label: dayjs().locale('en').format('ddd, D MMMM YYYY HH:mm')
value: 'ddd, D MMM, YYYY HH:mm',
label: dayjs(defaultDate).locale('en').format('ddd, D MMMM, YYYY HH:mm')
}
];
return DATE_FORMATS.concat(additionalFormats);
Expand Down
42 changes: 22 additions & 20 deletions interface/app/$libraryId/overview/LibraryStats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import clsx from 'clsx';
import { useEffect, useState } from 'react';
import { byteSize, Statistics, useLibraryContext, useLibraryQuery } from '@sd/client';
import { Tooltip } from '@sd/ui';
import { useCounter } from '~/hooks';
import { useCounter, useLocale } from '~/hooks';

interface StatItemProps {
title: string;
Expand All @@ -12,25 +12,6 @@ interface StatItemProps {
info?: string;
}

const StatItemNames: Partial<Record<keyof Statistics, string>> = {
total_bytes_capacity: 'Total capacity',
preview_media_bytes: 'Preview media',
library_db_size: 'Index size',
total_bytes_free: 'Free space',
total_bytes_used: 'Total used space'
};

const StatDescriptions: Partial<Record<keyof Statistics, string>> = {
total_bytes_capacity:
'The total capacity of all nodes connected to the library. May show incorrect values during alpha.',
preview_media_bytes: 'The total size of all preview media files, such as thumbnails.',
library_db_size: 'The size of the library database.',
total_bytes_free: 'Free space available on all nodes connected to the library.',
total_bytes_used: 'Total space used on all nodes connected to the library.'
};

const displayableStatItems = Object.keys(StatItemNames) as unknown as keyof typeof StatItemNames;

let mounted = false;

const StatItem = (props: StatItemProps) => {
Expand Down Expand Up @@ -92,6 +73,27 @@ const LibraryStats = () => {
if (!stats.isLoading) mounted = true;
});

const { t } = useLocale();

const StatItemNames: Partial<Record<keyof Statistics, string>> = {
total_bytes_capacity: t('total_bytes_capacity'),
preview_media_bytes: t('preview_media_bytes'),
library_db_size: t('library_db_size'),
total_bytes_free: t('total_bytes_free'),
total_bytes_used: t('total_bytes_used')
};

const StatDescriptions: Partial<Record<keyof Statistics, string>> = {
total_bytes_capacity: t('total_bytes_capacity_description'),
preview_media_bytes: t('preview_media_bytes_description'),
library_db_size: t('library_db_size_description'),
total_bytes_free: t('total_bytes_free_description'),
total_bytes_used: t('total_bytes_used_description')
};

const displayableStatItems = Object.keys(
StatItemNames
) as unknown as keyof typeof StatItemNames;
return (
<div className="flex w-full">
<div className="flex gap-3 overflow-hidden">
Expand Down
4 changes: 3 additions & 1 deletion interface/app/$libraryId/overview/NewCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// import { X } from '@phosphor-icons/react';
import clsx from 'clsx';
import { Icon, IconName } from '~/components';
import { useLocale } from '~/hooks';

type NewCardProps =
| {
Expand Down Expand Up @@ -30,6 +31,7 @@ export default function NewCard({
button,
className
}: NewCardProps) {
const { t } = useLocale();
return (
<div
className={clsx(
Expand Down Expand Up @@ -61,7 +63,7 @@ export default function NewCard({
disabled={!buttonText}
className="text-sm font-medium text-ink-dull"
>
{buttonText ? buttonText : 'Coming Soon'}
{buttonText ? buttonText : t('coming_soon')}
</button>
)}
</div>
Expand Down
8 changes: 5 additions & 3 deletions interface/app/$libraryId/overview/StatCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from 'react';
import { byteSize } from '@sd/client';
import { Button, Card, CircularProgress, tw } from '@sd/ui';
import { Icon } from '~/components';
import { useIsDark } from '~/hooks';
import { useIsDark, useLocale } from '~/hooks';

type StatCardProps = {
name: string;
Expand Down Expand Up @@ -40,6 +40,8 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
return Math.floor((usedSpaceSpace.value / totalSpace.value) * 100);
}, [mounted, totalSpace, usedSpaceSpace]);

const { t } = useLocale();

return (
<Card className="flex w-[280px] shrink-0 flex-col bg-app-box/50 !p-0 ">
<div className="flex flex-row items-center gap-5 p-4 px-6">
Expand Down Expand Up @@ -69,13 +71,13 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
<span className="truncate font-medium">{name}</span>
<span className="mt-1 truncate text-tiny text-ink-faint">
{freeSpace.value}
{freeSpace.unit} free of {totalSpace.value}
{freeSpace.unit} {t('free_of')} {totalSpace.value}
{totalSpace.unit}
</span>
</div>
</div>
<div className="flex h-10 flex-row items-center gap-1.5 border-t border-app-line px-2">
<Pill className="uppercase">{connectionType || 'Local'}</Pill>
<Pill className="uppercase">{connectionType || t('local')}</Pill>
<div className="grow" />
{/* <Button size="icon" variant="outline">
<Ellipsis className="w-3 h-3 opacity-50" />
Expand Down
14 changes: 7 additions & 7 deletions interface/app/$libraryId/overview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export const Component = () => {
<OverviewSection>
<FileKindStatistics />
</OverviewSection>
<OverviewSection count={1} title="Devices">
<OverviewSection count={1} title={t('devices')}>
{node && (
<StatisticItem
name={node.name}
Expand Down Expand Up @@ -130,9 +130,9 @@ export const Component = () => {
/> */}
<NewCard
icons={['Laptop', 'Server', 'SilverBox', 'Tablet']}
text="Spacedrive works best on all your devices."
text={t('connect_device_description')}
className="h-auto"
// buttonText="Connect a device"
// buttonText={t('connect_device')}
/>
{/**/}
</OverviewSection>
Expand All @@ -152,13 +152,13 @@ export const Component = () => {
{!locations?.length && (
<NewCard
icons={['HDD', 'Folder', 'Globe', 'SD']}
text="Connect a local path, volume or network location to Spacedrive."
text={t('add_location_overview_description')}
button={() => <AddLocationButton variant="outline" />}
/>
)}
</OverviewSection>

<OverviewSection count={0} title="Cloud Drives">
<OverviewSection count={0} title={t('cloud_drives')}>
{/* <StatisticItem
name="James Pine"
icon="DriveDropbox"
Expand All @@ -184,8 +184,8 @@ export const Component = () => {
'DriveOneDrive'
// 'DriveBox'
]}
text="Connect your cloud accounts to Spacedrive."
// buttonText="Connect a cloud"
text={t('connect_cloud_description')}
// buttonText={t('connect_cloud)}
/>
</OverviewSection>

Expand Down
Loading

0 comments on commit d338593

Please sign in to comment.