From 7383b38e10b5ff703024d766e92629bf1e7f09cc Mon Sep 17 00:00:00 2001
From: luigser <luigser@gmail.com>
Date: Thu, 22 Oct 2015 14:35:55 +0200
Subject: [PATCH] paper-card-controllet update

---
 controllets/paper-card-controllet/_paper-card-controllet.html  | 173 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 controllets/paper-card-controllet/paper-card-controllet.html   |  85 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------
 controllets/paper-card-controllet/paper-card-controllet__.html | 196 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 253 insertions(+), 201 deletions(-)
 delete mode 100644 controllets/paper-card-controllet/_paper-card-controllet.html
 create mode 100644 controllets/paper-card-controllet/paper-card-controllet__.html

diff --git a/controllets/paper-card-controllet/_paper-card-controllet.html b/controllets/paper-card-controllet/_paper-card-controllet.html
deleted file mode 100644
index 834845f..0000000
--- a/controllets/paper-card-controllet/_paper-card-controllet.html
+++ /dev/null
@@ -1,173 +0,0 @@
-<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
-<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
-<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
-
-
-<dom-module id="paper-card-controllet">
-
-    <template>
-        <style>
-            :host {
-                color: #333;
-                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-                display: inline-block;
-                margin: 0 8px 8px ;
-                font-size: 14px;
-                text-align: justify;
-                line-height: 10px;
-                --paper-fab-background: var(--accent-color);
-            }
-
-            paper-material {
-                border-radius: 2px;
-                background-color: white;
-            }
-
-            .preview {
-                position: relative;
-                margin-bottom: 0px;
-                /*max-width: 200px;
-                max-height: 200px;
-                min-width: 200px;
-                min-height: 200px;*/
-            }
-
-            .legend {
-                position: absolute;
-                background: rgba(0,0,0,0.5);
-                bottom: 0;
-                color: white;
-                height: 40px;
-                padding: 0 16px;
-                left: 0; right: 0;
-            }
-
-            paper-fab {
-                position: absolute;
-                right: 10px;
-                bottom: -18px;
-                --paper-fab-background:#2196F3;
-            }
-
-            .content ::content {
-                padding: 0 16px 8px;
-                font-weight: 300;
-                color: var(--secondary-text-color);
-                line-height: 24px;
-            }
-            ::content.buttons {
-                margin-top: 8px;
-            }
-            ::content paper-button, ::content paper-icon-button {
-                font-weight: 500;
-                color: var(--accent-color);
-            }
-
-            paper-material{
-                max-height: 260px;
-                max-width: 200px;
-                min-height: 260px;
-                min-width: 200px;
-            }
-
-            #card_content{
-                overflow: hidden;
-                max-width: 200px;
-                max-height: 240px;
-                min-width: 200px;
-                min-height: 240px;
-            }
-
-            #datalet_preview{
-
-                -ms-transform: scale(0.95);
-                -moz-transform: scale(0.95);
-                -o-transform: scale(0.95);
-                -webkit-transform: scale(0.95);
-                transform: scale(0.95);
-
-            }
-
-            #text_preview{
-               font-size: smaller;
-            }
-
-        </style>
-
-        <paper-material elevation="{{elevation}}">
-            <div class="vertical layout">
-                <div class="preview">
-                    <div id="card_content">
-                        <template is="dom-if" if="{{checkType(type,'image')}}">
-                            <img src="{{imageSrc}}">
-                        </template>
-                        <template is="dom-if" if="{{checkType(type,'datalet')}}">
-                            <div id="datalet_preview"><content></content></div>
-                        </template>
-                        <template is="dom-if" if="{{checkType(type,'text')}}">
-                           <div id="text_preview"><content></content></div>
-                        </template>
-                    </div>
-                    <div class="horizontal layout center legend">
-                        <span>{{legend}}</span>
-                        <paper-fab mini icon="{{icon}}"></paper-fab>
-                    </div>
-                </div>
-                <div class="content">
-                    <p>{{text}}</p >
-                </div>
-            </div>
-        </paper-material>
-    </template>
-
-    <script>
-        Polymer({
-            is:'paper-card-controllet',
-
-            properties: {
-                width: {
-                    type: Number,
-                    value: 350,
-                    /*observer: "_changeWidth",*/
-                },
-                height: {
-                    type: Number,
-                    value: 200
-                },
-
-                legend:{
-                    type: String,
-                    value: "Legend"
-                },
-
-                type:{
-                    type: String,
-                    value: "text"
-                },
-
-                icon:{
-                    type: String,
-                    value: "home"
-                },
-
-                imageSrc: {
-                    type: String,
-                    value:""
-                }
-            },
-            _changeWidth: function(data){
-                this.style.width = data + "px";
-                this.querySelector(".content").width = data + "px";
-            },
-
-            checkType: function(type, check){
-                return (type == check);
-            },
-
-            ready: function(){
-            }
-        })
-    </script>
-
-
-</dom-module>
\ No newline at end of file
diff --git a/controllets/paper-card-controllet/paper-card-controllet.html b/controllets/paper-card-controllet/paper-card-controllet.html
index c986234..f74bec1 100644
--- a/controllets/paper-card-controllet/paper-card-controllet.html
+++ b/controllets/paper-card-controllet/paper-card-controllet.html
@@ -20,23 +20,20 @@
             }
 
             paper-material {
-                border-radius: 2px;
                 background-color: white;
+                border-width: 1em;
             }
 
