x-chat-list.html

<!-- <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html"> add  to top with other imports  -->
<!--
A single user list with a username, avatar, and desc.

##### Example

  <x-chat-list avatar="url" username="name" message="hello" status="online" timestamp="1420145273945"></x-chat-list>
-->
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="x-translate.html">
<script src="bower_components/time-elements/time-elements.js"></script>
<dom-module id='x-chat-list'>
    <style>
    :host {
        display: block;
        position: relative;
        width: 100%;
        border-bottom: 1px solid #e0e0e0;
        font-size: 16px;
        min-height: 72px;
        z-index: 0;
    }

    .user-list {
        padding: 16px;
    }

    .avatar {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin: 0 16px 0 0;
        background: #9e9e9e url(lion.png);
        background-size: contain;
        position: relative;
    }

    .status {
        position: absolute;
        bottom: -3px;
        right: -3px;
        border-radius: 50%;
        width: 14px;
        height: 14px;
        background-color: #7EDF25;
        display: none;
    }

    .status.online {
        display: block;
    }

    .username {
        text-transform: capitalize;
        font-weight: 500;
        color: #919191;
        line-height: 1.3em;
        max-width: 90%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space:  nowrap;
    }

    .timestamp {
        font-size: 0.75em;
        color: #919191;
    }

    .avatar {
        border: solid 3px silver;
    }

    .avatar.navy {
        border-color: #393b79;
    }

    .avatar.slate {
        border-color: #6b6ecf;
    }

    .avatar.olive {
        border-color: #637939;
    }

    .avatar.moss {
        border-color: #b5cf6b;
    }

    .avatar.chocolate {
        border-color: #8c6d31;
    }

    .avatar.buttercup {
        border-color: #e7ba52;
    }

    .avatar.maroon {
        border-color: #843c39;
    }

    .avatar.cerise {
        border-color: #d6616b;
    }

    .avatar.plum {
        border-color: #7b4173;
    }

    .avatar.orchid {
        border-color: #ce6dbd;
    }
    </style>
    <template>
        <section class="user-list layout horizontal">
            <div id="avatar" class="avatar {{color}}">
                <div class="status {{status}}"></div>
            </div>
            <div class="flex">
                <div class="username">{{username}}</div>
                <div class="text">{{text}}</div>
                <div class="text"><x-translate query="{{text}}"></x-translate></div>
            </div>
            <time class="timestamp relative-time" is=datetime="{{timestamp}}"></time>
        </section>
    </template>
    <script>
    Polymer({
        is: 'x-chat-list',
        properties: {
          avatar: {
            type: 'String',
            value: ''
          },
          color: {
            type: 'String',
            value: ''
          },
          username: {
            type: 'String',
            value: ''
          },
          text: {
            type: 'String',
            value: ''
          },
          status: {
            type: 'String',
            value: ''
          },
          timestamp: {
            type: 'String',
            value: new Date().toISOString()
          }
        },
        ready: function () {
          this.$.avatar.style.backgroundImage = 'url(' + this.avatar + ')';
        }
    });
    </script>
</dom-module>