Updated ui layout.
This commit is contained in:
PJ-Watson
parent
1c784fa5e9
commit
31025f7616
|
|
@ -1,7 +1,11 @@
|
|||
import { gql } from '@apollo/client'
|
||||
import React, { useRef, useState } from 'react'
|
||||
import { useMutation, useQuery } from '@apollo/client'
|
||||
import { InputLabelDescription, InputLabelTitle } from './SettingsPage'
|
||||
import {
|
||||
SectionTitle,
|
||||
InputLabelDescription,
|
||||
InputLabelTitle,
|
||||
} from './SettingsPage'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { thumbnailMethodQuery } from './__generated__/thumbnailMethodQuery'
|
||||
import {
|
||||
|
|
@ -60,133 +64,71 @@ const ThumbnailPreferences = () => {
|
|||
const methodItems: DropdownItem[] = [
|
||||
{
|
||||
label: t(
|
||||
'settings.thumbnails.downsample_method.nearest_neighbor',
|
||||
'Nearest Neighbor'
|
||||
'settings.thumbnails.method.filter.nearest_neighbor',
|
||||
'Nearest Neighbor (default)'
|
||||
),
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: t('settings.thumbnails.downsample_method.box', 'Box'),
|
||||
label: t('settings.thumbnails.method.filter.box', 'Box'),
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: t('settings.thumbnails.downsample_method.linear', 'Linear'),
|
||||
label: t('settings.thumbnails.method.filter.linear', 'Linear'),
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'settings.thumbnails.downsample_method.mitchell_netravali',
|
||||
'settings.thumbnails.method.filter.mitchell_netravali',
|
||||
'Mitchell-Netravali'
|
||||
),
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'settings.thumbnails.downsample_method.catmull_rom',
|
||||
'Catmull-Rom'
|
||||
),
|
||||
label: t('settings.thumbnails.method.filter.catmull_rom', 'Catmull-Rom'),
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: t('settings.thumbnails.downsample_method.Lanczos', 'Lanczos'),
|
||||
label: t(
|
||||
'settings.thumbnails.method.filter.Lanczos',
|
||||
'Lanczos (highest quality)'
|
||||
),
|
||||
value: 5,
|
||||
},
|
||||
]
|
||||
|
||||
// const [enablePeriodicScanner, setEnablePeriodicScanner] = useState(false)
|
||||
// const [thumbnailMethod, setThumbnailMethod] = useState({
|
||||
// value: 0,
|
||||
// unit: TimeUnit.Second,
|
||||
// })
|
||||
//
|
||||
// const scanIntervalServerValue = useRef<number | null>(null)
|
||||
//
|
||||
// const scanIntervalQuery = useQuery<scanIntervalQuery>(SCAN_INTERVAL_QUERY, {
|
||||
// onCompleted(data) {
|
||||
// const queryScanInterval = data.siteInfo.periodicScanInterval
|
||||
//
|
||||
// if (queryScanInterval == 0) {
|
||||
// setScanInterval({
|
||||
// unit: TimeUnit.Second,
|
||||
// value: 0,
|
||||
// })
|
||||
// } else {
|
||||
// setScanInterval(
|
||||
// convertToAppropriateUnit({
|
||||
// unit: TimeUnit.Second,
|
||||
// value: queryScanInterval,
|
||||
// })
|
||||
// )
|
||||
// }
|
||||
//
|
||||
// setEnablePeriodicScanner(queryScanInterval > 0)
|
||||
// },
|
||||
// })
|
||||
//
|
||||
// const [setScanIntervalMutation, { loading: scanIntervalMutationLoading }] =
|
||||
// useMutation<
|
||||
// changeScanIntervalMutation,
|
||||
// changeScanIntervalMutationVariables
|
||||
// >(SCAN_INTERVAL_MUTATION)
|
||||
//
|
||||
// const onScanIntervalCheckboxChange = (checked: boolean) => {
|
||||
// setEnablePeriodicScanner(checked)
|
||||
//
|
||||
// onScanIntervalUpdate(
|
||||
// checked ? scanInterval : { value: 0, unit: TimeUnit.Second }
|
||||
// )
|
||||
// }
|
||||
//
|
||||
// const onScanIntervalUpdate = (scanInterval: TimeValue) => {
|
||||
// const seconds = convertToSeconds(scanInterval)
|
||||
//
|
||||
// if (scanIntervalServerValue.current != seconds) {
|
||||
// setScanIntervalMutation({
|
||||
// variables: {
|
||||
// interval: seconds,
|
||||
// },
|
||||
// })
|
||||
// scanIntervalServerValue.current = seconds
|
||||
// }
|
||||
// }
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-4">
|
||||
<label htmlFor="thumbnail_method_field">
|
||||
<InputLabelTitle>
|
||||
{t('settings.thumbnails.field.label', 'Downsampling method')}
|
||||
</InputLabelTitle>
|
||||
<InputLabelDescription>
|
||||
{t(
|
||||
'settings.thumbnails.field.description',
|
||||
'The filter to use when generating thumbnails'
|
||||
)}
|
||||
</InputLabelDescription>
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<Dropdown
|
||||
aria-label="Method"
|
||||
items={methodItems}
|
||||
selected={downsampleMethod}
|
||||
setSelected={value => {
|
||||
setDownsampleMethod(value)
|
||||
updateDownsampleMethod(value)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<SectionTitle>
|
||||
{t('settings.thumbnails.title', 'Thumbnail preferences')}
|
||||
</SectionTitle>
|
||||
<label htmlFor="thumbnail_method_field">
|
||||
<InputLabelTitle>
|
||||
{t('settings.thumbnails.method.label', 'Downsampling method')}
|
||||
</InputLabelTitle>
|
||||
<InputLabelDescription>
|
||||
{t(
|
||||
'settings.thumbnails.method.description',
|
||||
'The filter to use when generating thumbnails'
|
||||
)}
|
||||
</InputLabelDescription>
|
||||
</label>
|
||||
<Dropdown
|
||||
aria-label="Method"
|
||||
items={methodItems}
|
||||
selected={downsampleMethod}
|
||||
setSelected={value => {
|
||||
setDownsampleMethod(value)
|
||||
updateDownsampleMethod(value)
|
||||
}}
|
||||
/>
|
||||
<Loader
|
||||
active={downsampleMethodQuery.loading || downsampleMutationData.loading}
|
||||
size="small"
|
||||
style={{ marginLeft: 16 }}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThumbnailPreferences
|
||||
|
||||
// <h3 className="font-semibold text-lg mt-4 mb-2">
|
||||
// {t('settings.thumbnails.title', 'Thumbnail preferences')}
|
||||
// </h3>
|
||||
|
|
|
|||
Loading…
Reference in New Issue