SGH / COMPONENTS

Commit f4f24b9d2e4c399b8a507248f813f616a4ea797b

Authored by Luigi Serra
1 parent a0f54bb7

containers layout updates

Inline Side-by-side
Showing 3 changed files with 43 additions and 23 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
  View file @f4f24b9
... ... @@ -165,7 +165,8 @@
165 165  
166 166 listeners:{
167 167 'animated-button-container-controllet_element-selected' : '_elementSelected',
168   - 'search-panel-controllet_content-changed' : '_handleSearch'
  168 + 'search-panel-controllet_content-changed' : '_handleSearch',
  169 + 'animated-button-container-controllet_close' : '_onCloseClick'
169 170 },
170 171  
171 172 properties: {
... ... @@ -175,11 +176,11 @@
175 176 },
176 177 height:{
177 178 type: String,
178   - value: "30vh"
  179 + value: "300px"
179 180 },
180 181 width:{
181 182 type: String,
182   - value: "30vh"
  183 + value: "450px"
183 184 },
184 185 entryAnimation : {
185 186 type : String,
... ... @@ -213,12 +214,15 @@
213 214 },
214 215  
215 216 ready: function(){
216   - this.$.window.style.height = this.height + "vh";
  217 + /*this.$.window.style.height = this.height + "vh";
217 218 this.$.window.style.width = (this.width - 0.5) + "vw";
218   - this.$.close.style.left = (this.width - 3.5) + "vw";
  219 + this.$.close.style.left = (this.width - 3.5) + "vw";*/
  220 +
  221 + this.$.window.style.height = this.height + "px";
  222 + this.$.window.style.width = this.width + "px";
  223 + this.$.close.style.left = (this.width - 30) + "px";
  224 +
219 225  
220   - //this.$.container_content.style.height = (this.height - (22 * 0.65)) + "vh";
221   - //this.$.container_content.style.height = this.height + "vh";
222 226 $(this.$.container_content).perfectScrollbar();
223 227  
224 228 this.$.open.style.height = this.iconHeight + "px";
... ...
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @f4f24b9
... ... @@ -371,7 +371,7 @@ Example:
371 371 <div class="avatar">2</div>
372 372 <div class="title flex">
373 373 <div id="toolbar_title" class="big">Dataset source</div>
374   - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
  374 + <div id="toolbar_description" class="small">Select the fields you want to use for visualization from tree on the right side. The table on the left side will show you the values related to the selected fields.</div>
375 375 </div>
376 376 <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
377 377 </div>
... ... @@ -401,7 +401,7 @@ Example:
401 401 <div class="avatar">3</div>
402 402 <div class="title flex">
403 403 <div id="toolbar_title" class="big">Data mapping</div>
404   - <div id="toolbar_description" class="small">Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need</div>
  404 + <div id="toolbar_description" class="small">Select the visualization by clicking on the button(a window will appear with all available visualization).After, drag and drop the selected fields into datalet parameters area. A preview will be shown on the right side.</div>
405 405 </div>
406 406 <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
407 407 </div>
... ... @@ -445,7 +445,7 @@ Example:
445 445 <div class="avatar">4</div>
446 446 <div class="title flex">
447 447 <div id="toolbar_title" class="big">Finalize visualization</div>
448   - <div id="toolbar_description" class="small">Assign the values for label parameters (e.g. title for you visualization).</div>
  448 + <div id="toolbar_description" class="small">Assign the values for layout parameters (e.g. title for you visualization) and look at the final visualization. You can also add a comment if you are in the private room. </div>
449 449 </div>
450 450 <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>
451 451 </div>
... ... @@ -673,6 +673,19 @@ Example:
673 673 this.$.data_url.value = this.dataletPreset['data-url'];
674 674 this.selected = 1;
675 675 }
  676 +
  677 + //Fiefox force :O
  678 + var table_params ={
  679 + component : "datatable-datalet",
  680 + params :{
  681 + 'data-url' : this.dataUrl
  682 + },
  683 + fields : [],
  684 + placeHolder : this.$.table_component_place_holder
  685 + };
  686 +
  687 + ComponentService.deep_url = this.deepUrl;
  688 + ComponentService.getComponent(table_params);
676 689 },
677 690 /**
678 691 * Utility function to inject datalet in a placeholder
... ... @@ -720,19 +733,14 @@ Example:
720 733 }
721 734  
722 735 if(this.selectedDatalet == undefined)
723   - /* this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
724   - '\'></items-slider-controllet>';*/
725   - this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="70" width="50" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' +
  736 + this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' +
726 737 '<items-list-controllet' +
727 738 ' replace-string="-datalet"' +
728 739 ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +
729 740 '</items-list-controllet>' +
730 741 '</animated-button-container-controllet>';
731 742 else
732   - /*this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
733   - 'selected-card=\'' + this.selectedDatalet + '\'></items-slider-controllet>';*/
734   -
735   - this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="70" width="50" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' +
  743 + this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' +
736 744 '<items-list-controllet' +
737 745 ' replace-string="-datalet"' +
738 746 ' selected-card=\'' + this.selectedDatalet + '\'' +
... ... @@ -973,9 +981,6 @@ Example:
973 981 '"></draggable-element-controllet><br>';
974 982 }
975 983  
976   - //firefox stuff -- ???:)) :O
977   - var place_holder = (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]];
978   -
979 984 var table_params ={
980 985 component : "datatable-datalet",
981 986 params :{
... ... @@ -988,6 +993,7 @@ Example:
988 993 ComponentService.deep_url = this.deepUrl;
989 994 ComponentService.getComponent(table_params);
990 995  
  996 +
991 997 },
992 998 /**
993 999 * Callback related to event 'draggable-element-controllet_content-dragged' fired by draggable-element-controllet when the user drags a selected field in to input data model field
... ...
controllets/generic-cards-container-controllet/generic-cards-container-controllet.html
  View file @f4f24b9
... ... @@ -64,11 +64,20 @@ Example:
64 64 top: 8px;
65 65 }
66 66  
67   - .grid{
  67 + .grid
  68 + {
  69 + width: 100%;
  70 + z-index: 0;
68 71 margin: auto;
69 72 padding: 5%;
70 73 }
71 74  
  75 + .grid:after {
  76 + content: '';
  77 + display: block;
  78 + clear: both;
  79 + }
  80 +
72 81 ::content .card{
73 82 /* ms-transform: scale(0.80);
74 83 -moz-transform: scale(0.80);
... ... @@ -81,12 +90,13 @@ Example:
81 90 -webkit-transform-origin: 0 0;
82 91 transform-origin: 0 0;*/
83 92 margin: 10px;
  93 + float: left;
84 94 }
85 95  
86 96 </style>
87 97  
88 98 <div id="container" class="layout vertical">
89   - <div>
  99 + <div class="grid">
90 100 <content></content>
91 101 </div>
92 102 </div>
... ... @@ -137,7 +147,7 @@ Example:
137 147 this.prevSelectedCard = e.currentTarget;
138 148  
139 149 this.fire('generic-cards-container-controllet_card-selected', {selectedElement: e.currentTarget});
140   - //this.fire('animated-button-container-controllet_element-selected', {selectedElement: ''});
  150 + this.fire('animated-button-container-controllet_close', {});
141 151  
142 152 },
143 153  
... ...