uwap/mqtt-control-map
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Icon to sidebar

Browse source
This commit is contained in:
uwap 2017-11-07 08:14:49 +01:00
parent 74c4138bad
commit b84cc6d4a2
2 changed files with 13 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/ControlMap.js
View file

@ -3,6 +3,7 @@ import React from "react";
import { Map, ImageOverlay, Marker, LayersControl } from "react-leaflet"; import { Map, ImageOverlay, Marker, LayersControl } from "react-leaflet";
import Leaflet from "leaflet"; import Leaflet from "leaflet";
import _ from "lodash"; import _ from "lodash";
import parseIconName from "utils/parseIconName";
export type Point = [number, number]; export type Point = [number, number];
@ -44,10 +45,9 @@ export default class ControlMap extends React.Component<ControlMapProps> {
return _.map(this.props.controls, this.renderMarker.bind(this)); return _.map(this.props.controls, this.renderMarker.bind(this));
} }
createLeafletIcon(iconRaw: string) { createLeafletIcon(icon: string) {
const icon = iconRaw.split(" ").map(name => "mdi-".concat(name)).join(" ");
return Leaflet.divIcon({ return Leaflet.divIcon({
className: `mdi mdi-36px ${icon}`, className: parseIconName(`${icon} 36px`),
iconSize: Leaflet.point(36, 36), iconSize: Leaflet.point(36, 36),
iconAnchor: Leaflet.point(18, 18) iconAnchor: Leaflet.point(18, 18)
}); });

14
src/components/SideBar.js
View file

@ -8,6 +8,7 @@ import IconButton from "material-ui/IconButton";
import AppBar from "material-ui/AppBar"; import AppBar from "material-ui/AppBar";
import Toolbar from "material-ui/Toolbar"; import Toolbar from "material-ui/Toolbar";
import List from "material-ui/List"; import List from "material-ui/List";
import { renderIcon } from "utils/parseIconName";
export type SideBarProps = { export type SideBarProps = {
control: ?Control, control: ?Control,
@ -27,6 +28,9 @@ class SideBar extends React.Component<SideBarProps & Classes, SideBarState> {
return { return {
drawerPaper: { drawerPaper: {
width: 320 width: 320
},
flex: {
flex: 1
} }
}; };
} }
@ -45,12 +49,14 @@ class SideBar extends React.Component<SideBarProps & Classes, SideBarState> {
> >
<AppBar position="static"> <AppBar position="static">
<Toolbar> <Toolbar>
<IconButton onClick={this.close.bind(this)}> {this.props.control == null
<i className="mdi mdi-format-horizontal-align-right mdi-36px"></i> || renderIcon(this.props.control.icon, "mdi-36px")}
</IconButton> <Typography type="title" className={this.props.classes.flex}>
<Typography type="title">
{this.props.control == null || this.props.control.name} {this.props.control == null || this.props.control.name}
</Typography> </Typography>
<IconButton onClick={this.close.bind(this)}>
<i className="mdi mdi-close mdi-36px"></i>
</IconButton>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<List id="drawer_uiComponents"> <List id="drawer_uiComponents">