mirror of
https://github.com/maputnik/editor.git
synced 2025-12-27 16:40:00 +00:00
Hack map and toolbar view
This commit is contained in:
lukasmartinelli
37
src/app.jsx
37
src/app.jsx
@@ -1,16 +1,39 @@
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import styles from './index.scss';
|
||||
import {Workspace} from './workspace.jsx';
|
||||
import {Map} from './map.jsx';
|
||||
import {Toolbar} from './toolbar.jsx';
|
||||
import React from 'react';
|
||||
import styles from './layout.scss';
|
||||
import { Drawer, Container, Block, Fixed } from 'rebass'
|
||||
import { LayerEditor } from './layers.jsx'
|
||||
import theme from './theme.jsx'
|
||||
|
||||
export default class App extends React.Component {
|
||||
static childContextTypes = {
|
||||
rebass: React.PropTypes.object,
|
||||
reactIconBase: React.PropTypes.object
|
||||
}
|
||||
|
||||
getChildContext () {
|
||||
return {
|
||||
rebass: theme,
|
||||
reactIconBase: {
|
||||
size: 20,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>It Works!</h1>
|
||||
<p>This React project just works including <span className={styles.blueBg}>module</span> local styles.</p>
|
||||
<p>Global bootstrap css import works too as you can see on the following button.</p>
|
||||
<p><a className="btn btn-primary btn-lg">Enjoy!</a></p>
|
||||
<div>
|
||||
<Toolbar />
|
||||
<Drawer style={{backgroundColor: theme.colors.gray, marginLeft: 60}} open={true} position="left">
|
||||
<LayerEditor />
|
||||
</Drawer>
|
||||
<div className={styles.layoutMap}>
|
||||
<Map />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
4
src/button.jsx
Normal file
4
src/button.jsx
Normal file
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
import styles from './button.scss';
|
||||
import { Button, Text } from 'rebass'
|
||||
|
||||
18
src/button.scss
Normal file
18
src/button.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
.button {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-family: 'Open Sans Bold', sans-serif;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
|
||||
color: #fff;
|
||||
background-color: rgba(255,255,255,0.10);
|
||||
}
|
||||
@@ -1,4 +1,8 @@
|
||||
.blueBg {
|
||||
background-color: red;
|
||||
background-color: blue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.app {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
17
src/layers.jsx
Normal file
17
src/layers.jsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Toolbar, NavItem, Tooltip, Container, Space} from 'rebass'
|
||||
import theme from './theme.jsx';
|
||||
import { Button, Text } from 'rebass';
|
||||
|
||||
export class LayerEditor extends React.Component {
|
||||
render() {
|
||||
return <Container>
|
||||
<Toolbar>
|
||||
<NavItem is="a">
|
||||
Toolbar
|
||||
</NavItem>
|
||||
</Toolbar>
|
||||
</Container>;
|
||||
}
|
||||
}
|
||||
15
src/layout.scss
Normal file
15
src/layout.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@mixin full-height {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layoutMap {
|
||||
@include full-height;
|
||||
width: 100%;
|
||||
|
||||
& > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
17
src/map.jsx
Normal file
17
src/map.jsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import ReactMapboxGl from 'react-mapbox-gl';
|
||||
import {ZoomControl} from 'react-mapbox-gl';
|
||||
|
||||
|
||||
export class Map extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
render() {
|
||||
return <ReactMapboxGl
|
||||
style="mapbox://styles/morgenkaffee/ciqo4gtwo0037c0m7tpcosu63"
|
||||
accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w"
|
||||
><ZoomControl /></ReactMapboxGl>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,8 +6,6 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="app">Loading...</div>
|
||||
</div>
|
||||
<div id="app">Loading...</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
74
src/theme.jsx
Normal file
74
src/theme.jsx
Normal file
@@ -0,0 +1,74 @@
|
||||
const caps = {
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '.2em'
|
||||
}
|
||||
|
||||
const dark = {
|
||||
name: 'Dark',
|
||||
color: '#eee',
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
|
||||
backgroundColor: '#111',
|
||||
borderRadius: 5,
|
||||
borderColor: `rgba(255, 255, 255, ${1/16})`,
|
||||
|
||||
colors: {
|
||||
black: '#242424',
|
||||
gray: '#313131',
|
||||
white: '#fff',
|
||||
blue: '#00d9f7',
|
||||
info: '#00d9f7',
|
||||
green: '#0f8',
|
||||
success: '#0f8',
|
||||
orange: '#fb3',
|
||||
warning: '#fb3',
|
||||
primary: '#778',
|
||||
midgray: '#778',
|
||||
gray: '#333339',
|
||||
secondary: '#333339',
|
||||
red: '#f04',
|
||||
error: '#f04'
|
||||
},
|
||||
inverted: '#222',
|
||||
|
||||
scale: [
|
||||
3, 5, 10, 20, 40
|
||||
],
|
||||
|
||||
Card: {
|
||||
backgroundColor: '#222',
|
||||
border: 0,
|
||||
},
|
||||
Panel: {
|
||||
borderWidth: 2,
|
||||
backgroundColor: '#000'
|
||||
},
|
||||
Heading: caps,
|
||||
Button: {
|
||||
color: '#00d9f7',
|
||||
},
|
||||
ButtonOutline: {
|
||||
color: '#00d9f7',
|
||||
},
|
||||
Toolbar: {
|
||||
minHeight: 64,
|
||||
color: '#00d9f7',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)"
|
||||
},
|
||||
Label: { opacity: 5/8 },
|
||||
Menu: {
|
||||
color: '#00d9f7',
|
||||
backgroundColor: '#000'
|
||||
},
|
||||
Message: {
|
||||
color: '#111',
|
||||
opacity: 15/16
|
||||
},
|
||||
Text: {
|
||||
opacity: 7/8
|
||||
},
|
||||
Footer: {
|
||||
opacity: 1/2
|
||||
}
|
||||
}
|
||||
|
||||
export default dark
|
||||
44
src/toolbar.jsx
Normal file
44
src/toolbar.jsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Menu, NavItem, Tooltip, Container, Block, Fixed } from 'rebass'
|
||||
import theme from './theme.jsx';
|
||||
import {MdSettings, MdPalette, MdLayers, MdSave, MdFolderOpen} from 'react-icons/lib/md';
|
||||
import { Button, Text } from 'rebass';
|
||||
|
||||
export class Toolbar extends React.Component {
|
||||
render() {
|
||||
return <Container style={{
|
||||
zIndex: 100,
|
||||
position: "fixed",
|
||||
height: "100%",
|
||||
left: "0",
|
||||
top: "0",
|
||||
bottom: "0",
|
||||
backgroundColor: theme.colors.black }
|
||||
}>
|
||||
<Block>
|
||||
<Button big={true}>
|
||||
<Tooltip inverted rounded title="Save">
|
||||
<MdSave />
|
||||
</Tooltip>
|
||||
</Button>
|
||||
</Block>
|
||||
<Block>
|
||||
<Button big={true}><MdFolderOpen /></Button>
|
||||
</Block>
|
||||
<Block>
|
||||
<Button big={true}>
|
||||
<Tooltip inverted rounded title="Layers">
|
||||
<MdLayers />
|
||||
</Tooltip>
|
||||
</Button>
|
||||
</Block>
|
||||
<Block>
|
||||
<Button big={true}><MdPalette /></Button>
|
||||
</Block>
|
||||
<Block>
|
||||
<Button big={true}><MdSettings /></Button>
|
||||
</Block>
|
||||
</Container>
|
||||
}
|
||||
}
|
||||
50
src/workspace.jsx
Normal file
50
src/workspace.jsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import { Space, Toolbar, ButtonCircle, Text, Panel, PanelHeader, PanelFooter } from 'rebass'
|
||||
import Icon from 'react-geomicons';
|
||||
|
||||
|
||||
export class Workspace extends React.Component {
|
||||
render() {
|
||||
return <div className="workspace">
|
||||
<Toolbar>
|
||||
<Text>Hey layer</Text>
|
||||
<Space
|
||||
auto
|
||||
x={1}
|
||||
/>
|
||||
<ButtonCircle title="Like">
|
||||
<Icon
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
name="no"
|
||||
width="1em"
|
||||
/>
|
||||
</ButtonCircle>
|
||||
<ButtonCircle title="Like">
|
||||
<Icon
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
name="trash"
|
||||
width="1em"
|
||||
/>
|
||||
</ButtonCircle>
|
||||
<ButtonCircle title="Like">
|
||||
<Icon
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
name="triangleUp"
|
||||
width="1em"
|
||||
/>
|
||||
</ButtonCircle>
|
||||
<ButtonCircle title="Like">
|
||||
<Icon
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
name="heart"
|
||||
width="1em"
|
||||
/>
|
||||
</ButtonCircle>
|
||||
</Toolbar>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user