Merge pull request #1557 from metabase/date-before-after

Add Tooltip component, use for Calendar before/after buttons

frontend/src/components/Popover.jsx

@@ -21,7 +21,11 @@ export default class Popover extends Component {
 
     static defaultProps = {
         isOpen: true,
-        hasArrow: true
+        hasArrow: true,
+        verticalAttachments: ["top", "bottom"],
+        horizontalAttachments: ["center", "left", "right"],
+        targetOffsetX: 24,
+        targetOffsetY: 5
     };
 
     componentWillMount() {
@@ -120,11 +124,7 @@ export default class Popover extends Component {
     _renderPopover() {
         if (this.props.isOpen) {
             // popover is open, lets do this!
-            React.render(
-                <div className="Popover-backdrop">
-                    {this._popoverComponent()}
-                </div>
-            , this._popoverElement);
+            React.render(this._popoverComponent(), this._popoverElement);
 
             var tetherOptions = {};
 
@@ -154,23 +154,23 @@ export default class Popover extends Component {
 
                 // horizontal
                 best = this._getBestAttachmentOptions(
-                    tetherOptions, best, ["center", "left", "right"], ["left", "right"],
+                    tetherOptions, best, this.props.horizontalAttachments, ["left", "right"],
                     (best, attachmentX) => ({
                         ...best,
                         attachmentX: attachmentX,
                         targetAttachmentX: "center",
-                        offsetX: ({ "center": 0, "left": -24, "right": 24 })[attachmentX]
+                        offsetX: ({ "center": 0, "left": -(this.props.targetOffsetX), "right": this.props.targetOffsetX })[attachmentX]
                     })
                 );
 
                 // vertical
                 best = this._getBestAttachmentOptions(
-                    tetherOptions, best, ["top", "bottom"], ["top", "bottom"],
+                    tetherOptions, best, this.props.verticalAttachments, ["top", "bottom"],
                     (best, attachmentY) => ({
                         ...best,
                         attachmentY: attachmentY,
                         targetAttachmentY: (attachmentY === "top" ? "bottom" : "top"),
-                        offsetY: ({ "top": 5, "bottom": -5 })[attachmentY]
+                        offsetY: ({ "top": this.props.targetOffsetY, "bottom": -(this.props.targetOffsetY) })[attachmentY]
                     })
                 );
 

frontend/src/components/Tooltip.jsx

+import React, { Component, PropTypes } from "react";
+
+import Popover from "./Popover.jsx";
+
+export default class Tooltip extends Component {
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            isOpen: false
+        };
+    }
+
+    static propTypes = {};
+    static defaultProps = {};
+
+    render() {
+        let { tooltipElement } = this.props;
+        return (
+            <span
+                onMouseEnter={() => this.setState({ isOpen: true })}
+                onMouseLeave={() => this.setState({ isOpen: false })}
+            >
+                {this.props.children}
+                <Popover
+                    isOpen={this.state.isOpen}
+                    className="PopoverBody--tooltip"
+                    verticalAttachments={["bottom", "top"]}
+                    targetOffsetY={10}
+                >
+                    { typeof tooltipElement === "string" ?
+                        <div className="p2" style={{maxWidth: "12em"}}>{tooltipElement}</div>
+                    :
+                        {tooltipElement}
+                    }
+                </Popover>
+            </span>
+        );
+    }
+}

frontend/src/components/calendar/calendar.css

@@ -50,12 +50,8 @@
 .Calendar-day--selected,
 .Calendar-day--selected-end {
     color: white !important;
-    background-color: var(--purple-light-color);
-}
-
-.Calendar-day--selected,
-.Calendar-day--selected-end {
     background-color: var(--purple-color);
+    z-index: 1;
 }
 
 .Calendar-day--in-range {
@@ -106,6 +102,7 @@
   text-align: center;
   vertical-align: middle;
   line-height: 20px;
+  z-index: 2;
 }
 
 .circle-button:hover {

frontend/src/components/popover/popover.css

@@ -19,6 +19,14 @@
 	flex-direction: column;
 }
 
+.PopoverBody.PopoverBody--tooltip {
+	color: white;
+	font-weight: bold;
+	background-color: rgb(76,71,71);
+	border: none;
+	pointer-events: none;
+}
+
 /* shared arrow styles */
 .PopoverBody--withArrow:before,
 .PopoverBody--withArrow:after {
@@ -98,24 +106,36 @@
 	top: -20px;
 	border-bottom-color: #ddd;
 }
+.tether-element-attached-top .PopoverBody--tooltip:before {
+	border-bottom: none;
+}
 
 /* create a smaller inset arrow on the top */
 .tether-element-attached-top .PopoverBody--withArrow:after {
 	top: -18px;
 	border-bottom-color: #fff;
 }
+.tether-element-attached-top .PopoverBody--tooltip:after {
+	border-bottom-color: rgb(76,71,71);
+}
 
 /* create a slightly larger arrow on the bottom for border purposes */
 .tether-element-attached-bottom .PopoverBody--withArrow:before {
 	bottom: -20px;
 	border-top-color: #ddd;
 }
+.tether-element-attached-bottom .PopoverBody--tooltip:before {
+	border-top: none;
+}
 
 /* create a smaller inset arrow on the bottom */
 .tether-element-attached-bottom .PopoverBody--withArrow:after {
 	bottom: -18px;
 	border-top-color: #fff;
 }
+.tether-element-attached-bottom .PopoverBody--tooltip:after {
+	border-top-color: rgb(76,71,71);
+}
 
 /* if the tether element is attached right, move our arrows right */
 .tether-target-attached-right .PopoverBody--withArrow:before,

frontend/src/query_builder/Calendar.jsx

@@ -3,6 +3,7 @@ import cx from 'classnames';
 import moment from "moment";
 
 import Icon from 'metabase/components/Icon.jsx';
+import Tooltip from 'metabase/components/Tooltip.jsx';
 
 const MODES = ['month', 'year', 'decade'];
 
@@ -133,10 +134,18 @@ export default class Calendar extends Component {
                     {weeks}
                 </div>
                 {this.props.onBeforeClick &&
-                    <a className="circle-button circle-button--top circle-button--left" onClick={this.props.onBeforeClick}>«</a>
+                    <div className="absolute top left z2" style={{marginTop: "-12px", marginLeft: "-12px"}}>
+                        <Tooltip tooltipElement={"Everything before " + this.props.selected.format("MMMM Do, YYYY")}>
+                            <a className="circle-button" onClick={this.props.onBeforeClick}>«</a>
+                        </Tooltip>
+                    </div>
                 }
                 {this.props.onAfterClick &&
-                    <a className="circle-button circle-button--bottom circle-button--right" onClick={this.props.onAfterClick}>»</a>
+                    <div className="absolute bottom right z2" style={{marginBottom: "-12px", marginRight: "-12px"}}>
+                        <Tooltip tooltipElement={"Everything after " + this.props.selected.format("MMMM Do, YYYY")}>
+                            <a className="circle-button" onClick={this.props.onAfterClick}>»</a>
+                        </Tooltip>
+                    </div>
                 }
             </div>
         );

frontend/src/query_builder/filters/pickers/SpecificDatePicker.jsx

@@ -84,7 +84,7 @@ export default class SpecificDatePicker extends Component {
                     />
                     <div className="py2 text-centered">
                         <Input
-                            className="input input--small text-bold text-grey-4"
+                            className="input input--small text-bold text-grey-4 text-centered"
                             style={{width: "100px"}}
                             value={startValue && moment(startValue).format("MM/DD/YYYY")}
                             placeholder={startPlaceholder}
@@ -92,7 +92,7 @@ export default class SpecificDatePicker extends Component {
                         />
                         <span className="px1">–</span>
                         <Input
-                            className="input input--small text-bold text-grey-4"
+                            className="input input--small text-bold text-grey-4 text-centered"
                             style={{width: "100px"}}
                             value={endValue && moment(endValue).format("MM/DD/YYYY")}
                             placeholder={endPlaceholder}