Rename icons and add layer to toolbar

This commit is contained in:
Lukas Martinelli 2016-12-28 16:23:33 +01:00
parent a0e1e6152b
commit 488fdf2bd5

View file

@ -3,17 +3,18 @@ import FileReaderInput from 'react-file-reader-input'
import MdFileDownload from 'react-icons/lib/md/file-download' import MdFileDownload from 'react-icons/lib/md/file-download'
import MdFileUpload from 'react-icons/lib/md/file-upload' import MdFileUpload from 'react-icons/lib/md/file-upload'
import MdOpenInBrowser from 'react-icons/lib/md/open-in-browser' import OpenIcon from 'react-icons/lib/md/open-in-browser'
import MdSettings from 'react-icons/lib/md/settings' import SettingsIcon from 'react-icons/lib/md/settings'
import MdInfo from 'react-icons/lib/md/info' import MdInfo from 'react-icons/lib/md/info'
import MdLayers from 'react-icons/lib/md/layers' import SourcesIcon from 'react-icons/lib/md/layers'
import MdSave from 'react-icons/lib/md/save' import MdSave from 'react-icons/lib/md/save'
import MdStyle from 'react-icons/lib/md/style' import MdStyle from 'react-icons/lib/md/style'
import MdMap from 'react-icons/lib/md/map' import MdMap from 'react-icons/lib/md/map'
import MdInsertEmoticon from 'react-icons/lib/md/insert-emoticon' import MdInsertEmoticon from 'react-icons/lib/md/insert-emoticon'
import MdFontDownload from 'react-icons/lib/md/font-download' import MdFontDownload from 'react-icons/lib/md/font-download'
import MdHelpOutline from 'react-icons/lib/md/help-outline' import HelpIcon from 'react-icons/lib/md/help-outline'
import MdFindInPage from 'react-icons/lib/md/find-in-page' import InspectionIcon from 'react-icons/lib/md/find-in-page'
import AddIcon from 'react-icons/lib/md/add-circle-outline'
import SettingsModal from './modals/SettingsModal' import SettingsModal from './modals/SettingsModal'
import SourcesModal from './modals/SourcesModal' import SourcesModal from './modals/SourcesModal'
@ -164,24 +165,28 @@ export default class Toolbar extends React.Component {
<span style={{fontSize: 20, verticalAlign: 'middle' }}>Maputnik</span> <span style={{fontSize: 20, verticalAlign: 'middle' }}>Maputnik</span>
</ToolbarLink> </ToolbarLink>
<ToolbarAction onClick={this.toggleModal.bind(this, 'open')}> <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
<MdOpenInBrowser /> <OpenIcon />
<IconText>Open</IconText> <IconText>Open</IconText>
</ToolbarAction> </ToolbarAction>
{this.downloadButton()} {this.downloadButton()}
<ToolbarAction onClick={this.toggleModal.bind(this, 'add')}>
<AddIcon />
<IconText>Add Layer</IconText>
</ToolbarAction>
<ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}> <ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
<MdLayers /> <SourcesIcon />
<IconText>Sources</IconText> <IconText>Sources</IconText>
</ToolbarAction> </ToolbarAction>
<ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}> <ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
<MdSettings /> <SettingsIcon />
<IconText>Style Settings</IconText> <IconText>Style Settings</IconText>
</ToolbarAction> </ToolbarAction>
<ToolbarAction onClick={this.toggleInspectionMode.bind(this)}> <ToolbarAction onClick={this.toggleInspectionMode.bind(this)}>
<MdFindInPage /> <InspectionIcon />
<IconText>Inspect</IconText> <IconText>Inspect</IconText>
</ToolbarAction> </ToolbarAction>
<ToolbarLink href={"https://github.com/maputnik/editor/wiki"}> <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
<MdHelpOutline /> <HelpIcon />
<IconText>Help</IconText> <IconText>Help</IconText>
</ToolbarLink> </ToolbarLink>
</div> </div>