Initial Commit Rework

frontend/src/Components/Tooltip/Popover.css

@@ -0,0 +1,104 @@
+.tether {
+  z-index: 2000;
+}
+
+.popoverContainer {
+  margin: 10px 15px;
+}
+
+.popover {
+  position: relative;
+  background-color: $white;
+  box-shadow: 0 5px 10px $popoverShadowColor;
+}
+
+.arrow,
+.arrow::after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-width: 11px;
+  border-style: solid;
+  border-color: transparent;
+}
+
+.arrow::after {
+  border-width: 10px;
+  content: '';
+}
+
+.top {
+  bottom: -11px;
+  left: 50%;
+  margin-left: -11px;
+  border-top-color: $popoverArrowBorderColor;
+  border-bottom-width: 0;
+
+  &::after {
+    bottom: 1px;
+    margin-left: -10px;
+    border-top-color: $white;
+    border-bottom-width: 0;
+    content: ' ';
+  }
+}
+
+.right {
+  top: 50%;
+  left: -11px;
+  margin-top: -11px;
+  border-right-color: $popoverArrowBorderColor;
+  border-left-width: 0;
+
+  &::after {
+    bottom: -10px;
+    left: 1px;
+    border-right-color: $white;
+    border-left-width: 0;
+    content: ' ';
+  }
+}
+
+.bottom {
+  top: -11px;
+  left: 50%;
+  margin-left: -11px;
+  border-top-width: 0;
+  border-bottom-color: $popoverArrowBorderColor;
+
+  &::after {
+    top: 1px;
+    margin-left: -10px;
+    border-top-width: 0;
+    border-bottom-color: $white;
+    content: ' ';
+  }
+}
+
+.left {
+  top: 50%;
+  right: -11px;
+  margin-top: -11px;
+  border-right-width: 0;
+  border-left-color: $popoverArrowBorderColor;
+
+  &::after {
+    right: 1px;
+    bottom: -10px;
+    border-right-width: 0;
+    border-left-color: $white;
+    content: ' ';
+  }
+}
+
+.title {
+  padding: 10px 20px;
+  border-bottom: 1px solid $popoverTitleBorderColor;
+  background-color: $popoverTitleBackgroundColor;
+  font-size: 16px;
+}
+
+.body {
+  padding: 20px;
+}

frontend/src/Components/Tooltip/Popover.js

@@ -0,0 +1,136 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TetherComponent from 'react-tether';
+import classNames from 'classnames';
+import { tooltipPositions } from 'Helpers/Props';
+import styles from './Popover.css';
+
+const baseTetherOptions = {
+  skipMoveElement: true,
+  constraints: [
+    {
+      to: 'window',
+      attachment: 'together',
+      pin: true
+    }
+  ]
+};
+
+const tetherOptions = {
+  [tooltipPositions.TOP]: {
+    ...baseTetherOptions,
+    attachment: 'bottom center',
+    targetAttachment: 'top center'
+  },
+
+  [tooltipPositions.RIGHT]: {
+    ...baseTetherOptions,
+    attachment: 'middle left',
+    targetAttachment: 'middle right'
+  },
+
+  [tooltipPositions.BOTTOM]: {
+    ...baseTetherOptions,
+    attachment: 'top center',
+    targetAttachment: 'bottom center'
+  },
+
+  [tooltipPositions.LEFT]: {
+    ...baseTetherOptions,
+    attachment: 'middle right',
+    targetAttachment: 'middle left'
+  }
+};
+
+class Popover extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onClick = () => {
+    this.setState({ isOpen: !this.state.isOpen });
+  }
+
+  onMouseEnter = () => {
+    this.setState({ isOpen: true });
+  }
+
+  onMouseLeave = () => {
+    this.setState({ isOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      anchor,
+      title,
+      body,
+      position
+    } = this.props;
+
+    return (
+      <TetherComponent
+        classes={{
+          element: styles.tether
+        }}
+        {...tetherOptions[position]}
+      >
+        <span
+          // onClick={this.onClick}
+          onMouseEnter={this.onMouseEnter}
+          onMouseLeave={this.onMouseLeave}
+        >
+          {anchor}
+        </span>
+
+        {
+          this.state.isOpen &&
+            <div className={styles.popoverContainer}>
+              <div className={styles.popover}>
+                <div
+                  className={classNames(
+                    styles.arrow,
+                    styles[position]
+                  )}
+                />
+
+                <div className={styles.title}>
+                  {title}
+                </div>
+
+                <div className={styles.body}>
+                  {body}
+                </div>
+              </div>
+            </div>
+        }
+      </TetherComponent>
+    );
+  }
+}
+
+Popover.propTypes = {
+  anchor: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
+  body: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  position: PropTypes.oneOf(tooltipPositions.all)
+};
+
+Popover.defaultProps = {
+  position: tooltipPositions.TOP
+};
+
+export default Popover;

frontend/src/Components/Tooltip/Tooltip.css