-            .preview {
+            .footer {
                 position: relative;
-                margin-bottom: 24px;
-            }
-            .preview img {
-                border-top-right-radius: 2px;
-                border-top-left-radius: 2px;
-                width: 100%;
+                /*margin-bottom: 24px;*/
             }
+
             .legend {
-                position: absolute;
-                background: rgba(0,0,0,0.4);
-                bottom: -50px;
+                position: relative;
+                top: -50px;
+                background: rgba(0,0,0,0.8);
+                bottom: 0;
                 color: white;
                 height: 50px;
                 padding: 0 16px;
@@ -53,13 +50,13 @@
 
             #content ::content {
                 /*padding: 0 16px 8px;*/
-                padding: 0 8px 4px;
+                padding: 0 16px 8px;
                 font-weight: 300;
                 color: var(--secondary-text-color);
                 line-height: 24px;
                 max-height: 400px;
                 position:relative;
-                overflow: hidden;
+                overflow: auto;
             }
             ::content.buttons {
                 margin-top: 8px;
@@ -68,31 +65,63 @@
                 font-weight: 500;
                 color: var(--accent-color);
             }
+
+            #text{
+                position:relative;
+                top: -50px;
+                height: auto;
+                padding: 8px 8px 8px 8px;
+                font-size: 10px;
+                color: rgba(0,0,0,0.4);
+                font-family: 'Roboto', sans-serif;
+            }
         </style>
 
 
         <paper-material animated elevation="{{elevation}}" flex>
+
             <div class="vertical layout">
-                <div class="preview">
+                <div id="content">
+                    <content></content>
+                </div>
 
-                    <!--<template is="dom-if" if="{{checkType(type,'image')}}">
-                        <template is="dom-if" if="{{img}}">
-                           <img src="{{img}}" height="{{height}}" alt="">
-                        </template>
-                    </template>-->
+                <div class="footer">
 
                     <template is="dom-if" if="{{legend}}">
+
                         <div class="legend horizontal layout center">
                             <span>{{legend}}</span>
-                            <template is="dom-if" if="{{icon}}">
-                                <paper-fab mini icon="{{icon}}"></paper-fab>
+                            <!-- Adding icon based on card type -->
+
+                            <template is="dom-if" if="{{checkType(type, 'text')}}">
+
+                               <paper-fab mini icon="create"></paper-fab>
+
+                             </template>
+
+                            <template is="dom-if" if="{{checkType(type, 'image')}}">
+
+                                <paper-fab mini icon="perm-media"></paper-fab>
+
+                            </template>
+
+                            <template is="dom-if" if="{{checkType(type, 'datalet')}}">
+
+                                <paper-fab mini icon="assessment"></paper-fab>
+
+                            </template>
+
+                            <template is="dom-if" if="{{checkType(type, 'link')}}">
+
+                                <paper-fab mini icon="link"></paper-fab>
+
                             </template>
+
                         </div>
+
                     </template>
-                </div>
 
-                <div id="content">
-                    <content></content>
+                    <div id="text">{{text}}</div>
                 </div>
 
             </div>
