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

pina
2 parents a425ba00 772d3de9
Showing 3 changed files with 73 additions and 28 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
controllets/data-sevc-controllet/data-sevc-controllet.html
controllets/search-panel-controllet/search-panel-controllet.html
@@ -44,24 +44,22 @@
             position: absolute;
             top: 8px;
             left: 28.5vw;
-            --iron-icon-height: 24px;
-            --iron-icon-width: 24px;
-            width: 32px;
-            height: 32px;
+            --iron-icon-height: 20px;
+            --iron-icon-width: 20px;
+            width: 24px;
+            height: 24px;
             --paper-fab-background:#9e9e9e;
             z-index: 1001;
         }
         #open{
-            --iron-icon-height: 48px;
-            --iron-icon-width: 48px;
-            width: 64px;
-            height: 64px;
-            --paper-fab-background:#2196f3;
+            --paper-fab-background:transparent;
+            background: transparent;
         }
         #selected_item{
-            margin-left: 25px;
+            /*margin-left: 25px;*/
+            margin-top: -5px;
             padding: 0;
             ms-transform: scale(0.60);
             -moz-transform: scale(0.60);
@@ -73,8 +71,8 @@
             -o-transform-origin: 0 0;
             -webkit-transform-origin: 0 0;
             transform-origin: 0 0;
-            max-height: 64px;
-            max-width: 64px;
+            /*max-height: 64px;
+            max-width: 64px;*/
         }
         #container_content{
@@ -83,16 +81,53 @@
             overflow: auto;
         }
         #toolbar{
-            background: #2196F3 ;
+            background: #2196F3;
             height: 45px;
         }
         search-panel-controllet{
+            position: absolute;
+            top: 0px;
+            left: 0px;
+        }
+
+        .button-container{
+            color: #fff;
+            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
             position: relative;
-            top: -5px;
-            left: 80px;
         }
+        .button-container:hover{
+            color: #fff;
+            box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+            -webkit-transition: 0.2s ease-out;
+            -moz-transition: 0.2s ease-out;
+            -o-transition: 0.2s ease-out;
+            -ms-transition: 0.2s ease-out;
+            transition: 0.2s ease-out;
+            cursor: pointer;
+        }
+
+        .button-container::before{
+            position: absolute;
+            content: '';
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0);
+        }
+
+
+        .button-container:hover::before{
+            background-color: rgba(0, 0, 0, .15);
+            -webkit-transition: 0.2s ease-out;
+            -moz-transition: 0.2s ease-out;
+            -o-transition: 0.2s ease-out;
+            -ms-transition: 0.2s ease-out;
+            transition: 0.2s ease-out;
+        }
     </style>
@@ -102,17 +137,20 @@
             <neon-animatable><div id="hidden"></div></neon-animatable>
             <neon-animatable>
                 <paper-material elevation="3" id="window" class="window">
-                   <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
                     <paper-toolbar id="toolbar">
                         <search-panel-controllet id="search_from_animated_button_container"></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>
-        <div class="horizontal layout" style="height: 64px;">
-           <paper-fab mini icon="{{icon}}" id="open" on-click="_onOpenClick"></paper-fab>
+        <div class="horizontal layout">
+            <!--<paper-fab mini icon="{{icon}}" id="open" on-click="_onOpenClick"></paper-fab>-->
+           <span class="button-container" id="open" on-click="_onOpenClick">
+              <iron-icon id="button" icon="{{icon}}"></iron-icon>
+           </span>
            <div id="selected_item"></div>
         </div>
@@ -154,11 +192,16 @@
                 },
                 iconHeight:{
                     type: String,
-                    value: "64"
+                    value: "36"
                 },
                 iconWidth:{
                     type: String,
-                    value: "64"
+                    value: "36"
+                },
+                backgroundButtonColor:{
+                    type: String,
+                    value: undefined
+
                 },
                 exitAnimation  : {
                     type  : String,
@@ -178,10 +221,11 @@
                 this.$.container_content.style.height = (this.height - (22 * 0.65)) + "vh";
                 $(this.$.container_content).perfectScrollbar();
-                this.$.open.style.height = this.iconHeight + "px";
-                this.$.open.style.width  = this.iconWidth  + "px";
-                this.$.open.style.setProperty('--iron-icon-height',this.iconHeight + "px");
-                this.$.open.style.setProperty('--iron-icon-width' ,this.iconWidth + "px");
+                this.$.open.style.height           = this.iconHeight + "px";
+                this.$.open.style.width            = this.iconWidth  + "px";
+                this.$.open.style.backgroundColor  = this.backgroundButtonColor;
+                this.$.button.style.width          = this.iconWidth  + "px";
+                this.$.button.style.height         = this.iconHeight + "px";
             },
             _onOpenClick: function() {
@@ -722,7 +722,7 @@ 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">' +
+                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">' +
                                                                '<items-list-controllet' +
                                                                                      ' replace-string="-datalet"' +
                                                                                      ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +
@@ -732,7 +732,7 @@ Example:
                     /*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">' +
+                    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">' +
                             '<items-list-controllet' +
                             ' replace-string="-datalet"' +
                             ' selected-card=\'' + this.selectedDatalet + '\'' +
@@ -66,8 +66,9 @@ Example:
                 --paper-input-container-focus-color: #ffffff;
                 --paper-input-container-color: #ffffff;
                 position : absolute;
-                right: 5px;
+                left: 5px;
                 top: -20px;
+                width: 100%;
             }
@@ -79,7 +80,7 @@ Example:
         <div class="horizontal layout">
             <neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
                 <neon-animatable></neon-animatable>
-                <neon-animatable><paper-input id="search_text" class="search-text" label="search" autosave="search_text" results="5" transition="fade-in-animation" value="{{searchKey}}"></paper-input></neon-animatable>
+                <neon-animatable><paper-input id="search_text" class="search-text" autofocus label="search" autosave="search_text" results="5" transition="fade-in-animation" value="{{searchKey}}"></paper-input></neon-animatable>
             </neon-animated-pages>
             <paper-icon-button id="search_button" icon="search" class="dropdown-trigger" on-click="_toggleClick"></paper-icon-button>
         </div>