diff options
author | LASER-Yi <[email protected]> | 2022-06-02 13:51:25 +0800 |
---|---|---|
committer | LASER-Yi <[email protected]> | 2022-06-02 13:51:25 +0800 |
commit | afcb3b07768304d6b455b0c939aba0e1f9291e3e (patch) | |
tree | e9c86ad63c8901ec901a072ebd6955984e94ad49 | |
parent | 5a5df23b9ccbd4a3787e9a608008f31bceafbb10 (diff) | |
download | bazarr-afcb3b07768304d6b455b0c939aba0e1f9291e3e.tar.gz bazarr-afcb3b07768304d6b455b0c939aba0e1f9291e3e.zip |
Improve layout of the settings pagesv1.0.5-beta.19
-rw-r--r-- | frontend/src/pages/Settings/Subtitles/index.tsx | 154 | ||||
-rw-r--r-- | frontend/src/pages/Settings/components/Message.tsx | 2 | ||||
-rw-r--r-- | frontend/src/pages/Settings/components/collapse.tsx | 4 |
3 files changed, 95 insertions, 65 deletions
diff --git a/frontend/src/pages/Settings/Subtitles/index.tsx b/frontend/src/pages/Settings/Subtitles/index.tsx index c845c1e36..f06dfa1f8 100644 --- a/frontend/src/pages/Settings/Subtitles/index.tsx +++ b/frontend/src/pages/Settings/Subtitles/index.tsx @@ -1,4 +1,4 @@ -import { Anchor } from "@mantine/core"; +import { Anchor, Code, Table } from "@mantine/core"; import { FunctionComponent } from "react"; import { Check, @@ -32,6 +32,92 @@ const subzeroColorOverride = (settings: Settings) => { ); }; +interface CommandOption { + option: string; + description: string; +} + +const commandOptions: CommandOption[] = [ + { + option: "directory", + description: "Full path of the episode file parent directory", + }, + { + option: "episode", + description: "Full path of the episode file", + }, + { + option: "episode_name", + description: + "Filename of the episode without parent directory or extension", + }, + { + option: "subtitles", + description: "Full path of the subtitles file", + }, + { + option: "subtitles_language", + description: "Language of the subtitles file (may include HI or forced)", + }, + { + option: "subtitles_language_code2", + description: + "2-letter ISO-639 language code of the subtitles language (may include :hi or :forced)", + }, + { + option: "subtitles_language_code2_dot", + description: + "2-letter ISO-639 language code of the subtitles language (same as previous but with dot separator instead of colon)", + }, + { + option: "subtitles_language_code3", + description: + "3-letter ISO-639 language code of the subtitles language (may include :hi or :forced)", + }, + { + option: "subtitles_language_code3_dot", + description: + "3-letter ISO-639 language code of the subtitles language (same as previous but with dot separator instead of colon)", + }, + { + option: "episode_language", + description: "Audio language of the episode file", + }, + { + option: "episode_language_code2", + description: "2-letter ISO-639 language code of the episode audio language", + }, + { + option: "episode_language_code3", + description: "3-letter ISO-639 language code of the episode audio language", + }, + { + option: "score", + description: "Score of the subtitle file", + }, + { + option: "subtitle_id", + description: "Provider ID of the subtitle file", + }, + { + option: "series_id", + description: "Sonarr series ID (Empty if movie)", + }, + { + option: "episode_id", + description: "Sonarr episode ID or Radarr movie ID", + }, +]; + +const commandOptionElements: JSX.Element[] = commandOptions.map((op, idx) => ( + <tr key={idx}> + <td> + <Code>{op.option}</Code> + </td> + <td>{op.description}</td> + </tr> +)); + const SettingsSubtitlesView: FunctionComponent = () => { return ( <Layout name="Subtitles"> @@ -255,6 +341,7 @@ const SettingsSubtitlesView: FunctionComponent = () => { Tries to make subtitles that are completely uppercase readable. </Message> <Selector + placeholder="Select a color..." label="Color" clearable options={colorOptions} @@ -325,7 +412,7 @@ const SettingsSubtitlesView: FunctionComponent = () => { settingKey="settings-general-use_postprocessing_threshold" label="Series Score Threshold" ></Check> - <CollapseBox settingKey="settings-general-use_postprocessing"> + <CollapseBox settingKey="settings-general-use_postprocessing_threshold"> <Slider settingKey="settings-general-postprocessing_threshold"></Slider> </CollapseBox> <Check @@ -339,66 +426,9 @@ const SettingsSubtitlesView: FunctionComponent = () => { label="Command" settingKey="settings-general-postprocessing_cmd" ></Text> - <Message>Variables you can use in your command</Message> - <Message> - <b>{"{{directory}}"}</b> Full path of the episode file parent - directory - </Message> - <Message> - <b>{"{{episode}}"}</b> Full path of the episode file - </Message> - <Message> - <b>{"{{episode_name}}"}</b> Filename of the episode without parent - directory or extension - </Message> - <Message> - <b>{"{{subtitles}}"}</b> Full path of the subtitles file - </Message> - <Message> - <b>{"{{subtitles_language}}"}</b> Language of the subtitles file - (may include HI or forced) - </Message> - <Message> - <b>{"{{subtitles_language_code2}}"}</b> 2-letter ISO-639 language - code of the subtitles language (may include :hi or :forced) - </Message> - <Message> - <b>{"{{subtitles_language_code2_dot}}"}</b> 2-letter ISO-639 - language code of the subtitles language (same as previous but with - dot separator instead of colon) - </Message> - <Message> - <b>{"{{subtitles_language_code3}}"}</b> 3-letter ISO-639 language - code of the subtitles language (may include :hi or :forced) - </Message> - <Message> - <b>{"{{subtitles_language_code3_dot}}"}</b> 3-letter ISO-639 - language code of the subtitles language (same as previous but with - dot separator instead of colon) - </Message> - <Message> - <b>{"{{episode_language}}"}</b> Audio language of the episode file - </Message> - <Message> - <b>{"{{episode_language_code2}}"}</b> 2-letter ISO-639 language code - of the episode audio language - </Message> - <Message> - <b>{"{{episode_language_code3}}"}</b> 3-letter ISO-639 language code - of the episode audio language - </Message> - <Message> - <b>{"{{score}}"}</b> Score of the subtitle file - </Message> - <Message> - <b>{"{{subtitle_id}}"}</b> Provider ID of the subtitle file - </Message> - <Message> - <b>{"{{series_id}}"}</b> Sonarr series ID (Empty if movie) - </Message> - <Message> - <b>{"{{episode_id}}"}</b> Sonarr episode ID or Radarr movie ID - </Message> + <Table highlightOnHover fontSize="sm"> + <tbody>{commandOptionElements}</tbody> + </Table> </CollapseBox> </Section> </Layout> diff --git a/frontend/src/pages/Settings/components/Message.tsx b/frontend/src/pages/Settings/components/Message.tsx index 4bde9d9b4..2f334b793 100644 --- a/frontend/src/pages/Settings/components/Message.tsx +++ b/frontend/src/pages/Settings/components/Message.tsx @@ -5,7 +5,7 @@ export const Message: FunctionComponent<{ type?: "warning" | "info"; }> = ({ type = "info", children }) => { return ( - <Text size="sm" color={type === "info" ? "dimmed" : "yellow"} my="0"> + <Text size="sm" color={type === "info" ? "dimmed" : "yellow"} my={0}> {children} </Text> ); diff --git a/frontend/src/pages/Settings/components/collapse.tsx b/frontend/src/pages/Settings/components/collapse.tsx index c47b94e06..32b582496 100644 --- a/frontend/src/pages/Settings/components/collapse.tsx +++ b/frontend/src/pages/Settings/components/collapse.tsx @@ -1,4 +1,4 @@ -import { Collapse } from "@mantine/core"; +import { Collapse, Stack } from "@mantine/core"; import { FunctionComponent, useMemo, useRef } from "react"; import { useSettingValue } from "./hooks"; @@ -29,7 +29,7 @@ const CollapseBox: FunctionComponent<ContentProps> = ({ return ( <Collapse in={open} pl={indent ? "md" : undefined}> - <div>{children}</div> + <Stack spacing="xs">{children}</Stack> </Collapse> ); }; |