controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html

<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<link rel="import" href="../../bower_components/paper-card/paper-card.html"/>
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"/>
<link rel="import" href="../../bower_components/paper-button/paper-button.html"/>
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html"/>
<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">
<script src="../../locales/cocreation_paper_card_ln.js"></script>
<dom-module id="cocreation-paper-card-controllet">
    <template>
        <style>
            #card_container {
                height: 200px;
                width: 300px;
                margin-top: 32px;
                margin-left: 32px;
                margin-right: -3.7px;
            }
            #card_container * {
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                line-height: 24px;
            }
            .card-content {
                padding: 12px;
                height: 103px;
                /*overflow: hidden;*/
                background: #E0E0E0;
            }
            .card-actions {
                padding: 12px;
                height: 48px;
                /*border-color: #2196F3;*/
                /*border-color: #4CAF50;*/
            }
            paper-button {
                height: 48px;
                width: 136px;/*+2*/
                padding: 12px;
                margin: 0;
                font-weight: 700;
                background: #FFFFFF;
                color: #000000;
                --paper-button-ink-color: #00BCD4;
            }
            paper-button.info {
                cursor: help;
                float: right;
            }
            paper-button.info:hover {
                color: #000000;
            }
            paper-button:hover {
                color: #00BCD4;
            }
            paper-icon-button[icon="info-outline"] {
                cursor: help;
                float: right;
                height: 48px;
                width: 48px;
                padding: 8px;
                color: #000000;
            }
            paper-tooltip {
                min-width: 400px;
                --paper-tooltip-background: black;
            }
            paper-fab {
                position: absolute;
                z-index: 10;
            }
            paper-fab.delete {
                top: -12px;
                right: -12px;
                --iron-icon-height: 18px;
                --iron-icon-width: 18px;
                width: 24px;
                height: 24px;
                --paper-fab-background:#B6B6B6;
            }
            #card_container br {
                display: block;
                margin-top: 8px;
                content: " ";
            }
            #card_container p {
                margin: 0;
                padding: 0;
            }
            #card_container p .title{
                font-weight: 700;
                /*color: #2196F3;*/
                /*color: #4CAF50;*/
                white-space: nowrap;
            }
            #card_container p .description{
            }
            #card_container .name{
                font-size: 18px;
                font-weight: 700;
                /*color: #2196F3;*/
                /*color: #4CAF50;*/
                height: 32px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            #card_container .owner{
                font-size: 14px;
                height: 47px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            #card_container .time{
                display: flex;
                flex-direction: row;
                height: 24px;
            }
            #card_container .from {
                width: 50%;
                font-size: 12px;
            }
            #card_container .to {
                width: 50%;
                font-size: 12px;
            }
            paper-fab.assessment,
            paper-fab.description {
                bottom: -20px;
                right: 12px;
                cursor: auto;
            }
            paper-fab.description {
                background: #2196F3;
            }
            paper-fab.assessment {
                background: #4CAF50;
            }
        </style>
        <paper-card id="card_container">
                <div class="card-content">
                    <template is="dom-if" if="{{isOwner}}">
                        <paper-fab id="card_delete" class="delete" mini icon="delete" on-click="_handleDeleteClick"></paper-fab>
                    </template>
                    <div class="name" style$="color: {{color}};">{{name}}</div>
                    <div class="owner">{{owner}}</div>
                    <div class="time">
                        <div class="from">
                            <iron-icon class="icon-from" icon="alarm"></iron-icon>&nbsp; {{from}}
                        </div>
                        <div class="to">
                            <iron-icon class="icon-to" icon="alarm-off"></iron-icon>&nbsp; {{to}}
                        </div>
                    </div>
                    <template is="dom-if" if="{{!checkRoomType(roomType)}}">
                        <paper-fab mini icon="assessment" class="assessment" noink></paper-fab>
                    </template>
                    <template is="dom-if" if="{{checkRoomType(roomType)}}">
                        <paper-fab mini icon="description" class="description" noink></paper-fab>
                    </template>
                </div>
                <div class="card-actions" style$="border-color: {{color}};">
                    <paper-button on-click="_onExplore"><span id="explore"></span></paper-button>
                    <paper-button id="goal_button" class="info" noink><span id="goal"></span></paper-button>
                    <!--<paper-icon-button id="goal_button" icon="info-outline" noink></paper-icon-button>-->
                    <paper-tooltip for="goal_button" position="bottom" offset="-8">
                        <p>
                            <span class="title" style$="color: {{color}};" id="tooltip_goal"></span>
                            <br>
                            <span class="description">{{goal}}</span>
                        </p>
                    </paper-tooltip>
                </div>
        </paper-card>
    </template>
    <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
    <script>
        Polymer({
            is: "cocreation-paper-card-controllet",
            properties: {
                name:{
                    type: String,
                    value: ""
                },
                owner:{
                    type: String,
                    value: ""
                },
                from:{
                    type: String,
                    value: ""
                },
                to:{
                    type: String,
                    value: ""
                },
                goal:{
                    type: String,
                    value: ""
                },
                roomUrl: {
                    type: String,
                    value: undefined
                },
                roomType:{
                    type: String,
                    value: undefined
                },
                isOwner: {
                    type: Boolean,
                    value: false
                },
                roomId:{
                    type: Number,
                    value: undefined
                },
                color:{
                    type: String,
                    value: ""
                }
            },
            ready: function() {
                var color = "#4CAF50";
                if(this.roomType == "knowledge")
                    color = "#2196F3";
                this.color = color;
            },
            attached: function(){
                cocreation_room_ln["ln"] = ODE.user_language;
                this.$.goal.innerHTML = cocreation_room_ln["goal_" + cocreation_room_ln["ln"]];
                this.$.tooltip_goal.innerHTML = cocreation_room_ln["goal_" + cocreation_room_ln["ln"]];
                this.$.explore.innerHTML = cocreation_room_ln["explore_" + cocreation_room_ln["ln"]];
            },
            _handleDeleteClick: function(e){
                this.fire("cocreation-paper-card-controllet_delete", {roomId: this.roomId});
            },
            _onExplore: function(e){
                window.location = this.roomUrl;
            },
            checkRoomType: function(type){
               return (type == "knowledge") ? true : false;
            }
        })
    </script>
</dom-module>