diff --git a/modules/ui/components/AdjustableAbs.jsx b/modules/ui/components/AdjustableAbs.jsx index e4876207..d09e1e8b 100644 --- a/modules/ui/components/AdjustableAbs.jsx +++ b/modules/ui/components/AdjustableAbs.jsx @@ -13,9 +13,9 @@ export class Adjuster extends React.Component { if (!this.el) { return; } - let w = this.el.offsetWidth; - let h = this.el.offsetHeight; - let holder = this.el.parentNode; + let w = this.el.clientWidth; + let h = this.el.clientHeight; + let holder = document.documentElement; const fit = (prop, pos, dim, holderDim) => { if (pos !== undefined) { @@ -43,10 +43,10 @@ export class Adjuster extends React.Component { } } - fit('left', left, w, holder.offsetWidth); - fit('right', right,w, holder.offsetWidth); - fit('top', top, h, holder.offsetHeight); - fit('bottom', bottom, h, holder.offsetHeight); + fit('left', left, w, holder.clientWidth); + fit('right', right,w, holder.clientWidth); + fit('top', top, h, holder.clientHeight); + fit('bottom', bottom, h, holder.clientHeight); this.el.style.visibility = 'visible'; }; @@ -63,7 +63,7 @@ export class Adjuster extends React.Component { return
this.el = el} style={{ visibility: 'hidden', - position: 'absolute', zIndex, + position: 'fixed', zIndex, ...style}} {...props}> {children}
; diff --git a/modules/ui/components/Folder.jsx b/modules/ui/components/Folder.jsx index 1b825779..2b595bf0 100644 --- a/modules/ui/components/Folder.jsx +++ b/modules/ui/components/Folder.jsx @@ -26,15 +26,15 @@ export default class Folder extends React.Component{ render() { let {title, closable, className, children} = this.props; return
- + <Title onClick={closable ? this.tweakClose : null} isClosed={this.isClosed()}>{title} {!this.isClosed() && children}
} } -export function Title({title, isClosed, onClick}) { +export function Title({children, isClosed, onClick}) { return
- {' '}{title} + {' '}{children}
; } diff --git a/modules/ui/components/Menu.jsx b/modules/ui/components/Menu.jsx index 04b5bd01..092b96b2 100644 --- a/modules/ui/components/Menu.jsx +++ b/modules/ui/components/Menu.jsx @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; import ls from './Menu.less'; import AuxWidget from "./AuxWidget"; import cx from 'classnames'; +import Fa from './Fa'; export default function Menu({children, x, y, orientationUp, centered, menuId, ...props}) { return ; } +export class ContextMenu extends React.Component { + + state = { + active: false + }; + + onClick = e => { + e.preventDefault(); + this.setState({ + active: true, + x: e.clientX, + y: e.clientY + }); + }; + + close = () => { + this.setState({active: false}) + }; + + componentDidMount() { + this.detacher = this.context.onCloseAll.attach(this.close); + } + + componentWillUnmount() { + this.detacher(); + } + + render() { + return + {this.props.children} + + {this.state.active && + {this.props.items} + } + + } + + getChildContext() { + return { + closeMenu: this.close + }; + } + + static contextTypes = { + onCloseAll: PropTypes.object + }; + + static childContextTypes = { + closeMenu: PropTypes.func + }; +} + +export function ContextMenuItem({onClick, ...props}, {closeMenu}) { + return { + closeMenu(); + onClick(); + }} {...props}/>; +} + +ContextMenuItem.contextTypes = { + closeMenu: PropTypes.func +}; + MenuItem.contextTypes = { closeAllUpPopups: PropTypes.func }; diff --git a/modules/ui/components/Menu.less b/modules/ui/components/Menu.less index 2dc3dad4..5c132114 100644 --- a/modules/ui/components/Menu.less +++ b/modules/ui/components/Menu.less @@ -46,3 +46,21 @@ color: @font-color-suppressed; } +.contextMenu { + &:hover .contextMenuBtn { + color: #fff; + } +} + +.contextMenuBtn { + display: inline-block; + padding: 2px 3px; + color: #ffffff33; + &:hover { + color: #fff; + } + &:active { + color: #7f0807; + } +} + diff --git a/modules/ui/components/controls/Button.jsx b/modules/ui/components/controls/Button.jsx index 1e2570e8..2bcec788 100644 --- a/modules/ui/components/controls/Button.jsx +++ b/modules/ui/components/controls/Button.jsx @@ -3,9 +3,9 @@ import React from 'react'; import ls from './Button.less' import cx from 'classnames'; -export default function Button({type, onClick, children}) { +export default function Button({type, onClick, className, children}) { - return + return } diff --git a/modules/ui/components/controls/FormSection.jsx b/modules/ui/components/controls/FormSection.jsx index f4c2e2da..c4ac8b4e 100644 --- a/modules/ui/components/controls/FormSection.jsx +++ b/modules/ui/components/controls/FormSection.jsx @@ -6,7 +6,7 @@ export class StackSection extends React.Component { render() { const {title, children} = this.props; return - + <Title>{title} {children} ; } diff --git a/modules/ui/styles/common.less b/modules/ui/styles/common.less index 0809554e..32d9a287 100644 --- a/modules/ui/styles/common.less +++ b/modules/ui/styles/common.less @@ -24,3 +24,15 @@ .inlineBlock { display: inline-block; } + +a { + color: @font-color; + text-decoration: underline; + &:hover { + color: @color-text-highlight + } +} + +.scrollable { + overflow: auto; +} \ No newline at end of file diff --git a/modules/ui/styles/theme.less b/modules/ui/styles/theme.less index 85e684e2..77e47c97 100644 --- a/modules/ui/styles/theme.less +++ b/modules/ui/styles/theme.less @@ -24,5 +24,7 @@ @color-neutral: #66727d; @color-highlight: #003f5d; +@color-text-highlight: #9cdaf7; + //@work-area-toolbar-bg-color: ; //@work-area-toolbar-font-color: ; diff --git a/web/app/cad/dom/components/UISystem.jsx b/web/app/cad/dom/components/UISystem.jsx index 1476f1e7..505b4c12 100644 --- a/web/app/cad/dom/components/UISystem.jsx +++ b/web/app/cad/dom/components/UISystem.jsx @@ -5,9 +5,12 @@ import MenuHolder from '../menu/MenuHolder'; import WindowSystem from 'ui/WindowSystem'; import ActionInfo from '../actionInfo/ActionInfo'; import ContributedComponents from './ContributedComponents'; +import {stream} from '../../../../../modules/lstream'; export default class UISystem extends React.Component { + onCloseAll = stream(); + render() { return
@@ -26,11 +29,13 @@ export default class UISystem extends React.Component { closeAllUpPopups = () => { this.context.services.menu.closeAll(); this.context.services.action.showHintFor(null); + this.onCloseAll.next(); }; getChildContext() { return { - closeAllUpPopups: this.closeAllUpPopups + closeAllUpPopups: this.closeAllUpPopups, + onCloseAll: this.onCloseAll } } @@ -39,7 +44,8 @@ export default class UISystem extends React.Component { }; static childContextTypes = { - closeAllUpPopups: PropTypes.func + closeAllUpPopups: PropTypes.func, + onCloseAll: PropTypes.object }; } diff --git a/web/app/cad/dom/menu/menuUtils.js b/web/app/cad/dom/menu/menuUtils.js index e28d4bcf..8df7c511 100644 --- a/web/app/cad/dom/menu/menuUtils.js +++ b/web/app/cad/dom/menu/menuUtils.js @@ -1,6 +1,9 @@ -export const menuAboveElementHint = el => ({ - orientationUp: true, - flatBottom: true, - x: el.offsetParent.offsetParent.offsetLeft + el.offsetLeft, - y: el.offsetParent.offsetHeight - el.offsetTop -}); +export const menuAboveElementHint = el => { + let {top, left, bottom} = el.getBoundingClientRect(); + return ({ + orientationUp: true, + flatBottom: true, + x: left, + y: document.documentElement.clientHeight - top + }); +}; diff --git a/web/app/cad/part/menuConfig.js b/web/app/cad/part/menuConfig.js index ab420d3f..10196fb2 100644 --- a/web/app/cad/part/menuConfig.js +++ b/web/app/cad/part/menuConfig.js @@ -2,7 +2,7 @@ export default [ { id: 'file', cssIcons: ['file'], - actions: ['Save', 'StlExport', 'ImagePngExport', '-', 'IMPORT_STL', '-', 'ReassignSketch'] + actions: ['Save', 'StlExport', 'ImagePngExport', 'NativeFormatExport', '-', 'NativeFormatImport', '-', 'ReassignSketch'] }, { id: 'craft',