1 <!DOCTYPE html> 2 <!-- 3 Copyright 2015 The Chromium Authors. All rights reserved. 4 Use of this source code is governed by a BSD-style license that can be 5 found 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 ? '⚓ ' : '' }} 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
