mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

Merge pull request #645 from photoview/dark-mode 

Dark mode
This commit is contained in:
Viktor Strate Kløvedal 2022-02-09 22:20:05 +01:00 committed by GitHub
parent a43f29ee6d 10611b5ff5
commit 0b9d04eff2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
57 changed files with 966 additions and 564 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
ui/src/Pages/PeoplePage/PeoplePage.tsx
View File

@ -20,6 +20,7 @@ import {
} from './__generated__/myFaces'
import { recognizeUnlabeledFaces } from './__generated__/recognizeUnlabeledFaces'
import { isNil, tailwindClassNames } from '../../helpers/utils'
import classNames from 'classnames'
export const MY_FACES_QUERY = gql`
query myFaces($limit: Int, $offset: Int) {
@ -66,9 +67,32 @@ const RECOGNIZE_UNLABELED_FACES_MUTATION = gql`
}
`
const FaceDetailsWrapper = styled.span<{ labeled: boolean }>`
color: ${({ labeled }) => (labeled ? 'black' : '#aaa')};
type FaceDetailsWrapperProps = {
labeled: boolean
className?: string
} & React.DetailedHTMLProps<
React.HTMLAttributes<HTMLSpanElement>,
HTMLSpanElement
>
const FaceDetailsWrapperInner = ({
labeled,
children,
className,
...otherProps
}: FaceDetailsWrapperProps) => (
<span
{...otherProps}
className={classNames(
className,
`${labeled ? '' : 'text-gray-400 dark:text-gray-500'}`
)}
>
{children}
</span>
)
const FaceDetailsWrapper = styled(FaceDetailsWrapperInner)`
&:hover,
&:focus-visible {
color: #2683ca;
@ -180,14 +204,10 @@ export const FaceDetails = ({
return label
}
const FaceImagesCount = styled.span`
background-color: #eee;
color: #222;
font-size: 0.9em;
padding: 0 4px;
margin-right: 6px;
border-radius: 4px;
`
const FaceImagesCount = styled.span.attrs({
className:
'bg-gray-100 text-gray-900 dark:bg-gray-400 dark:text-black text-sm px-1 mr-2 rounded-md',
})``
type FaceGroupProps = {
group: myFaces_myFaceGroups
@ -198,7 +218,7 @@ export const FaceGroup = ({ group }: FaceGroupProps) => {
const [editLabel, setEditLabel] = useState(false)
return (
<div style={{ margin: '12px' }}>
<div className="m-3">
<Link to={`/people/${group.id}`}>
<FaceCircleImage imageFace={previewFace} selectable />
</Link>

2
ui/src/Pages/PeoplePage/SingleFaceGroup/FaceGroupTitle.tsx
View File

@ -67,7 +67,7 @@ const FaceGroupTitle = ({ faceGroup }: FaceGroupTitleProps) => {
<>
<h1
className={`text-2xl font-semibold ${
faceGroup?.label ? 'text-black' : 'text-gray-600'
faceGroup?.label ? '' : 'text-gray-600 dark:text-gray-400'
}`}
>
{faceGroup?.label ??

2
ui/src/Pages/SettingsPage/SettingsPage.tsx
View File

@ -18,7 +18,7 @@ export const SectionTitle = ({ children, nospace }: SectionTitleProps) => {
return (
<h2
className={classNames(
'pb-1 border-b border-gray-200 text-xl mb-5',
'pb-1 border-b border-gray-200 dark:border-dark-border text-xl mb-5',
!nospace && 'mt-6'
)}
>

47
ui/src/Pages/SettingsPage/UserPreferences.tsx
View File

@ -1,6 +1,6 @@
import { useMutation, useQuery } from '@apollo/client'
import gql from 'graphql-tag'
import React, { useMemo } from 'react'
import React, { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
import { LanguageTranslation } from '../../__generated__/globalTypes'
@ -16,6 +16,8 @@ import {
changeUserPreferencesVariables,
} from './__generated__/changeUserPreferences'
import { myUserPreferences } from './__generated__/myUserPreferences'
import { TranslationFn } from '../../localization'
import { changeTheme, getTheme } from '../../theme'
const languagePreferences = [
{ key: 1, label: 'English', flag: 'uk', value: LanguageTranslation.English },
@ -47,6 +49,24 @@ const languagePreferences = [
},
]
const themePreferences = (t: TranslationFn) => [
{
key: 1,
label: t('settings.user_preferences.theme.auto.label', 'Same as system'),
value: 'auto',
},
{
key: 2,
label: t('settings.user_preferences.theme.light.label', 'Light'),
value: 'light',
},
{
key: 2,
label: t('settings.user_preferences.theme.dark.label', 'Dark'),
value: 'dark',
},
]
const CHANGE_USER_PREFERENCES = gql`
mutation changeUserPreferences($language: String) {
changeUserPreferences(language: $language) {
@ -86,6 +106,12 @@ const UserPreferencesWrapper = styled.div`
const UserPreferences = () => {
const { t } = useTranslation()
const [theme, setTheme] = useState(getTheme())
const changeStateTheme = (value: string) => {
changeTheme(value)
setTheme(value)
}
const { data } = useQuery<myUserPreferences>(MY_USER_PREFERENCES)
@ -109,7 +135,7 @@ const UserPreferences = () => {
{t('settings.user_preferences.title', 'User preferences')}
</SectionTitle>
<LogoutButton />
<label id="user_pref_change_language_field">
<label htmlFor="user_pref_change_language_field">
<InputLabelTitle>
{t(
'settings.user_preferences.change_language.label',
@ -140,6 +166,23 @@ const UserPreferences = () => {
selected={data?.myUserPreferences.language || undefined}
disabled={loadingPrefs}
/>
<label htmlFor="user_pref_change_theme_field">
<InputLabelTitle>
{t('settings.user_preferences.theme.title', 'Theme preferences')}
</InputLabelTitle>
<InputLabelDescription>
{t(
'settings.user_preferences.theme.description',
'Change the appearance of the website'
)}
</InputLabelDescription>
</label>
<Dropdown
id="user_pref_change_theme_field"
items={themePreferences(t)}
setSelected={changeStateTheme}
selected={theme}
/>
</UserPreferencesWrapper>
)
}

9
ui/src/components/album/AlbumFilter.tsx
View File

@ -9,6 +9,7 @@ import { ReactComponent as SortingIcon } from './icons/sorting.svg'
import { ReactComponent as DirectionIcon } from './icons/direction-arrow.svg'
import Dropdown from '../../primitives/form/Dropdown'
import classNames from 'classnames'
export type FavoriteCheckboxProps = {
onlyFavorites: boolean
@ -94,9 +95,11 @@ const SortingOptions = ({ setOrdering, ordering }: SortingOptionsProps) => {
<button
title="Sort direction"
aria-label="Sort direction"
className={`bg-gray-50 h-[30px] align-top px-2 py-1 rounded ml-2 border border-gray-200 focus:outline-none focus:border-blue-300 text-[#8b8b8b] hover:bg-gray-100 hover:text-[#777] ${
ordering?.orderDirection == OrderDirection.ASC ? 'flip-y' : null
}`}
className={classNames(
'bg-gray-50 h-[30px] align-top px-2 py-1 rounded ml-2 border border-gray-200 focus:outline-none focus:border-blue-300 text-[#8b8b8b] hover:bg-gray-100 hover:text-[#777]',
'dark:bg-dark-input-bg dark:border-dark-input-border dark:text-dark-input-text dark:focus:border-blue-300',
{ 'flip-y': ordering?.orderDirection == OrderDirection.ASC }
)}
onClick={changeOrderDirection}
>
<DirectionIcon />

4
ui/src/components/album/AlbumTitle.tsx
View File

@ -9,6 +9,8 @@ import { albumPathQuery } from './__generated__/albumPathQuery'
import useDelay from '../../hooks/useDelay'
import { ReactComponent as GearIcon } from './icons/gear.svg'
import { tailwindClassNames } from '../../helpers/utils'
import { buttonStyles } from '../../primitives/form/Input'
export const BreadcrumbList = styled.ol<{ hideLastArrow?: boolean }>`
&
@ -105,7 +107,7 @@ const AlbumTitle = ({ album, disableLink = false }: AlbumTitleProps) => {
<button
title="Album options"
aria-label="Album options"
className="bg-gray-50 p-2 rounded ml-2 border border-gray-200 focus:outline-none focus:border-blue-300 text-[#8b8b8b] hover:bg-gray-100 hover:text-[#777]"
className={tailwindClassNames(buttonStyles({}), 'px-2 py-2 ml-2')}
onClick={() => {
updateSidebar(<AlbumSidebar albumId={album.id} />)
}}

4
ui/src/components/albumGallery/AlbumBox.tsx
View File

@ -25,7 +25,7 @@ const AlbumBoxImage = ({ src, ...props }: AlbumBoxImageProps) => {
let placeholder = null
if (!loaded) {
placeholder = (
<div className="bg-gray-100 animate-pulse w-full h-full rounded-lg absolute top-0"></div>
<div className="bg-gray-100 dark:bg-[#191c1f] animate-pulse w-full h-full rounded-lg absolute top-0"></div>
)
}
@ -44,7 +44,7 @@ type AlbumBoxProps = {
export const AlbumBox = ({ album, customLink, ...props }: AlbumBoxProps) => {
const wrapperClasses =
'inline-block text-center text-gray-900 mx-3 my-2 xs:h-60 xs:w-[220px]'
'inline-block text-center text-gray-900 dark:text-gray-200 mx-3 my-2 xs:h-60 xs:w-[220px]'
if (album) {
return (

2
ui/src/components/header/Header.tsx
View File

@ -11,7 +11,7 @@ const Header = () => {
return (
<div
className={classNames(
'sticky top-0 z-10 bg-white flex items-center justify-between py-3 px-4 lg:px-8 lg:pt-4 shadow-separator lg:shadow-none',
'sticky top-0 z-10 bg-white dark:bg-dark-bg flex items-center justify-between py-3 px-4 lg:px-8 lg:pt-4 shadow-separator lg:shadow-none',
{ 'mr-[404px]': pinned }
)}
>

9
ui/src/components/header/Searchbar.tsx
View File

@ -174,7 +174,7 @@ const SearchBar = () => {
selectedItemId ? `search-item-${selectedItemId}` : ''
}
aria-expanded={expanded}
className="w-full py-2 px-3 z-10 relative rounded-md bg-gray-50 focus:bg-white border border-gray-50 focus:border-blue-400 outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50"
className="w-full py-2 px-3 z-10 relative rounded-md bg-gray-50 focus:bg-white border border-gray-50 focus:border-blue-400 outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-dark-bg2 dark:border-dark-bg2 dark:focus:bg-[#2a2f35]"
type="search"
placeholder={t('header.search.placeholder', 'Search')}
onChange={fetchEvent}
@ -186,7 +186,8 @@ const SearchBar = () => {
}
const ResultTitle = styled.h1.attrs({
className: 'uppercase text-gray-700 text-sm font-semibold mt-4 mb-2 mx-1',
className:
'uppercase text-gray-700 dark:text-gray-200 text-sm font-semibold mt-4 mb-2 mx-1',
})``
type SearchResultsProps = {
@ -242,7 +243,7 @@ const SearchResults = ({
id="search-results"
role="listbox"
className={classNames(
'absolute bg-white left-0 right-0 top-[72px] overflow-y-auto h-[calc(100vh-152px)] border px-4 z-0',
'absolute bg-white dark:bg-dark-bg left-0 right-0 top-[72px] overflow-y-auto h-[calc(100vh-152px)] border dark:border-dark-border px-4 z-0',
'lg:top-[40px] lg:shadow-md lg:rounded-b lg:max-h-[560px]',
{ hidden: !expanded }
)}
@ -319,7 +320,7 @@ const SearchRow = ({
aria-selected={selected}
onMouseOver={() => setSelected()}
className={classNames('rounded p-1 mt-1', {
'bg-gray-100': selected,
'bg-gray-100 dark:bg-dark-bg2': selected,
})}
>
<NavLink to={link} className="flex items-center" tabIndex={-1}>

34
ui/src/components/layout/MainMenu.tsx
View File

File diff suppressed because one or more lines are too long

5
ui/src/components/mapbox/MapboxMap.tsx
View File

@ -5,6 +5,7 @@ import styled from 'styled-components'
import 'mapbox-gl/dist/mapbox-gl.css'
import { mapboxToken } from './__generated__/mapboxToken'
import { isDarkMode } from '../../theme'
const MAPBOX_TOKEN_QUERY = gql`
query mapboxToken {
@ -59,7 +60,9 @@ const useMapboxMap = ({
map.current = new mapboxLibrary.Map({
container: mapContainer.current,
style: 'mapbox://styles/mapbox/streets-v11',
style: isDarkMode()
? 'mapbox://styles/mapbox/dark-v10'
: 'mapbox://styles/mapbox/streets-v11',
...mapboxOptions,
})

4
ui/src/components/messages/Message.tsx
View File

@ -17,10 +17,10 @@ const Message = forwardRef(
return (
<div
ref={ref}
className="bg-white shadow-md border rounded p-2 h-[84px] relative"
className="bg-white dark:bg-dark-bg2 shadow-md border rounded p-2 h-[84px] relative"
>
<button onClick={onDismiss} className="absolute top-3 right-2">
<DismissIcon className="w-[10px] h-[10px] text-gray-700" />
<DismissIcon className="w-[10px] h-[10px] text-gray-700 dark:text-gray-200" />
</button>
<h1 className="font-semibold text-sm">{header}</h1>
<div className="text-sm">{content}</div>

4
ui/src/components/sidebar/AlbumCovers.tsx
View File

@ -76,7 +76,7 @@ export const SidebarPhotoCover = ({ cover_id }: SidebarPhotoCoverProps) => {
<div>
<table className="border-collapse w-full">
<tfoot>
<tr className="text-left border-gray-100 border-b border-t">
<tr className="text-left border-gray-100 dark:border-dark-border2 border-b border-t">
<td colSpan={2} className="pl-4 py-2">
<button
className="disabled:opacity-50 text-green-500 font-bold uppercase text-xs"
@ -133,7 +133,7 @@ export const SidebarAlbumCover = ({ id }: SidebarAlbumCoverProps) => {
<div>
<table className="border-collapse w-full">
<tfoot>
<tr className="text-left border-gray-100 border-b border-t">
<tr className="text-left border-gray-100 dark:border-dark-border2 border-b border-t">
<td colSpan={2} className="pl-4 py-2">
<button
className="disabled:opacity-50 text-red-500 font-bold uppercase text-xs"

4
ui/src/components/sidebar/MediaSidebar/MediaSidebar.tsx
View File

@ -187,7 +187,7 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
].map(album => (
<li key={album.id} className="inline-block hover:underline">
<Link
className="text-blue-900 hover:underline"
className="text-blue-900 dark:text-blue-200 hover:underline"
to={`/album/${album.id}`}
>
{album.title}
@ -197,7 +197,7 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
albumPath = (
<div className="mx-4 my-4">
<h2 className="uppercase text-xs text-gray-900 font-semibold">
<h2 className="uppercase text-xs text-gray-900 dark:text-gray-300 font-semibold">
{t('sidebar.media.album_path', 'Album path')}
</h2>
<BreadcrumbList hideLastArrow={true}>{pathElms}</BreadcrumbList>

25
ui/src/components/sidebar/Sharing.tsx
View File

@ -108,7 +108,7 @@ const DELETE_SHARE_MUTATION = gql`
export const ArrowPopoverPanel = styled.div.attrs({
className:
'absolute -top-3 bg-white rounded shadow-md border border-gray-200 z-10',
'absolute -top-3 bg-white dark:bg-dark-bg rounded shadow-md border border-gray-200 dark:border-dark-border z-10',
})<{ width: number; flipped?: boolean }>`
width: ${({ width }) => width}px;
@ -269,7 +269,7 @@ const MorePopover = ({ id, share, query }: MorePopoverProps) => {
<Popover.Panel>
<ArrowPopoverPanel width={260}>
<MorePopoverSectionPassword id={id} share={share} query={query} />
<div className="px-4 py-2 border-t border-gray-200 mt-2 mb-2">
<div className="px-4 py-2 border-t border-gray-200 dark:border-dark-border mt-2 mb-2">
<Checkbox label="Expiration date" />
<TextField className="mt-2 w-full" />
</div>
@ -405,9 +405,12 @@ const SidebarShare = ({
}
const optionsRows = shares.map(share => (
<tr key={share.token} className="border-gray-100 border-b border-t">
<tr
key={share.token}
className="border-gray-100 dark:border-dark-border2 border-b border-t"
>
<td className="pl-4 py-2 w-full">
<span className="text-[#585858] mr-2">
<span className="text-[#585858] dark:text-[#C0C3C4] mr-2">
<LinkIcon className="inline-block mr-2" />
<span className="text-xs uppercase font-bold">
{t('sidebar.sharing.public_link', 'Public Link') + ' '}
@ -415,7 +418,7 @@ const SidebarShare = ({
</span>
<span className="text-sm">{share.token}</span>
</td>
<td className="pr-6 py-2 whitespace-nowrap text-[#5C6A7F] flex">
<td className="pr-6 py-2 whitespace-nowrap text-[#5C6A7F] dark:text-[#7599ca] flex">
<button
className="align-middle p-1 ml-2"
title={t('sidebar.sharing.copy_link', 'Copy Link')}
@ -443,8 +446,14 @@ const SidebarShare = ({
if (optionsRows.length == 0) {
optionsRows.push(
<tr key="no-shares" className="border-gray-100 border-b border-t">
<td colSpan={2} className="pl-4 py-2 italic text-gray-600">
<tr
key="no-shares"
className="border-gray-100 dark:border-dark-border2 border-b border-t"
>
<td
colSpan={2}
className="pl-4 py-2 italic text-gray-600 dark:text-gray-300"
>
{t('sidebar.sharing.no_shares_found', 'No shares found')}
</td>
</tr>
@ -460,7 +469,7 @@ const SidebarShare = ({
<table className="border-collapse w-full">
<tbody>{optionsRows}</tbody>
<tfoot>
<tr className="text-left border-gray-100 border-b border-t">
<tr className="text-left border-gray-100 dark:border-dark-border2 border-b border-t">
<td colSpan={2} className="pl-4 py-2">
<button
className="text-green-500 font-bold uppercase text-xs"

2
ui/src/components/sidebar/Sidebar.tsx
View File

@ -89,7 +89,7 @@ export const Sidebar = () => {
return (
<div
className={`fixed top-[72px] bg-white bottom-0 w-full overflow-y-auto transform transition-transform motion-reduce:transition-none ${
className={`fixed top-[72px] bg-white dark:bg-dark-bg2 dark:border-dark-border2 bottom-0 w-full overflow-y-auto transform transition-transform motion-reduce:transition-none ${
content == null && !pinned ? 'translate-x-full' : 'translate-x-0'
} ${
pinned ? 'lg:border-l' : 'lg:shadow-separator'

20
ui/src/components/sidebar/SidebarDownloadAlbum.tsx
View File

@ -2,6 +2,7 @@ import React from 'react'
import { useTranslation } from 'react-i18next'
import { API_ENDPOINT } from '../../apolloClient'
import { SidebarSection, SidebarSectionTitle } from './SidebarComponents'
import SidebarTable from './SidebarTable'
type SidebarAlbumDownladProps = {
albumID: string
@ -49,8 +50,7 @@ const SidebarAlbumDownload = ({ albumID }: SidebarAlbumDownladProps) => {
]
const downloadRows = downloads.map(x => (
<tr
className="cursor-pointer border-gray-100 border-b hover:bg-gray-50 focus:bg-gray-50"
<SidebarTable.Row
key={x.purpose}
onClick={() =>
(location.href = `${API_ENDPOINT}/download/album/${albumID}/${x.purpose}`)
@ -58,8 +58,8 @@ const SidebarAlbumDownload = ({ albumID }: SidebarAlbumDownladProps) => {
tabIndex={0}
>
<td className="pl-4 py-2">{`${x.title}`}</td>
<td className="pr-4 py-2 text-sm text-gray-800 italic">{`${x.description}`}</td>
</tr>
<td className="pr-4 py-2 text-sm text-gray-800 dark:text-gray-400 italic">{`${x.description}`}</td>
</SidebarTable.Row>
))
return (
@ -68,16 +68,16 @@ const SidebarAlbumDownload = ({ albumID }: SidebarAlbumDownladProps) => {
{t('sidebar.download.title', 'Download')}
</SidebarSectionTitle>
<table className="table-auto w-full">
<thead className="bg-[#f9f9fb]">
<tr className="text-left uppercase text-xs border-gray-100 border-b border-t">
<SidebarTable.Table>
<SidebarTable.Head>
<SidebarTable.HeadRow>
<th className="px-4 py-2" colSpan={2}>
{t('sidebar.download.table_columns.name', 'Name')}
</th>
</tr>
</thead>
</SidebarTable.HeadRow>
</SidebarTable.Head>
<tbody>{downloadRows}</tbody>
</table>
</SidebarTable.Table>
</SidebarSection>
)
}

22
ui/src/components/sidebar/SidebarDownloadMedia.tsx
View File

@ -5,6 +5,7 @@ import { authToken } from '../../helpers/authentication'
import { useTranslation } from 'react-i18next'
import { TranslationFn } from '../../localization'
import { MediaSidebarMedia } from './MediaSidebar/MediaSidebar'
import SidebarTable from './SidebarTable'
import {
sidebarDownloadQuery,
sidebarDownloadQueryVariables,
@ -211,23 +212,18 @@ const SidebarDownloadTable = ({ rows }: SidebarDownloadTableProps) => {
const download = downloadMedia(t)
const bytes = formatBytes(t)
const downloadRows = rows.map(x => (
<tr
className="cursor-pointer border-gray-100 border-b hover:bg-gray-50 focus:bg-gray-50"
key={x.url}
onClick={() => download(x.url)}
tabIndex={0}
>
<SidebarTable.Row key={x.url} onClick={() => download(x.url)} tabIndex={0}>
<td className="pl-4 py-2">{`${x.title}`}</td>
<td className="py-2">{`${x.width} x ${x.height}`}</td>
<td className="py-2">{`${bytes(x.fileSize)}`}</td>
<td className="pr-4 py-2">{extractExtension(x.url)}</td>
</tr>
</SidebarTable.Row>
))
return (
<table className="table-fixed w-full">
<thead className="bg-[#f9f9fb]">
<tr className="text-left uppercase text-xs border-gray-100 border-b border-t">
<SidebarTable.Table>
<SidebarTable.Head>
<SidebarTable.HeadRow>
<th className="w-2/6 pl-4 py-2">
{t('sidebar.download.table_columns.name', 'Name')}
</th>
@ -240,10 +236,10 @@ const SidebarDownloadTable = ({ rows }: SidebarDownloadTableProps) => {
<th className="w-1/6 pr-4 py-2">
{t('sidebar.download.table_columns.file_type', 'Type')}
</th>
</tr>
</thead>
</SidebarTable.HeadRow>
</SidebarTable.Head>
<tbody>{downloadRows}</tbody>
</table>
</SidebarTable.Table>
)
}

4
ui/src/components/sidebar/SidebarHeader.tsx
View File

@ -21,7 +21,7 @@ const SidebarHeader = ({ title }: SidebarHeaderProps) => {
title="Close sidebar"
onClick={() => updateSidebar(null)}
>
<CloseIcon className="m-2" />
<CloseIcon className="m-2 text-[#1F2021] dark:text-[#abadaf]" />
</button>
<span className="flex-grow -mt-1 ml-2">{title}</span>
<button
@ -29,7 +29,7 @@ const SidebarHeader = ({ title }: SidebarHeaderProps) => {
title="Pin sidebar"
onClick={() => setPinned(!pinned)}
>
<PinIcon className="m-2" />
<PinIcon className="m-2 text-[#1F2021] dark:text-[#abadaf]" />
</button>
</div>
)

22
ui/src/components/sidebar/SidebarItem.tsx
View File

@ -1,20 +1,4 @@
import React from 'react'
import styled from 'styled-components'
const ItemName = styled.div`
display: inline-block;
width: 100px;
font-weight: 600;
font-size: 0.85rem;
color: #888;
text-align: right;
margin-right: 0.5rem;
`
const ItemValue = styled.div`
display: inline-block;
font-size: 1rem;
`
type SidebarItemProps = {
name: string
@ -23,8 +7,10 @@ type SidebarItemProps = {
const SidebarItem = ({ name, value }: SidebarItemProps) => (
<div>
<ItemName>{name}</ItemName>
<ItemValue>{value}</ItemValue>
<div className="inline-block w-[100px] font-semibold text-sm text-[#888] text-right mr-2">
{name}
</div>
<div className="inline-block text-base">{value}</div>
</div>
)

24
ui/src/components/sidebar/SidebarTable.tsx Normal file
View File

@ -0,0 +1,24 @@
import styled from 'styled-components'
const Table = styled.table.attrs({ className: 'table-fixed w-full' })``
const Head = styled.thead.attrs({
className: 'bg-[#f9f9fb] dark:bg-[#2B3037]',
})``
const HeadRow = styled.tr.attrs({
className:
'text-left uppercase text-xs border-gray-100 dark:border-dark-border2 border-b border-t',
})``
const Row = styled.tr.attrs({
className:
'cursor-pointer border-gray-100 dark:border-dark-border2 border-b hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-[#3c4759] dark:focus:bg-[#3c4759]',
})``
export default {
Table,
Head,
HeadRow,
Row,
}

2
ui/src/components/sidebar/icons/closeSidebarIcon.svg
View File

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path stroke="none" stroke-width="1" fill="none" d="M1,11 L11,1 M11,11 L1,1" stroke="#1F2021" stroke-width="2"></path>
<path stroke="none" stroke-width="1" fill="none" d="M1,11 L11,1 M11,11 L1,1" stroke="currentColor" stroke-width="2"></path>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 311 B

After

Width:  |  Height:  |  Size: 316 B

2
ui/src/components/sidebar/icons/pinSidebarIconFilled.svg
View File

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(8, 8.5) rotate(-330) translate(-8, -8.5) translate(4, 2)" stroke="#1F2021" fill="#1F2021">
<g transform="translate(8, 8.5) rotate(-330) translate(-8, -8.5) translate(4, 2)" stroke="currentColor" fill="currentColor">
<path d="M6.76850191,0.434840963 C6.04896114,1.86467297 5.79279384,3.20120746 6,4.44444444 C6.17989677,5.52382504 6.63266329,6.48919052 7.35829958,7.34054088 C7.50158762,7.50867286 7.48146228,7.76112984 7.31333862,7.90442763 C7.24096223,7.96611661 7.14897427,8 7.053875,8 L0.922873286,8 C0.701919553,8.00007212 0.522801161,7.82095373 0.522801161,7.59999999 C0.522801161,7.50599929 0.555900634,7.41500023 0.616293108,7.34296634 C1.36567981,6.44912577 1.82691544,5.48295181 2,4.44444444 C2.19754347,3.25918364 1.93688287,1.92116674 1.21801821,0.430393743 C1.14595115,0.281147735 1.2086138,0.10177184 1.35789863,0.0297852978 C1.39855358,0.0101811032 1.44310701,8.29112604e-18 1.4882418,0 L6.50055336,0 C6.666219,3.58349532e-05 6.80051754,0.134334371 6.80051754,0.300000012 C6.80051754,0.346829895 6.78955305,0.393009303 6.76850191,0.434840963 Z" stroke-linejoin="round"></path>
<line x1="4" y1="8" x2="4" y2="13" stroke-linecap="round"></line>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

2
ui/src/components/sidebar/icons/pinSidebarIconOutline.svg
View File

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(8, 8.5) rotate(-330) translate(-8, -8.5) translate(4, 2)" stroke="#1F2021">
<g transform="translate(8, 8.5) rotate(-330) translate(-8, -8.5) translate(4, 2)" stroke="currentColor">
<path d="M6.76850191,0.434840963 C6.04896114,1.86467297 5.79279384,3.20120746 6,4.44444444 C6.17989677,5.52382504 6.63266329,6.48919052 7.35829958,7.34054088 C7.50158762,7.50867286 7.48146228,7.76112984 7.31333862,7.90442763 C7.24096223,7.96611661 7.14897427,8 7.053875,8 L0.922873286,8 C0.701919553,8.00007212 0.522801161,7.82095373 0.522801161,7.59999999 C0.522801161,7.50599929 0.555900634,7.41500023 0.616293108,7.34296634 C1.36567981,6.44912577 1.82691544,5.48295181 2,4.44444444 C2.19754347,3.25918364 1.93688287,1.92116674 1.21801821,0.430393743 C1.14595115,0.281147735 1.2086138,0.10177184 1.35789863,0.0297852978 C1.39855358,0.0101811032 1.44310701,8.29112604e-18 1.4882418,0 L6.50055336,0 C6.666219,3.58349532e-05 6.80051754,0.134334371 6.80051754,0.300000012 C6.80051754,0.346829895 6.78955305,0.393009303 6.76850191,0.434840963 Z" stroke-linejoin="round"></path>
<line x1="4" y1="8" x2="4" y2="13" stroke-linecap="round"></line>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

37
ui/src/extractedTranslations/da/translation.json
View File

@ -2,13 +2,13 @@
"album_filter": {
"only_favorites": "Vis kun favoritter",
"sort": "Sorter",
"sort_by": "Sorter efter",
"sorting_options": {
"date_imported": "Dato for importering",
"date_shot": "Dato",
"title": "Titel",
"type": "Type"
},
"sort_by": "Sorter efter"
}
},
"general": {
"action": {
@ -155,6 +155,19 @@
"language_selector": {
"placeholder": "Vælg sprog"
},
"theme": {
"auto": {
"label": "Samme som system"
},
"dark": {
"label": "Mørk"
},
"description": "Ændre hjemmesidens udseende",
"light": {
"label": "Lys"
},
"title": "Temaindstillinger"
},
"title": "Brugerindstillinger"
},
"users": {
@ -240,16 +253,16 @@
},
"download": {
"filesize": {
"byte": "{{count}} Byte",
"byte_plural": "{{count}} Bytes",
"giga_byte": "{{count}} GB",
"giga_byte_plural": "",
"kilo_byte": "{{count}} KB",
"kilo_byte_plural": "",
"mega_byte": "{{count}} MB",
"mega_byte_plural": "",
"tera_byte": "{{count}} TB",
"tera_byte_plural": ""
"byte_one": "",
"byte_other": "",
"giga_byte_one": "",
"giga_byte_other": "",
"kilo_byte_one": "",
"kilo_byte_other": "",
"mega_byte_one": "",
"mega_byte_other": "",
"tera_byte_one": "",
"tera_byte_other": ""
},
"table_columns": {
"dimensions": "Dimension",

52
ui/src/extractedTranslations/da/translation_old.json
View File

@ -20,6 +20,12 @@
}
},
"people_page": {
"action_label": {
"change_label": null,
"detach_face": null,
"merge_face": null,
"move_faces": null
},
"face_group": {
"action": {
"add_label": "Tilføj navn",
@ -29,20 +35,6 @@
"move_faces": "Flyt ansigter"
}
},
"table": {
"select_face_group": {
"search_faces_placeholder": "Søg ansigter..."
},
"select_image_faces": {
"search_images_placeholder": "Søg billeder..."
}
},
"action_label": {
"change_label": null,
"merge_face": null,
"detach_face": null,
"move_faces": null
},
"modal": {
"merge_people_groups": {
"description": "Alle billeder fra denne gruppe vil blive flettet sammen med den valgte gruppe",
@ -51,6 +43,14 @@
},
"title": "Vælg gruppe at flette med"
}
},
"table": {
"select_face_group": {
"search_faces_placeholder": "Søg ansigter..."
},
"select_image_faces": {
"search_images_placeholder": "Søg billeder..."
}
}
},
"settings": {
@ -64,25 +64,31 @@
},
"sidebar": {
"album": {
"title": "Indstillinger for album",
"album_cover": null,
"cover_photo": "",
"reset_cover": null,
"set_cover": null
},
"sharing": {
"table_header": "Offentlige delinger"
"set_cover": null,
"title": "Indstillinger for album"
},
"download": {
"filesize": {
"giga_byte_plural": null,
"kilo_byte_plural": null,
"mega_byte_plural": null,
"tera_byte_plural": null
"byte": "{{count}} Byte",
"byte_plural": "{{count}} Bytes",
"giga_byte": "{{count}} GB",
"giga_byte_plural": "",
"kilo_byte": "{{count}} KB",
"kilo_byte_plural": "",
"mega_byte": "{{count}} MB",
"mega_byte_plural": "",
"tera_byte": "{{count}} TB",
"tera_byte_plural": ""
}
},
"media": {
"album": "Album"
},
"sharing": {
"table_header": "Offentlige delinger"
}
},
"timeline_filter": {

37
ui/src/extractedTranslations/de/translation.json
View File

@ -2,13 +2,13 @@
"album_filter": {
"only_favorites": "Nur Favoriten anzeigen",
"sort": "",
"sort_by": "Sortieren nach",
"sorting_options": {
"date_imported": "Importdatum",
"date_shot": "Aufnahmedatum",
"title": "Titel",
"type": "Typ"
},
"sort_by": "Sortieren nach"
}
},
"general": {
"action": {
@ -155,6 +155,19 @@
"language_selector": {
"placeholder": "Sprache auswählen"
},
"theme": {
"auto": {
"label": ""
},
"dark": {
"label": ""
},
"description": "",
"light": {
"label": ""
},
"title": ""
},
"title": "Persönliche Einstellungen"
},
"users": {
@ -240,16 +253,16 @@
},
"download": {
"filesize": {
"byte": "{{count}} Byte",
"byte_plural": "{{count}} Bytes",
"giga_byte": "{{count}} GB",
"giga_byte_plural": "",
"kilo_byte": "{{count}} KB",
"kilo_byte_plural": "",
"mega_byte": "{{count}} MB",
"mega_byte_plural": "",
"tera_byte": "{{count}} TB",
"tera_byte_plural": ""
"byte_one": "",
"byte_other": "",
"giga_byte_one": "",
"giga_byte_other": "",
"kilo_byte_one": "",
"kilo_byte_other": "",
"mega_byte_one": "",
"mega_byte_other": "",
"tera_byte_one": "",
"tera_byte_other": ""
},
"table_columns": {
"dimensions": "Dimension",

74
ui/src/extractedTranslations/de/translation_old.json
View File

@ -1,4 +1,7 @@
{
"album_filter": {
"sort": null
},
"albums_page": {
"title": "Alben"
},
@ -15,12 +18,18 @@
"header": {
"search": {
"result_type": {
"photos": "Fotos",
"media": null
"media": null,
"photos": "Fotos"
}
}
},
"people_page": {
"action_label": {
"change_label": null,
"detach_face": null,
"merge_face": null,
"move_faces": null
},
"face_group": {
"action": {
"add_label": null,
@ -50,6 +59,13 @@
},
"title": null
},
"merge_people_groups": {
"description": "",
"destination_table": {
"title": ""
},
"title": ""
},
"move_image_faces": {
"description": null,
"destination_face_group_table": {
@ -61,13 +77,6 @@
"title": null
},
"title": null
},
"merge_people_groups": {
"description": "",
"destination_table": {
"title": ""
},
"title": ""
}
},
"table": {
@ -78,12 +87,6 @@
"search_images_placeholder": null
}
},
"action_label": {
"change_label": null,
"merge_face": null,
"detach_face": null,
"move_faces": null
},
"tableselect_face_group": {
"search_faces_placeholder": null
},
@ -101,38 +104,41 @@
}
}
},
"share_page": {
"protected_share": {
"password_required_error": null
}
},
"sidebar": {
"album": {
"title": "Album Optionen",
"title_placeholder": null,
"album_cover": null,
"cover_photo": "",
"reset_cover": null,
"set_cover": null
},
"sharing": {
"table_header": "Öffentliche Freigabe",
"delete": null,
"more": null
"set_cover": null,
"title": "Album Optionen",
"title_placeholder": null
},
"download": {
"filesize": {
"giga_byte_plural": null,
"kilo_byte_plural": null,
"mega_byte_plural": null,
"tera_byte_plural": null
"byte": "{{count}} Byte",
"byte_plural": "{{count}} Bytes",
"giga_byte": "{{count}} GB",
"giga_byte_plural": "",
"kilo_byte": "{{count}} KB",
"kilo_byte_plural": "",
"mega_byte": "{{count}} MB",
"mega_byte_plural": "",
"tera_byte": "{{count}} TB",
"tera_byte_plural": ""
}
},
"media": {
"album": ""
}
},
"album_filter": {
"sort": null
},
"share_page": {
"protected_share": {
"password_required_error": null
"sharing": {
"delete": null,
"more": null,
"table_header": "Öffentliche Freigabe"
}
},
"timeline_filter": {

37
ui/src/extractedTranslations/en/translation.json
View File

@ -2,13 +2,13 @@
"album_filter": {
"only_favorites": "Show only favorites",
"sort": "Sort",
"sort_by": "Sort by",
"sorting_options": {
"date_imported": "Date imported",
"date_shot": "Date shot",
"title": "Title",
"type": "Kind"
},
"sort_by": "Sort by"
}
},
"general": {
"action": {
@ -155,6 +155,19 @@
"language_selector": {
"placeholder": "Select language"
},
"theme": {
"auto": {
"label": "Same as system"
},
"dark": {
"label": "Dark"
},
"description": "Change the appearance of the website",
"light": {
"label": "Light"
},
"title": "Theme preferences"
},
"title": "User preferences"
},
"users": {
@ -240,16 +253,16 @@
},
"download": {
"filesize": {
"byte": "{{count}} Byte",
"byte_plural": "{{count}} Bytes",
"giga_byte": "{{count}} GB",
"giga_byte_plural": "{{count}} GB",
"kilo_byte": "{{count}} KB",
"kilo_byte_plural": "{{count}} KB",
"mega_byte": "{{count}} MB",
"mega_byte_plural": "{{count}} MB",
"tera_byte": "{{count}} TB",
"tera_byte_plural": "{{count}} TB"
"byte_one": "{{count}} Byte",
"byte_other": "{{count}} Bytes",
"giga_byte_one": "{{count}} GB",
"giga_byte_other": "{{count}} GB",
"kilo_byte_one": "{{count}} KB",
"kilo_byte_other": "{{count}} KB",
"mega_byte_one": "{{count}} MB",
"mega_byte_other": "{{count}} MB",
"tera_byte_one": "{{count}} TB",
"tera_byte_other": "{{count}} TB"
},
"table_columns": {
"dimensions": "Dimensions",

38
ui/src/extractedTranslations/en/translation_old.json
View File

@ -29,14 +29,6 @@
"move_faces": "Move Faces"
}
},
"table": {
"select_face_group": {
"search_faces_placeholder": "Search faces..."
},
"select_image_faces": {
"search_images_placeholder": "Search images..."
}
},
"modal": {
"merge_people_groups": {
"description": "All images within this face group will be merged into the selected face group.",
@ -45,6 +37,14 @@
},
"title": "Merge Face Groups"
}
},
"table": {
"select_face_group": {
"search_faces_placeholder": "Search faces..."
},
"select_image_faces": {
"search_images_placeholder": "Search images..."
}
}
},
"settings": {
@ -58,14 +58,28 @@
},
"sidebar": {
"album": {
"title": "Album options",
"cover_photo": "Album cover"
"cover_photo": "Album cover",
"title": "Album options"
},
"sharing": {
"table_header": "Public shares"
"download": {
"filesize": {
"byte": "{{count}} Byte",
"byte_plural": "{{count}} Bytes",
"giga_byte": "{{count}} GB",
"giga_byte_plural": "{{count}} GB",
"kilo_byte": "{{count}} KB",
"kilo_byte_plural": "{{count}} KB",
"mega_byte": "{{count}} MB",
"mega_byte_plural": "{{count}} MB",
"tera_byte": "{{count}} TB",
"tera_byte_plural": "{{count}} TB"
}
},
"media": {
"album": "Album"
},
"sharing": {
"table_header": "Public shares"
}
}
}

37
ui/src/extractedTranslations/es/translation.json
View File

@ -2,13 +2,13 @@
"album_filter": {
"only_favorites": "Solo mostrar favoritos",
"sort": "",
"sort_by": "Ordenar por",
"sorting_options": {
"date_imported": "Fecha de importado",
"date_shot": "Fecha de la foto",
"title": "Título",
"type": "Tipo"
},
"sort_by": "Ordenar por"
}
},
"general": {
"action": {
@ -155,6 +155,19 @@
"language_selector": {
"placeholder": "Seleccionar idioma"
},
"theme": {
"auto": {
"label": ""
},
"dark": {
"label": ""
},
"description": "",
"light": {
"label": ""
},
"title": ""
},
"title": "Preferencias de usuario"
},
"users": {
@ -240,16 +253,16 @@
},
"download": {
"filesize": {
"byte": "{{count}} Byte",
"byte_plural": "{{count}} Bytes",
"giga_byte": "{{count}} GB",
"giga_byte_plural": "",
"kilo_byte": "{{count}} KB",
"kilo_byte_plural": "",
"mega_byte": "{{count}} MB",
"mega_byte_plural": "",
"tera_byte": "{{count}} TB",
"tera_byte_plural": ""
"byte_one": "",
"byte_other": "",
"giga_byte_one": "",
"giga_byte_other": "",
"kilo_byte_one": "",
"kilo_byte_other": "",
"mega_byte_one": "",
"mega_byte_other": "",
"tera_byte_one": "",
"tera_byte_other": ""
},
"table_columns": {
"dimensions": "Dimensiones",

80
ui/src/extractedTranslations/es/translation_old.json
View File

@ -1,4 +1,7 @@
{
"album_filter": {
"sort": null
},
"albums_page": {
"title": "Álbumes"
},
@ -15,12 +18,18 @@
"header": {
"search": {
"result_type": {
"photos": "Fotos",
"media": null
"media": null,
"photos": "Fotos"
}
}
},
"people_page": {
"action_label": {
"change_label": null,
"detach_face": null,
"merge_face": null,
"move_faces": null
},
"face_group": {
"action": {
"add_label": null,
@ -50,6 +59,13 @@
},
"title": null
},
"merge_people_groups": {
"description": "",
"destination_table": {
"title": ""
},
"title": ""
},
"move_image_faces": {
"description": null,
"destination_face_group_table": {
@ -61,13 +77,6 @@
"title": null
},
"title": null
},
"merge_people_groups": {
"description": "",
"destination_table": {
"title": ""
},
"title": ""
}
},
"table": {
@ -78,12 +87,6 @@
"search_images_placeholder": null
}
},
"action_label": {
"change_label": null,
"merge_face": null,
"detach_face": null,
"move_faces": null
},
"tableselect_face_group": {
"search_faces_placeholder": null
},
@ -106,41 +109,41 @@
"version_title": null
}
},
"share_page": {
"protected_share": {
"password_required_error": null
}
},
"sidebar": {
"album": {
"title": "opciones de álbum",
"title_placeholder": null,
"album_cover": null,
"cover_photo": "",
"reset_cover": null,
"set_cover": null
},
"sharing": {
"table_header": "Compartidos públicos",
"delete": null,
"more": null
"set_cover": null,
"title": "opciones de álbum",
"title_placeholder": null
},
"download": {
"filesize": {
"giga_byte_plural": null,
"kilo_byte_plural": null,
"mega_byte_plural": null,
"tera_byte_plural": null
"byte": "{{count}} Byte",
"byte_plural": "{{count}} Bytes",
"giga_byte": "{{count}} GB",
"giga_byte_plural": "",
"kilo_byte": "{{count}} KB",
"kilo_byte_plural": "",
"mega_byte": "{{count}} MB",
"mega_byte_plural": "",
"tera_byte": "{{count}} TB",
"tera_byte_plural": ""
}
},
"media": {
"album": ""
}
},
"title": {
"login": null
},
"album_filter": {
"sort": null
},
"share_page": {
"protected_share": {
"password_required_error": null
"sharing": {
"delete": null,
"more": null,
"table_header": "Compartidos públicos"
}
},
"timeline_filter": {
@ -148,5 +151,8 @@
"dropdown_all": null,
"label": null
}
},
"title": {
"login": null
}
}

42
ui/src/extractedTranslations/fr/translation.json
View File

@ -2,13 +2,13 @@
"album_filter": {
"only_favorites": "Afficher seulement les favoris",
"sort": "Trier",
"sort_by": "Trier par",
"sorting_options": {
"date_imported": "Date d'importation",
"date_shot": "Date de prise de vue",
"title": "Titre",
"type": "Type"
},
"sort_by": "Trier par"
}
},
"general": {
"action": {
@ -155,6 +155,19 @@
"language_selector": {
"placeholder": "Choisir la langue"
},
"theme": {
"auto": {
"label": ""
},
"dark": {
"label": ""
},
"description": "",
"light": {
"label": ""
},
"title": ""
},
"title": "Paramètres d'utilisateur"
},
"users": {
@ -240,16 +253,21 @@
},
"download": {
"filesize": {
"byte": "{{count}} Octets",
"byte_plural": "{{count}} Octets",
"giga_byte": "{{count}} Go",
"giga_byte_plural": "{{count}} Go",
"kilo_byte": "{{count}} Ko",
"kilo_byte_plural": "{{count}} Ko",
"mega_byte": "{{count}} Mo",
"mega_byte_plural": "{{count}} Mo",
"tera_byte": "{{count}} To",
"tera_byte_plural": "{{count}} To"
"byte_one": "",
"byte_many": "",
"byte_other": "",
"giga_byte_one": "",
"giga_byte_many": "",
"giga_byte_other": "",
"kilo_byte_one": "",
"kilo_byte_many": "",
"kilo_byte_other": "",
"mega_byte_one": "",
"mega_byte_many": "",
"mega_byte_other": "",
"tera_byte_one": "",
"tera_byte_many": "",
"tera_byte_other": ""
},
"table_columns": {
"dimensions": "Dimensions",

42
ui/src/extractedTranslations/fr/translation_old.json
View File

@ -49,6 +49,13 @@
},
"title": null
},
"merge_people_groups": {
"description": "Toutes les images de ce groupe de visages seront fusionnées dans le groupe de visages sélectionné.",
"destination_table": {
"title": "Sélectionner le visage de destination"
},
"title": "Fusionner des groupes de visages"
},
"move_image_faces": {
"description": null,
"destination_face_group_table": {
@ -60,13 +67,6 @@
"title": null
},
"title": null
},
"merge_people_groups": {
"description": "Toutes les images de ce groupe de visages seront fusionnées dans le groupe de visages sélectionné.",
"destination_table": {
"title": "Sélectionner le visage de destination"
},
"title": "Fusionner des groupes de visages"
}
},
"table": {
@ -94,26 +94,40 @@
},
"sidebar": {
"album": {
"title": "Paramètres de l'album",
"album_cover": null,
"cover_photo": "",
"reset_cover": null,
"set_cover": null
"set_cover": null,
"title": "Paramètres de l'album"
},
"sharing": {
"table_header": "Partages publics"
"download": {
"filesize": {
"byte": "{{count}} Octets",
"byte_plural": "{{count}} Octets",
"giga_byte": "{{count}} Go",
"giga_byte_plural": "{{count}} Go",
"kilo_byte": "{{count}} Ko",
"kilo_byte_plural": "{{count}} Ko",
"mega_byte": "{{count}} Mo",
"mega_byte_plural": "{{count}} Mo",
"tera_byte": "{{count}} To",
"tera_byte_plural": "{{count}} To"
}
},
"media": {
"album": ""
}
},
"title": {
"login": null
"sharing": {
"table_header": "Partages publics"
}
},
"timeline_filter": {
"date": {
"dropdown_all": null,
"label": null
}
},
"title": {
"login": null
}
}

37
ui/src/extractedTranslations/it/translation.json
View File

@ -2,13 +2,13 @@
"album_filter": {
"only_favorites": "Mostra solo i preferiti",
"sort": "",
"sort_by": "Ordina per",
"sorting_options": {
"date_imported": "Data importazione",
"date_shot": "Data scatto",
"title": "Titolo",
"type": "Tipo"
},
"sort_by": "Ordina per"
}
},
"general": {
"action": {
@ -155,6 +155,19 @@
"language_selector": {
"placeholder": "Seleziona lingua"
},
"theme": {
"auto": {
"label": ""
},
"dark": {
"label": ""
},
"description": "",
"light": {
"label": ""
},
"title": ""
},
"title": "Preferenze utente"
},
"users": {
@ -240,16 +253,16 @@
},
"download": {
"filesize": {
"byte": "{{count}} Byte",
"byte_plural": "{{count}} Bytes",
"giga_byte": "{{count}} GB",
"giga_byte_plural": "",
"kilo_byte": "{{count}} KB",
"kilo_byte_plural": "",
"mega_byte": "{{count}} MB",
"mega_byte_plural": "",
"tera_byte": "{{count}} TB",
"tera_byte_plural": ""
"byte_one": "",
"byte_other": "",
"giga_byte_one": "",
"giga_byte_other": "",
"kilo_byte_one": "",
"kilo_byte_other": "",
"mega_byte_one": "",
"mega_byte_other": "",
"tera_byte_one": "",
"tera_byte_other": ""
},
"table_columns": {
"dimensions": "Dimensioni",

78
ui/src/extractedTranslations/it/translation_old.json
View File

@ -1,4 +1,7 @@
{
"album_filter": {
"sort": null
},
"albums_page": {
"title": "Album"
},
@ -15,12 +18,18 @@
"header": {
"search": {
"result_type": {
"photos": "Foto",
"media": null
"media": null,
"photos": "Foto"
}
}
},
"people_page": {
"action_label": {
"change_label": null,
"detach_face": null,
"merge_face": null,
"move_faces": null
},
"face_group": {
"action": {
"add_label": "Aggiungi etichetta",
@ -30,6 +39,15 @@
"move_faces": "Sposta volti"
}
},
"modal": {
"merge_people_groups": {
"description": "Tutte le immagini di questo volto saranno unite alle immagini del volto selezionato",
"destination_table": {
"title": "Seleziona il volto di destinazione"
},
"title": "Unisci immagini volto"
}
},
"table": {
"select_face_group": {
"search_faces_placeholder": "Cerca volti..."
@ -38,26 +56,11 @@
"search_images_placeholder": "Cerca immagini..."
}
},
"action_label": {
"change_label": null,
"merge_face": null,
"detach_face": null,
"move_faces": null
},
"tableselect_face_group": {
"search_faces_placeholder": null
},
"tableselect_image_faces": {
"search_images_placeholder": null
},
"modal": {
"merge_people_groups": {
"description": "Tutte le immagini di questo volto saranno unite alle immagini del volto selezionato",
"destination_table": {
"title": "Seleziona il volto di destinazione"
},
"title": "Unisci immagini volto"
}
}
},
"settings": {
@ -70,38 +73,41 @@
}
}
},
"share_page": {
"protected_share": {
"password_required_error": null
}
},
"sidebar": {
"album": {
"title": "Opzioni Album",
"title_placeholder": null,
"album_cover": null,
"cover_photo": "",
"reset_cover": null,
"set_cover": null
},
"sharing": {
"table_header": "Condivisioni pubbliche",
"delete": null,
"more": null
"set_cover": null,
"title": "Opzioni Album",
"title_placeholder": null
},
"download": {
"filesize": {
"giga_byte_plural": null,
"kilo_byte_plural": null,
"mega_byte_plural": null,
"tera_byte_plural": null
"byte": "{{count}} Byte",
"byte_plural": "{{count}} Bytes",
"giga_byte": "{{count}} GB",
"giga_byte_plural": "",
"kilo_byte": "{{count}} KB",
"kilo_byte_plural": "",
"mega_byte": "{{count}} MB",
"mega_byte_plural": "",
"tera_byte": "{{count}} TB",
"tera_byte_plural": ""
}
},
"media": {
"album": ""
}
},
"album_filter": {
"sort": null
},
"share_page": {
"protected_share": {
"password_required_error": null
"sharing": {
"delete": null,
"more": null,
"table_header": "Condivisioni pubbliche"
}
},
"timeline_filter": {

52
ui/src/extractedTranslations/pl/translation.json
View File

@ -2,13 +2,13 @@
"album_filter": {
"only_favorites": "Pokaż tylko ulubione",
"sort": "",
"sort_by": "Sortuj",
"sorting_options": {
"date_imported": "Data zaimportowania",
"date_shot": "Data wykonania",
"title": "Tytuł",
"type": "Rodzaj"
},
"sort_by": "Sortuj"
}
},
"general": {
"action": {
@ -155,6 +155,19 @@
"language_selector": {
"placeholder": "Wybierz język"
},
"theme": {
"auto": {
"label": ""
},
"dark": {
"label": ""
},
"description": "",
"light": {
"label": ""
},
"title": ""
},
"title": "Preferencje użytkownika"
},
"users": {
@ -240,21 +253,26 @@
},
"download": {
"filesize": {
"byte_0": "",
"byte_1": "",
"byte_2": "",
"giga_byte_0": "",
"giga_byte_1": "",
"giga_byte_2": "",
"kilo_byte_0": "",
"kilo_byte_1": "",
"kilo_byte_2": "",
"mega_byte_0": "",
"mega_byte_1": "",
"mega_byte_2": "",
"tera_byte_0": "",
"tera_byte_1": "",
"tera_byte_2": ""
"byte_one": "",
"byte_few": "",
"byte_many": "",
"byte_other": "",
"giga_byte_one": "",
"giga_byte_few": "",
"giga_byte_many": "",
"giga_byte_other": "",
"kilo_byte_one": "",
"kilo_byte_few": "",
"kilo_byte_many": "",
"kilo_byte_other": "",
"mega_byte_one": "",
"mega_byte_few": "",
"mega_byte_many": "",
"mega_byte_other": "",
"tera_byte_one": "",
"tera_byte_few": "",
"tera_byte_many": "",
"tera_byte_other": ""
},
"table_columns": {
"dimensions": "Wymiary",

96
ui/src/extractedTranslations/pl/translation_old.json
View File

@ -1,4 +1,7 @@
{
"album_filter": {
"sort": null
},
"albums_page": {
"title": "Albumy"
},
@ -15,12 +18,18 @@
"header": {
"search": {
"result_type": {
"photos": "Zdjęcia",
"media": null
"media": null,
"photos": "Zdjęcia"
}
}
},
"people_page": {
"action_label": {
"change_label": null,
"detach_face": null,
"merge_face": null,
"move_faces": null
},
"face_group": {
"action": {
"add_label": null,
@ -50,6 +59,13 @@
},
"title": null
},
"merge_people_groups": {
"description": "",
"destination_table": {
"title": ""
},
"title": ""
},
"move_image_faces": {
"description": null,
"destination_face_group_table": {
@ -61,13 +77,6 @@
"title": null
},
"title": null
},
"merge_people_groups": {
"description": "",
"destination_table": {
"title": ""
},
"title": ""
}
},
"table": {
@ -78,12 +87,6 @@
"search_images_placeholder": null
}
},
"action_label": {
"change_label": null,
"merge_face": null,
"detach_face": null,
"move_faces": null
},
"tableselect_face_group": {
"search_faces_placeholder": null
},
@ -106,58 +109,52 @@
"version_title": null
}
},
"share_page": {
"protected_share": {
"password_required_error": null
}
},
"sidebar": {
"album": {
"title": "Opcje albumu",
"title_placeholder": null,
"album_cover": null,
"cover_photo": "",
"reset_cover": null,
"set_cover": null
"set_cover": null,
"title": "Opcje albumu",
"title_placeholder": null
},
"download": {
"filesize": {
"byte": "{{count}} Bajt",
"byte_0": null,
"byte_1": null,
"byte_2": null,
"byte_0": "",
"byte_1": "",
"byte_2": "",
"byte_plural": "{{count}} Bajtów",
"giga_byte": "{{count}} GB",
"giga_byte_0": "",
"giga_byte_1": "",
"giga_byte_2": "",
"kilo_byte": "{{count}} KB",
"kilo_byte_0": "",
"kilo_byte_1": "",
"kilo_byte_2": "",
"mega_byte": "{{count}} MB",
"mega_byte_0": "",
"mega_byte_1": "",
"mega_byte_2": "",
"tera_byte": "{{count}} TB",
"giga_byte_0": null,
"giga_byte_1": null,
"giga_byte_2": null,
"kilo_byte_0": null,
"kilo_byte_1": null,
"kilo_byte_2": null,
"mega_byte_0": null,
"mega_byte_1": null,
"mega_byte_2": null,
"tera_byte_0": null,
"tera_byte_1": null,
"tera_byte_2": null
"tera_byte_0": "",
"tera_byte_1": "",
"tera_byte_2": ""
}
},
"sharing": {
"table_header": "Publiczne udostępnienia",
"delete": null,
"more": null
},
"media": {
"album": ""
}
},
"title": {
"login": null
},
"album_filter": {
"sort": null
},
"share_page": {
"protected_share": {
"password_required_error": null
"sharing": {
"delete": null,
"more": null,
"table_header": "Publiczne udostępnienia"
}
},
"timeline_filter": {
@ -165,5 +162,8 @@
"dropdown_all": null,
"label": null
}
},
"title": {
"login": null
}
}

37
ui/src/extractedTranslations/pt/translation.json
View File

@ -2,13 +2,13 @@
"album_filter": {
"only_favorites": "Mostrar apenas os favoritos",
"sort": "Ordenar",
"sort_by": "Ordenado por",
"sorting_options": {
"date_imported": "Data de importação",
"date_shot": "Data da foto",
"title": "Título",
"type": "Tipo"
},
"sort_by": "Ordenado por"
}
},
"general": {
"action": {
@ -155,6 +155,19 @@
"language_selector": {
"placeholder": "Selecionar Idioma"
},
"theme": {
"auto": {
"label": ""
},
"dark": {
"label": ""
},
"description": "",
"light": {
"label": ""
},
"title": ""
},
"title": "Preferências do utilizador"
},
"users": {
@ -240,16 +253,16 @@
},
"download": {
"filesize": {
"byte": "{{count}} Byte",
"byte_plural": "{{count}} Bytes",
"giga_byte": "{{count}} GB",
"giga_byte_plural": "{{count}} GB",
"kilo_byte": "{{count}} KB",
"kilo_byte_plural": "{{count}} KB",
"mega_byte": "{{count}} MB",
"mega_byte_plural": "{{count}} MB",
"tera_byte": "{{count}} TB",
"tera_byte_plural": "{{count}} TB"
"byte_one": "",
"byte_other": "",
"giga_byte_one": "",
"giga_byte_other": "",
"kilo_byte_one": "",
"kilo_byte_other": "",
"mega_byte_one": "",
"mega_byte_other": "",
"tera_byte_one": "",
"tera_byte_other": ""
},
"table_columns": {
"dimensions": "Dimensões",

18
ui/src/extractedTranslations/pt/translation_old.json
View File

@ -2,8 +2,8 @@
"people_page": {
"action_label": {
"change_label": null,
"merge_people": null,
"detach_images": null,
"merge_people": null,
"move_faces": null
},
"modal": {
@ -15,5 +15,21 @@
"title": "Juntar grupos de cara"
}
}
},
"sidebar": {
"download": {
"filesize": {
"byte": "{{count}} Byte",
"byte_plural": "{{count}} Bytes",
"giga_byte": "{{count}} GB",
"giga_byte_plural": "{{count}} GB",
"kilo_byte": "{{count}} KB",
"kilo_byte_plural": "{{count}} KB",
"mega_byte": "{{count}} MB",
"mega_byte_plural": "{{count}} MB",
"tera_byte": "{{count}} TB",
"tera_byte_plural": "{{count}} TB"
}
}
}
}

52
ui/src/extractedTranslations/ru/translation.json
View File

@ -2,13 +2,13 @@
"album_filter": {
"only_favorites": "Показать только избранные",
"sort": "",
"sort_by": "Отсортировать по",
"sorting_options": {
"date_imported": "Дата импортирования",
"date_shot": "Дата снимка",
"title": "Заголовок",
"type": "Вид"
},
"sort_by": "Отсортировать по"
}
},
"general": {
"action": {
@ -155,6 +155,19 @@
"language_selector": {
"placeholder": "Выбрать язык"
},
"theme": {
"auto": {
"label": ""
},
"dark": {
"label": ""
},
"description": "",
"light": {
"label": ""
},
"title": ""
},
"title": "Пользовательские настройки"
},
"users": {
@ -240,21 +253,26 @@
},
"download": {
"filesize": {
"byte_0": "",
"byte_1": "",
"byte_2": "",
"giga_byte_0": "",
"giga_byte_1": "",
"giga_byte_2": "",
"kilo_byte_0": "",
"kilo_byte_1": "",
"kilo_byte_2": "",
"mega_byte_0": "",
"mega_byte_1": "",
"mega_byte_2": "",
"tera_byte_0": "",
"tera_byte_1": "",
"tera_byte_2": ""
"byte_one": "",
"byte_few": "",
"byte_many": "",
"byte_other": "",
"giga_byte_one": "",
"giga_byte_few": "",
"giga_byte_many": "",
"giga_byte_other": "",
"kilo_byte_one": "",
"kilo_byte_few": "",
"kilo_byte_many": "",
"kilo_byte_other": "",
"mega_byte_one": "",
"mega_byte_few": "",
"mega_byte_many": "",
"mega_byte_other": "",
"tera_byte_one": "",
"tera_byte_few": "",
"tera_byte_many": "",
"tera_byte_other": ""
},
"table_columns": {
"dimensions": "Габариты",

94
ui/src/extractedTranslations/ru/translation_old.json
View File

@ -1,4 +1,7 @@
{
"album_filter": {
"sort": null
},
"albums_page": {
"title": "Альбомы"
},
@ -15,12 +18,18 @@
"header": {
"search": {
"result_type": {
"photos": "Фото",
"media": null
"media": null,
"photos": "Фото"
}
}
},
"people_page": {
"action_label": {
"change_label": null,
"detach_face": null,
"merge_face": null,
"move_faces": null
},
"face_group": {
"action": {
"add_label": "Добавить Метку",
@ -30,6 +39,15 @@
"move_faces": "Переместить Лица"
}
},
"modal": {
"merge_people_groups": {
"description": "Все фотографии в этой группе лиц будут обьеденены с выбранной группой.",
"destination_table": {
"title": "Выберете конечное лицо"
},
"title": "Обьединить группы лиц"
}
},
"table": {
"select_face_group": {
"search_faces_placeholder": "Поиск лиц..."
@ -38,26 +56,11 @@
"search_images_placeholder": "Поиск фото..."
}
},
"action_label": {
"change_label": null,
"merge_face": null,
"detach_face": null,
"move_faces": null
},
"tableselect_face_group": {
"search_faces_placeholder": null
},
"tableselect_image_faces": {
"search_images_placeholder": null
},
"modal": {
"merge_people_groups": {
"description": "Все фотографии в этой группе лиц будут обьеденены с выбранной группой.",
"destination_table": {
"title": "Выберете конечное лицо"
},
"title": "Обьединить группы лиц"
}
}
},
"settings": {
@ -70,55 +73,52 @@
}
}
},
"share_page": {
"protected_share": {
"password_required_error": null
}
},
"sidebar": {
"album": {
"title": "Свойства альбома",
"title_placeholder": null,
"album_cover": null,
"cover_photo": "",
"reset_cover": null,
"set_cover": null
"set_cover": null,
"title": "Свойства альбома",
"title_placeholder": null
},
"download": {
"filesize": {
"byte": "{{count}} Байт",
"byte_0": "",
"byte_1": "",
"byte_2": "",
"byte_plural": "{{count}} Байт",
"giga_byte": "{{count}} ГБ",
"giga_byte_0": "",
"giga_byte_1": "",
"giga_byte_2": "",
"kilo_byte": "{{count}} КБ",
"kilo_byte_0": "",
"kilo_byte_1": "",
"kilo_byte_2": "",
"mega_byte": "{{count}} МБ",
"mega_byte_0": "",
"mega_byte_1": "",
"mega_byte_2": "",
"tera_byte": "{{count}} ТБ",
"byte_0": null,
"byte_1": null,
"byte_2": null,
"giga_byte_0": null,
"giga_byte_1": null,
"giga_byte_2": null,
"kilo_byte_0": null,
"kilo_byte_1": null,
"kilo_byte_2": null,
"mega_byte_0": null,
"mega_byte_1": null,
"mega_byte_2": null,
"tera_byte_0": null,
"tera_byte_1": null,
"tera_byte_2": null
"tera_byte_0": "",
"tera_byte_1": "",
"tera_byte_2": ""
}
},
"sharing": {
"table_header": "Общий доступ",
"delete": null,
"more": null
},
"media": {
"album": ""
}
},
"album_filter": {
"sort": null
},
"share_page": {
"protected_share": {
"password_required_error": null
"sharing": {
"delete": null,
"more": null,
"table_header": "Общий доступ"
}
},
"timeline_filter": {

37
ui/src/extractedTranslations/sv/translation.json
View File

@ -2,13 +2,13 @@
"album_filter": {
"only_favorites": "Visa endast favoriter",
"sort": "",
"sort_by": "Sortera efter",
"sorting_options": {
"date_imported": "Datum för import",
"date_shot": "Datum",
"title": "Titel",
"type": "Typ"
},
"sort_by": "Sortera efter"
}
},
"general": {
"action": {
@ -155,6 +155,19 @@
"language_selector": {
"placeholder": "Välj språk"
},
"theme": {
"auto": {
"label": ""
},
"dark": {
"label": ""
},
"description": "",
"light": {
"label": ""
},
"title": ""
},
"title": "Användarinställningar"
},
"users": {
@ -240,16 +253,16 @@
},
"download": {
"filesize": {
"byte": "{{count}} Byte",
"byte_plural": "{{count}} Bytes",
"giga_byte": "{{count}} GB",
"giga_byte_plural": "",
"kilo_byte": "{{count}} KB",
"kilo_byte_plural": "",
"mega_byte": "{{count}} MB",
"mega_byte_plural": "",
"tera_byte": "{{count}} TB",
"tera_byte_plural": ""
"byte_one": "",
"byte_other": "",
"giga_byte_one": "",
"giga_byte_other": "",
"kilo_byte_one": "",
"kilo_byte_other": "",
"mega_byte_one": "",
"mega_byte_other": "",
"tera_byte_one": "",
"tera_byte_other": ""
},
"table_columns": {
"dimensions": "Mått",

80
ui/src/extractedTranslations/sv/translation_old.json
View File

@ -1,4 +1,7 @@
{
"album_filter": {
"sort": null
},
"albums_page": {
"title": "Album"
},
@ -15,12 +18,18 @@
"header": {
"search": {
"result_type": {
"photos": "Bilder",
"media": null
"media": null,
"photos": "Bilder"
}
}
},
"people_page": {
"action_label": {
"change_label": null,
"detach_face": null,
"merge_face": null,
"move_faces": null
},
"face_group": {
"action": {
"add_label": null,
@ -50,6 +59,13 @@
},
"title": null
},
"merge_people_groups": {
"description": "",
"destination_table": {
"title": ""
},
"title": ""
},
"move_image_faces": {
"description": null,
"destination_face_group_table": {
@ -61,13 +77,6 @@
"title": null
},
"title": null
},
"merge_people_groups": {
"description": "",
"destination_table": {
"title": ""
},
"title": ""
}
},
"table": {
@ -78,12 +87,6 @@
"search_images_placeholder": null
}
},
"action_label": {
"change_label": null,
"merge_face": null,
"detach_face": null,
"move_faces": null
},
"tableselect_face_group": {
"search_faces_placeholder": null
},
@ -109,41 +112,41 @@
"version_title": null
}
},
"share_page": {
"protected_share": {
"password_required_error": null
}
},
"sidebar": {
"album": {
"title": "Albuminställningar",
"title_placeholder": null,
"album_cover": null,
"cover_photo": "",
"reset_cover": null,
"set_cover": null
},
"sharing": {
"table_header": "Publika delningar",
"delete": null,
"more": null
"set_cover": null,
"title": "Albuminställningar",
"title_placeholder": null
},
"download": {
"filesize": {
"giga_byte_plural": null,
"kilo_byte_plural": null,
"mega_byte_plural": null,
"tera_byte_plural": null
"byte": "{{count}} Byte",
"byte_plural": "{{count}} Bytes",
"giga_byte": "{{count}} GB",
"giga_byte_plural": "",
"kilo_byte": "{{count}} KB",
"kilo_byte_plural": "",
"mega_byte": "{{count}} MB",
"mega_byte_plural": "",
"tera_byte": "{{count}} TB",
"tera_byte_plural": ""
}
},
"media": {
"album": ""
}
},
"title": {
"login": null
},
"album_filter": {
"sort": null
},
"share_page": {
"protected_share": {
"password_required_error": null
"sharing": {
"delete": null,
"more": null,
"table_header": "Publika delningar"
}
},
"timeline_filter": {
@ -151,5 +154,8 @@
"dropdown_all": null,
"label": null
}
},
"title": {
"login": null
}
}

27
ui/src/extractedTranslations/zh-CN/translation.json
View File

@ -2,13 +2,13 @@
"album_filter": {
"only_favorites": "只显示喜爱",
"sort": "排序",
"sort_by": "排序方式",
"sorting_options": {
"date_imported": "加入日期",
"date_shot": "拍摄日期",
"title": "标题",
"type": "种类"
},
"sort_by": "排序方式"
}
},
"general": {
"action": {
@ -155,6 +155,19 @@
"language_selector": {
"placeholder": "Select language"
},
"theme": {
"auto": {
"label": ""
},
"dark": {
"label": ""
},
"description": "",
"light": {
"label": ""
},
"title": ""
},
"title": "使用者选项"
},
"users": {
@ -240,11 +253,11 @@
},
"download": {
"filesize": {
"byte": "",
"giga_byte": "",
"kilo_byte": "",
"mega_byte": "",
"tera_byte": ""
"byte_other": "",
"giga_byte_other": "",
"kilo_byte_other": "",
"mega_byte_other": "",
"tera_byte_other": ""
},
"table_columns": {
"dimensions": "尺寸",

12
ui/src/extractedTranslations/zh-CN/translation_old.json
View File

@ -2,8 +2,8 @@
"people_page": {
"action_label": {
"change_label": null,
"merge_people": null,
"detach_images": null,
"merge_people": null,
"move_faces": null
},
"modal": {
@ -19,11 +19,11 @@
"sidebar": {
"download": {
"filesize": {
"byte": null,
"giga_byte": null,
"kilo_byte": null,
"mega_byte": null,
"tera_byte": null
"byte": "",
"giga_byte": "",
"kilo_byte": "",
"mega_byte": "",
"tera_byte": ""
}
},
"media": {

27
ui/src/extractedTranslations/zh-HK/translation.json
View File

@ -2,13 +2,13 @@
"album_filter": {
"only_favorites": "只顯示喜愛",
"sort": "排序",
"sort_by": "排序方式",
"sorting_options": {
"date_imported": "加入日期",
"date_shot": "拍攝日期",
"title": "標題",
"type": "種類"
},
"sort_by": "排序方式"
}
},
"general": {
"action": {
@ -155,6 +155,19 @@
"language_selector": {
"placeholder": "Select language"
},
"theme": {
"auto": {
"label": ""
},
"dark": {
"label": ""
},
"description": "",
"light": {
"label": ""
},
"title": ""
},
"title": "使用者選項"
},
"users": {
@ -240,11 +253,11 @@
},
"download": {
"filesize": {
"byte": "",
"giga_byte": "",
"kilo_byte": "",
"mega_byte": "",
"tera_byte": ""
"byte_other": "",
"giga_byte_other": "",
"kilo_byte_other": "",
"mega_byte_other": "",
"tera_byte_other": ""
},
"table_columns": {
"dimensions": "尺寸",

12
ui/src/extractedTranslations/zh-HK/translation_old.json
View File

@ -2,8 +2,8 @@
"people_page": {
"action_label": {
"change_label": null,
"merge_people": null,
"detach_images": null,
"merge_people": null,
"move_faces": null
},
"modal": {
@ -19,11 +19,11 @@
"sidebar": {
"download": {
"filesize": {
"byte": null,
"giga_byte": null,
"kilo_byte": null,
"mega_byte": null,
"tera_byte": null
"byte": "",
"giga_byte": "",
"kilo_byte": "",
"mega_byte": "",
"tera_byte": ""
}
},
"media": {

5
ui/src/helpers/utils.ts
View File

@ -1,4 +1,5 @@
import classNames, { Argument as ClassNamesArg } from 'classnames'
import { overrideTailwindClasses } from 'tailwind-override'
// import { overrideTailwindClasses } from 'tailwind-override'
/* eslint-disable @typescript-eslint/no-explicit-any */
@ -45,6 +46,6 @@ export function exhaustiveCheck(value: never) {
}
export function tailwindClassNames(...args: ClassNamesArg[]) {
// return overrideTailwindClasses(classNames(args))
return classNames(args)
return overrideTailwindClasses(classNames(args))
// return classNames(args)
}

10
ui/src/index.css
View File

@ -23,6 +23,16 @@ html {
}
@layer base {
body.dark,
html.dark {
@apply bg-dark-bg text-dark-text;
}
body.dark *,
html.dark * {
@apply border-dark-border;
}
img {
max-width: revert;
}

2
ui/src/index.tsx
View File

@ -7,11 +7,13 @@ import client from './apolloClient'
import { ApolloProvider } from '@apollo/client'
import { BrowserRouter as Router } from 'react-router-dom'
import { setupLocalization } from './localization'
import { updateTheme } from './theme'
import * as serviceWorkerRegistration from './serviceWorkerRegistration'
import './index.css'
import { SidebarProvider } from './components/sidebar/Sidebar'
updateTheme()
setupLocalization()
const Main = () => (

4
ui/src/primitives/Modal.tsx
View File

@ -46,7 +46,7 @@ const Modal = ({
<div className="flex items-center justify-center min-h-screen">
<Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
<div className="fixed bg-white max-w-[calc(100%-16px)] mx-auto rounded shadow-md border">
<div className="fixed bg-white dark:bg-dark-bg max-w-[calc(100%-16px)] mx-auto rounded shadow-md border">
<div className="p-4">
<Dialog.Title className="text-xl mb-1">{title}</Dialog.Title>
<Dialog.Description className="text-sm mb-4">
@ -56,7 +56,7 @@ const Modal = ({
{children}
</div>
<div className="bg-gray-50 p-2 flex gap-2 justify-end mt-4">
<div className="bg-gray-50 p-2 dark:bg-[#31363d] flex gap-2 justify-end mt-4">
{actionElms}
</div>
</div>

7
ui/src/primitives/Table.tsx
View File

@ -1,7 +1,7 @@
import styled from 'styled-components'
export const Table = styled.table.attrs({
className: 'border border-separate rounded' as string,
className: 'border dark:border-dark-border border-separate rounded' as string,
})`
border-spacing: 0;
@ -33,11 +33,12 @@ export const TableFooter = styled.tfoot.attrs({ className: '' as string })``
export const TableRow = styled.tr.attrs({ className: '' as string })``
export const TableCell = styled.td.attrs({
className: 'py-2 px-2 align-top' as string,
className: 'py-2 px-2 align-top dark:bg-[#2a2f35]' as string,
})``
export const TableHeaderCell = styled.th.attrs({
className: 'bg-gray-50 py-2 px-2 align-top font-semibold' as string,
className:
'bg-gray-50 dark:bg-dark-bg2 py-2 px-2 align-top font-semibold' as string,
})``
export const TableScrollWrapper = styled.div.attrs({

1
ui/src/primitives/form/Dropdown.tsx
View File

@ -44,6 +44,7 @@ const Dropdown = ({
<DropdownStyledSelect
className={classNames(
'bg-gray-50 px-2 py-0.5 pr-6 rounded border border-gray-200 focus:outline-none focus:border-blue-300 text-[#222] hover:bg-gray-100 disabled:hover:bg-gray-50 disabled:text-gray-500 disabled:cursor-default',
'dark:bg-dark-input-bg dark:border-dark-input-border dark:text-dark-input-text dark:focus:border-blue-300',
className
)}
value={selected}

4
ui/src/primitives/form/Input.tsx
View File

@ -58,6 +58,7 @@ export const TextField = forwardRef(
onKeyUp={keyUpEvent}
className={classNames(
'block border rounded-md focus:ring-2 focus:outline-none px-2',
'dark:bg-dark-input-bg dark:border-dark-input-border',
variant,
sizeVariant == 'big' ? 'py-2' : 'py-1',
{ 'w-full': fullWidth },
@ -144,9 +145,10 @@ type ButtonProps = {
className?: string
}
const buttonStyles = ({ variant, background }: ButtonProps) =>
export const buttonStyles = ({ variant, background }: ButtonProps) =>
classNames(
'px-6 py-0.5 rounded border border-gray-200 focus:outline-none focus:border-blue-300 text-[#222] hover:bg-gray-100 whitespace-nowrap',
'dark:bg-dark-input-bg dark:border-dark-input-border dark:text-dark-input-text dark:focus:border-blue-300',
variant == 'negative' &&
'text-red-600 hover:bg-red-600 hover:border-red-700 hover:text-white transition-colors focus:border-red-600 focus:hover:border-red-700',
variant == 'positive' &&

37
ui/src/theme.ts Normal file
View File

@ -0,0 +1,37 @@
export const updateTheme = () => {
if (
localStorage.theme === 'dark' ||
(!('theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
}
export const changeTheme = (value: string) => {
if (value == 'light') {
localStorage.theme = 'light'
} else if (value == 'dark') {
localStorage.theme = 'dark'
} else {
// use OS preference
localStorage.removeItem('theme')
}
updateTheme()
}
export const getTheme = () => {
if (localStorage.theme == 'light') {
return 'light'
} else if (localStorage.theme == 'dark') {
return 'dark'
} else {
return 'auto'
}
}
export const isDarkMode = () =>
document.documentElement.classList.contains('dark')

14
ui/tailwind.config.js
View File

@ -1,7 +1,7 @@
module.exports = {
mode: 'jit',
purge: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
darkMode: 'class',
theme: {
extend: {
screens: {
@ -23,6 +23,18 @@ module.exports = {
800: '#006624',
900: '#00541d',
},
dark: {
bg: '#24292e',
bg2: '#30363e',
text: '#eee',
border: '#3b3b3b',
border2: '#202020',
input: {
bg: '#383e46',
border: '#4a515a',
text: '#ccdbe4',
},
},
},
},
},