Moved tooltips to document root, added inventory list

dist/bundle.js

@@ -26722,7 +26722,7 @@
 	exports.default = function (element) {
 		let node = createDialogNode();
 		_reactDom2.default.render(_react2.default.cloneElement(element, { node }), node);
-		return true;
+		return node;
 	};
 
 	var _react = __webpack_require__(6);
@@ -44342,14 +44342,18 @@
 
 			const valueElement = this.props.tooltip ? _react2.default.createElement(
 				_TooltipToggle2.default,
-				{ className: 'value', content: this.props.tooltip, margin: this.props.tooltipMargin },
+				{ content: this.props.tooltip, margin: this.props.tooltipMargin },
 				_react2.default.createElement(
 					'div',
-					{ className: 'value-inner' },
+					{ className: 'value' },
 					_react2.default.createElement(
 						'div',
-						null,
-						this.props.value
+						{ className: 'value-inner' },
+						_react2.default.createElement(
+							'div',
+							null,
+							this.props.value
+						)
 					)
 				)
 			) : _react2.default.createElement(
@@ -44398,18 +44402,14 @@
 		value: true
 	});
 
-	var _extends2 = __webpack_require__(300);
-
-	var _extends3 = _interopRequireDefault(_extends2);
-
-	var _objectWithoutProperties2 = __webpack_require__(180);
-
-	var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
 	var _classnames = __webpack_require__(303);
 
 	var _classnames2 = _interopRequireDefault(_classnames);
 
+	var _createOverlay = __webpack_require__(297);
+
+	var _createOverlay2 = _interopRequireDefault(_createOverlay);
+
 	var _Overlay = __webpack_require__(380);
 
 	var _Overlay2 = _interopRequireDefault(_Overlay);
@@ -44426,7 +44426,17 @@
 
 			return _temp = super(...arguments), this.state = {
 				isDisplayed: false
-			}, this.open = () => this.setState({ isDisplayed: true }), this.close = () => this.setState({ isDisplayed: false }), _temp;
+			}, this.open = () => {
+				var _props = this.props;
+				const content = _props.content,
+				      margin = _props.margin;
+
+				this.node = (0, _createOverlay2.default)(_react2.default.createElement(
+					_Overlay2.default,
+					{ className: 'tooltip', position: 'top', trigger: this.triggerRef, margin: margin },
+					content
+				));
+			}, this.close = () => (0, _createOverlay.close)(this.node), _temp;
 		}
 
 		componentDidMount() {
@@ -44434,26 +44444,16 @@
 		}
 
 		render() {
-			var _props = this.props;
-			const children = _props.children,
-			      content = _props.content,
-			      margin = _props.margin,
-			      other = (0, _objectWithoutProperties3.default)(_props, ['children', 'content', 'margin']);
-			const isDisplayed = this.state.isDisplayed;
+			const children = this.props.children;
 
 
-			other.className = (0, _classnames2.default)('tooltip-wrapper', other.className);
+			const only = _react2.default.cloneElement(_react2.default.Children.only(children), {
+				onMouseEnter: this.open,
+				onMouseLeave: this.close,
+				ref: 'trigger'
+			});
 
-			return _react2.default.createElement(
-				'div',
-				(0, _extends3.default)({}, other, { ref: 'trigger', onMouseEnter: this.open, onMouseLeave: this.close }),
-				isDisplayed ? _react2.default.createElement(
-					_Overlay2.default,
-					{ className: 'tooltip', position: 'top', trigger: this.triggerRef, margin: margin },
-					content
-				) : null,
-				children
-			);
+			return only;
 		}
 	}
 	exports.default = Tooltip;
@@ -44604,6 +44604,7 @@
 			});
 
 			delete other.margin;
+			delete other.node;
 			delete other.position;
 			delete other.trigger;
 
@@ -47907,9 +47908,52 @@
 					_Scroll2.default,
 					{ className: 'list' },
 					_react2.default.createElement(
-						'ul',
+						'table',
 						null,
-						list
+						_react2.default.createElement(
+							'thead',
+							null,
+							_react2.default.createElement(
+								'tr',
+								null,
+								_react2.default.createElement(
+									'td',
+									{ className: 'type' },
+									'Gruppe'
+								),
+								_react2.default.createElement(
+									'td',
+									{ className: 'number' },
+									'#'
+								),
+								_react2.default.createElement(
+									'td',
+									{ className: 'name' },
+									'Gegenstand'
+								),
+								_react2.default.createElement(
+									'td',
+									{ className: 'price' },
+									'Wert'
+								),
+								_react2.default.createElement(
+									'td',
+									{ className: 'weight' },
+									'Gewicht'
+								),
+								_react2.default.createElement(
+									'td',
+									{ className: 'where' },
+									'Wo getragen'
+								),
+								_react2.default.createElement('td', { className: 'inc' })
+							)
+						),
+						_react2.default.createElement(
+							'tbody',
+							null,
+							list
+						)
 					)
 				)
 			);
@@ -48552,7 +48596,8 @@
 
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-	var _items = {};
+	var _itemsById = {};
+	var _items = [];
 	var _filterText = '';
 	var _sortOrder = 'name';
 
