WebCompDev / COMPONENTS

Commit 27f1380e850b760dc7f08d086e37b060695ba491

Authored by pina
2 parents 6cf27113 563db87f

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

Inline Side-by-side
Showing 4 changed files with 192 additions and 21 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
  View file @27f1380
1   -
2 1 <link rel="import" href="../../bower_components/polymer/polymer.html">
3 2 <link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
4 3 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
... ... @@ -145,19 +144,14 @@
145 144 </style>
146 145  
147 146 <template>
148   - <!--<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
149   - <neon-animatable><div id="hidden"></div></neon-animatable>
150   - <neon-animatable>-->
151   - <paper-material elevation="5" id="window" class="window">
152   - <div class="transparent"></div>
153   - <paper-toolbar id="toolbar">
154   - <search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet>
155   - <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
156   - </paper-toolbar>
157   - <div id="container_content"><content></content></div>
158   - </paper-material>
159   - <!--</neon-animatable>
160   - </neon-animated-pages>-->
  147 + <paper-material elevation="5" id="window" class="window">
  148 + <div class="transparent"></div>
  149 + <paper-toolbar id="toolbar">
  150 + <search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet>
  151 + <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
  152 + </paper-toolbar>
  153 + <div id="container_content"><content></content></div>
  154 + </paper-material>
161 155  
162 156 <div id="button_container" class="horizontal layout">
163 157 <span class="button-container" id="open" on-click="_onOpenClick">
... ...
controllets/paper-card-controllet/_paper-card-controllet.html 0 → 100644
  View file @27f1380
  1 +<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
  2 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
  3 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
  4 +
  5 +
  6 +<dom-module id="paper-card-controllet">
  7 +
  8 + <template>
  9 + <style>
  10 + :host {
  11 + color: #333;
  12 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  13 + display: inline-block;
  14 + margin: 0 8px 8px ;
  15 + font-size: 14px;
  16 + text-align: justify;
  17 + line-height: 10px;
  18 + --paper-fab-background: var(--accent-color);
  19 + }
  20 +
  21 + paper-material {
  22 + border-radius: 2px;
  23 + background-color: white;
  24 + }
  25 +
  26 + .preview {
  27 + position: relative;
  28 + margin-bottom: 0px;
  29 + /*max-width: 200px;
  30 + max-height: 200px;
  31 + min-width: 200px;
  32 + min-height: 200px;*/
  33 + }
  34 +
  35 + .legend {
  36 + position: absolute;
  37 + background: rgba(0,0,0,0.5);
  38 + bottom: 0;
  39 + color: white;
  40 + height: 40px;
  41 + padding: 0 16px;
  42 + left: 0; right: 0;
  43 + }
  44 +
  45 + paper-fab {
  46 + position: absolute;
  47 + right: 10px;
  48 + bottom: -18px;
  49 + --paper-fab-background:#2196F3;
  50 + }
  51 +
  52 + .content ::content {
  53 + padding: 0 16px 8px;
  54 + font-weight: 300;
  55 + color: var(--secondary-text-color);
  56 + line-height: 24px;
  57 + }
  58 + ::content.buttons {
  59 + margin-top: 8px;
  60 + }
  61 + ::content paper-button, ::content paper-icon-button {
  62 + font-weight: 500;
  63 + color: var(--accent-color);
  64 + }
  65 +
  66 + paper-material{
  67 + max-height: 260px;
  68 + max-width: 200px;
  69 + min-height: 260px;
  70 + min-width: 200px;
  71 + }
  72 +
  73 + #card_content{
  74 + overflow: hidden;
  75 + max-width: 200px;
  76 + max-height: 240px;
  77 + min-width: 200px;
  78 + min-height: 240px;
  79 + }
  80 +
  81 + #datalet_preview{
  82 +
  83 + -ms-transform: scale(0.95);
  84 + -moz-transform: scale(0.95);
  85 + -o-transform: scale(0.95);
  86 + -webkit-transform: scale(0.95);
  87 + transform: scale(0.95);
  88 +
  89 + }
  90 +
  91 + #text_preview{
  92 + font-size: smaller;
  93 + }
  94 +
  95 + </style>
  96 +
  97 + <paper-material elevation="{{elevation}}">
  98 + <div class="vertical layout">
  99 + <div class="preview">
  100 + <div id="card_content">
  101 + <template is="dom-if" if="{{checkType(type,'image')}}">
  102 + <img src="{{imageSrc}}">
  103 + </template>
  104 + <template is="dom-if" if="{{checkType(type,'datalet')}}">
  105 + <div id="datalet_preview"><content></content></div>
  106 + </template>
  107 + <template is="dom-if" if="{{checkType(type,'text')}}">
  108 + <div id="text_preview"><content></content></div>
  109 + </template>
  110 + </div>
  111 + <div class="horizontal layout center legend">
  112 + <span>{{legend}}</span>
  113 + <paper-fab mini icon="{{icon}}"></paper-fab>
  114 + </div>
  115 + </div>
  116 + <div class="content">
  117 + <p>{{text}}</p >
  118 + </div>
  119 + </div>
  120 + </paper-material>
  121 + </template>
  122 +
  123 + <script>
  124 + Polymer({
  125 + is:'paper-card-controllet',
  126 +
  127 + properties: {
  128 + width: {
  129 + type: Number,
  130 + value: 350,
  131 + /*observer: "_changeWidth",*/
  132 + },
  133 + height: {
  134 + type: Number,
  135 + value: 200
  136 + },
  137 +
  138 + legend:{
  139 + type: String,
  140 + value: "Legend"
  141 + },
  142 +
  143 + type:{
  144 + type: String,
  145 + value: "text"
  146 + },
  147 +
  148 + icon:{
  149 + type: String,
  150 + value: "home"
  151 + },
  152 +
  153 + imageSrc: {
  154 + type: String,
  155 + value:""
  156 + }
  157 + },
  158 + _changeWidth: function(data){
  159 + this.style.width = data + "px";
  160 + this.querySelector(".content").width = data + "px";
  161 + },
  162 +
  163 + checkType: function(type, check){
  164 + return (type == check);
  165 + },
  166 +
  167 + ready: function(){
  168 + }
  169 + })
  170 + </script>
  171 +
  172 +
  173 +</dom-module>
