Use chevron icons in search and mode button

This commit is contained in:
jos 2018-09-19 10:04:51 +02:00
parent 37e22908c7
commit 702dc5ed20
2 changed files with 18 additions and 6 deletions

View File

@ -2,6 +2,15 @@ import { createElement as h, Component } from 'react'
import ModeSelector from './ModeSelector'
import { toCapital } from '../../utils/stringUtils'
import fontawesome from '@fortawesome/fontawesome'
import faChevronDown from '@fortawesome/fontawesome-free-solid/faChevronDown'
import './Menu.css'
import './Search.css'
fontawesome.library.add(faChevronDown)
export default class ModeButton extends Component {
constructor (props) {
super (props)
@ -22,7 +31,10 @@ export default class ModeButton extends Component {
key: 'button',
title: 'Switch mode',
onClick: this.handleOpen
}, `${toCapital(props.mode)} \u25BC`),
}, [
toCapital(props.mode) + ' ',
h('i', { className: 'fa fa-chevron-down' })
]),
h(ModeSelector, {
key: 'menu',

View File

@ -5,15 +5,15 @@ import { findEditorContainer, setSelection } from '../utils/domSelector'
import fontawesome from '@fortawesome/fontawesome'
import faSearch from '@fortawesome/fontawesome-free-solid/faSearch'
import faCaretUp from '@fortawesome/fontawesome-free-solid/faCaretUp'
import faCaretDown from '@fortawesome/fontawesome-free-solid/faCaretDown'
import faChevronUp from '@fortawesome/fontawesome-free-solid/faChevronUp'
import faChevronDown from '@fortawesome/fontawesome-free-solid/faChevronDown'
import faTimes from '@fortawesome/fontawesome-free-solid/faTimes'
import './Menu.css'
import './Search.css'
fontawesome.library.add(faSearch, faCaretUp, faCaretDown, faTimes)
fontawesome.library.add(faSearch, faChevronUp, faChevronDown, faTimes)
export default class Search extends Component {
constructor (props) {
@ -48,14 +48,14 @@ export default class Search extends Component {
className: 'jsoneditor-search-next',
title: 'Next result',
onClick: this.props.onNext
}, h('i', {className: 'fa fa-caret-down'})),
}, h('i', {className: 'fa fa-chevron-down'})),
h('button', {
key: 'previous',
type: 'button',
className: 'jsoneditor-search-previous',
title: 'Previous result',
onClick: this.props.onPrevious
}, h('i', {className: 'fa fa-caret-up'})),
}, h('i', {className: 'fa fa-chevron-up'})),
h('button', {
key: 'close',
type: 'button',