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 {
|
bde3a33f
Luigi Serra
containers layout...
|
30
|
position: fixed;
|
de1fbec1
Luigi Serra
elements position...
|
31
32
|
right: 0;
left: 0;
|
bde3a33f
Luigi Serra
containers layout...
|
33
|
top: 25%;
|
de1fbec1
Luigi Serra
elements position...
|
34
35
|
margin-right: auto;
margin-left: auto;
|
f748e9cf
Luigi Serra
new controllet an...
|
36
37
38
39
40
41
42
43
44
|
z-index: 1000;
}
.hidden{
display: none;
}
#close{
position: absolute;
|
67b280f4
Luigi Serra
search feature
|
45
|
top: 8px;
|
f748e9cf
Luigi Serra
new controllet an...
|
46
|
left: 28.5vw;
|
8a0bbd62
Luigi Serra
updates
|
47
48
49
50
|
--iron-icon-height: 20px;
--iron-icon-width: 20px;
width: 24px;
height: 24px;
|
67b280f4
Luigi Serra
search feature
|
51
|
--paper-fab-background:#9e9e9e;
|
f748e9cf
Luigi Serra
new controllet an...
|
52
53
54
55
|
z-index: 1001;
}
#open{
|
8a0bbd62
Luigi Serra
updates
|
56
57
|
--paper-fab-background:transparent;
background: transparent;
|
f748e9cf
Luigi Serra
new controllet an...
|
58
59
60
|
}
#selected_item{
|
6c8b91ab
Luigi Serra
updates
|
61
|
/*margin-left: 25px;*/
|
8a0bbd62
Luigi Serra
updates
|
62
|
margin-top: -5px;
|
f748e9cf
Luigi Serra
new controllet an...
|
63
64
65
66
67
68
69
70
71
72
|
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
|
73
|
transform-origin: 0 0;
|
6c8b91ab
Luigi Serra
updates
|
74
75
|
/*max-height: 64px;
max-width: 64px;*/
|
f748e9cf
Luigi Serra
new controllet an...
|
76
77
78
79
|
}
#container_content{
z-index: 1000;
|
31d9a4f6
Luigi Serra
updates
|
80
81
|
position: relative;
overflow: auto;
|
0a87e7be
Luigi Serra
updates
|
82
83
|
height: 100%;
background-color: #e8e8e8;
|
f748e9cf
Luigi Serra
new controllet an...
|
84
|
}
|
67b280f4
Luigi Serra
search feature
|
85
|
#toolbar{
|
8a0bbd62
Luigi Serra
updates
|
86
|
background: #2196F3;
|
67b280f4
Luigi Serra
search feature
|
87
88
89
90
|
height: 45px;
}
search-panel-controllet{
|
11455f01
Luigi Serra
updates
|
91
92
|
position: absolute;
top: 0px;
|
ca7442b9
Luigi Serra
updates
|
93
|
left: 0px;
|
67b280f4
Luigi Serra
search feature
|
94
95
|
}
|
8a0bbd62
Luigi Serra
updates
|
96
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
|
.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
|
133
|
|
dd139891
isisadmin
layout fix
|
134
135
136
137
138
139
140
141
142
|
.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...
|
143
144
145
146
147
148
149
|
</style>
<template>
<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
<neon-animatable><div id="hidden"></div></neon-animatable>
<neon-animatable>
|
f390a6e1
Luigi Serra
elements position...
|
150
|
<paper-material elevation="5" id="window" class="window">
|
dd139891
isisadmin
layout fix
|
151
|
<div class="transparent"></div>
|
67b280f4
Luigi Serra
search feature
|
152
|
<paper-toolbar id="toolbar">
|
0a87e7be
Luigi Serra
updates
|
153
|
<search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet>
|
772d3de9
Luigi Serra
updates
|
154
|
<paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
|
67b280f4
Luigi Serra
search feature
|
155
|
</paper-toolbar>
|
f748e9cf
Luigi Serra
new controllet an...
|
156
157
158
159
160
|
<div id="container_content"><content></content></div>
</paper-material>
</neon-animatable>
</neon-animated-pages>
|
dd139891
isisadmin
layout fix
|
161
|
<div id="button_container" class="horizontal layout">
|
8a0bbd62
Luigi Serra
updates
|
162
163
164
|
<span class="button-container" id="open" on-click="_onOpenClick">
<iron-icon id="button" icon="{{icon}}"></iron-icon>
</span>
|
67b280f4
Luigi Serra
search feature
|
165
|
<div id="selected_item"></div>
|
f748e9cf
Luigi Serra
new controllet an...
|
166
167
168
169
|
</div>
</template>
|
31d9a4f6
Luigi Serra
updates
|
170
171
|
<script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
|
67b280f4
Luigi Serra
search feature
|
172
|
<script>
|
f748e9cf
Luigi Serra
new controllet an...
|
173
|
|
67b280f4
Luigi Serra
search feature
|
174
|
Polymer({
|
f748e9cf
Luigi Serra
new controllet an...
|
175
|
|
67b280f4
Luigi Serra
search feature
|
176
|
is: 'animated-button-container-controllet',
|
f748e9cf
Luigi Serra
new controllet an...
|
177
|
|
67b280f4
Luigi Serra
search feature
|
178
|
listeners:{
|
31d9a4f6
Luigi Serra
updates
|
179
|
'animated-button-container-controllet_element-selected' : '_elementSelected',
|
f4f24b9d
Luigi Serra
containers layout...
|
180
181
|
'search-panel-controllet_content-changed' : '_handleSearch',
'animated-button-container-controllet_close' : '_onCloseClick'
|
67b280f4
Luigi Serra
search feature
|
182
|
},
|
f748e9cf
Luigi Serra
new controllet an...
|
183
|
|
67b280f4
Luigi Serra
search feature
|
184
185
186
187
188
189
190
|
properties: {
selected : {
type : Number,
value : 0
},
height:{
type: String,
|
f4f24b9d
Luigi Serra
containers layout...
|
191
|
value: "300px"
|
67b280f4
Luigi Serra
search feature
|
192
193
194
|
},
width:{
type: String,
|
f4f24b9d
Luigi Serra
containers layout...
|
195
|
value: "450px"
|
67b280f4
Luigi Serra
search feature
|
196
197
198
199
200
|
},
entryAnimation : {
type : String,
value : ""
},
|
31d9a4f6
Luigi Serra
updates
|
201
202
203
204
205
206
|
icon:{
type: String,
value: "assessment"
},
iconHeight:{
type: String,
|
d7a7f8a4
Luigi Serra
updates
|
207
|
value: "36"
|
31d9a4f6
Luigi Serra
updates
|
208
209
210
|
},
iconWidth:{
type: String,
|
d7a7f8a4
Luigi Serra
updates
|
211
|
value: "36"
|
31d9a4f6
Luigi Serra
updates
|
212
|
},
|
8a0bbd62
Luigi Serra
updates
|
213
214
215
216
217
|
backgroundButtonColor:{
type: String,
value: undefined
},
|
67b280f4
Luigi Serra
search feature
|
218
219
220
|
exitAnimation : {
type : String,
value : ""
|
31d9a4f6
Luigi Serra
updates
|
221
222
223
224
|
},
searchFunction: {
type: String,
notify: true
|
67b280f4
Luigi Serra
search feature
|
225
226
|
}
},
|
f748e9cf
Luigi Serra
new controllet an...
|
227
|
|
67b280f4
Luigi Serra
search feature
|
228
|
ready: function(){
|
f4f24b9d
Luigi Serra
containers layout...
|
229
|
/*this.$.window.style.height = this.height + "vh";
|
67b280f4
Luigi Serra
search feature
|
230
|
this.$.window.style.width = (this.width - 0.5) + "vw";
|
f4f24b9d
Luigi Serra
containers layout...
|
231
232
233
234
235
236
|
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
|
237
|
|
31d9a4f6
Luigi Serra
updates
|
238
239
|
$(this.$.container_content).perfectScrollbar();
|
dd139891
isisadmin
layout fix
|
240
241
242
243
244
245
|
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";
this.$.button_container.style.height = this.iconHeight + "px";
|
f748e9cf
Luigi Serra
new controllet an...
|
246
|
},
|
67b280f4
Luigi Serra
search feature
|
247
248
249
250
251
|
_onOpenClick: function() {
this.entryAnimation = 'fade-in-animation';
this.exitAnimation = 'fade-out-animation';
this.selected = 1;
|
f748e9cf
Luigi Serra
new controllet an...
|
252
|
},
|
67b280f4
Luigi Serra
search feature
|
253
254
255
256
257
|
_onCloseClick: function(){
/*this.entryAnimation = 'fade-out-animation';
this.exitAnimation = 'fade-in-animation';*/
this.selected = 0;
|
f748e9cf
Luigi Serra
new controllet an...
|
258
|
},
|
67b280f4
Luigi Serra
search feature
|
259
260
261
262
|
_elementSelected: function(e){
this.$.selected_item.innerHTML = "";
this.$.selected_item.appendChild(e.detail.selectedElement);
|
f748e9cf
Luigi Serra
new controllet an...
|
263
|
},
|
67b280f4
Luigi Serra
search feature
|
264
|
_handleSearch: function(e){
|
31d9a4f6
Luigi Serra
updates
|
265
266
267
268
269
270
271
272
|
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...
|
273
|
}
|
f748e9cf
Luigi Serra
new controllet an...
|
274
|
|
67b280f4
Luigi Serra
search feature
|
275
|
});
|
f748e9cf
Luigi Serra
new controllet an...
|
276
|
|
67b280f4
Luigi Serra
search feature
|
277
278
|
</script>
</dom-module>
|