mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-31 07:08:40 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Reduce space between editor toolbar buttons (#494)

Browse source
This commit is contained in:
mrdrogdrog 2020-08-27 10:48:29 +02:00 • committed by GitHub
parent 36af0dc841
commit 7f04db9389
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 77 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/editor/editor-pane/editor-pane.scss
View file

@ -13,3 +13,7 @@
height: 100%; height: 100%;
} }
.btn-toolbar .btn {
padding: 0.1875rem 0.5rem;
min-width: 30px;
}

14
src/components/editor/editor-pane/tool-bar/tool-bar.tsx
View file

@ -1,5 +1,5 @@
import { Editor, EditorConfiguration } from 'codemirror' import { Editor, EditorConfiguration } from 'codemirror'
import React, { Fragment } from 'react' import React from 'react'
import { Button, ButtonGroup, ButtonToolbar } from 'react-bootstrap' import { Button, ButtonGroup, ButtonToolbar } from 'react-bootstrap'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon' import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
@ -44,9 +44,8 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
} }
return ( return (
<Fragment>
<ButtonToolbar className='bg-light'> <ButtonToolbar className='bg-light'>
<ButtonGroup className={'mx-2 flex-wrap'}> <ButtonGroup className={'mx-1 flex-wrap'}>
<Button variant='light' onClick={() => makeSelectionBold(editor)} title={t('editor.editorToolbar.bold')}> <Button variant='light' onClick={() => makeSelectionBold(editor)} title={t('editor.editorToolbar.bold')}>
<ForkAwesomeIcon icon="bold"/> <ForkAwesomeIcon icon="bold"/>
</Button> </Button>
@ -67,7 +66,7 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
</Button> </Button>
</ButtonGroup> </ButtonGroup>
<span className={'divider'}>&nbsp;</span> <span className={'divider'}>&nbsp;</span>
<ButtonGroup className={'mx-2 flex-wrap'}> <ButtonGroup className={'mx-1 flex-wrap'}>
<Button variant='light' onClick={() => addHeaderLevel(editor)} title={t('editor.editorToolbar.header')}> <Button variant='light' onClick={() => addHeaderLevel(editor)} title={t('editor.editorToolbar.header')}>
<ForkAwesomeIcon icon="header"/> <ForkAwesomeIcon icon="header"/>
</Button> </Button>
@ -88,7 +87,7 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
</Button> </Button>
</ButtonGroup> </ButtonGroup>
<span className={'divider'}>&nbsp;</span> <span className={'divider'}>&nbsp;</span>
<ButtonGroup className={'mx-2 flex-wrap'}> <ButtonGroup className={'mx-1 flex-wrap'}>
<Button variant='light' onClick={() => addLink(editor)} title={t('editor.editorToolbar.link')}> <Button variant='light' onClick={() => addLink(editor)} title={t('editor.editorToolbar.link')}>
<ForkAwesomeIcon icon="link"/> <ForkAwesomeIcon icon="link"/>
</Button> </Button>
@ -100,7 +99,7 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
</Button> </Button>
</ButtonGroup> </ButtonGroup>
<span className={'divider'}>&nbsp;</span> <span className={'divider'}>&nbsp;</span>
<ButtonGroup className={'mx-2 flex-wrap'}> <ButtonGroup className={'mx-1 flex-wrap'}>
<Button variant='light' onClick={() => addTable(editor)} title={t('editor.editorToolbar.table')}> <Button variant='light' onClick={() => addTable(editor)} title={t('editor.editorToolbar.table')}>
<ForkAwesomeIcon icon="table"/> <ForkAwesomeIcon icon="table"/>
</Button> </Button>
@ -113,10 +112,9 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
<EmojiPickerButton editor={editor}/> <EmojiPickerButton editor={editor}/>
</ButtonGroup> </ButtonGroup>
<span className={'divider'}>&nbsp;</span> <span className={'divider'}>&nbsp;</span>
<ButtonGroup className={'mx-2 flex-wrap'}> <ButtonGroup className={'mx-1 flex-wrap'}>
<EditorPreferences onPreferencesChange={onPreferencesChange} preferences={editorPreferences}/> <EditorPreferences onPreferencesChange={onPreferencesChange} preferences={editorPreferences}/>
</ButtonGroup> </ButtonGroup>
</ButtonToolbar> </ButtonToolbar>
</Fragment>
) )
} }