mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-29 06:15:29 -04:00
Update dependency react-bootstrap to v1.4.3 (#928)
* Update dependency react-bootstrap to v1.4.3 Signed-off-by: Renovate Bot <bot@renovateapp.com> * Fix as ToggleButtons require now enums instead of booleans Signed-off-by: Erik Michelson <github@erik.michelson.eu> * Remove memo Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Erik Michelson <github@erik.michelson.eu> Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
parent
1b90cc4c6e
commit
faf953d0fa
4 changed files with 38 additions and 18 deletions
|
@ -11,9 +11,14 @@ import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-a
|
|||
import { setDarkMode } from '../../../redux/dark-mode/methods'
|
||||
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
|
||||
|
||||
enum DarkModeState {
|
||||
DARK,
|
||||
LIGHT
|
||||
}
|
||||
|
||||
const DarkModeButton: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const darkModeEnabled = useIsDarkModeActivated()
|
||||
const darkModeEnabled = useIsDarkModeActivated() ? DarkModeState.DARK : DarkModeState.LIGHT
|
||||
|
||||
return (
|
||||
<ToggleButtonGroup
|
||||
|
@ -21,13 +26,21 @@ const DarkModeButton: React.FC = () => {
|
|||
name="dark-mode"
|
||||
value={darkModeEnabled}
|
||||
className="ml-2"
|
||||
onChange={(value: boolean) => {
|
||||
setDarkMode(value)
|
||||
}}>
|
||||
<ToggleButton value={true} variant="outline-secondary" title={t('editor.darkMode.switchToDark')}>
|
||||
>
|
||||
<ToggleButton
|
||||
value={DarkModeState.DARK}
|
||||
variant="outline-secondary"
|
||||
title={t('editor.darkMode.switchToDark')}
|
||||
onChange={() => setDarkMode(true)}
|
||||
>
|
||||
<ForkAwesomeIcon icon="moon"/>
|
||||
</ToggleButton>
|
||||
<ToggleButton value={false} variant="outline-secondary" title={t('editor.darkMode.switchToLight')}>
|
||||
<ToggleButton
|
||||
value={DarkModeState.LIGHT}
|
||||
variant="outline-secondary"
|
||||
title={t('editor.darkMode.switchToLight')}
|
||||
onChange={() => setDarkMode(false)}
|
||||
>
|
||||
<ForkAwesomeIcon icon="sun-o"/>
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
|
|
|
@ -14,24 +14,31 @@ import { ReactComponent as DisabledScrollIcon } from './disabledScroll.svg'
|
|||
import { ReactComponent as EnabledScrollIcon } from './enabledScroll.svg'
|
||||
import './sync-scroll-buttons.scss'
|
||||
|
||||
enum SyncScrollState {
|
||||
SYNCED,
|
||||
UNSYNCED
|
||||
}
|
||||
|
||||
export const SyncScrollButtons: React.FC = () => {
|
||||
const syncScroll: boolean = useSelector((state: ApplicationState) => state.editorConfig.syncScroll)
|
||||
const syncScrollEnabled = useSelector((state: ApplicationState) => state.editorConfig.syncScroll) ? SyncScrollState.SYNCED : SyncScrollState.UNSYNCED
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<ToggleButtonGroup type="radio" defaultValue={[]} name="sync-scroll" className={'ml-2 sync-scroll-buttons'}
|
||||
value={[syncScroll]}>
|
||||
value={syncScrollEnabled}>
|
||||
<ToggleButton
|
||||
variant={'outline-secondary'}
|
||||
title={t('editor.appBar.syncScroll.enable')}
|
||||
onChange={() => setEditorSyncScroll(true)} value={true}
|
||||
onChange={() => setEditorSyncScroll(true)}
|
||||
value={SyncScrollState.SYNCED}
|
||||
>
|
||||
<EnabledScrollIcon/>
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
variant={'outline-secondary'}
|
||||
title={t('editor.appBar.syncScroll.disable')}
|
||||
onChange={() => setEditorSyncScroll(false)} value={false}
|
||||
onChange={() => setEditorSyncScroll(false)}
|
||||
value={SyncScrollState.UNSYNCED}
|
||||
>
|
||||
<DisabledScrollIcon/>
|
||||
</ToggleButton>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue