f748e9cf
Luigi Serra
new controllet an...
|
1
2
3
4
5
6
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
|
67b280f4
Luigi Serra
search feature
|
7
|
<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
|
f748e9cf
Luigi Serra
new controllet an...
|
8
9
10
11
12
|
<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="../../controllets/items-list-controllet/item-list-controllet.html">
|
67b280f4
Luigi Serra
search feature
|
13
|
<link rel="import" href="../../controllets/search-panel-controllet/search-panel-controllet.html">
|
f748e9cf
Luigi Serra
new controllet an...
|
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<dom-module id="animated-button-container-controllet">
<style>
:host {
@apply(--layout-horizontal);
@apply(--layout-center-center);
}
#pages{
position: absolute;
top: -38px;
left: 113px;
}
.window {
|
6a138ebb
isisadmin
animated button c...
|
30
|
display: none;
|
bde3a33f
Luigi Serra
containers layout...
|
31
|
position: fixed;
|
de1fbec1
Luigi Serra
elements position...
|
32
33
|
right: 0;
left: 0;
|
b12826f9
Luigi Serra
controllets and b...
|
34
|
top: 20%;
|
de1fbec1
Luigi Serra
elements position...
|
35
36
|
margin-right: auto;
margin-left: auto;
|
f748e9cf
Luigi Serra
new controllet an...
|
37
38
39
40
41
42
43
44
45
|
z-index: 1000;
}
.hidden{
display: none;
}
#close{
position: absolute;
|
67b280f4
Luigi Serra
search feature
|
46
|
top: 8px;
|
f748e9cf
Luigi Serra
new controllet an...
|
47
|
left: 28.5vw;
|
8a0bbd62
Luigi Serra
updates
|
48
49
50
51
|
--iron-icon-height: 20px;
--iron-icon-width: 20px;
width: 24px;
height: 24px;
|
67b280f4
Luigi Serra
search feature
|
52
|
--paper-fab-background:#9e9e9e;
|
f748e9cf
Luigi Serra
new controllet an...
|
53
54
55
|
z-index: 1001;
}
|
4619852f
Luigi Serra
controllets and b...
|
56
|
#open{
|
8a0bbd62
Luigi Serra
updates
|
57
58
|
--paper-fab-background:transparent;
background: transparent;
|
f748e9cf
Luigi Serra
new controllet an...
|
59
60
61
|
}
#selected_item{
|
6c8b91ab
Luigi Serra
updates
|
62
|
/*margin-left: 25px;*/
|
8a0bbd62
Luigi Serra
updates
|
63
|
margin-top: -5px;
|
f748e9cf
Luigi Serra
new controllet an...
|
64
65
66
67
68
69
70
71
72
73
|
padding: 0;
ms-transform: scale(0.60);
-moz-transform: scale(0.60);
-o-transform: scale(0.60);
-webkit-transform: scale(0.60);
transform: scale(0.60);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
|
31d9a4f6
Luigi Serra
updates
|
74
|
transform-origin: 0 0;
|
6c8b91ab
Luigi Serra
updates
|
75
76
|
/*max-height: 64px;
max-width: 64px;*/
|
f748e9cf
Luigi Serra
new controllet an...
|
77
78
79
80
|
}
#container_content{
z-index: 1000;
|
31d9a4f6
Luigi Serra
updates
|
81
82
|
position: relative;
overflow: auto;
|
0a87e7be
Luigi Serra
updates
|
83
84
|
height: 100%;
background-color: #e8e8e8;
|
f748e9cf
Luigi Serra
new controllet an...
|
85
|
}
|
67b280f4
Luigi Serra
search feature
|
86
|
#toolbar{
|
8a0bbd62
Luigi Serra
updates
|
87
|
background: #2196F3;
|
67b280f4
Luigi Serra
search feature
|
88
89
90
91
|
height: 45px;
}
search-panel-controllet{
|
11455f01
Luigi Serra
updates
|
92
93
|
position: absolute;
top: 0px;
|
ca7442b9
Luigi Serra
updates
|
94
|
left: 0px;
|
67b280f4
Luigi Serra
search feature
|
95
96
|
}
|
8a0bbd62
Luigi Serra
updates
|
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
.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;
}
|
67b280f4
Luigi Serra
search feature
|
134
|
|
de298649
Luigi Serra
controllets and b...
|
135
136
137
138
139
140
141
142
143
144
|
.transparent
{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0, 0, 0, 0.4);
}
|
f748e9cf
Luigi Serra
new controllet an...
|
145
146
147
|
</style>
<template>
|
6a138ebb
isisadmin
animated button c...
|
148
|
<!--<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
|
f748e9cf
Luigi Serra
new controllet an...
|
149
|
<neon-animatable><div id="hidden"></div></neon-animatable>
|
6a138ebb
isisadmin
animated button c...
|
150
|
<neon-animatable>-->
|
f390a6e1
Luigi Serra
elements position...
|
151
|
<paper-material elevation="5" id="window" class="window">
|
de298649
Luigi Serra
controllets and b...
|
152
|
<div class="transparent"></div>
|
67b280f4
Luigi Serra
search feature
|
153
|
<paper-toolbar id="toolbar">
|
0a87e7be
Luigi Serra
updates
|
154
|
<search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet>
|
772d3de9
Luigi Serra
updates
|
155
|
<paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
|
67b280f4
Luigi Serra
search feature
|
156
|
</paper-toolbar>
|
f748e9cf
Luigi Serra
new controllet an...
|
157
158
|
<div id="container_content"><content></content></div>
</paper-material>
|
6a138ebb
isisadmin
animated button c...
|
159
160
|
<!--</neon-animatable>
</neon-animated-pages>-->
|
f748e9cf
Luigi Serra
new controllet an...
|
161
|
|
dd139891
isisadmin
layout fix
|
162
|
<div id="button_container" class="horizontal layout">
|
8a0bbd62
Luigi Serra
updates
|
163
|
<span class="button-container" id="open" on-click="_onOpenClick">
|
11de877b
Luigi Serra
controllets and b...
|
164
|
<iron-icon id="open_window_button" icon="{{icon}}"></iron-icon>
|
8a0bbd62
Luigi Serra
updates
|
165
|
</span>
|
67b280f4
Luigi Serra
search feature
|
166
|
<div id="selected_item"></div>
|
f748e9cf
Luigi Serra
new controllet an...
|
167
168
169
170
|
</div>
</template>
|
31d9a4f6
Luigi Serra
updates
|
171
172
|
<script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
|
67b280f4
Luigi Serra
search feature
|
173
|
<script>
|
f748e9cf
Luigi Serra
new controllet an...
|
174
|
|
67b280f4
Luigi Serra
search feature
|
175
|
Polymer({
|
f748e9cf
Luigi Serra
new controllet an...
|
176
|
|
67b280f4
Luigi Serra
search feature
|
177
|
is: 'animated-button-container-controllet',
|
f748e9cf
Luigi Serra
new controllet an...
|
178
|
|
67b280f4
Luigi Serra
search feature
|
179
|
listeners:{
|
31d9a4f6
Luigi Serra
updates
|
180
|
'animated-button-container-controllet_element-selected' : '_elementSelected',
|
f4f24b9d
Luigi Serra
containers layout...
|
181
|
'search-panel-controllet_content-changed' : '_handleSearch',
|
11de877b
Luigi Serra
controllets and b...
|
182
183
|
'animated-button-container-controllet_close' : '_onCloseClick',
'animated-button-container-controllet_open-window' : '_onOpenClick'
|
67b280f4
Luigi Serra
search feature
|
184
|
},
|
f748e9cf
Luigi Serra
new controllet an...
|
185
|
|
67b280f4
Luigi Serra
search feature
|
186
187
188
189
190
191
192
|
properties: {
selected : {
type : Number,
value : 0
},
height:{
type: String,
|
f4f24b9d
Luigi Serra
containers layout...
|
193
|
value: "300px"
|
67b280f4
Luigi Serra
search feature
|
194
195
196
|
},
width:{
type: String,
|
f4f24b9d
Luigi Serra
containers layout...
|
197
|
value: "450px"
|
67b280f4
Luigi Serra
search feature
|
198
199
200
201
202
|
},
entryAnimation : {
type : String,
value : ""
},
|
31d9a4f6
Luigi Serra
updates
|
203
204
205
206
207
208
|
icon:{
type: String,
value: "assessment"
},
iconHeight:{
type: String,
|
d7a7f8a4
Luigi Serra
updates
|
209
|
value: "36"
|
31d9a4f6
Luigi Serra
updates
|
210
211
212
|
},
iconWidth:{
type: String,
|
d7a7f8a4
Luigi Serra
updates
|
213
|
value: "36"
|
31d9a4f6
Luigi Serra
updates
|
214
|
},
|
8a0bbd62
Luigi Serra
updates
|
215
216
217
218
219
|
backgroundButtonColor:{
type: String,
value: undefined
},
|
67b280f4
Luigi Serra
search feature
|
220
221
222
|
exitAnimation : {
type : String,
value : ""
|
31d9a4f6
Luigi Serra
updates
|
223
224
225
226
|
},
searchFunction: {
type: String,
notify: true
|
67b280f4
Luigi Serra
search feature
|
227
228
|
}
},
|
f748e9cf
Luigi Serra
new controllet an...
|
229
|
|
67b280f4
Luigi Serra
search feature
|
230
|
ready: function(){
|
f4f24b9d
Luigi Serra
containers layout...
|
231
|
/*this.$.window.style.height = this.height + "vh";
|
67b280f4
Luigi Serra
search feature
|
232
|
this.$.window.style.width = (this.width - 0.5) + "vw";
|
f4f24b9d
Luigi Serra
containers layout...
|
233
234
235
236
237
238
|
this.$.close.style.left = (this.width - 3.5) + "vw";*/
this.$.window.style.height = this.height + "px";
this.$.window.style.width = this.width + "px";
this.$.close.style.left = (this.width - 30) + "px";
|
31d9a4f6
Luigi Serra
updates
|
239
|
|
31d9a4f6
Luigi Serra
updates
|
240
241
|
$(this.$.container_content).perfectScrollbar();
|
f66137f8
Luigi Serra
controllets and b...
|
242
243
|
this.$.open.style.height = this.iconHeight + "px";
this.$.open.style.width = this.iconWidth + "px";
|
4619852f
Luigi Serra
controllets and b...
|
244
|
this.$.open_window_button.style.backgroundColor = this.backgroundButtonColor;
|
f66137f8
Luigi Serra
controllets and b...
|
245
246
|
this.$.open_window_button.style.width = this.iconWidth + "px";
this.$.open_window_button.style.height = this.iconHeight + "px";
|
dd139891
isisadmin
layout fix
|
247
|
this.$.button_container.style.height = this.iconHeight + "px";
|
f748e9cf
Luigi Serra
new controllet an...
|
248
|
},
|
67b280f4
Luigi Serra
search feature
|
249
250
|
_onOpenClick: function() {
|
de298649
Luigi Serra
controllets and b...
|
251
252
|
/*this.entryAnimation = 'fade-in-animation';
this.exitAnimation = 'fade-out-animation';*/
|
6a138ebb
isisadmin
animated button c...
|
253
254
|
//this.selected = 1;
$(this.$.window).show();
|
f748e9cf
Luigi Serra
new controllet an...
|
255
|
},
|
67b280f4
Luigi Serra
search feature
|
256
257
258
259
|
_onCloseClick: function(){
/*this.entryAnimation = 'fade-out-animation';
this.exitAnimation = 'fade-in-animation';*/
|
6a138ebb
isisadmin
animated button c...
|
260
261
|
//this.selected = 0;
$(this.$.window).hide();
|
f748e9cf
Luigi Serra
new controllet an...
|
262
|
},
|
67b280f4
Luigi Serra
search feature
|
263
264
265
266
|
_elementSelected: function(e){
this.$.selected_item.innerHTML = "";
this.$.selected_item.appendChild(e.detail.selectedElement);
|
f748e9cf
Luigi Serra
new controllet an...
|
267
|
},
|
67b280f4
Luigi Serra
search feature
|
268
|
_handleSearch: function(e){
|
31d9a4f6
Luigi Serra
updates
|
269
270
271
272
273
274
275
276
|
if(this.$.container_content.children[0]._handleSearch != undefined) {
this.$.container_content.children[0]._handleSearch(e);
}else{
if(this.searchFunction != undefined){
this.searchFunction = new Function('e','return '+ this.searchFunction);
this.searchFunction(e);
}
}
|
f748e9cf
Luigi Serra
new controllet an...
|
277
|
}
|
f748e9cf
Luigi Serra
new controllet an...
|
278
|
|
67b280f4
Luigi Serra
search feature
|
279
|
});
|
f748e9cf
Luigi Serra
new controllet an...
|
280
|
|
67b280f4
Luigi Serra
search feature
|
281
282
|
</script>
</dom-module>
|