Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #1261 from ONLYOFFICE/feature/edit-toggle

Browse source 
[DE PE SSE] Fix Bug 53225
This commit is contained in:
maxkadushkin 2021-10-23 10:45:42 +03:00 committed by GitHub
parent 81bb2fd40d 09dd592204
commit bf4edf96f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 45 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/documenteditor/mobile/src/view/edit/EditHeader.jsx
View file

@ -22,19 +22,19 @@ const EditHeader = props => {
<Fragment> <Fragment>
<List> <List>
<ListItem title={_t.textDifferentFirstPage}> <ListItem title={_t.textDifferentFirstPage}>
<Toggle checked={isDiffFirst} onChange={() => {props.onDiffFirst(!isDiffFirst)}}/> <Toggle checked={isDiffFirst} onToggleChange={() => {props.onDiffFirst(!isDiffFirst)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textDifferentOddAndEvenPages}> <ListItem title={_t.textDifferentOddAndEvenPages}>
<Toggle checked={isDiffOdd} onChange={() => {props.onDiffOdd(!isDiffOdd)}}/> <Toggle checked={isDiffOdd} onToggleChange={() => {props.onDiffOdd(!isDiffOdd)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textLinkToPrevious} className={linkToPrev===null ? 'disabled' : ''}> <ListItem title={_t.textLinkToPrevious} className={linkToPrev===null ? 'disabled' : ''}>
<Toggle checked={boolLinkToPrev} onChange={() => {props.onSameAs(!boolLinkToPrev)}}/> <Toggle checked={boolLinkToPrev} onToggleChange={() => {props.onSameAs(!boolLinkToPrev)}}/>
</ListItem> </ListItem>
</List> </List>
<BlockTitle>{_t.textPageNumbering}</BlockTitle> <BlockTitle>{_t.textPageNumbering}</BlockTitle>
<List> <List>
<ListItem title={_t.textContinueFromPreviousSection}> <ListItem title={_t.textContinueFromPreviousSection}>
<Toggle checked={startPageNumber<0} onChange={() => {props.onNumberingContinue(!(startPageNumber<0), _startAt)}}/> <Toggle checked={startPageNumber<0} onToggleChange={() => {props.onNumberingContinue(!(startPageNumber<0), _startAt)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textStartAt} className={startPageNumber<0 ? 'disabled' : ''}> <ListItem title={_t.textStartAt} className={startPageNumber<0 ? 'disabled' : ''}>
{!isAndroid && <div slot='after-start'>{_startAt}</div>} {!isAndroid && <div slot='after-start'>{_startAt}</div>}

4
apps/documenteditor/mobile/src/view/edit/EditImage.jsx
View file

@ -91,10 +91,10 @@ const PageWrap = props => {
} }
<List> <List>
<ListItem title={_t.textMoveWithText} className={'inline' === wrapType ? 'disabled' : ''}> <ListItem title={_t.textMoveWithText} className={'inline' === wrapType ? 'disabled' : ''}>
<Toggle checked={moveText} onChange={() => {props.onMoveText(!moveText)}}/> <Toggle checked={moveText} onToggleChange={() => {props.onMoveText(!moveText)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textAllowOverlap}> <ListItem title={_t.textAllowOverlap}>
<Toggle checked={overlap} onChange={() => {props.onOverlap(!overlap)}}/> <Toggle checked={overlap} onToggleChange={() => {props.onOverlap(!overlap)}}/>
</ListItem> </ListItem>
</List> </List>
{ {

10
apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
View file

@ -94,21 +94,21 @@ const PageAdvancedSettings = props => {
</List> </List>
<List> <List>
<ListItem title={t('Edit.textSpaceBetweenParagraphs')}> <ListItem title={t('Edit.textSpaceBetweenParagraphs')}>
<Toggle checked={spaceBetween} onChange={() => {props.onSpaceBetween(!spaceBetween)}}/> <Toggle checked={spaceBetween} onToggleChange={() => {props.onSpaceBetween(!spaceBetween)}}/>
</ListItem> </ListItem>
</List> </List>
<List> <List>
<ListItem title={t('Edit.textPageBreakBefore')}> <ListItem title={t('Edit.textPageBreakBefore')}>
<Toggle checked={breakBefore} onChange={() => {props.onBreakBefore(!breakBefore)}}/> <Toggle checked={breakBefore} onToggleChange={() => {props.onBreakBefore(!breakBefore)}}/>
</ListItem> </ListItem>
<ListItem title={t('Edit.textOrphanControl')}> <ListItem title={t('Edit.textOrphanControl')}>
<Toggle checked={orphanControl} onChange={() => {props.onOrphan(!orphanControl)}}/> <Toggle checked={orphanControl} onToggleChange={() => {props.onOrphan(!orphanControl)}}/>
</ListItem> </ListItem>
<ListItem title={t('Edit.textKeepLinesTogether')}> <ListItem title={t('Edit.textKeepLinesTogether')}>
<Toggle checked={keepTogether} onChange={() => {props.onKeepTogether(!keepTogether)}}/> <Toggle checked={keepTogether} onToggleChange={() => {props.onKeepTogether(!keepTogether)}}/>
</ListItem> </ListItem>
<ListItem title={t('Edit.textKeepWithNext')}> <ListItem title={t('Edit.textKeepWithNext')}>
<Toggle checked={keepWithNext} onChange={() => {props.onKeepNext(!keepWithNext)}}/> <Toggle checked={keepWithNext} onToggleChange={() => {props.onKeepNext(!keepWithNext)}}/>
</ListItem> </ListItem>
</List> </List>
</Page> </Page>

4
apps/documenteditor/mobile/src/view/edit/EditShape.jsx
View file

@ -391,10 +391,10 @@ const PageWrap = props => {
} }
<List> <List>
<ListItem title={_t.textMoveWithText} className={'inline' === wrapType ? 'disabled' : ''}> <ListItem title={_t.textMoveWithText} className={'inline' === wrapType ? 'disabled' : ''}>
<Toggle checked={moveText} onChange={() => {props.onMoveText(!moveText)}}/> <Toggle checked={moveText} onToggleChange={() => {props.onMoveText(!moveText)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textAllowOverlap}> <ListItem title={_t.textAllowOverlap}>
<Toggle checked={overlap} onChange={() => {props.onOverlap(!overlap)}}/> <Toggle checked={overlap} onToggleChange={() => {props.onOverlap(!overlap)}}/>
</ListItem> </ListItem>
</List> </List>
{ {

18
apps/documenteditor/mobile/src/view/edit/EditTable.jsx
View file

@ -40,10 +40,10 @@ const PageTableOptions = props => {
</Navbar> </Navbar>
<List> <List>
<ListItem title={_t.textRepeatAsHeaderRow} className={isRepeat === null ? 'disabled' : ''}> <ListItem title={_t.textRepeatAsHeaderRow} className={isRepeat === null ? 'disabled' : ''}>
<Toggle checked={isRepeat} onChange={() => {props.onOptionRepeat(!isRepeat)}}/> <Toggle checked={isRepeat} onToggleChange={() => {props.onOptionRepeat(!isRepeat)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textResizeToFitContent}> <ListItem title={_t.textResizeToFitContent}>
<Toggle checked={isResize} onChange={() => {props.onOptionResize(!isResize)}}/> <Toggle checked={isResize} onToggleChange={() => {props.onOptionResize(!isResize)}}/>
</ListItem> </ListItem>
</List> </List>
<BlockTitle>{_t.textCellMargins}</BlockTitle> <BlockTitle>{_t.textCellMargins}</BlockTitle>
@ -115,7 +115,7 @@ const PageWrap = props => {
</List> </List>
<List> <List>
<ListItem title={_t.textMoveWithText} className={'inline' === wrapType ? 'disabled' : ''}> <ListItem title={_t.textMoveWithText} className={'inline' === wrapType ? 'disabled' : ''}>
<Toggle checked={moveText} onChange={() => {props.onWrapMoveText(!moveText)}}/> <Toggle checked={moveText} onToggleChange={() => {props.onWrapMoveText(!moveText)}}/>
</ListItem> </ListItem>
</List> </List>
{ {
@ -223,24 +223,24 @@ const PageStyleOptions = props => {
</Navbar> </Navbar>
<List> <List>
<ListItem title={_t.textHeaderRow}> <ListItem title={_t.textHeaderRow}>
<Toggle checked={isFirstRow} onChange={() => {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/> <Toggle checked={isFirstRow} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textTotalRow}> <ListItem title={_t.textTotalRow}>
<Toggle checked={isLastRow} onChange={() => {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/> <Toggle checked={isLastRow} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textBandedRow}> <ListItem title={_t.textBandedRow}>
<Toggle checked={isBandHor} onChange={() => {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/> <Toggle checked={isBandHor} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/>
</ListItem> </ListItem>
</List> </List>
<List> <List>
<ListItem title={_t.textFirstColumn}> <ListItem title={_t.textFirstColumn}>
<Toggle checked={isFirstCol} onChange={() => {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/> <Toggle checked={isFirstCol} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textLastColumn}> <ListItem title={_t.textLastColumn}>
<Toggle checked={isLastCol} onChange={() => {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/> <Toggle checked={isLastCol} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textBandedColumn}> <ListItem title={_t.textBandedColumn}>
<Toggle checked={isBandVer} onChange={() => {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/> <Toggle checked={isBandVer} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/>
</ListItem> </ListItem>
</List> </List>
</Page> </Page>

10
apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx
View file

@ -42,7 +42,7 @@ const PageApplicationSettings = props => {
<List> <List>
<ListItem title={_t.textSpellcheck}> <ListItem title={_t.textSpellcheck}>
<Toggle checked={isSpellChecking} <Toggle checked={isSpellChecking}
onChange={() => { onToggleChange={() => {
store.changeSpellCheck(!isSpellChecking); store.changeSpellCheck(!isSpellChecking);
props.switchSpellCheck(!isSpellChecking); props.switchSpellCheck(!isSpellChecking);
}} }}
@ -52,7 +52,7 @@ const PageApplicationSettings = props => {
<List> <List>
<ListItem title={_t.textNoCharacters} disabled={displayMode !== 'markup'}>{/*ToDo: if (DisplayMode == "final" || DisplayMode == "original") {disabled} */} <ListItem title={_t.textNoCharacters} disabled={displayMode !== 'markup'}>{/*ToDo: if (DisplayMode == "final" || DisplayMode == "original") {disabled} */}
<Toggle checked={isNonprintingCharacters} <Toggle checked={isNonprintingCharacters}
onChange={() => { onToggleChange={() => {
store.changeNoCharacters(!isNonprintingCharacters); store.changeNoCharacters(!isNonprintingCharacters);
props.switchNoCharacters(!isNonprintingCharacters); props.switchNoCharacters(!isNonprintingCharacters);
}} }}
@ -60,7 +60,7 @@ const PageApplicationSettings = props => {
</ListItem> </ListItem>
<ListItem title={_t.textHiddenTableBorders} disabled={displayMode !== 'markup'}>{/*ToDo: if (DisplayMode == "final" || DisplayMode == "original") {disabled} */} <ListItem title={_t.textHiddenTableBorders} disabled={displayMode !== 'markup'}>{/*ToDo: if (DisplayMode == "final" || DisplayMode == "original") {disabled} */}
<Toggle checked={isHiddenTableBorders} <Toggle checked={isHiddenTableBorders}
onChange={() => { onToggleChange={() => {
store.changeShowTableEmptyLine(!isHiddenTableBorders); store.changeShowTableEmptyLine(!isHiddenTableBorders);
props.switchShowTableEmptyLine(!isHiddenTableBorders); props.switchShowTableEmptyLine(!isHiddenTableBorders);
}} }}
@ -73,7 +73,7 @@ const PageApplicationSettings = props => {
<List> <List>
<ListItem title={_t.textComments}> <ListItem title={_t.textComments}>
<Toggle checked={isComments} <Toggle checked={isComments}
onChange={() => { onToggleChange={() => {
store.changeDisplayComments(!isComments); store.changeDisplayComments(!isComments);
props.switchDisplayComments(!isComments); props.switchDisplayComments(!isComments);
}} }}
@ -81,7 +81,7 @@ const PageApplicationSettings = props => {
</ListItem> </ListItem>
<ListItem title={_t.textResolvedComments}> <ListItem title={_t.textResolvedComments}>
<Toggle checked={isResolvedComments} disabled={!isComments} <Toggle checked={isResolvedComments} disabled={!isComments}
onChange={() => { onToggleChange={() => {
store.changeDisplayResolved(!isResolvedComments); store.changeDisplayResolved(!isResolvedComments);
props.switchDisplayResolved(!isResolvedComments); props.switchDisplayResolved(!isResolvedComments);
}} }}

2
apps/documenteditor/mobile/src/view/settings/Settings.jsx
View file

@ -132,7 +132,7 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
{_canReader && {_canReader &&
<ListItem title={_t.textReaderMode}> {/*ToDo*/} <ListItem title={_t.textReaderMode}> {/*ToDo*/}
<Icon slot="media" icon="icon-reader"></Icon> <Icon slot="media" icon="icon-reader"></Icon>
<Toggle checked={appOptions.readerMode} onChange={() => {props.onReaderMode()}}/> <Toggle checked={appOptions.readerMode} onToggleChange={() => {props.onReaderMode()}}/>
</ListItem> </ListItem>
} }
{Device.sailfish && _isEdit && {Device.sailfish && _isEdit &&

4
apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx
View file

@ -281,11 +281,11 @@ const PageTransition = props => {
<List> <List>
<ListItem> <ListItem>
<span>{_t.textStartOnClick}</span> <span>{_t.textStartOnClick}</span>
<Toggle checked={isStartOnClick} onChange={() => {props.onStartClick(!isStartOnClick)}} /> <Toggle checked={isStartOnClick} onToggleChange={() => {props.onStartClick(!isStartOnClick)}} />
</ListItem> </ListItem>
<ListItem> <ListItem>
<span>{_t.textDelay}</span> <span>{_t.textDelay}</span>
<Toggle checked={isDelay} onChange={() => {props.onDelayCheck(!isDelay, _effectDelay)}} /> <Toggle checked={isDelay} onToggleChange={() => {props.onDelayCheck(!isDelay, _effectDelay)}} />
</ListItem> </ListItem>
<ListItem> <ListItem>
<div slot='inner' style={{width: '100%'}}> <div slot='inner' style={{width: '100%'}}>

12
apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
View file

@ -64,24 +64,24 @@ const PageStyleOptions = props => {
</Navbar> </Navbar>
<List> <List>
<ListItem title={_t.textHeaderRow}> <ListItem title={_t.textHeaderRow}>
<Toggle checked={isFirstRow} onChange={() => {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/> <Toggle checked={isFirstRow} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textTotalRow}> <ListItem title={_t.textTotalRow}>
<Toggle checked={isLastRow} onChange={() => {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/> <Toggle checked={isLastRow} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textBandedRow}> <ListItem title={_t.textBandedRow}>
<Toggle checked={isBandHor} onChange={() => {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/> <Toggle checked={isBandHor} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/>
</ListItem> </ListItem>
</List> </List>
<List> <List>
<ListItem title={_t.textFirstColumn}> <ListItem title={_t.textFirstColumn}>
<Toggle checked={isFirstCol} onChange={() => {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/> <Toggle checked={isFirstCol} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textLastColumn}> <ListItem title={_t.textLastColumn}>
<Toggle checked={isLastCol} onChange={() => {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/> <Toggle checked={isLastCol} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/>
</ListItem> </ListItem>
<ListItem title={_t.textBandedColumn}> <ListItem title={_t.textBandedColumn}>
<Toggle checked={isBandVer} onChange={() => {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/> <Toggle checked={isBandVer} onToggleChange={() => {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/>
</ListItem> </ListItem>
</List> </List>
</Page> </Page>

2
apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx
View file

@ -38,7 +38,7 @@ const PageApplicationSettings = props => {
<ListItem> <ListItem>
<span>{_t.textSpellcheck}</span> <span>{_t.textSpellcheck}</span>
<Toggle checked={isSpellChecking} <Toggle checked={isSpellChecking}
onChange={() => { onToggleChange={() => {
store.changeSpellCheck(!isSpellChecking); store.changeSpellCheck(!isSpellChecking);
props.switchSpellCheck(!isSpellChecking); props.switchSpellCheck(!isSpellChecking);
}} }}

2
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
View file

@ -486,7 +486,7 @@ const PageTextFormatCell = props => {
<List> <List>
<ListItem title={_t.textWrapText}> <ListItem title={_t.textWrapText}>
{!isAndroid ? <Icon slot="media" icon="icon-cell-wrap"></Icon> : null} {!isAndroid ? <Icon slot="media" icon="icon-cell-wrap"></Icon> : null}
<Toggle checked={isWrapText} onChange={() => {props.onWrapTextChange(!isWrapText)}} /> <Toggle checked={isWrapText} onToggleChange={() => {props.onWrapTextChange(!isWrapText)}} />
</ListItem> </ListItem>
</List> </List>
</Page> </Page>

4
apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
View file

@ -862,7 +862,7 @@ const PageVerticalAxis = props => {
<ListItem title={_t.textValuesInReverseOrder}> <ListItem title={_t.textValuesInReverseOrder}>
<div slot="after"> <div slot="after">
<Toggle checked={valuesReverseOrder} <Toggle checked={valuesReverseOrder}
onChange={() => { onToggleChange={() => {
toggleValuesReverseOrder(!valuesReverseOrder); toggleValuesReverseOrder(!valuesReverseOrder);
props.onVerAxisReverse(!valuesReverseOrder); props.onVerAxisReverse(!valuesReverseOrder);
}} /> }} />
@ -1170,7 +1170,7 @@ const PageHorizontalAxis = props => {
<ListItem title={_t.textValuesInReverseOrder}> <ListItem title={_t.textValuesInReverseOrder}>
<div slot="after"> <div slot="after">
<Toggle checked={valuesReverseOrder} <Toggle checked={valuesReverseOrder}
onChange={() => { onToggleChange={() => {
toggleValuesReverseOrder(!valuesReverseOrder); toggleValuesReverseOrder(!valuesReverseOrder);
props.onHorAxisReverse(!valuesReverseOrder); props.onHorAxisReverse(!valuesReverseOrder);
}} /> }} />

6
apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
View file

@ -66,7 +66,7 @@ const PageApplicationSettings = props => {
<ListItem> <ListItem>
<span>{_t.textComments}</span> <span>{_t.textComments}</span>
<Toggle checked={isComments} <Toggle checked={isComments}
onChange={() => { onToggleChange={() => {
storeApplicationSettings.changeDisplayComments(!isComments); storeApplicationSettings.changeDisplayComments(!isComments);
props.onChangeDisplayComments(!isComments); props.onChangeDisplayComments(!isComments);
}} }}
@ -75,7 +75,7 @@ const PageApplicationSettings = props => {
<ListItem> <ListItem>
<span>{_t.textResolvedComments}</span> <span>{_t.textResolvedComments}</span>
<Toggle checked={isResolvedComments} disabled={!isComments} <Toggle checked={isResolvedComments} disabled={!isComments}
onChange={() => { onToggleChange={() => {
storeApplicationSettings.changeDisplayResolved(!isResolvedComments); storeApplicationSettings.changeDisplayResolved(!isResolvedComments);
props.onChangeDisplayResolved(!isResolvedComments); props.onChangeDisplayResolved(!isResolvedComments);
}} }}
@ -86,7 +86,7 @@ const PageApplicationSettings = props => {
<ListItem> <ListItem>
<span>{_t.textR1C1Style}</span> <span>{_t.textR1C1Style}</span>
<Toggle checked={isRefStyle} <Toggle checked={isRefStyle}
onChange={() => { onToggleChange={() => {
storeApplicationSettings.changeRefStyle(!isRefStyle); storeApplicationSettings.changeRefStyle(!isRefStyle);
props.clickR1C1Style(!isRefStyle); props.clickR1C1Style(!isRefStyle);
}} }}

4
apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx
View file

@ -241,14 +241,14 @@ const PageSpreadsheetSettings = props => {
<List simpleList> <List simpleList>
<ListItem> <ListItem>
<span>{_t.textHideHeadings}</span> <span>{_t.textHideHeadings}</span>
<Toggle checked={isHideHeadings} onChange={() => { <Toggle checked={isHideHeadings} onToggleChange={() => {
storeSpreadsheetSettings.changeHideHeadings(!isHideHeadings); storeSpreadsheetSettings.changeHideHeadings(!isHideHeadings);
props.clickCheckboxHideHeadings(!isHideHeadings) props.clickCheckboxHideHeadings(!isHideHeadings)
}} /> }} />
</ListItem> </ListItem>
<ListItem> <ListItem>
<span>{_t.textHideGridlines}</span> <span>{_t.textHideGridlines}</span>
<Toggle checked={isHideGridlines} onChange={() => { <Toggle checked={isHideGridlines} onToggleChange={() => {
storeSpreadsheetSettings.changeHideGridlines(!isHideGridlines); storeSpreadsheetSettings.changeHideGridlines(!isHideGridlines);
props.clickCheckboxHideGridlines(!isHideGridlines) props.clickCheckboxHideGridlines(!isHideGridlines)
}} /> }} />