0 174 \ No newline at end of file
... ...
controllets/paper-card-controllet/paper-card-controllet.html
  View file @27f1380
... ... @@ -210,11 +210,11 @@
210 210 properties: {
211 211 width: {
212 212 type: Number,
213   - observer: "_changeWidth",
  213 + observer: "_changeWidth"
214 214 },
215 215 height: {
216 216 type: Number,
217   - observer: "_changeHeight",
  217 + observer: "_changeHeight"
218 218 },
219 219 cardType:{
220 220 type: String,
... ...
controllets/search-panel-controllet/search-panel-controllet.html
  View file @27f1380
... ... @@ -68,10 +68,10 @@ Example:
68 68 position: absolute;
69 69 top: -12px;
70 70 width: 20vw;
71   -
72 71 }
73 72  
74   - neon-animated-pages{
  73 + neon-animated-pages
  74 + {
75 75 /*width: 20vw;*/
76 76 }
77 77  
... ... @@ -143,7 +143,7 @@ Example:
143 143  
144 144 ready: function(){
145 145  
146   - if(this.leftDirection != undefined){
  146 + if(this.leftDirection != undefined){
147 147 this.$.search_text.style.left = '5px';
148 148 }else if(this.rightDirection != undefined){
149 149 this.$.search_text.style.right = '5px';
... ... @@ -169,8 +169,12 @@ Example:
169 169 * @param {Event} e
170 170 */
171 171 _valueChanged : function(oldvalue, newValue){
172   - clearTimeout (this.timer);
173   - this.timer = setTimeout(this.fire('search-panel-controllet_content-changed', {searchKey: this.searchKey, id : this.id}), 500);
  172 + if(newValue != undefined)
  173 + {
  174 + clearTimeout(this.timer);
  175 + this.timer = setTimeout(this.fire('search-panel-controllet_content-changed', {searchKey: this.searchKey, id : this.id}), 500);
  176 + //this.fire('search-panel-controllet_content-changed', {searchKey: this.searchKey, id: this.id});
  177 + }
174 178 },
175 179 /**
176 180 * It returns the value in text area
... ...