Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/issue-list/mr-grid-page/mr-grid-tile.js b/static_src/elements/issue-list/mr-grid-page/mr-grid-tile.js
new file mode 100644
index 0000000..57ee474
--- /dev/null
+++ b/static_src/elements/issue-list/mr-grid-page/mr-grid-tile.js
@@ -0,0 +1,114 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html, css} from 'lit-element';
+import {issueRefToUrl, issueToIssueRef} from 'shared/convertersV0.js';
+import '../../framework/mr-star/mr-issue-star.js';
+
+/**
+ * Element for rendering a single tile in the grid view.
+ */
+export class MrGridTile extends LitElement {
+ /** @override */
+ render() {
+ return html`
+ <div class="tile-header">
+ <mr-issue-star
+ .issueRef=${this.issueRef}
+ ></mr-issue-star>
+ <a class="issue-id" href=${issueRefToUrl(this.issue, this.queryParams)}>
+ ${this.issue.localId}
+ </a>
+ <div class="status">
+ ${this.issue.statusRef ? this.issue.statusRef.status : ''}
+ </div>
+ </div>
+ <div class="summary">
+ ${this.issue.summary || ''}
+ </div>
+ `;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ issue: {type: Object},
+ issueRef: {type: Object},
+ queryParams: {type: Object},
+ };
+ };
+
+ /** @override */
+ constructor() {
+ super();
+ this.issue = {};
+ this.queryParams = '';
+ };
+
+ /** @override */
+ update(changedProperties) {
+ if (changedProperties.has('issue')) {
+ this.issueRef = issueToIssueRef(this.issue);
+ }
+ super.update(changedProperties);
+ }
+
+ /** @override */
+ static get styles() {
+ return css`
+ :host {
+ display: block;
+ border: 2px solid var(--chops-gray-200);
+ border-radius: 6px;
+ padding: 1px;
+ margin: 3px;
+ background: var(--chops-white);
+ width: 10em;
+ height: 5em;
+ float: left;
+ table-layout: fixed;
+ overflow: hidden;
+ }
+ :host(:hover) {
+ border-color: var(--chops-blue-100);
+ }
+ .tile-header {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ margin-bottom: 0.1em;
+ }
+ mr-issue-star {
+ --mr-star-size: 16px;
+ }
+ a.issue-id {
+ font-weight: 500;
+ text-decoration: none;
+ display: inline-block;
+ padding-left: .25em;
+ color: var(--chops-blue-700);
+ }
+ .status {
+ display: inline-block;
+ font-size: 90%;
+ max-width: 30%;
+ white-space: nowrap;
+ padding-left: 4px;
+ }
+ .summary {
+ height: 3.7em;
+ font-size: 90%;
+ line-height: 94%;
+ padding: .05px .25em .05px .25em;
+ position: relative;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+ `;
+ };
+};
+
+customElements.define('mr-grid-tile', MrGridTile);