Commit 8a0bbd627cb0e1b7007dcf5c4cb61991b4711a39
1 parent
44d4e5d6
updates
Showing
3 changed files
with
61 additions
and
17 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
| @@ -44,24 +44,22 @@ | @@ -44,24 +44,22 @@ | ||
| 44 | position: absolute; | 44 | position: absolute; |
| 45 | top: 8px; | 45 | top: 8px; |
| 46 | left: 28.5vw; | 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 | --paper-fab-background:#9e9e9e; | 51 | --paper-fab-background:#9e9e9e; |
| 52 | z-index: 1001; | 52 | z-index: 1001; |
| 53 | } | 53 | } |
| 54 | 54 | ||
| 55 | #open{ | 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 | #selected_item{ | 60 | #selected_item{ |
| 64 | margin-left: 25px; | 61 | margin-left: 25px; |
| 62 | + margin-top: -5px; | ||
| 65 | padding: 0; | 63 | padding: 0; |
| 66 | ms-transform: scale(0.60); | 64 | ms-transform: scale(0.60); |
| 67 | -moz-transform: scale(0.60); | 65 | -moz-transform: scale(0.60); |
| @@ -83,7 +81,7 @@ | @@ -83,7 +81,7 @@ | ||
| 83 | overflow: auto; | 81 | overflow: auto; |
| 84 | } | 82 | } |
| 85 | #toolbar{ | 83 | #toolbar{ |
| 86 | - background: #2196F3 ; | 84 | + background: #2196F3; |
| 87 | height: 45px; | 85 | height: 45px; |
| 88 | } | 86 | } |
| 89 | 87 | ||
| @@ -93,6 +91,43 @@ | @@ -93,6 +91,43 @@ | ||
| 93 | left: 80px; | 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 | </style> | 133 | </style> |
| @@ -112,7 +147,10 @@ | @@ -112,7 +147,10 @@ | ||
| 112 | </neon-animated-pages> | 147 | </neon-animated-pages> |
| 113 | 148 | ||
| 114 | <div class="horizontal layout" style="height: 64px;"> | 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 | <div id="selected_item"></div> | 154 | <div id="selected_item"></div> |
| 117 | </div> | 155 | </div> |
| 118 | 156 | ||
| @@ -160,6 +198,11 @@ | @@ -160,6 +198,11 @@ | ||
| 160 | type: String, | 198 | type: String, |
| 161 | value: "64" | 199 | value: "64" |
| 162 | }, | 200 | }, |
| 201 | + backgroundButtonColor:{ | ||
| 202 | + type: String, | ||
| 203 | + value: undefined | ||
| 204 | + | ||
| 205 | + }, | ||
| 163 | exitAnimation : { | 206 | exitAnimation : { |
| 164 | type : String, | 207 | type : String, |
| 165 | value : "" | 208 | value : "" |
| @@ -178,10 +221,11 @@ | @@ -178,10 +221,11 @@ | ||
| 178 | this.$.container_content.style.height = (this.height - (22 * 0.65)) + "vh"; | 221 | this.$.container_content.style.height = (this.height - (22 * 0.65)) + "vh"; |
| 179 | $(this.$.container_content).perfectScrollbar(); | 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 | _onOpenClick: function() { | 231 | _onOpenClick: function() { |
controllets/data-sevc-controllet/data-sevc-controllet.html
| @@ -722,7 +722,7 @@ Example: | @@ -722,7 +722,7 @@ Example: | ||
| 722 | if(this.selectedDatalet == undefined) | 722 | if(this.selectedDatalet == undefined) |
| 723 | /* this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' + | 723 | /* this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' + |
| 724 | '\'></items-slider-controllet>';*/ | 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 | '<items-list-controllet' + | 726 | '<items-list-controllet' + |
| 727 | ' replace-string="-datalet"' + | 727 | ' replace-string="-datalet"' + |
| 728 | ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' + | 728 | ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' + |
controllets/search-panel-controllet/search-panel-controllet.html
| @@ -79,7 +79,7 @@ Example: | @@ -79,7 +79,7 @@ Example: | ||
| 79 | <div class="horizontal layout"> | 79 | <div class="horizontal layout"> |
| 80 | <neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> | 80 | <neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> |
| 81 | <neon-animatable></neon-animatable> | 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 | </neon-animated-pages> | 83 | </neon-animated-pages> |
| 84 | <paper-icon-button id="search_button" icon="search" class="dropdown-trigger" on-click="_toggleClick"></paper-icon-button> | 84 | <paper-icon-button id="search_button" icon="search" class="dropdown-trigger" on-click="_toggleClick"></paper-icon-button> |
| 85 | </div> | 85 | </div> |