vmario/Doodle3D-Core
0
0
Fork 0
mirror of https://github.com/Doodle3D/Doodle3D-Core.git synced 2024-12-22 11:03:48 +01:00
Code Issues Projects Releases Wiki Activity

move some css

Browse Source
This commit is contained in:
casperlamboo 2017-11-17 20:46:54 +01:00
parent 4f07269f63
commit 28cc6ba0b6
1 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/SketcherToolbars.js
View File

@ -8,6 +8,7 @@ import MenuItem from '../components/MenuItem.js';
import * as contextTools from '../constants/contextTools.js'; import * as contextTools from '../constants/contextTools.js';
import * as d2Tools from '../constants/d2Tools.js'; import * as d2Tools from '../constants/d2Tools.js';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import injectSheet from 'react-jss';
// import createDebug from 'debug'; // import createDebug from 'debug';
// const debug = createDebug('d3d:sketchertoolbars'); // const debug = createDebug('d3d:sketchertoolbars');
@ -15,6 +16,23 @@ const TOOLBAR2D = 'toolbar2d';
const TOOLBAR3D = 'toolbar3d'; const TOOLBAR3D = 'toolbar3d';
const CONTEXT = 'context'; const CONTEXT = 'context';
const styles = {
contextMenuContainer: {
position: 'absolute',
left: 0,
bottom: 0,
right: 0,
top: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
pointerEvents: 'none', /* enable clicking through object */
'& *': {
pointerEvents: 'visible' /* enable clicking in children */
}
}
}
class SketcherToolbars extends React.Component { class SketcherToolbars extends React.Component {
static propTypes = { static propTypes = {
@ -78,7 +96,7 @@ class SketcherToolbars extends React.Component {
); );
}; };
render() { render() {
const { toolbar2d, toolbar3d, context } = this.props; const { toolbar2d, toolbar3d, context, classes } = this.props;
return ( return (
<div> <div>
@ -86,7 +104,7 @@ class SketcherToolbars extends React.Component {
{this.renderToolbar(TOOLBAR2D, this.onSelect2D, toolbar2d)} {this.renderToolbar(TOOLBAR2D, this.onSelect2D, toolbar2d)}
{this.renderToolbar(TOOLBAR3D, this.onSelect3D, toolbar3d)} {this.renderToolbar(TOOLBAR3D, this.onSelect3D, toolbar3d)}
</div> </div>
{context.children.length > 0 && <div className="centerer"> {context.children.length > 0 && <div className={classes.contextMenuContainer}>
{this.renderToolbar(CONTEXT, this.onSelectContext, context)} {this.renderToolbar(CONTEXT, this.onSelectContext, context)}
</div>} </div>}
</div> </div>
@ -199,20 +217,6 @@ const getMenus = createSelector([
const style = document.createElement('style'); const style = document.createElement('style');
style.innerHTML = ` style.innerHTML = `
.centerer { /* centers child */
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none; /* enable clicking through object */
}
.centerer * {
pointer-events: visible; /* enable clicking in children */
}
.button { .button {
cursor: pointer; cursor: pointer;
} }
@ -805,4 +809,4 @@ style.innerHTML = `
`; `;
document.body.append(style); document.body.append(style);
export default connect(getMenus)(SketcherToolbars); export default injectSheet(styles)(connect(getMenus)(SketcherToolbars));