Add simple tooltip for events

Author: jnbt

web/static/css/widgets/_calendar.sass

@@ -6,6 +6,7 @@
   +widget
   background: $backgroundColor
   font-size: 12px
+  overflow: visible
 
   .Calendar
     width: 100%
@@ -111,17 +112,15 @@
     background: $backgroundColor
     color: $black
     margin: 1px 2px
-    padding: 1px 8px
-    overflow: hidden
-    text-overflow: ellipsis
-    white-space: nowrap
     text-align: left
     border-color: darken($backgroundColor, 15%)
     border-style: solid
     border-left-width: 0
     border-right-width: 0
     border-top-width: 1px
     border-bottom-width: 1px
+    position: relative
+    height: 20px
 
     &.isStarted
       border-top-left-radius: 8px
@@ -131,3 +130,80 @@
       border-top-right-radius: 8px
       border-bottom-right-radius: 8px
       border-right-width: 1px
+
+    .EventTitle
+      position: absolute
+      left: 0
+      right: 0
+      bottom: 0
+      top: 0
+      padding: 1px 8px
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+      pointer-events: none
+
+  .EventPopOver
+    $arrow: 10px
+    $width: 360px
+
+    position: absolute
+    z-index: 9999
+    cursor: default
+    pointer-events: none
+
+    .Content
+      position: relative
+      top: $arrow
+      width: $width
+      left: -$width / 2
+      background: white
+      text-align: left
+      box-shadow: 1px 1px 10px #d0d0d0
+      padding: 10px
+
+    &::before
+      content: ''
+      border: solid transparent
+      height: 0
+      width: 0
+      position: absolute
+      pointer-events: none
+      border-color: transparent
+      border-bottom-color: white
+      border-width: $arrow
+      margin-left: -$arrow
+      margin-top: -$arrow
+
+    h2
+      font-size: 14px
+      font-weight: normal
+      margin: 0
+      float: right
+      padding: 3px
+      display: inline
+      width: auto
+      background: $borderColor
+
+    h3
+      font-size: 14px
+      font-weight: bold
+      line-height: 23px
+      margin: 0
+
+      .Title
+        padding: 3px 5px
+        border-radius: 8px
+        border-color: darken($backgroundColor, 15%)
+        border-style: solid
+        border-width: 1px
+
+      .Unconfirmed
+        color: #ccc
+        font-weight: normal
+        padding-left: 10px
+
+    table
+      margin-top: 10px
+      th
+        padding-right: 5px

web/static/js/widgets/calendar/index.js

@@ -160,6 +160,13 @@ function formatWeekLabel(date) {
   return moment(date).isoWeek()
 }
 
+function formatEventDate(event) {
+  if (event.allDay) {
+    return `${moment(event.start).format("L")} - ${moment(event.end).format("L")}`
+  }
+  return moment(event.start).format("LLL")
+}
+
 const LabelCells = React.createClass({
   render(){
     return (
@@ -290,13 +297,13 @@ function isUnconfirmed(event) {
 }
 
 function colorizeEvent(event) {
-  const color = utils.hex2components(event.color)
+  const color      = utils.hex2components(event.color)
   const border     = utils.lightenColor(color, 0.85)
   const borderRgba = utils.components2rgba(border)
 
   if(isUnconfirmed(event)) {
-    const alternate  = utils.lightenColor(color, 1.2)
-    const altRgba    = utils.components2rgba(alternate)
+    const alternate = utils.lightenColor(color, 1.2)
+    const altRgba   = utils.components2rgba(alternate)
     return {
       background: `repeating-linear-gradient(
         45deg,
@@ -316,6 +323,9 @@ function colorizeEvent(event) {
 }
 
 const Event = React.createClass({
+  getInitialState() {
+    return { tooltip: null }
+  },
   render(){
     const {event, from, to} = this.props
     const className = classnames("Event", {
@@ -329,8 +339,71 @@ const Event = React.createClass({
       borderColor: event.color
     }
     return (
-      <div className={className} style={colorizeEvent(event)}>
-        {event.title}
+      <div
+        className={className}
+        style={colorizeEvent(event)}
+        onMouseMove={this._onEnter}
+        onMouseEnter={this._onEnter}
+        onMouseOut={this._onExit}
+      >
+        <div className="EventTitle">{event.title}</div>
+        <EventPopOver
+          event={event}
+          position={this.state.tooltip}
+        />
+      </div>
+    )
+  },
+  _onEnter(e) {
+    const tooltip = {
+      x: e.nativeEvent.offsetX,
+      y: e.nativeEvent.offsetY
+    }
+    this.setState({tooltip})
+  },
+  _onExit() {
+    this.setState({tooltip: null})
+  }
+})
+
+const EventPopOver = React.createClass({
+  getDefaultProps: function() {
+   return {
+     offset: 5,
+   }
+  },
+  render() {
+    const {event, position} = this.props
+    if (!position) return <div />
+
+    const style = {
+      left: position.x,
+      top: position.y + this.props.offset,
+    }
+
+    return (
+      <div className="EventPopOver" style={style}>
+        <div className="Content">
+          <h2>
+            {event.calendar}
+          </h2>
+          <h3>
+            <span className="Title" style={colorizeEvent(event)}>
+              {event.title}
+            </span>
+            {isUnconfirmed(event) &&
+              <span className="Unconfirmed">(Unconfirmed)</span>
+            }
+          </h3>
+          <table>
+            <tbody>
+              <tr>
+                <th>Date:</th>
+                <td>{formatEventDate(event)}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     )
   }