Commit 8a0bbd627cb0e1b7007dcf5c4cb61991b4711a39

Authored by Luigi Serra
1 parent 44d4e5d6

updates

controllets/animated-button-container-controllet/animated-button-container-controllet.html
... ... @@ -44,24 +44,22 @@
44 44 position: absolute;
45 45 top: 8px;
46 46 left: 28.5vw;
47   - --iron-icon-height: 24px;
48   - --iron-icon-width: 24px;
49   - width: 32px;
50   - height: 32px;
  47 + --iron-icon-height: 20px;
  48 + --iron-icon-width: 20px;
  49 + width: 24px;
  50 + height: 24px;
51 51 --paper-fab-background:#9e9e9e;
52 52 z-index: 1001;
53 53 }
54 54  
55 55 #open{
56   - --iron-icon-height: 48px;
57   - --iron-icon-width: 48px;
58   - width: 64px;
59   - height: 64px;
60   - --paper-fab-background:#2196f3;
  56 + --paper-fab-background:transparent;
  57 + background: transparent;
61 58 }
62 59  
63 60 #selected_item{
64 61 margin-left: 25px;
  62 + margin-top: -5px;
65 63 padding: 0;
66 64 ms-transform: scale(0.60);
67 65 -moz-transform: scale(0.60);
... ... @@ -83,7 +81,7 @@
83 81 overflow: auto;
84 82 }
85 83 #toolbar{
86   - background: #2196F3 ;
  84 + background: #2196F3;
87 85 height: 45px;
88 86 }
89 87  
... ... @@ -93,6 +91,43 @@
93 91 left: 80px;
94 92 }
95 93  
  94 + .button-container{
  95 + color: #fff;
  96 + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  97 +
  98 + position: relative;
  99 + }
  100 +
  101 + .button-container:hover{
  102 + color: #fff;
  103 + box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  104 + -webkit-transition: 0.2s ease-out;
  105 + -moz-transition: 0.2s ease-out;
  106 + -o-transition: 0.2s ease-out;
  107 + -ms-transition: 0.2s ease-out;
  108 + transition: 0.2s ease-out;
  109 + cursor: pointer;
  110 + }
  111 +
  112 + .button-container::before{
  113 + position: absolute;
  114 + content: '';
  115 + top: 0;
  116 + left: 0;
  117 + width: 100%;
  118 + height: 100%;
  119 + background-color: rgba(0, 0, 0, 0);
  120 + }
  121 +
  122 +
  123 + .button-container:hover::before{
  124 + background-color: rgba(0, 0, 0, .15);
  125 + -webkit-transition: 0.2s ease-out;
  126 + -moz-transition: 0.2s ease-out;
  127 + -o-transition: 0.2s ease-out;
  128 + -ms-transition: 0.2s ease-out;
  129 + transition: 0.2s ease-out;
  130 + }
96 131  
97 132  
98 133 </style>
... ... @@ -112,7 +147,10 @@
112 147 </neon-animated-pages>
113 148  
114 149 <div class="horizontal layout" style="height: 64px;">
115   - <paper-fab mini icon="{{icon}}" id="open" on-click="_onOpenClick"></paper-fab>
  150 + <!--<paper-fab mini icon="{{icon}}" id="open" on-click="_onOpenClick"></paper-fab>-->
  151 + <span class="button-container" id="open" on-click="_onOpenClick">
  152 + <iron-icon id="button" icon="{{icon}}"></iron-icon>
  153 + </span>
116 154 <div id="selected_item"></div>
117 155 </div>
118 156  
... ... @@ -160,6 +198,11 @@
160 198 type: String,
161 199 value: "64"
162 200 },
  201 + backgroundButtonColor:{
  202 + type: String,
  203 + value: undefined
  204 +
  205 + },
163 206 exitAnimation : {
164 207 type : String,
165 208 value : ""
... ... @@ -178,10 +221,11 @@
178 221 this.$.container_content.style.height = (this.height - (22 * 0.65)) + "vh";
179 222 $(this.$.container_content).perfectScrollbar();
180 223  
181   - this.$.open.style.height = this.iconHeight + "px";
182   - this.$.open.style.width = this.iconWidth + "px";
183   - this.$.open.style.setProperty('--iron-icon-height',this.iconHeight + "px");
184   - this.$.open.style.setProperty('--iron-icon-width' ,this.iconWidth + "px");
  224 + this.$.open.style.height = this.iconHeight + "px";
  225 + this.$.open.style.width = this.iconWidth + "px";
  226 + this.$.open.style.backgroundColor = this.backgroundButtonColor;
  227 + this.$.button.style.width = this.iconWidth + "px";
  228 + this.$.button.style.height = this.iconHeight + "px";
185 229 },
186 230  
187 231 _onOpenClick: function() {
... ...
controllets/data-sevc-controllet/data-sevc-controllet.html
... ... @@ -722,7 +722,7 @@ Example:
722 722 if(this.selectedDatalet == undefined)
723 723 /* this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
724 724 '\'></items-slider-controllet>';*/
725   - this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="70" width="50">' +
  725 + this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="70" width="50" background-button-color="#2196F3">' +
726 726 '<items-list-controllet' +
727 727 ' replace-string="-datalet"' +
728 728 ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +
... ...
controllets/search-panel-controllet/search-panel-controllet.html
... ... @@ -79,7 +79,7 @@ Example:
79 79 <div class="horizontal layout">
80 80 <neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
81 81 <neon-animatable></neon-animatable>
82   - <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>
  82 + <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>
83 83 </neon-animated-pages>
84 84 <paper-icon-button id="search_button" icon="search" class="dropdown-trigger" on-click="_toggleClick"></paper-icon-button>
85 85 </div>
... ...