diff --git a/ivette/src/dome/renderer/frame/toolbars.tsx b/ivette/src/dome/renderer/frame/toolbars.tsx index 15746e533ea9b6c1e4cc2b9b1ca0948630ab284b..44f69e6012a22edccb1e207f77f3b0ebfd15977f 100644 --- a/ivette/src/dome/renderer/frame/toolbars.tsx +++ b/ivette/src/dome/renderer/frame/toolbars.tsx @@ -160,31 +160,25 @@ export interface SwitchProps { enabled?: boolean; /** Defaults to `false`. */ disabled?: boolean; - /** Switch value. - When checked, the slide is switched to « right » position. - Defaults to false. */ - checked?: boolean; + /** Switch position. Defaults to 'left'. */ + position?: 'left' | 'right'; /** Click callback. */ - onChange?: (newValue: boolean) => void; - /** Right Click callback. */ - onContextMenu?: () => void; + onChange?: (newPosition: 'left' | 'right') => void; } -/** Toolbar Switch. */ +/** Toolbar Left/Right Switch. */ export function Switch(props: SwitchProps) { - const { checked = false, onChange } = props; - const { title = '', className = '', style } = props; + const { position, onChange } = props; + const checked = position === 'right'; + const { title, className, style } = props; const { enabled = true, disabled = false } = props; - const callback = onChange && (() => onChange(!checked)); + const callback = onChange && (() => onChange(checked ? 'left' : 'right')); if (disabled || !enabled) return null; return ( - <label - className={'dome-xSwitch ' + className} - style={style} - onContextMenu={props.onContextMenu}> + <label className={classes('dome-xSwitch', className)} style={style}> <input type={'checkbox'} checked={checked} onChange={callback} /> <span className={'dome-xSwitch-slider'} title={title} /> - </label> + </label > ); } diff --git a/ivette/src/ivette/prefs.tsx b/ivette/src/ivette/prefs.tsx index ba20eeced76c654fe086815617a6ff8d60c14719..b5d989fd41f151d56089688ca948a6fc8a1b10e9 100644 --- a/ivette/src/ivette/prefs.tsx +++ b/ivette/src/ivette/prefs.tsx @@ -50,28 +50,18 @@ export const SourceWrapText = new Settings.GFalse('SourceCode.wrapText'); /* --- Theme Switcher Button --- */ /* -------------------------------------------------------------------------- */ -const themeEntries: Dome.PopupMenuItem[] = [ - { id: 'light', label: 'Switch to Light Theme' }, - { id: 'dark', label: 'Switch to Dark Theme' }, - { id: 'system', label: 'Switch to System Default' }, -]; - export function ThemeSwitch(): JSX.Element { const [theme, setTheme] = Themes.useColorTheme(); const other = theme === 'dark' ? 'light' : 'dark'; + const position = theme === 'dark' ? 'left' : 'right'; const title = `Switch to ${other} theme (right-click for full choice)`; const onChange = (): void => setTheme(other); - const onPopup = (): void => Dome.popupMenu( - themeEntries, - (th) => setTheme(Themes.jColorSettings(th)) - ); return ( <Toolbar.Switch disabled={!Dome.DEVEL} title={title} - checked={theme === 'dark'} + position={position} onChange={onChange} - onContextMenu={onPopup} /> ); }