github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-26 03:33:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

Replace editor toolbar dividers with css pseudo-selector (#527)

Browse source 
* Remove useless divider-spans from toolbar and change css-selector

The use of extra divider elements is not needed as we can set the css-after pseudo-class to the button groups with the same styling.
This way we can reduce the amount of elements in the DOM by a hand full.

* Use scss syntax and include one rule into another more common one
This commit is contained in:
Erik Michelson 2020-09-01 22:28:37 +02:00 committed by GitHub
parent db4f2a4478
commit 0f30803529
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/editor/editor-pane/tool-bar/tool-bar.scss
View file

@ -1,9 +1,11 @@
.btn-toolbar {
border: 1px solid #ededed;
}
.divider {
background-color: #e2e6ea;
width: 2px;
padding: 0.25rem 0;
.btn-group:not(:last-of-type)::after {
background-color: #e2e6ea;
width: 2px;
padding: 0.25rem 0;
content: ' ';
margin-left: 0.5rem;
}
}

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

@ -65,7 +65,6 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
<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"/>
@ -86,7 +85,6 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
<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"/>
@ -98,7 +96,6 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
<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"/>
@ -111,7 +108,6 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
</Button>
<EmojiPickerButton editor={editor}/>
</ButtonGroup>
<span className={'divider'}>&nbsp;</span>
<ButtonGroup className={'mx-1 flex-wrap'}>
<EditorPreferences onPreferencesChange={onPreferencesChange} preferences={editorPreferences}/>
</ButtonGroup>