diff --git a/src/components/timeline.ts b/src/components/timeline.ts index 88562e37..0f68c26a 100644 --- a/src/components/timeline.ts +++ b/src/components/timeline.ts @@ -176,11 +176,17 @@ export class FrigateCardTimeline extends LitElement { // eslint-disable-next-line @typescript-eslint/no-unused-vars protected updated(_changedProperties: PropertyValues): void { - // Configuration for the Timeline + // Configuration for the Timeline, see: + // https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options const options = { + cluster: { + showStipes: true, + maxItems: 3, + }, minHeight: '300px', + maxHeight: '300px', margin: { - item: 75 + 10, + item: 50, axis: 75 + 10, }, xss: { @@ -188,13 +194,14 @@ export class FrigateCardTimeline extends LitElement { filterOptions: { whiteList: { 'frigate-card-timeline-event': ['thumbnail', 'label', 'media_id'], + 'div': ['title'], }, }, }, }; // Create a Timeline - if (this._timelineRef.value && !this._timeline) { + if (this._timelineRef.value) { this._timeline = new Timeline( this._timelineRef.value, this._buildDataset(), diff --git a/src/scss/timeline-event.scss b/src/scss/timeline-event.scss index 3f974d39..b59a6cf7 100644 --- a/src/scss/timeline-event.scss +++ b/src/scss/timeline-event.scss @@ -7,10 +7,10 @@ img { width: 75px; height: 75px; - box-shadow: 0px 0px 20px 5px var(--primary-background-color); display: block; border-radius: 5px; transition: transform 0.2s linear; + border: 1px solid black; } img:hover { diff --git a/src/scss/timeline.scss b/src/scss/timeline.scss index 423ac747..7aa4bd41 100644 --- a/src/scss/timeline.scss +++ b/src/scss/timeline.scss @@ -8,6 +8,11 @@ .vis-item { border-color: var(--primary-color); + background: none; +} + +.vis-item:hover { + z-index: 2; } .vis-item.vis-box { @@ -17,3 +22,15 @@ .vis-item .vis-item-content { padding: 0px; } + +.vis-item.vis-cluster { + width: 30px; + height: 30px; + border-style: dotted; + border-radius: 50%; + padding: 5px; + + color: var(--primary-text-color); + background-color: var(--primary-background-color); + box-shadow: 0px 0px 20px 5px var(--primary-color); +} \ No newline at end of file