1<!DOCTYPE html>
2<!--
3Copyright 2015 The Chromium Authors. All rights reserved.
4Use of this source code is governed by a BSD-style license that can be
5found in the LICENSE file.
6-->
7
8<polymer-element name="tr-ui-e-drive-comment-element" attributes="comment">
9  <template>
10    <style>
11    :host {
12      display: block;
13    }
14    #comment-area {
15      display: flex;
16      flex-direction: column;
17      border-top: 1px solid #e8e8e8;
18      background-color: white;
19      padding: 6px;
20      margin-bottom: 4px;
21      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
22      border-radius: 2px;
23      font-size: small;
24    }
25    #comment-header {
26      display: flex;
27      flex-direction: row;
28      align-items: center;
29      margin-bottom: 8px;
30    }
31    #comment-header-text {
32      display: flex;
33      flex-direction: column;
34      padding-left: 10px;
35    }
36    #comment-img {
37      width: 32px;
38      height: 32px;
39    }
40    #comment-text-author {
41      padding-bottom: 2px;
42    }
43    #comment-date {
44      color: #777;
45      font-size: 11px;
46    }
47    #comment-content {
48      word-wrap: break-word;
49    }
50    </style>
51    <div id="comment-area">
52      <div id="comment-header">
53        <img id="comment-img" src="{{ comment.author.picture.url }}" />
54        <div id="comment-header-text">
55          <div id="comment-text-author">{{ comment.author.displayName }}</div>
56          <div id="comment-date">{{ createdDate }}</div>
57        </div>
58      </div>
59      <div id="comment-content">{{ comment.anchor ? '&#9875;&nbsp;' : '' }}
60          {{ comment.content }}</div>
61    </div>
62  </template>
63  <script>
64  'use strict';
65  Polymer({
66    commentChanged: function() {
67      this.createdDate = new Date(this.comment.createdDate).toLocaleString();
68    }
69  });
70  </script>
71</polymer-element>
72