Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS

pina
2 parents 6cf27113 563db87f
Showing 4 changed files with 192 additions and 21 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
controllets/paper-card-controllet/_paper-card-controllet.html
controllets/paper-card-controllet/paper-card-controllet.html
controllets/search-panel-controllet/search-panel-controllet.html
-
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
@@ -145,19 +144,14 @@
     </style>
     <template>
-        <!--<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
-            <neon-animatable><div id="hidden"></div></neon-animatable>
-            <neon-animatable>-->
-                <paper-material elevation="5" id="window" class="window">
-                    <div class="transparent"></div>
-                    <paper-toolbar id="toolbar">
-                        <search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet>
-                        <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
-                    </paper-toolbar>
-                   <div id="container_content"><content></content></div>
-                </paper-material>
-            <!--</neon-animatable>
-        </neon-animated-pages>-->
+        <paper-material elevation="5" id="window" class="window">
+            <div class="transparent"></div>
+            <paper-toolbar id="toolbar">
+                <search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet>
+                <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
+            </paper-toolbar>
+           <div id="container_content"><content></content></div>
+        </paper-material>
         <div id="button_container" class="horizontal layout">
            <span class="button-container" id="open" on-click="_onOpenClick">
+<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
@@ -210,11 +210,11 @@
             properties: {
                 width: {
                     type: Number,
-                    observer: "_changeWidth",
+                    observer: "_changeWidth"
                 },
                 height: {
                     type: Number,
-                    observer: "_changeHeight",
+                    observer: "_changeHeight"
                 },
                 cardType:{
                     type: String,
@@ -68,10 +68,10 @@ Example:
                 position: absolute;
                 top: -12px;
                 width: 20vw;
-
             }
-            neon-animated-pages{
+            neon-animated-pages
+            {
                /*width: 20vw;*/
             }
@@ -143,7 +143,7 @@ Example:
             ready: function(){
-                if(this.leftDirection != undefined){
+               if(this.leftDirection != undefined){
                     this.$.search_text.style.left =  '5px';
                 }else if(this.rightDirection != undefined){
                     this.$.search_text.style.right =  '5px';
@@ -169,8 +169,12 @@ Example:
              * @param {Event} e
              */
             _valueChanged : function(oldvalue, newValue){
-                clearTimeout (this.timer);
-                this.timer = setTimeout(this.fire('search-panel-controllet_content-changed', {searchKey: this.searchKey, id : this.id}), 500);
+                if(newValue != undefined)
+                {
+                    clearTimeout(this.timer);
+                    this.timer = setTimeout(this.fire('search-panel-controllet_content-changed', {searchKey: this.searchKey, id : this.id}), 500);
+                    //this.fire('search-panel-controllet_content-changed', {searchKey: this.searchKey, id: this.id});
+                }
             },
             /**
              * It returns the value in text area