blob: 82f62b3c0cd92fbc47f526dab985f45485bf4592 [file] [log] [blame]
Copybara854996b2021-09-07 19:36:02 +00001// Copyright 2019 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {LitElement, html, css} from 'lit-element';
6
7export class MrDayIcon extends LitElement {
8 /** @override */
9 static get styles() {
10 return css`
11 :host {
12 background-color: hsl(0, 0%, 95%);
13 margin: 0.25em 8px;
14 height: 20px;
15 width: 20px;
16 border: 2px solid white;
17 transition: border-color .5s ease-in-out;
18 }
19 :host(:hover) {
20 cursor: pointer;
21 border-color: hsl(87, 20%, 45%);
22 }
23 :host([activityLevel="0"]) {
24 background-color: var(--chops-blue-gray-50);
25 }
26 :host([activityLevel="1"]) {
27 background-color: hsl(87, 70%, 87%);
28 }
29 :host([activityLevel="2"]) {
30 background-color: hsl(88, 67%, 72%);
31 }
32 :host([activityLevel="3"]) {
33 background-color: hsl(87, 80%, 40%);
34 }
35 :host([selected]) {
36 border-color: hsl(0, 0%, 13%);
37 }
38 .hover-card {
39 display: none;
40 }
41 :host(:hover) .hover-card {
42 display: block;
43 position: relative;
44 width: 150px;
45 padding: 0.5em 8px;
46 background: rgba(0, 0, 0, 0.6);
47 color: var(--chops-white);
48 border-radius: 8px;
49 top: 120%;
50 left: 50%;
51 transform: translateX(-50%);
52 }
53 `;
54 }
55
56 /** @override */
57 render() {
58 return html`
59 <div class="hover-card">
60 ${this.commentCount} Comments<br>
61 <chops-timestamp .timestamp=${this.date}></chops-timestamp>
62 </div>
63 `;
64 }
65
66 /** @override */
67 static get properties() {
68 return {
69 activityLevel: {
70 type: Number,
71 reflect: true,
72 },
73 commentCount: {type: Number},
74 date: {type: Number},
75 selected: {
76 type: Boolean,
77 reflect: true,
78 },
79 };
80 }
81
82 /** @override */
83 update(changedProperties) {
84 if (changedProperties.has('commentCount')) {
85 const level = Math.ceil(this.commentCount / 2);
86 this.activityLevel = Math.min(level, 3);
87 }
88 super.update(changedProperties);
89 }
90}
91customElements.define('mr-day-icon', MrDayIcon);