containers layout updates

Luigi Serra
1 parent a0f54bb7
Showing 3 changed files with 43 additions and 23 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
controllets/data-sevc-controllet/data-sevc-controllet.html
controllets/generic-cards-container-controllet/generic-cards-container-controllet.html
@@ -165,7 +165,8 @@
             listeners:{
                 'animated-button-container-controllet_element-selected' : '_elementSelected',
-                'search-panel-controllet_content-changed' : '_handleSearch'
+                'search-panel-controllet_content-changed' : '_handleSearch',
+                'animated-button-container-controllet_close' : '_onCloseClick'
             },
             properties: {
@@ -175,11 +176,11 @@
                 },
                 height:{
                     type: String,
-                    value: "30vh"
+                    value: "300px"
                 },
                 width:{
                     type: String,
-                    value: "30vh"
+                    value: "450px"
                 },
                 entryAnimation : {
                     type  : String,
@@ -213,12 +214,15 @@
             },
             ready: function(){
-                this.$.window.style.height = this.height + "vh";
+                /*this.$.window.style.height = this.height + "vh";
                 this.$.window.style.width  = (this.width - 0.5) + "vw";
-                this.$.close.style.left    = (this.width - 3.5) + "vw";
+                this.$.close.style.left    = (this.width - 3.5) + "vw";*/
+
+                this.$.window.style.height = this.height + "px";
+                this.$.window.style.width  = this.width + "px";
+                this.$.close.style.left    = (this.width - 30) + "px";
+
-                //this.$.container_content.style.height = (this.height - (22 * 0.65)) + "vh";
-                //this.$.container_content.style.height = this.height + "vh";
                 $(this.$.container_content).perfectScrollbar();
                 this.$.open.style.height           = this.iconHeight + "px";
@@ -371,7 +371,7 @@ Example:
                                 <div class="avatar">2</div>
                                 <div class="title flex">
                                     <div id="toolbar_title" class="big">Dataset source</div>
-                                    <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
+                                    <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>
                                 </div>
                                 <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
                             </div>
@@ -401,7 +401,7 @@ Example:
                                 <div class="avatar">3</div>
                                 <div class="title flex">
                                     <div id="toolbar_title" class="big">Data mapping</div>
-                                    <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>
+                                    <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>
                                 </div>
                                 <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
                             </div>
@@ -445,7 +445,7 @@ Example:
                                 <div class="avatar">4</div>
                                 <div class="title flex">
                                     <div id="toolbar_title" class="big">Finalize visualization</div>
-                                    <div id="toolbar_description" class="small">Assign the values for label parameters (e.g. title for you visualization).</div>
+                                    <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>
                                 </div>
                                 <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>
                             </div>
@@ -673,6 +673,19 @@ Example:
                     this.$.data_url.value = this.dataletPreset['data-url'];
                     this.selected = 1;
                 }
+
+                //Fiefox force :O
+                var table_params ={
+                    component   : "datatable-datalet",
+                    params      :{
+                        'data-url' : this.dataUrl
+                    },
+                    fields      : [],
+                    placeHolder : this.$.table_component_place_holder
+                };
+
+                ComponentService.deep_url = this.deepUrl;
+                ComponentService.getComponent(table_params);
             },
             /**
              * Utility function to inject datalet in a placeholder
@@ -720,19 +733,14 @@ Example:
                 }
                 if(this.selectedDatalet == undefined)
-                 /* this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
-                         '\'></items-slider-controllet>';*/
-                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">' +
+                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">' +
                                                                '<items-list-controllet' +
                                                                                      ' replace-string="-datalet"' +
                                                                                      ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +
                                                                '</items-list-controllet>' +
                                                             '</animated-button-container-controllet>';
                 else
-                    /*this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
-                                                                 'selected-card=\'' + this.selectedDatalet + '\'></items-slider-controllet>';*/
-
-                    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">' +
+                    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">' +
                             '<items-list-controllet' +
                             ' replace-string="-datalet"' +
                             ' selected-card=\'' + this.selectedDatalet + '\'' +
@@ -973,9 +981,6 @@ Example:
                                                                   '"></draggable-element-controllet><br>';
                  }
-                 //firefox stuff -- ???:)) :O
-                 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]];
-
                  var table_params ={
                      component   : "datatable-datalet",
                      params      :{
@@ -988,6 +993,7 @@ Example:
                  ComponentService.deep_url = this.deepUrl;
                  ComponentService.getComponent(table_params);
+
             },
             /**
              * 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
@@ -64,11 +64,20 @@ Example:
                 top: 8px;
             }
-            .grid{
+            .grid
+            {
+                width: 100%;
+                z-index: 0;
                 margin: auto;
                 padding: 5%;
             }
+            .grid:after {
+                content: '';
+                display: block;
+                clear: both;
+            }
+
             ::content .card{
                /* ms-transform: scale(0.80);
                 -moz-transform: scale(0.80);
@@ -81,12 +90,13 @@ Example:
                 -webkit-transform-origin: 0 0;
                 transform-origin: 0 0;*/
                 margin: 10px;
+                float: left;
             }
         </style>
         <div id="container" class="layout vertical">
-            <div>
+            <div class="grid">
                 <content></content>
             </div>
         </div>
@@ -137,7 +147,7 @@ Example:
                 this.prevSelectedCard = e.currentTarget;
                 this.fire('generic-cards-container-controllet_card-selected', {selectedElement: e.currentTarget});
-                //this.fire('animated-button-container-controllet_element-selected', {selectedElement: ''});
+                this.fire('animated-button-container-controllet_close', {});
             },