72626a6c42
* 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
47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
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 = ({ 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 = {
|
|
bookedSeconds: PropTypes.number,
|
|
timedActivity: PropTypes.shape({
|
|
timer_started_at: PropTypes.string.isRequired,
|
|
seconds: PropTypes.number.isRequired,
|
|
}),
|
|
settingTimeTrackingHHMM: PropTypes.bool,
|
|
}
|
|
|
|
Bubble.defaultProps = {
|
|
bookedSeconds: 0,
|
|
settingTimeTrackingHHMM: false,
|
|
}
|
|
|
|
export default Bubble
|