Use chevron icons in search and mode button
This commit is contained in:
parent
37e22908c7
commit
702dc5ed20
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue