github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-28 16:50:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(settings): use correct name instead of hardcoded 'dark-mode'

Browse source 
Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Erik Michelson 2023-10-13 19:38:07 +02:00
parent 395305dcb7
commit 0a64b32024
9 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/components/global-dialogs/settings-dialog/editor/indent-with-tabs-setting-button-group.tsx
View file

@ -16,6 +16,7 @@ export const IndentWithTabsSettingButtonGroup: React.FC = () => {
return (
<OnOffButtonGroup
value={enabled}
name={'settings-indent-with-tabs'}
onSelect={setEditorIndentWithTabs}
overrideButtonOnI18nKey={'settings.editor.indentWithTabs.tabs'}
overrideButtonOffI18nKey={'settings.editor.indentWithTabs.spaces'}

2
frontend/src/components/global-dialogs/settings-dialog/editor/ligature-setting-button-group.tsx
View file

@ -13,5 +13,5 @@ import React from 'react'
*/
export const LigatureSettingButtonGroup: React.FC = () => {
const enabled = useApplicationState((state) => state.editorConfig.ligatures)
return <OnOffButtonGroup value={enabled} onSelect={setEditorLigatures} />
return <OnOffButtonGroup value={enabled} onSelect={setEditorLigatures} name={'settings-ligatures'} />
}

2
frontend/src/components/global-dialogs/settings-dialog/editor/line-wrapping-setting-button-group.tsx
View file

@ -13,5 +13,5 @@ import React from 'react'
*/
export const LineWrappingSettingButtonGroup: React.FC = () => {
const enabled = useApplicationState((state) => state.editorConfig.lineWrapping)
return <OnOffButtonGroup value={enabled} onSelect={setEditorLineWrapping} />
return <OnOffButtonGroup value={enabled} onSelect={setEditorLineWrapping} name={'settings-line-wrapping'} />
}

2
frontend/src/components/global-dialogs/settings-dialog/editor/smart-paste-setting-button-group.tsx
View file

@ -13,5 +13,5 @@ import React from 'react'
*/
export const SmartPasteSettingButtonGroup: React.FC = () => {
const enabled = useApplicationState((state) => state.editorConfig.smartPaste)
return <OnOffButtonGroup value={enabled} onSelect={setEditorSmartPaste} />
return <OnOffButtonGroup value={enabled} onSelect={setEditorSmartPaste} name={'settings-smart-paste'} />
}

2
frontend/src/components/global-dialogs/settings-dialog/editor/spellcheck-setting-button-group.tsx
View file

@ -13,5 +13,5 @@ import React from 'react'
*/
export const SpellcheckSettingButtonGroup: React.FC = () => {
const enabled = useApplicationState((state) => state.editorConfig.spellCheck)
return <OnOffButtonGroup value={enabled} onSelect={setEditorSpellCheck} />
return <OnOffButtonGroup value={enabled} onSelect={setEditorSpellCheck} name={'settings-spell-check'} />
}

2
frontend/src/components/global-dialogs/settings-dialog/editor/sync-scroll-setting-button-group.tsx
View file

@ -13,5 +13,5 @@ import React from 'react'
*/
export const SyncScrollSettingButtonGroup: React.FC = () => {
const enabled = useApplicationState((state) => state.editorConfig.syncScroll)
return <OnOffButtonGroup value={enabled} onSelect={setEditorSyncScroll} />
return <OnOffButtonGroup value={enabled} onSelect={setEditorSyncScroll} name={'settings-sync-scroll'} />
}

12
frontend/src/components/global-dialogs/settings-dialog/utils/__snapshots__/on-off-button-group.spec.tsx.snap
View file

@ -9,7 +9,7 @@ exports[`Settings On-Off Button Group accepts custom labels 1`] = `
<button
class="btn btn-secondary"
data-testid="onOffButtonGroupOn"
name="dark-mode"
name="test"
title="test.custom-on"
type="radio"
>
@ -18,7 +18,7 @@ exports[`Settings On-Off Button Group accepts custom labels 1`] = `
<button
class="btn btn-outline-secondary"
data-testid="onOffButtonGroupOff"
name="dark-mode"
name="test"
title="test.custom-off"
type="radio"
>
@ -37,7 +37,7 @@ exports[`Settings On-Off Button Group can switch value 1`] = `
<button
class="btn btn-outline-secondary"
data-testid="onOffButtonGroupOn"
name="dark-mode"
name="test"
title="common.on"
type="radio"
>
@ -46,7 +46,7 @@ exports[`Settings On-Off Button Group can switch value 1`] = `
<button
class="btn btn-secondary"
data-testid="onOffButtonGroupOff"
name="dark-mode"
name="test"
title="common.off"
type="radio"
>
@ -65,7 +65,7 @@ exports[`Settings On-Off Button Group can switch value 2`] = `
<button
class="btn btn-secondary"
data-testid="onOffButtonGroupOn"
name="dark-mode"
name="test"
title="common.on"
type="radio"
>
@ -74,7 +74,7 @@ exports[`Settings On-Off Button Group can switch value 2`] = `
<button
class="btn btn-outline-secondary"
data-testid="onOffButtonGroupOff"
name="dark-mode"
name="test"
title="common.off"
type="radio"
>

5
frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.spec.tsx
View file

@ -14,7 +14,7 @@ describe('Settings On-Off Button Group', () => {
let value = false
const onSelect = (newValue: boolean) => (value = newValue)
const view = render(<OnOffButtonGroup value={value} onSelect={onSelect} />)
const view = render(<OnOffButtonGroup name={'test'} value={value} onSelect={onSelect} />)
expect(view.container).toMatchSnapshot()
const onButton = await screen.findByTestId('onOffButtonGroupOn')
await act<void>(() => {
@ -22,7 +22,7 @@ describe('Settings On-Off Button Group', () => {
})
expect(value).toBeTruthy()
view.rerender(<OnOffButtonGroup value={value} onSelect={onSelect} />)
view.rerender(<OnOffButtonGroup name={'test'} value={value} onSelect={onSelect} />)
expect(view.container).toMatchSnapshot()
const offButton = await screen.findByTestId('onOffButtonGroupOff')
await act<void>(() => {
@ -34,6 +34,7 @@ describe('Settings On-Off Button Group', () => {
it('accepts custom labels', () => {
const view = render(
<OnOffButtonGroup
name={'test'}
value={true}
onSelect={() => {}}
overrideButtonOnI18nKey={'test.custom-on'}

5
frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.tsx
View file

@ -16,6 +16,7 @@ enum OnOffState {
export interface OnOffButtonGroupProps {
value: boolean
onSelect: (value: boolean) => void
name: string
overrideButtonOnI18nKey?: string
overrideButtonOffI18nKey?: string
}
@ -25,12 +26,14 @@ export interface OnOffButtonGroupProps {
*
* @param onSelect callback that is executed if the on/off value has changed
* @param value the current on/off value that should be visible
* @param name A unique name for the button group to allow the browser to distinguish between multiple ones
* @param overrideButtonOnI18nKey Set to override the i18n key for the on-button
* @param overrideButtonOffI18nKey Set to override the i18n key for the off-button
*/
export const OnOffButtonGroup: React.FC<OnOffButtonGroupProps> = ({
onSelect,
value,
name,
overrideButtonOffI18nKey,
overrideButtonOnI18nKey
}) => {
@ -43,7 +46,7 @@ export const OnOffButtonGroup: React.FC<OnOffButtonGroupProps> = ({
)
return (
<ToggleButtonGroup type='radio' name='dark-mode' value={buttonGroupValue}>
<ToggleButtonGroup type='radio' name={name} value={buttonGroupValue}>
<SettingsToggleButton
onSelect={onButtonSelect}
selected={buttonGroupValue === OnOffState.ON}