WebCompDev / COMPONENTS

Commit 3c812cc98a0854991a7fa2753adeebddeedbb4c3

Authored by Renato De Donato
1 parent adb9f560

title-desciption datalet

Inline Side-by-side
Showing 8 changed files with 85 additions and 40 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @3c812cc
... ... @@ -118,10 +118,6 @@
118 118 this.dataUrl = this.dataletPreset["data-url"];
119 119 }
120 120  
121   -// var languageLink = document.createElement("link");
122   -// languageLink.rel = "localization";
123   -// languageLink.href = "../../../locales/it.l20n";
124   -// document.getElementsByTagName("head")[0].appendChild(languageLink);
125 121 },
126 122  
127 123 _updateSlider : function(e){
... ...
controllets/data-sevc-controllet/demo/index.html
  View file @3c812cc
... ... @@ -10,7 +10,7 @@
10 10 <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
11 11  
12 12 <!--&lt;!&ndash;<meta name="defaultLanguage" content="en">&ndash;&gt;-->
13   - <!--<meta name="availableLanguages" content="en, it">-->
  13 + <meta name="availableLanguages" content="en, it">
14 14 <!--&lt;!&ndash;<link rel="localization" href="../../../locales/{locale}.l20n">&ndash;&gt;-->
15 15 <link rel="localization" href="../../../locales/it.l20n">
16 16 <!--<script defer src="../../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>-->
... ...
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @3c812cc
... ... @@ -11,6 +11,7 @@
11 11 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
12 12  
13 13 <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
  14 +<link rel="import" href="../../bower_components/paper-input/paper-input.html">
14 15  
15 16 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
16 17  
... ... @@ -111,7 +112,7 @@
111 112 right: 0px;
112 113 }
113 114  
114   - paper-textarea {
  115 + paper-input {
115 116 display: inline-block;
116 117 height: 48px;
117 118 /*padding: 0px 8px;*/
... ... @@ -121,7 +122,20 @@
121 122 --paper-input-container-focus-color: #2196F3;
122 123 }
123 124  
124   - #datalet_selection_comment paper-textarea {
  125 + paper-input.base_input {
  126 + width: 242px;
  127 + }
  128 +
  129 + paper-textarea {
  130 + /*height: 48px;*/
  131 + /*padding: 0px 8px;*/
  132 + width: 242px;
  133 + padding-left: 8px;
  134 + padding-bottom: 4px;
  135 + --paper-input-container-focus-color: #2196F3;
  136 + }
  137 +
  138 + #datalet_selection_comment paper-input {
125 139 padding-bottom: 0px;
126 140 width: calc(100% - 16px);
127 141 }
... ... @@ -166,6 +180,10 @@
166 180  
167 181 paper-button:hover {
168 182 background-color: #00AABF;
  183 +
  184 + box-shadow: 0px 8px 12px #888;
  185 + -webkit-box-shadow: 0px 8px 12px #888;
  186 + -moz-box-shadow: 0px 8px 12px #888;
169 187 }
170 188  
171 189 paper-button[disabled] {
... ... @@ -175,7 +193,7 @@
175 193 #dialog_info_input {
176 194 border: 2px solid #2196F3;
177 195 background-color: #E0E0E0;
178   - min-width: 256px;
  196 + min-width: 248px;
179 197 }
180 198 </style>
181 199  
... ... @@ -184,7 +202,6 @@
184 202 <div id="datalet_selection_container">
185 203 <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
186 204  
187   -
188 205 <paper-material id="datalet_selection_inputs" elevation="5">
189 206 <div class="input_header"><span data-l10n-id="inputs"></span></div>
190 207 <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
... ... @@ -204,10 +221,21 @@
204 221 </paper-material>
205 222  
206 223 <paper-material id="datalet_selection_labels" elevation="5">
207   - <div class="input_header"><span data-l10n-id="labels"></span></div>
  224 + <div class="input_header"><span data-l10n-id="baseInfo"></span></div>
  225 +
  226 + <div class="inputs">
  227 + <paper-input maxlength="32" label="title" class="base_input"></paper-input>
  228 + </div>
  229 +
  230 + <div class="inputs">
  231 + <paper-textarea maxlength="100" label="description" class="base_input"></paper-textarea>
  232 + </div>
  233 +
  234 + <div class="input_header"><span data-l10n-id="layouts"></span></div>
  235 +
