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/iron-collapse/iron-collapse.html"/>
<dom-module id="cocreation-paper-card-controllet">
    <template>
        <style>
            iron-icon{
                padding-left: 5px;
                padding-right: 5px;
                --iron-icon-height: 16px;
                --iron-icon-width: 16px;
            }
            iron-icon.icon-from{
                --iron-icon-fill-color : #000000;
            }
            iron-icon.icon-to{
                --iron-icon-fill-color : #ff0000;
            }
            paper-card.cocreation {
                width: 310px;
            }
            .from, .to {
                font-size: 13px;
                color: #CCCCCC;
            }
            .rate-content {
                @apply(--layout-flex);
                float: left;
                width: 100%;
            }
            .rate-header { @apply(--paper-font-headline); }
            .rate-name { color: var(--paper-grey-600); margin: 10px 0; }
            paper-icon-button.rate-icon {
                --iron-icon-fill-color: white;
                --iron-icon-stroke-color: var(--paper-grey-600);
            }
            .collapse-content {
                width: 200px;
                padding: 15px;
            }
            iron-collapse.iron-collapse-over
            {
                position: absolute;
                left: -1px;
                margin:0;
                padding:0;
                z-index:10;
                background-color: #FFFFFF;
                border: solid 1px #E6E6E6;
                border-top: none !important;
                min-width: 310px;
                min-height: 188px;
            }
            .badge{
                position: absolute;
                right: 5px;
                bottom: 5px;
                background: #2196F3;
            }
            .delete{
                position: absolute;
                right: 14px;
                top: 23px;
                background: #2196F3;
                --iron-icon-height: 18px;
                --iron-icon-width: 18px;
                width: 24px;
                height: 24px;
            }
        </style>
        <paper-card class="cocreation">
            <div class="rate-content">
                <div class="card-content">
                    <div class="rate-header">{{name}}</div>
                    <div class="rate-name">{{owner}}</div>
                    <div>
                        <iron-icon class="icon-from" icon="alarm"></iron-icon>
                        <span class="from">{{from}}</span>
                        <iron-icon class="icon-to" icon="alarm-off"></iron-icon>
                        <span class="to">{{to}}</span>
                        <template is="dom-if" if="{{!checkRoomType(roomType)}}">
                            <paper-fab mini disabled icon="assessment" class="badge data"></paper-fab>
                        </template>
                        <template is="dom-if" if="{{checkRoomType(roomType)}}">
                            <paper-fab mini disabled icon="description" class="badge knowledge"></paper-fab>
                        </template>
                        <template is="dom-if" if="{{isOwner}}">
                            <paper-fab class="delete" mini icon="delete" on-click="_handleDeleteClick" style="background-color: #b6b6b6;"></paper-fab>
                        </template>
                    </div>
                </div>
                <div class="card-actions">
                    <paper-button on-click="_onExplore">Explore</paper-button>
                    <paper-icon-button icon="expand-less" on-click="_toggle" style="float:right;"></paper-icon-button>
                    <iron-collapse class="iron-collapse-over" id="more_info" no-animation>
                        <div class="collapse-content">
                            {{goal}}
                        </div>
                    </iron-collapse>
                </div>
            </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: "text"
                },
                owner:{
                    type: String,
                    value: "text"
                },
                from:{
                    type: String,
                    value: "text"
                },
                to:{
                    type: String,
                    value: "text"
                },
                goal:{
                    type: String,
                    value: "text"
                },
                roomUrl: {
                    type: String,
                    value: undefined
                },
                roomType:{
                    type: String,
                    value: undefined
                },
                isOwner: {
                    type: Boolean,
                    value: false
                },
                roomId:{
                    type: Number,
                    value: undefined
                }
            },
            attached: function(){
            },
            _toggle: function(){
                var moreInfo = this.$.more_info;
                var iconButton = Polymer.dom(event).localTarget;
                iconButton.icon = moreInfo.opened ? 'expand-less' : 'expand-more';
                moreInfo.toggle();
            },
            _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>