github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-04-20 11:05:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

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