208 236 <template is="dom-repeat" items="{{labels}}" index-as="index">
209 237 <div class="inputs">
210   - <paper-textarea label={{item.name}}></paper-textarea>
  238 + <paper-input label={{item.name}}></paper-input>
211 239 <div class="info_button">
212 240 <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
213 241 </div>
... ... @@ -219,10 +247,10 @@
219 247 <div id="datalet_selection_column">
220 248  
221 249 <!--<template is="dom-if" if={{modify}}>-->
222   - <paper-material id="datalet_selection_comment" elevation="5">
223   - <div class="input_header"><span data-l10n-id="comment"></span></div>
224   - <paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>
225   - </paper-material>
  250 + <!--<paper-material id="datalet_selection_comment" elevation="5">-->
  251 + <!--<div class="input_header"><span data-l10n-id="comment"></span></div>-->
  252 + <!--<paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>-->
  253 + <!--</paper-material>-->
226 254 <!--</template>-->
227 255  
228 256 <paper-material id="datalet_selection_datalet" elevation="5">
... ... @@ -350,12 +378,6 @@
350 378 this._translate();
351 379 },
352 380  
353   - _translate : function(){
354   - document.l10n.formatValue('commentLabel').then(s => $("#comment")[0].setAttribute("label", s));
355   - if(this.modify)
356   - document.l10n.formatValue('modifyDatalet').then(s => this.$.add_button.innerText = s);
357   - },
358   -
359 381 setFields : function(fields) {
360 382 this.fields = fields;
361 383 },
... ... @@ -367,6 +389,12 @@
367 389 this.$.datalet_selection_datalet_placeholder.innerHTML = "";
368 390 },
369 391  
  392 + _translate : function(){
  393 +// document.l10n.formatValue('commentLabel').then(s => $("#comment")[0].setAttribute("label", s));
  394 + if(this.modify)
  395 + document.l10n.formatValue('modifyDatalet').then(s => this.$.add_button.innerText = s);
  396 + },
  397 +
370 398 _selectDatalet : function(e){
371 399 this.$.add_button.setAttribute("disabled", "true");
372 400  
... ... @@ -395,6 +423,8 @@
395 423 for(var i=0; i < inputs.length; i++)
396 424 $(inputs[i]).find("paper-menu")[0].select(i);
397 425  
  426 + //set info labels options
  427 +
398 428 this._loadDatalet(this.selectedFields);
399 429 },
400 430  
... ... @@ -463,17 +493,19 @@
463 493 _loadDatalet : function(selectedFields){
464 494 // var params = {'data-url' : this.dataUrl};
465 495  
466   - var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
  496 + var labels = this.$.datalet_selection_labels.querySelectorAll("paper-input");
467 497 for (var i = 0; i < labels.length; i++) {
468 498 if (labels[i].innerHTML.trim() != "") {
469 499 this.params[labels[i].label] = labels[i].value;
470 500 }
471 501 }
472 502  
473   - console.log(this.selectedDatalet);
474   - console.log(this.params);
475   - console.log(selectedFields);
476   - console.log(this.dataUrl);
  503 + var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
  504 + for (var i = 0; i < labels.length; i++) {
  505 + if (labels[i].innerHTML.trim() != "") {
  506 + this.params[labels[i].label] = labels[i].value;
  507 + }
  508 + }
477 509  
478 510 var dataletParams ={
479 511 component : this.selectedDatalet+"-datalet",
... ... @@ -495,16 +527,18 @@
495 527 if(this.selectedFields[i])
496 528 selectedFields.push(this.selectedFields[i]);
497 529  
  530 +// console.log(this.params);
  531 +
498 532 var data = {
499 533 dataUrl : this.dataUrl,
500 534 params : this.params,
501   -// params : {'data-url' : this.dataUrl},
502 535 fields : selectedFields,
503 536 datalet : this.selectedDatalet+"-datalet",
504   - comment : this.$.comment.value,
  537 +// comment : "",//DEPRECATED!!!
505 538 staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
506 539 }
507 540  
  541 +// console.log(data);
508 542 this.fire('data-sevc-controllet.dataletCreated', {data : data});
509 543  
510 544 },
... ... @@ -549,9 +583,9 @@
549 583 $("#datalet_selection_inputs").height(h);
550 584 $("#datalet_selection_labels").height(h);
551 585 // if(this.modify)
552   - $("#datalet_selection_datalet").height(h-128);
  586 +// $("#datalet_selection_datalet").height(h-128);
553 587 // else
554   -// $("#datalet_selection_datalet").height(h);
  588 + $("#datalet_selection_datalet").height(h);
555 589 }
556 590  
557 591 });
... ...
controllets/datalet-selection-controllet/demo/index.html
  View file @3c812cc
