diff options
author | LASER-Yi <[email protected]> | 2022-06-01 10:56:47 +0800 |
---|---|---|
committer | LASER-Yi <[email protected]> | 2022-06-01 10:56:47 +0800 |
commit | 4d9d2de1fc6b994130a324017df76f689d755196 (patch) | |
tree | d9fb5d264667caeba074b97cae87524cba7b6d24 | |
parent | 03de446691df759ab6002f7886b56ef073d3e7ac (diff) | |
download | bazarr-4d9d2de1fc6b994130a324017df76f689d755196.tar.gz bazarr-4d9d2de1fc6b994130a324017df76f689d755196.zip |
Improve layout of the settings pages
-rw-r--r-- | frontend/src/components/forms/MovieUploadForm.tsx | 4 | ||||
-rw-r--r-- | frontend/src/components/forms/ProfileEditForm.tsx | 4 | ||||
-rw-r--r-- | frontend/src/components/forms/SeriesUploadForm.tsx | 4 | ||||
-rw-r--r-- | frontend/src/pages/Settings/General/index.tsx | 2 | ||||
-rw-r--r-- | frontend/src/pages/Settings/Languages/components.tsx | 21 | ||||
-rw-r--r-- | frontend/src/pages/Settings/Languages/index.tsx | 5 | ||||
-rw-r--r-- | frontend/src/pages/Settings/Languages/table.tsx | 4 | ||||
-rw-r--r-- | frontend/src/pages/Settings/Sonarr/index.tsx | 1 | ||||
-rw-r--r-- | frontend/src/pages/Settings/Subtitles/index.tsx | 1 |
9 files changed, 28 insertions, 18 deletions
diff --git a/frontend/src/components/forms/MovieUploadForm.tsx b/frontend/src/components/forms/MovieUploadForm.tsx index b9ac9fa6c..fc222099c 100644 --- a/frontend/src/components/forms/MovieUploadForm.tsx +++ b/frontend/src/components/forms/MovieUploadForm.tsx @@ -12,7 +12,7 @@ import { faCircleNotch, faInfoCircle, faTimes, - faXmark, + faTrash, } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Button, Checkbox, Divider, Stack, Text } from "@mantine/core"; @@ -222,7 +222,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({ Cell: ({ row: { index } }) => { return ( <Action - icon={faXmark} + icon={faTrash} color="red" onClick={() => action.remove(index)} ></Action> diff --git a/frontend/src/components/forms/ProfileEditForm.tsx b/frontend/src/components/forms/ProfileEditForm.tsx index 985a97d26..60e28f96c 100644 --- a/frontend/src/components/forms/ProfileEditForm.tsx +++ b/frontend/src/components/forms/ProfileEditForm.tsx @@ -2,7 +2,7 @@ import { Action, Selector, SelectorOption, SimpleTable } from "@/components"; import { useModals, withModal } from "@/modules/modals"; import { useTableStyles } from "@/styles"; import { useArrayAction, useSelectorOptions } from "@/utilities"; -import { faXmark } from "@fortawesome/free-solid-svg-icons"; +import { faTrash } from "@fortawesome/free-solid-svg-icons"; import { Accordion, Alert, @@ -207,7 +207,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({ Cell: ({ row }) => { return ( <Action - icon={faXmark} + icon={faTrash} color="red" onClick={() => action.remove(row.index)} ></Action> diff --git a/frontend/src/components/forms/SeriesUploadForm.tsx b/frontend/src/components/forms/SeriesUploadForm.tsx index a3746c4c2..2c0c45ef1 100644 --- a/frontend/src/components/forms/SeriesUploadForm.tsx +++ b/frontend/src/components/forms/SeriesUploadForm.tsx @@ -16,7 +16,7 @@ import { faCircleNotch, faInfoCircle, faTimes, - faXmark, + faTrash, } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Button, Checkbox, Divider, Stack, Text } from "@mantine/core"; @@ -285,7 +285,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({ Cell: ({ row: { index } }) => { return ( <Action - icon={faXmark} + icon={faTrash} color="red" onClick={() => action.remove(index)} ></Action> diff --git a/frontend/src/pages/Settings/General/index.tsx b/frontend/src/pages/Settings/General/index.tsx index 35994a539..348d31dd8 100644 --- a/frontend/src/pages/Settings/General/index.tsx +++ b/frontend/src/pages/Settings/General/index.tsx @@ -71,6 +71,7 @@ const SettingsGeneralView: FunctionComponent = () => { label="Authentication" clearable options={securityOptions} + placeholder="No Authentication" settingKey="settings-auth-type" beforeStaged={(v) => (v === null ? "None" : v)} ></Selector> @@ -122,6 +123,7 @@ const SettingsGeneralView: FunctionComponent = () => { <Selector clearable settingKey="settings-proxy-type" + placeholder="No Proxy" options={proxyOptions} beforeStaged={(v) => (v === null ? "None" : v)} ></Selector> diff --git a/frontend/src/pages/Settings/Languages/components.tsx b/frontend/src/pages/Settings/Languages/components.tsx index d5a3f84f6..af12d3399 100644 --- a/frontend/src/pages/Settings/Languages/components.tsx +++ b/frontend/src/pages/Settings/Languages/components.tsx @@ -5,6 +5,7 @@ import { } from "@/components"; import { Language } from "@/components/bazarr"; import { useSelectorOptions } from "@/utilities"; +import { InputWrapper } from "@mantine/core"; import { FunctionComponent, useMemo } from "react"; import { useLatestEnabledLanguages, useLatestProfiles } from "."; import { BaseInput, Selector, SelectorProps } from "../components"; @@ -19,21 +20,23 @@ type LanguageSelectorProps = Omit< export const LanguageSelector: FunctionComponent< LanguageSelectorProps & BaseInput<string[]> -> = ({ settingKey, options }) => { +> = ({ settingKey, location, label, options }) => { const enabled = useLatestEnabledLanguages(); const { setValue } = useFormActions(); const wrappedOptions = useSelectorOptions(options, (value) => value.name); return ( - <MultiSelector - {...wrappedOptions} - value={enabled} - searchable - onChange={(val) => { - setValue(val, settingKey); - }} - ></MultiSelector> + <InputWrapper label={label}> + <MultiSelector + {...wrappedOptions} + value={enabled} + searchable + onChange={(val) => { + setValue(val, settingKey, location); + }} + ></MultiSelector> + </InputWrapper> ); }; diff --git a/frontend/src/pages/Settings/Languages/index.tsx b/frontend/src/pages/Settings/Languages/index.tsx index 369d911f4..c455fb41b 100644 --- a/frontend/src/pages/Settings/Languages/index.tsx +++ b/frontend/src/pages/Settings/Languages/index.tsx @@ -55,6 +55,7 @@ const SettingsLanguagesView: FunctionComponent = () => { </Message> <LanguageSelector label="Languages Filter" + placeholder="Select languages" settingKey={enabledLanguageKey} options={languages ?? []} ></LanguageSelector> @@ -76,6 +77,7 @@ const SettingsLanguagesView: FunctionComponent = () => { <CollapseBox.Content indent> <ProfileSelector label="Profile" + placeholder="Select a profile" settingKey="settings-general-serie_default_profile" ></ProfileSelector> </CollapseBox.Content> @@ -90,9 +92,10 @@ const SettingsLanguagesView: FunctionComponent = () => { Apply only to Movies added to Bazarr after enabling this option. </Message> </CollapseBox.Control> - <CollapseBox.Content> + <CollapseBox.Content indent> <ProfileSelector label="Profile" + placeholder="Select a profile" settingKey="settings-general-movie_default_profile" ></ProfileSelector> </CollapseBox.Content> diff --git a/frontend/src/pages/Settings/Languages/table.tsx b/frontend/src/pages/Settings/Languages/table.tsx index e4cb54e88..6121d38ec 100644 --- a/frontend/src/pages/Settings/Languages/table.tsx +++ b/frontend/src/pages/Settings/Languages/table.tsx @@ -5,7 +5,7 @@ import { } from "@/components/forms/ProfileEditForm"; import { useModals } from "@/modules/modals"; import { BuildKey, useArrayAction } from "@/utilities"; -import { faWrench, faXmark } from "@fortawesome/free-solid-svg-icons"; +import { faTrash, faWrench } from "@fortawesome/free-solid-svg-icons"; import { Badge, Button, Group } from "@mantine/core"; import { cloneDeep } from "lodash"; import { FunctionComponent, useCallback, useMemo } from "react"; @@ -132,7 +132,7 @@ const Table: FunctionComponent = () => { }} ></Action> <Action - icon={faXmark} + icon={faTrash} color="red" onClick={() => action.remove(row.index)} ></Action> diff --git a/frontend/src/pages/Settings/Sonarr/index.tsx b/frontend/src/pages/Settings/Sonarr/index.tsx index 66c9b9260..fc951a746 100644 --- a/frontend/src/pages/Settings/Sonarr/index.tsx +++ b/frontend/src/pages/Settings/Sonarr/index.tsx @@ -61,6 +61,7 @@ const SettingsSonarrView: FunctionComponent = () => { </Message> <MultiSelector label="Excluded Series Types" + placeholder="Select series types" settingKey="settings-sonarr-excluded_series_types" options={seriesTypeOptions} ></MultiSelector> diff --git a/frontend/src/pages/Settings/Subtitles/index.tsx b/frontend/src/pages/Settings/Subtitles/index.tsx index 409ce9fb0..73b6517d5 100644 --- a/frontend/src/pages/Settings/Subtitles/index.tsx +++ b/frontend/src/pages/Settings/Subtitles/index.tsx @@ -99,6 +99,7 @@ const SettingsSubtitlesView: FunctionComponent = () => { <CollapseBox.Control> <Selector clearable + placeholder="Select a provider" settingKey="settings-general-anti_captcha_provider" beforeStaged={(v) => (v === undefined ? "None" : v)} options={antiCaptchaOption} |