@@ -0,0 +1,161 @@
+.tether {
+  z-index: 2000;
+}
+
+.tooltipContainer {
+  margin: 10px 15px;
+}
+
+.tooltip {
+  position: relative;
+
+  &.default {
+    background-color: $white;
+    box-shadow: 0 5px 10px $popoverShadowColor;
+  }
+
+  &.inverse {
+    background-color: $themeDarkColor;
+    box-shadow: 0 5px 10px $popoverShadowInverseColor;
+  }
+}
+
+.arrow,
+.arrow::after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-width: 11px;
+  border-style: solid;
+  border-color: transparent;
+}
+
+.arrow::after {
+  border-width: 10px;
+  content: '';
+}
+
+.top {
+  bottom: -11px;
+  left: 50%;
+  margin-left: -11px;
+  border-bottom-width: 0;
+
+  &::after {
+    bottom: 1px;
+    margin-left: -10px;
+    border-bottom-width: 0;
+    content: ' ';
+
+    &.default {
+      border-top-color: $popoverArrowBorderColor;
+    }
+
+    &.inverse {
+      border-top-color: $popoverArrowBorderInverseColor;
+    }
+  }
+
+  &.default {
+    border-top-color: $popoverArrowBorderColor;
+  }
+
+  &.inverse {
+    border-top-color: $popoverArrowBorderInverseColor;
+  }
+}
+
+.right {
+  top: 50%;
+  left: -11px;
+  margin-top: -11px;
+  border-left-width: 0;
+
+  &::after {
+    bottom: -10px;
+    left: 1px;
+    border-left-width: 0;
+    content: ' ';
+
+    &.default {
+      border-right-color: $popoverArrowBorderColor;
+    }
+
+    &.inverse {
+      border-right-color: $popoverArrowBorderInverseColor;
+    }
+  }
+
+  &.default {
+    border-right-color: $popoverArrowBorderColor;
+  }
+
+  &.inverse {
+    border-right-color: $popoverArrowBorderInverseColor;
+  }
+}
+
+.bottom {
+  top: -11px;
+  left: 50%;
+  margin-left: -11px;
+  border-top-width: 0;
+
+  &::after {
+    top: 1px;
+    margin-left: -10px;
+    border-top-width: 0;
+    content: ' ';
+
+    &.default {
+      border-bottom-color: $popoverArrowBorderColor;
+    }
+
+    &.inverse {
+      border-bottom-color: $popoverArrowBorderInverseColor;
+    }
+  }
+
+  &.default {
+    border-bottom-color: $popoverArrowBorderColor;
+  }
+
+  &.inverse {
+    border-bottom-color: $popoverArrowBorderInverseColor;
+  }
+}
+
+.left {
+  top: 50%;
+  right: -11px;
+  margin-top: -11px;
+  border-right-width: 0;
+
+  &::after {
+    right: 1px;
+    bottom: -10px;
+    border-right-width: 0;
+    content: ' ';
+
+    &.default {
+      border-left-color: $popoverArrowBorderColor;
+    }
+
+    &.inverse {
+      border-left-color: $popoverArrowBorderInverseColor;
+    }
+  }
+
+  &.default {
+    border-left-color: $popoverArrowBorderColor;
+  }
+
+  &.inverse {
+    border-left-color: $popoverArrowBorderInverseColor;
+  }
+}
+
+.body {
+  padding: 5px;
+}

frontend/src/Components/Tooltip/Tooltip.js

@@ -0,0 +1,151 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TetherComponent from 'react-tether';
+import classNames from 'classnames';
+import { kinds, tooltipPositions } from 'Helpers/Props';
+import styles from './Tooltip.css';
+
+const baseTetherOptions = {
+  skipMoveElement: true,
+  constraints: [
+    {
+      to: 'window',
+      attachment: 'together',
+      pin: true
+    }
+  ]
+};
+
+const tetherOptions = {
+  [tooltipPositions.TOP]: {
+    ...baseTetherOptions,
+    attachment: 'bottom center',
+    targetAttachment: 'top center'
+  },
+
+  [tooltipPositions.RIGHT]: {
+    ...baseTetherOptions,
+    attachment: 'middle left',
+    targetAttachment: 'middle right'
+  },
+
+  [tooltipPositions.BOTTOM]: {
+    ...baseTetherOptions,
+    attachment: 'top center',
+    targetAttachment: 'bottom center'
+  },
+
+  [tooltipPositions.LEFT]: {
+    ...baseTetherOptions,
+    attachment: 'middle right',
+    targetAttachment: 'middle left'
+  }
+};
+
+class Tooltip extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._closeTimeout = null;
+
+    this.state = {
+      isOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onClick = () => {
+    this.setState({ isOpen: !this.state.isOpen });
+  }
+
+  onMouseEnter = () => {
+    if (this._closeTimeout) {
+      clearTimeout(this._closeTimeout);
+    }
+
+    this.setState({ isOpen: true });
+  }
+
+  onMouseLeave = () => {
+    this._closeTimeout = setTimeout(() => {
+      this.setState({ isOpen: false });
+    }, 100);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      anchor,
+      tooltip,
+      kind,
+      position
+    } = this.props;
+
+    return (
+      <TetherComponent
+        classes={{
+          element: styles.tether
+        }}
+        {...tetherOptions[position]}
+      >
+        <span
+          // onClick={this.onClick}
+          onMouseEnter={this.onMouseEnter}
+          onMouseLeave={this.onMouseLeave}
+        >
+          {anchor}
+        </span>
+
+        {
+          this.state.isOpen &&
+            <div
+              className={styles.tooltipContainer}
+              onMouseEnter={this.onMouseEnter}
+              onMouseLeave={this.onMouseLeave}
+            >
+              <div
+                className={classNames(
+                  styles.tooltip,
+                  styles[kind]
+                )}
+              >
+                <div
+                  className={classNames(
+                    styles.arrow,
+                    styles[kind],
+                    styles[position]
+                  )}
+                />
+
+                <div className={styles.body}>
+                  {tooltip}
+                </div>
+              </div>
+            </div>
+        }
+      </TetherComponent>
+    );
+  }
+}
+
+Tooltip.propTypes = {
+  anchor: PropTypes.node.isRequired,
+  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  kind: PropTypes.oneOf([kinds.DEFAULT, kinds.INVERSE]),
+  position: PropTypes.oneOf(tooltipPositions.all)
+};
+
+Tooltip.defaultProps = {
+  kind: kinds.DEFAULT,
+  position: tooltipPositions.TOP
+};
+
+export default Tooltip;