... ... @@ -8,10 +8,8 @@
8 8 <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
9 9 <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
10 10  
11   - <!--<meta name="defaultLanguage" content="en-EN">-->
12   - <meta name="availableLanguages" content="en-EN, it-IT">
13   - <!--<link rel="localization" href="../../../locales/{locale}.l20n">-->
14   - <link rel="localization" href="../../../locales/it-IT.l20n">
  11 + <meta name="availableLanguages" content="en, it">
  12 + <link rel="localization" href="../../../locales/it.l20n">
15 13 <script defer src="../../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>
16 14  
17 15 <link rel="import" href="../datalet-selection-controllet.html" />
... ...
datalets/base-datalet/base-datalet.html
  View file @3c812cc
... ... @@ -115,6 +115,21 @@ Example :
115 115 <script>
116 116 BaseDatalet = Polymer({
117 117 is: 'base-datalet',
  118 +
  119 + properties: {
  120 +
  121 + title : {
  122 + type : String,
  123 + value : undefined
  124 + },
  125 +
  126 + description : {
  127 + type : String,
  128 + value : undefined
  129 + }
  130 +
  131 + },
  132 +
118 133 objectDatalet: {
119 134 /**
120 135 * It contains the json data from async xhr call returned from core-ajax core component
... ...
datalets/treemap-datalet/treemap-datalet.html
  View file @3c812cc
... ... @@ -2,7 +2,7 @@
2 2 @license
3 3 The MIT License (MIT)
4 4  
5   - Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
  5 + Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
6 6  
7 7 Permission is hereby granted, free of charge, to any person obtaining a copy
8 8 of this software and associated documentation files (the "Software"), to deal
... ... @@ -122,7 +122,7 @@ Example:
122 122 transformData: function(e)
123 123 {
124 124 var treemapData = [];
125   - TreemapBehavior.map.name = this._component.name;
  125 + TreemapBehavior.map.name = this._component.title;
126 126  
127 127 if(this.data.length > 1) {
128 128 for (i = 0; i < this.data.length; i++) {
... ... @@ -177,7 +177,7 @@ Example:
177 177 curchild.value = value;
178 178 },
179 179  
180   - presentData: function(){
  180 + presentData: function(){console.log(TreemapBehavior.map.name);
181 181 //build(this.map, "treemap_placeholder");
182 182 build(this.map, this._component.$.treemap_placeholder);
183 183 }
... ... @@ -195,7 +195,7 @@ Example:
195 195 * @type String
196 196 * @default ''
197 197 */
198   - name: {
  198 + title: {
199 199 type: String,
200 200 value: ""
201 201 },
... ...
locales/en.l20n
  View file @3c812cc
... ... @@ -13,7 +13,8 @@
13 13 <selectedUrl "Selected url">
14 14  
15 15 <inputs "INPUTS">
16   -<labels "LABELS / OPTIONS">
  16 +<layouts "LABELS / OPTIONS">
  17 +<baseInfo "BASE INFO">
17 18 <comment "COMMENT">
18 19 <commentLabel "comment (max 100 characters)">
19 20 <dataletPreview "DATALET PREVIEW">
... ...
locales/it.l20n
  View file @3c812cc
... ... @@ -13,7 +13,8 @@
13 13 <selectedUrl "Url selezionato">
14 14  
15 15 <inputs "INPUT">
16   -<labels "ETICHETTE / OPZIONI">
  16 +<layouts "ETICHETTE / OPZIONI">
  17 +<baseInfo "INFORMAZIONI DI BASE">
17 18 <comment "COMMENTO">
18 19 <commentLabel "commento (massimo 100 caratteri)">
19 20 <dataletPreview "ANTEPRIMA DATALET">
... ...