mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-29 06:15:29 -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;
}

148
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,79 +44,77 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
} }
return ( return (
<Fragment> <ButtonToolbar className='bg-light'>
<ButtonToolbar className='bg-light'> <ButtonGroup className={'mx-1 flex-wrap'}>
<ButtonGroup className={'mx-2 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> <Button variant='light' onClick={() => makeSelectionItalic(editor)} title={t('editor.editorToolbar.italic')}>
<Button variant='light' onClick={() => makeSelectionItalic(editor)} title={t('editor.editorToolbar.italic')}> <ForkAwesomeIcon icon="italic"/>
<ForkAwesomeIcon icon="italic"/> </Button>
</Button> <Button variant='light' onClick={() => underlineSelection(editor)} title={t('editor.editorToolbar.underline')}>
<Button variant='light' onClick={() => underlineSelection(editor)} title={t('editor.editorToolbar.underline')}> <ForkAwesomeIcon icon="underline"/>
<ForkAwesomeIcon icon="underline"/> </Button>
</Button> <Button variant='light' onClick={() => strikeThroughSelection(editor)} title={t('editor.editorToolbar.strikethrough')}>
<Button variant='light' onClick={() => strikeThroughSelection(editor)} title={t('editor.editorToolbar.strikethrough')}> <ForkAwesomeIcon icon="strikethrough"/>
<ForkAwesomeIcon icon="strikethrough"/> </Button>
</Button> <Button variant='light' onClick={() => subscriptSelection(editor)} title={t('editor.editorToolbar.subscript')}>
<Button variant='light' onClick={() => subscriptSelection(editor)} title={t('editor.editorToolbar.subscript')}> <ForkAwesomeIcon icon="subscript"/>
<ForkAwesomeIcon icon="subscript"/> </Button>
</Button> <Button variant='light' onClick={() => superscriptSelection(editor)} title={t('editor.editorToolbar.superscript')}>
<Button variant='light' onClick={() => superscriptSelection(editor)} title={t('editor.editorToolbar.superscript')}> <ForkAwesomeIcon icon="superscript"/>
<ForkAwesomeIcon icon="superscript"/> </Button>
</Button> </ButtonGroup>
</ButtonGroup> <span className={'divider'}>&nbsp;</span>
<span className={'divider'}>&nbsp;</span> <ButtonGroup className={'mx-1 flex-wrap'}>
<ButtonGroup className={'mx-2 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> <Button variant='light' onClick={() => addCodeFences(editor)} title={t('editor.editorToolbar.code')}>
<Button variant='light' onClick={() => addCodeFences(editor)} title={t('editor.editorToolbar.code')}> <ForkAwesomeIcon icon="code"/>
<ForkAwesomeIcon icon="code"/> </Button>
</Button> <Button variant='light' onClick={() => addQuotes(editor)} title={t('editor.editorToolbar.blockquote')}>
<Button variant='light' onClick={() => addQuotes(editor)} title={t('editor.editorToolbar.blockquote')}> <ForkAwesomeIcon icon="quote-right"/>
<ForkAwesomeIcon icon="quote-right"/> </Button>
</Button> <Button variant='light' onClick={() => addList(editor)} title={t('editor.editorToolbar.unorderedList')}>
<Button variant='light' onClick={() => addList(editor)} title={t('editor.editorToolbar.unorderedList')}> <ForkAwesomeIcon icon="list"/>
<ForkAwesomeIcon icon="list"/> </Button>
</Button> <Button variant='light' onClick={() => addOrderedList(editor)} title={t('editor.editorToolbar.orderedList')}>
<Button variant='light' onClick={() => addOrderedList(editor)} title={t('editor.editorToolbar.orderedList')}> <ForkAwesomeIcon icon="list-ol"/>
<ForkAwesomeIcon icon="list-ol"/> </Button>
</Button> <Button variant='light' onClick={() => addTaskList(editor)} title={t('editor.editorToolbar.checkList')}>
<Button variant='light' onClick={() => addTaskList(editor)} title={t('editor.editorToolbar.checkList')}> <ForkAwesomeIcon icon="check-square"/>
<ForkAwesomeIcon icon="check-square"/> </Button>
</Button> </ButtonGroup>
</ButtonGroup> <span className={'divider'}>&nbsp;</span>
<span className={'divider'}>&nbsp;</span> <ButtonGroup className={'mx-1 flex-wrap'}>
<ButtonGroup className={'mx-2 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> <Button variant='light' onClick={() => addImage(editor)} title={t('editor.editorToolbar.image')}>
<Button variant='light' onClick={() => addImage(editor)} title={t('editor.editorToolbar.image')}> <ForkAwesomeIcon icon="picture-o"/>
<ForkAwesomeIcon icon="picture-o"/> </Button>
</Button> <Button variant='light' onClick={notImplemented} title={t('editor.editorToolbar.uploadImage')}>
<Button variant='light' onClick={notImplemented} title={t('editor.editorToolbar.uploadImage')}> <ForkAwesomeIcon icon="upload"/>
<ForkAwesomeIcon icon="upload"/> </Button>
</Button> </ButtonGroup>
</ButtonGroup> <span className={'divider'}>&nbsp;</span>
<span className={'divider'}>&nbsp;</span> <ButtonGroup className={'mx-1 flex-wrap'}>
<ButtonGroup className={'mx-2 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> <Button variant='light' onClick={() => addLine(editor)} title={t('editor.editorToolbar.line')}>
<Button variant='light' onClick={() => addLine(editor)} title={t('editor.editorToolbar.line')}> <ForkAwesomeIcon icon="minus"/>
<ForkAwesomeIcon icon="minus"/> </Button>
</Button> <Button variant='light' onClick={() => addComment(editor)} title={t('editor.editorToolbar.comment')}>
<Button variant='light' onClick={() => addComment(editor)} title={t('editor.editorToolbar.comment')}> <ForkAwesomeIcon icon="comment"/>
<ForkAwesomeIcon icon="comment"/> </Button>
</Button> <EmojiPickerButton editor={editor}/>
<EmojiPickerButton editor={editor}/> </ButtonGroup>
</ButtonGroup> <span className={'divider'}>&nbsp;</span>
<span className={'divider'}>&nbsp;</span> <ButtonGroup className={'mx-1 flex-wrap'}>
<ButtonGroup className={'mx-2 flex-wrap'}> <EditorPreferences onPreferencesChange={onPreferencesChange} preferences={editorPreferences}/>
<EditorPreferences onPreferencesChange={onPreferencesChange} preferences={editorPreferences}/> </ButtonGroup>
</ButtonGroup> </ButtonToolbar>
</ButtonToolbar>
</Fragment>
) )
} }