updates

Luigi Serra
1 parent 44d4e5d6
Showing 3 changed files with 61 additions and 17 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-top: -5px;
             padding: 0;
             ms-transform: scale(0.60);
             -moz-transform: scale(0.60);
@@ -83,7 +81,7 @@
             overflow: auto;
         }
         #toolbar{
-            background: #2196F3 ;
+            background: #2196F3;
             height: 45px;
         }
  
@@ -93,6 +91,43 @@
             left: 80px;
         }
  
+        .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;
+        }
+
+        .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>
@@ -112,7 +147,10 @@
         </neon-animated-pages>
  
         <div class="horizontal layout" style="height: 64px;">
-           <paper-fab mini icon="{{icon}}" id="open" on-click="_onOpenClick"></paper-fab>
+            <!--<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>
  
@@ -160,6 +198,11 @@
                     type: String,
                     value: "64"
                 },
+                backgroundButtonColor:{
+                    type: String,
+                    value: undefined
+
+                },
                 exitAnimation  : {
                     type  : String,
                     value : ""
@@ -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" background-button-color="#2196F3">' +
                                                                '<items-list-controllet' +
                                                                                      ' replace-string="-datalet"' +
                                                                                      ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +
@@ -79,7 +79,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>