Skip to content

Dev/update library settings #3923

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arthur-lemeur wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Dev/update library settings #3923

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ab3196b
update library settings tabs
arthur-lemeur Sep 29, 2026
4e0e79f
up separators location
arthur-lemeur Sep 29, 2026
e267d6e
Merge branch 'develop' into dev/update-library-settings
arthur-lemeur Oct 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/renderer/assets/icons/advanced-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions src/renderer/library/components/settings/OverloadNoteExportToHtml.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
// ==LICENSE-END==

import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.scss";
import * as stylesSettings from "readium-desktop/renderer/assets/styles/components/settings.scss";
import * as stylesGlobal from "readium-desktop/renderer/assets/styles/global.scss";
import * as stylesAnnotations from "readium-desktop/renderer/assets/styles/components/annotations.scss";
import { langStringIsRTL } from "@r2-shared-js/_utils/language-string";
Expand Down Expand Up @@ -57,7 +56,7 @@ const OverloadNoteExportToHtml: React.FC<{}> = () => {

return (<>

<section className={stylesSettings.section} style={{ position: "relative" }}>
<section style={{ position: "relative" }}>

<h3 dir={isRTL ? "rtl" : "ltr"}>{__("settings.note.export.overrideHTMLTemplate")}</h3>
<input type="checkbox" className={stylesGlobal.checkbox_custom_input} name="enableCheckbox" />
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/library/components/settings/SaveCreatorSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const SaveCreatorSettings: React.FC<{}> = () => {
}, [name, type, creator, onChangeDebounced]);

return (
<section className={stylesSettings.section} style={{ position: "relative" }}>
<section style={{ position: "relative" }}>
<h3 dir={isRTL ? "rtl" : "ltr"}>{__("settings.annotationCreator.creator")}</h3>
<div className={stylesSettings.session_text} style={{ margin: "0" }}>
<SVG ariaHidden svg={InfoIcon} />
Expand Down
78 changes: 38 additions & 40 deletions src/renderer/library/components/settings/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import * as Dialog from "@radix-ui/react-dialog";
import { Tab, TabList, TabPanel, TabPanels, Tabs } from "readium-desktop/renderer/common/components/TabsComponent";
import * as QuitIcon from "readium-desktop/renderer/assets/icons/close-icon.svg";
import * as CogIcon from "readium-desktop/renderer/assets/icons/cog-icon.svg";
import * as PaletteIcon from "readium-desktop/renderer/assets/icons/palette-icon.svg";
import * as AdvancedIcon from "readium-desktop/renderer/assets/icons/advanced-icon.svg";
import * as KeyReturnIcon from "readium-desktop/renderer/assets/icons/keyreturn-icon.svg";
import * as AvatarIcon from "readium-desktop/renderer/assets/icons/avatar-icon.svg";
import * as LibraryIcon from "readium-desktop/renderer/assets/icons/library-icon.svg";
Expand Down Expand Up @@ -80,22 +80,23 @@ export const Settings: React.FC<ISettingsProps> = () => {
const locale = useSelector((state: ICommonRootState) => state.i18n.locale);
const isRTL = langStringIsRTL(locale);

const [selectedTab, setSelectedTab] = React.useState("tab1");
const [selectedTab, setSelectedTab] = React.useState("tab-general");

const tabTitle = {
tab1: __("settings.tabs.general"),
tab2: __("settings.tabs.appearance"),
tab4: __("settings.tabs.keyboardShortcuts"),
tab5: __("settings.tabs.profiles"),
tab6: __("settings.tabs.storage"),
"tab-general": __("settings.tabs.general"),
"tab-keyboardShortcuts": __("settings.tabs.keyboardShortcuts"),
"tab-profiles": __("settings.tabs.profiles"),
"tab-storage": __("settings.tabs.storage"),
"tab-advanced": __("settings.tabs.appearance"),
// "tab-advanced": __("settings.tabs.advanced"),
}[selectedTab] || __("settings.tabs.general");


// https://github.com/edrlab/thorium-reader/discussions/3177#discussioncomment-14752676
// <DirectionProvider dir={isRTL ? "rtl" : "ltr"}> ... </DirectionProvider>
return <Dialog.Root onOpenChange={(open) => {
if (!open) {
setSelectedTab("tab1");
setSelectedTab("tab-general");
}
}}>
<Dialog.Trigger asChild>
Expand All @@ -116,26 +117,27 @@ export const Settings: React.FC<ISettingsProps> = () => {
}
<Tabs selectedKey={selectedTab} onSelectionChange={(key) => setSelectedTab(key.toString())} data-orientation="vertical" orientation="vertical" className={stylesSettings.settings_container}>
<TabList aria-label={__("header.settingsLabel")} className={stylesSettings.settings_tabslist} data-orientation="vertical" aria-orientation="vertical">
<Tab id="tab1">
<Tab id="tab-general">
<SVG ariaHidden svg={CogIcon} />
<span dir={isRTL ? "rtl" : "ltr"}>{__("settings.tabs.general")}</span>
</Tab>
<Tab id="tab2">
<SVG ariaHidden svg={PaletteIcon} />
<span dir={isRTL ? "rtl" : "ltr"}>{__("settings.tabs.appearance")}</span>
</Tab>
<Tab id="tab4">
<Tab id="tab-keyboardShortcuts">
<SVG ariaHidden svg={KeyReturnIcon} />
<span dir={isRTL ? "rtl" : "ltr"}>{__("settings.tabs.keyboardShortcuts")}</span>
</Tab>
<Tab id="tab5">
<Tab id="tab-profiles">
<SVG ariaHidden svg={AvatarIcon} />
<span dir={isRTL ? "rtl" : "ltr"}>{__("settings.tabs.profiles")}</span>
</Tab>
<Tab id="tab6">
<Tab id="tab-storage">
<SVG ariaHidden svg={LibraryIcon} />
<span dir={isRTL ? "rtl" : "ltr"}>{__("settings.tabs.storage")}</span>
</Tab>
<Tab id="tab-advanced">
<SVG ariaHidden svg={AdvancedIcon} />
{/* <span dir={isRTL ? "rtl" : "ltr"}>{__("settings.tabs.advanced")}</span> */}
<span dir={isRTL ? "rtl" : "ltr"}>Advanced</span>
</Tab>
</TabList>
<TabTitle title={tabTitle}>
{
Expand All @@ -146,52 +148,48 @@ export const Settings: React.FC<ISettingsProps> = () => {
</TabTitle>
<div className={stylesSettings.settings_content} style={{ marginTop: "70px" }}>
<TabPanels>
<TabPanel id="tab1">
<TabPanel id="tab-general">
<div className={stylesSettings.settings_tab}>
<LanguageSettings />
<section className={stylesSettings.section} style={{ gap: "10px" }}>
<LanguageSettings />
<Themes />
</section>
<ScreenReaderSettings />
<WindowBehaviorSettings />
<ConnectionSettings />
<SharedComputerSettings />
<TelemetrySettings />
{/* <SaveSessionSettings /> */}
<ManageAccessToCatalogSettings />
<SaveCreatorSettings />
<OverloadNoteExportToHtml />
</div>
</TabPanel>
<TabPanel id="tab2">
<div className={stylesSettings.settings_tab}>
<Themes />
</div>
</TabPanel>
<TabPanel id="tab4">
<TabPanel id="tab-keyboardShortcuts">
<div className={stylesSettings.settings_tab}>
<KeyboardSettings />
</div>
</TabPanel>
<TabPanel id="tab5">
<TabPanel id="tab-profiles">
<div className={stylesSettings.settings_tab}>
<ProfilesSettings />
</div>
</TabPanel>
<TabPanel id="tab6">
<TabPanel id="tab-storage">
<div className={stylesSettings.settings_tab}>
<StorageSettings />
</div>
</TabPanel>
<TabPanel id="tab-advanced">
<div className={stylesSettings.settings_tab}>
<ConnectionSettings />
<ManageAccessToCatalogSettings />
<SharedComputerSettings />
<section className={stylesSettings.section} style={{ gap: "10px" }}>
<SaveCreatorSettings />
<OverloadNoteExportToHtml />
</section>
<TelemetrySettings />
</div>
</TabPanel>
</TabPanels>
</div>
<ModalControlButton />
</Tabs>

{/* <div className={stylesSettings.close_button_div}>
<Dialog.Close asChild>
<button data-css-override="" className={stylesButtons.button_transparency_icon} aria-label={__("accessibility.closeDialog")}>
<SVG ariaHidden={true} svg={QuitIcon} />
</button>
</Dialog.Close>
</div> */}
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>;
Expand Down
Loading