@@ -122,14 +151,14 @@
 
             _changeWidth: function(data){
                 this.style.width = data + "px";
-                this.querySelector("#content").width = (data-50) + "px";
+                //this.$.content.style.width = data + "px";
                 //$(this.$.content).perfectScrollbar();
             },
 
             _changeHeight: function(data){
-                this.style.height = data + "px";
-                this.querySelector("#content").height = (data-50) + "px";
-                //$(this.$.content).perfectScrollbar();
+                this.style.height = (data + 20) + "px";
+                this.$.content.style.height = data + "px";
+               //$(this.$.content).perfectScrollbar();
             },
 
             checkType: function(type, check){
diff --git a/controllets/paper-card-controllet/paper-card-controllet__.html b/controllets/paper-card-controllet/paper-card-controllet__.html
new file mode 100644
index 0000000..cbfbe77
--- /dev/null
+++ b/controllets/paper-card-controllet/paper-card-controllet__.html
@@ -0,0 +1,196 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html"/>
+<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
+<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
+
+<dom-module id="paper-card-controllet">
+
+    <template>
+        <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
+        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+        <style>
+            :host {
+                display: inline-block;
+                margin: 0 8px 8px ;
+                font-size: 14px;
+                line-height: 10px;
+                --paper-fab-background: var(--accent-color);
+                font-family: 'Roboto', sans-serif;
+            }
+
+            paper-material {
+                background-color: white;
+                border-width: 1em;
+            }
+
+            .header {
+                position: relative;
+                /*margin-bottom: 24px;*/
+            }
+
+
+            .title
+            {
+                position: relative;
+                margin-left: 40px;
+            }
+
+            .big
+            {
+                font-size: 1em;
+                padding: 8px;
+            }
+
+            .small
+            {
+                font-size: 0.8em;
+                padding-top: 10px;
+                font-weight: bold;
+            }
+
+            .legend {
+                position: relative;
+                float: left;
+                width: 100%;
+                background: rgba(0,0,0,0.2);
+                bottom: 0;
+                color: white;
+                height: 50px;
+                padding: 0 16px;
+                left: 0; right: 0;
+            }
+            paper-fab {
+                position: absolute;
+                left: 10px;
+                margin-top: 24px;
+                z-index: 10;
+                --paper-fab-background:#2196F3;
+            }
+
+            #content ::content {
+                /*padding: 0 16px 8px;*/
+                padding: 0 16px 8px;
+                font-weight: 300;
+                color: var(--secondary-text-color);
+                line-height: 24px;
+                max-height: 400px;
+                position:relative;
+                overflow: auto;
+            }
+            ::content.buttons {
+                margin-top: 8px;
+            }
+            ::content paper-button, ::content paper-icon-button {
+                font-weight: 500;
+                color: var(--accent-color);
+            }
+
+            #text{
+                position:relative;
+                height: auto;
+                padding: 8px 8px 8px 8px;
+                font-size: 10px;
+                color: rgba(0,0,0,0.4);
+                font-family: 'Roboto', sans-serif;
+            }
+        </style>
+
+
+        <paper-material animated elevation="{{elevation}}" flex>
+
+            <div class="vertical layout">
+
+                <div class="header">
+
+                    <template is="dom-if" if="{{legend}}">
+
+                        <div class="legend horizontal layout center">
+                            <div class="title flex">
+                                <div class="big">{{legend}}</div>
+                                <!--<div class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>-->
+                            </div>
+                            <!-- Adding icon based on card type -->
+
+                            <template is="dom-if" if="{{checkType(type, 'text')}}">
+
+                               <paper-fab mini icon="create"></paper-fab>
+
+                             </template>
+
+                            <template is="dom-if" if="{{checkType(type, 'image')}}">
+
+                                <paper-fab mini icon="perm-media"></paper-fab>
+
+                            </template>
+
+                            <template is="dom-if" if="{{checkType(type, 'datalet')}}">
+
+                                <paper-fab mini icon="assessment"></paper-fab>
+
+                            </template>
+
+                            <template is="dom-if" if="{{checkType(type, 'link')}}">
+
+                                <paper-fab mini icon="link"></paper-fab>
+
+                            </template>
+
+                            <!--<div id="text">
+                                Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e
+                                della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal
+                                sedicesimo secolo.
+                            </div>-->
+
+                        </div>
+
+                    </template>
+
+                    <div id="content">
+                        <content></content>
+                    </div>
+                </div>
+
+            </div>
+        </paper-material>
+
+    </template>
+
+    <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
+
+    <script>
+        Polymer({
+            is: "paper-card-controllet",
+            properties: {
+                width: {
+                    type: Number,
+                    observer: "_changeWidth",
+                },
+                height: {
+                    type: Number,
+                    observer: "_changeHeight",
+                },
+                type:{
+                    type: String,
+                    value: "text"
+                }
+            },
+
+            _changeWidth: function(data){
+                this.style.width = data + "px";
+                //this.$.content.style.width = data + "px";
+                //$(this.$.content).perfectScrollbar();
+            },
+
+            _changeHeight: function(data){
+                this.style.height = (data + 20) + "px";
+                this.$.content.style.height = data + "px";
+               //$(this.$.content).perfectScrollbar();
+            },
+
+            checkType: function(type, check){
+                return (type == check);
+            }
+        })
+    </script>
+
+</dom-module>
\ No newline at end of file
--
libgit2 0.21.4