@@ -48567,15 +48612,11 @@
 	class _InventoryStore extends _Store2.default {
 
 		get(id) {
-			return _items[id];
+			return _itemsById[id];
 		}
 
 		getAll() {
-			let arr = [];
-			for (const id in _items) {
-				arr.push(_items[id]);
-			}
-			return arr;
+			return _items.map(e => _itemsById[e]);
 		}
 
 		getFilterText() {

js/components/Overlay.js

@@ -117,6 +117,7 @@ export default class Overlay extends Component {
 		});
 
 		delete other.margin;
+		delete other.node;
 		delete other.position;
 		delete other.trigger;
 

js/components/Overlay.scss

@@ -2,7 +2,11 @@
 	position: fixed;
 	border: 2px solid $color8;
 	background: $background2;
-	padding: 21px 14px 18px;
+	color: $color2;
+
+	> div {
+		padding: 21px 14px 18px;
+	}
 
 	h4 {
 		font: bold 14px/14px Alegreya SC;
@@ -30,10 +34,6 @@
 		}
 	}
 
-	p.calc-text {
-		font-style: italic;
-	}
-
 	&.overlay-top {
 		&:after {
 			content: "";
@@ -48,4 +48,12 @@
 			bottom: -8px;
 		}
 	}
+
+	> .calc-attr-overlay {
+		width: 280px;
+
+		p.calc-text {
+			font-style: italic;
+		}
+	}
 }

js/components/TooltipToggle.js

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import createOverlay, { close } from '../utils/createOverlay';
 import Overlay from './Overlay';
 import React, { Component, PropTypes } from 'react';
 
@@ -10,32 +11,34 @@ export default class Tooltip extends Component {
 	};
 
 	state = {
-		isDisplayed: false,
+		isDisplayed: false
 	};
 
 	triggerRef;
+	node;
 
 	componentDidMount() {
 		this.triggerRef = this.refs.trigger;
 	}
 
-	open = () => this.setState({ isDisplayed: true });
-	close = () => this.setState({ isDisplayed: false });
+	open = () => {
+		const { content, margin } = this.props;
+		this.node = createOverlay(<Overlay className="tooltip" position="top" trigger={this.triggerRef} margin={margin}>
+			{content}
+		</Overlay>);
+	};
+	close = () => close(this.node);
 
 	render() {
 
-		const { children, content, margin, ...other } = this.props;
-		const { isDisplayed } = this.state;
+		const { children } = this.props;
 
-		other.className = classNames('tooltip-wrapper', other.className);
+		const only = React.cloneElement(React.Children.only(children), {
+			onMouseEnter: this.open,
+			onMouseLeave: this.close,
+			ref: 'trigger'
+		});
 
-		return (
-			<div {...other} ref="trigger" onMouseEnter={this.open} onMouseLeave={this.close}>
-				{ isDisplayed ? <Overlay className="tooltip" position="top" trigger={this.triggerRef} margin={margin}>
-					{content}
-				</Overlay> : null }
-				{children}
-			</div>
-		);
+		return only;
 	}
 }

js/stores/InventoryStore.js

@@ -2,7 +2,8 @@ import AppDispatcher from '../dispatcher/AppDispatcher';
 import Store from './Store';
 import ActionTypes from '../constants/ActionTypes';
 
-var _items = {};
+var _itemsById = {};
+var _items = [];
 var _filterText = '';
 var _sortOrder = 'name';
 
@@ -17,15 +18,11 @@ function _updateSortOrder(option) {
 class _InventoryStore extends Store {
 
 	get(id) {
-		return _items[id];
+		return _itemsById[id];
 	}
 
 	getAll() {
-		let arr = [];
-		for (const id in _items) {
-			arr.push(_items[id]);
-		}
-		return arr;
+		return _items.map(e => _itemsById[e]);
 	}
 
 	getFilterText() {

js/utils/createOverlay.js

@@ -16,5 +16,5 @@ export function createDialogNode() {
 export default function(element) {
 	let node = createDialogNode();
 	ReactDOM.render( React.cloneElement(element, { node }), node );
-	return true;
+	return node;
 }

js/views/attributes/Attribute.scss

@@ -53,10 +53,6 @@
 						overflow: hidden;
 					}
 				}
-
-				> .overlay {
-					width: 284px;
-				}
 			}
 
 			> .btn-round {

js/views/attributes/AttributeBorder.js

@@ -17,8 +17,8 @@ export default class AttributeBorder extends Component {
 		const className = classNames( 'attr', this.props.className );
 
 		const valueElement = this.props.tooltip ? (
-			<TooltipToggle className="value" content={this.props.tooltip} margin={this.props.tooltipMargin}>
-				<div className="value-inner"><div>{this.props.value}</div></div>
+			<TooltipToggle content={this.props.tooltip} margin={this.props.tooltipMargin}>
+				<div className="value"><div className="value-inner"><div>{this.props.value}</div></div></div>
 			</TooltipToggle>
 		) : (
 			<div className="value"><div className="value-inner"><div>{this.props.value}</div></div></div>

js/views/items/Inventory.js

@@ -54,11 +54,24 @@ export default class Inventory extends Component {
 						<BorderButton label="Erstellen" onClick={this.showItemCreation} />
 				</div>
 				<Scroll className="list">
-					<ul>
-						{
-							list
-						}
-					</ul>
+					<table>
+						<thead>
+							<tr>
+								<td className="type">Gruppe</td>
+								<td className="number">#</td>
+								<td className="name">Gegenstand</td>
+								<td className="price">Wert</td>
+								<td className="weight">Gewicht</td>
+								<td className="where">Wo getragen</td>
+								<td className="inc"></td>
+							</tr>
+						</thead>
+						<tbody>
+							{
+								list
+							}
+						</tbody>
+					</table>
 				</Scroll>
 			</div>
 		);