diff --git a/controllets/animated-button-container-controllet/animated-button-container-controllet.html b/controllets/animated-button-container-controllet/animated-button-container-controllet.html
index 7628503..7e97f46 100644
--- a/controllets/animated-button-container-controllet/animated-button-container-controllet.html
+++ b/controllets/animated-button-container-controllet/animated-button-container-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() {
diff --git a/controllets/data-sevc-controllet/data-sevc-controllet.html b/controllets/data-sevc-controllet/data-sevc-controllet.html
index 1ebcd4c..baba0a5 100644
--- a/controllets/data-sevc-controllet/data-sevc-controllet.html
+++ b/controllets/data-sevc-controllet/data-sevc-controllet.html
@@ -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 + '\'' +
diff --git a/controllets/search-panel-controllet/search-panel-controllet.html b/controllets/search-panel-controllet/search-panel-controllet.html
index b77ab10..96258a6 100755
--- a/controllets/search-panel-controllet/search-panel-controllet.html
+++ b/controllets/search-panel-controllet/search-panel-controllet.html
@@ -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>