qw/timer (#23)

* Rename logo and add 32x32 version

* Set timer icon if a timer is running

* Do not query activities on initialization

* Show timer in bubble if timed activity exists

* Pass timed activity to App

* Code cleanup

* Show timer view and stop timer

* Make hours optional

* Use booked seconds instead of hours

* Add type submit to form button

* Define colors as sass variables⎄

* Style timer view

* Show start timer submit label

* Update view layouts and content

* Update version and changelog

* Dyanically set iframe height

* Reduce h1 font size

* Add svg webpack loader

* Parse empty string (TimeInputParser)

* Forward ref in Popup component

* Start time on current day only, format buttons

* Improve styling

* Set standard height as iframe default height, validate form

* Upgrade packages to supress react warning

* Show activity form in popup after timer was stoped

* Use stop-watch icon in timer view

* Fix empty description

* Close TimerView if timer stopped for current service

* Style timerview

* Improve timer view styling

* qw/setting-time-tracking-hh-mm (#24)

* Format duration depending on settingTimeTrackingHHMM

* Fix formatDuation without second argument

* Fix time format after updating bubble

* Add tests for formatDuration

src/js/components/Bubble.js

@@ -1,22 +1,46 @@
 import React from "react"
 import PropTypes from "prop-types"
-import logoUrl from "images/logo.png"
+import mocoLogo from "images/moco-32x32.png"
+import mocoTimerLogo from "images/moco-timer-32x32.png"
+import { parseISO } from "date-fns"
+import { formatDuration } from "utils"
+import Timer from "./shared/Timer"
 
-const Bubble = ({ bookedHours }) => (
-  <div className="moco-bx-bubble-inner">
-    <img className="moco-bx-logo" src={chrome.extension.getURL(logoUrl)} />
-    {bookedHours > 0 ? (
-      <span className="moco-bx-booked-hours">{bookedHours.toFixed(2)}</span>
-    ) : null}
-  </div>
-)
+const Bubble = ({ bookedSeconds, timedActivity, settingTimeTrackingHHMM }) => {
+  const logo = timedActivity ? mocoTimerLogo : mocoLogo
+
+  return (
+    <div className="moco-bx-bubble-inner">
+      <img className="moco-bx-logo" src={chrome.extension.getURL(logo)} />
+      {!timedActivity && bookedSeconds > 0 && (
+        <span className="moco-bx-booked-hours">
+          {formatDuration(bookedSeconds, { settingTimeTrackingHHMM, showSeconds: false })}
+        </span>
+      )}
+      {timedActivity && (
+        <Timer
+          className="text-red"
+          startedAt={parseISO(timedActivity.timer_started_at)}
+          offset={timedActivity.seconds}
+          style={{ marginBottom: "3px", fontSize: "12px" }}
+        />
+      )}
+    </div>
+  )
+}
 
 Bubble.propTypes = {
-  bookedHours: PropTypes.number,
+  bookedSeconds: PropTypes.number,
+  timedActivity: PropTypes.shape({
+    timer_started_at: PropTypes.string.isRequired,
+    seconds: PropTypes.number.isRequired,
+  }),
+  settingTimeTrackingHHMM: PropTypes.bool,
 }
 
 Bubble.defaultProps = {
-  bookedHours: 0,
+  bookedSeconds: 0,
+  settingTimeTrackingHHMM: false,
 }
 
 export default Bubble