SGH / COMPONENTS

Commit 2ab5559c12912f5514520d0de9cce4c99861d0b5

Authored by Renato De Donato
1 parent c5169e0e

animated-button-container remake

Inline Side-by-side
Showing 6 changed files with 351 additions and 847 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
  View file @2ab5559
1 <link rel="import" href="../../bower_components/polymer/polymer.html"> 1 <link rel="import" href="../../bower_components/polymer/polymer.html">
2 -<link rel="import" href="../../bower_components/paper-styles/paper-styles.html"> 2 +
  3 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
3 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> 4 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
4 -<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">  
5 <link rel="import" href="../../bower_components/paper-material/paper-material.html"> 5 <link rel="import" href="../../bower_components/paper-material/paper-material.html">
6 <link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html"> 6 <link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
7 -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">  
8 -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">  
9 -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html"> 7 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
10 8
11 -<link rel="import" href="../../controllets/items-list-controllet/item-list-controllet.html">  
12 <link rel="import" href="../../controllets/search-panel-controllet/search-panel-controllet.html"> 9 <link rel="import" href="../../controllets/search-panel-controllet/search-panel-controllet.html">
13 10
14 <dom-module id="animated-button-container-controllet"> 11 <dom-module id="animated-button-container-controllet">
15 12
16 <style> 13 <style>
17 14
18 - :host {  
19 - @apply(--layout-horizontal);  
20 - @apply(--layout-center-center); 15 + iron-icon.myspace {
  16 + padding: 2px;
  17 + margin: 0px;
  18 + color: #FFFFFF;
  19 + height: 32px;
  20 + width: 32px;
  21 + background-color: #00BCD4;
21 } 22 }
22 - #pages{  
23 - position: absolute;  
24 - top: -38px;  
25 - left: 113px; 23 +
  24 + .button-container {
  25 + cursor: pointer;
  26 + height: 36px;
  27 + width: 36px;
  28 + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  29 + }
  30 +
  31 + .button-container:hover {
  32 + box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  33 + -webkit-transition: 0.2s ease-out;
  34 + -moz-transition: 0.2s ease-out;
  35 + -o-transition: 0.2s ease-out;
  36 + -ms-transition: 0.2s ease-out;
  37 + transition: 0.2s ease-out;
26 } 38 }
27 39
28 .window { 40 .window {
  41 + height: 600px;
  42 + width: 484px;
29 display: none; 43 display: none;
30 position: fixed; 44 position: fixed;
  45 + top: 20%;
31 right: 0; 46 right: 0;
32 left: 0; 47 left: 0;
33 - top: 20%;  
34 margin-right: auto; 48 margin-right: auto;
35 margin-left: auto; 49 margin-left: auto;
36 z-index: 1000; 50 z-index: 1000;
37 } 51 }
38 52
39 - .hidden{  
40 - display: none;  
41 - }  
42 -  
43 - #close{  
44 - position: absolute;  
45 - top: 8px;  
46 - left: 28.5vw;  
47 - --iron-icon-height: 20px;  
48 - --iron-icon-width: 20px;  
49 - width: 24px;  
50 - height: 24px;  
51 - --paper-fab-background:#9e9e9e;  
52 - z-index: 1001;  
53 - }  
54 -  
55 - #open{  
56 - --paper-fab-background:transparent;  
57 - background: transparent; 53 + .transparent {
  54 + position:fixed;
  55 + top:0;
  56 + left:0;
  57 + width:100%;
  58 + height:100%;
  59 + background-color: rgba(0, 0, 0, 0.4);
58 } 60 }
59 61
60 - #selected_item{  
61 - /*margin-left: 25px;*/  
62 - margin-top: -5px;  
63 - padding: 0;  
64 - ms-transform: scale(0.60);  
65 - -moz-transform: scale(0.60);  
66 - -o-transform: scale(0.60);  
67 - -webkit-transform: scale(0.60);  
68 - transform: scale(0.60);  
69 - -ms-transform-origin: 0 0;  
70 - -moz-transform-origin: 0 0;  
71 - -o-transform-origin: 0 0;  
72 - -webkit-transform-origin: 0 0;  
73 - transform-origin: 0 0;  
74 - /*max-height: 64px;  
75 - max-width: 64px;*/ 62 + .toolbar {
  63 + background: #2196F3;
  64 + height: 48px;
76 } 65 }
77 66
78 - #container_content{  
79 - z-index: 1000;  
80 - position: relative;  
81 - overflow: auto;  
82 - height: 100%;  
83 - background-color: #e8e8e8;  
84 - }  
85 - #toolbar{  
86 - background: #2196F3;  
87 - height: 45px; 67 + paper-fab.close {
  68 + position: absolute;
  69 + height: 32px;
  70 + width: 32px;
  71 + margin: 8px;
  72 + top: 0px;
  73 + right: 0px;
  74 + --paper-fab-background:#B6B6B6;
88 } 75 }
89 76
90 - #search_from_animated_button_container{ 77 + #search_from_animated_button_container {
91 position: absolute; 78 position: absolute;
92 top: 0px; 79 top: 0px;
93 left: 0px; 80 left: 0px;
94 } 81 }
95 82
96 - .button-container{  
97 - color: #fff;  
98 - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);  
99 - 83 + #container_content {
100 position: relative; 84 position: relative;
101 - }  
102 -  
103 - .button-container:hover{  
104 - color: #fff;  
105 - box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);  
106 - -webkit-transition: 0.2s ease-out;  
107 - -moz-transition: 0.2s ease-out;  
108 - -o-transition: 0.2s ease-out;  
109 - -ms-transition: 0.2s ease-out;  
110 - transition: 0.2s ease-out;  
111 - cursor: pointer;  
112 - }  
113 -  
114 - .button-container::before{  
115 - position: absolute;  
116 - content: '';  
117 - top: 0;  
118 - left: 0;  
119 - width: 100%; 85 + overflow: auto;
120 height: 100%; 86 height: 100%;
121 - background-color: rgba(0, 0, 0, 0); 87 + background-color: #E8E8E8;
  88 + z-index: 1000;
122 } 89 }
123 90
  91 + </style>
124 92
125 - .button-container:hover::before{  
126 - background-color: rgba(0, 0, 0, .15);  
127 - -webkit-transition: 0.2s ease-out;  
128 - -moz-transition: 0.2s ease-out;  
129 - -o-transition: 0.2s ease-out;  
130 - -ms-transition: 0.2s ease-out;  
131 - transition: 0.2s ease-out;  
132 - } 93 + <template>
133 94
134 - .transparent  
135 - {  
136 - position:fixed;  
137 - top:0;  
138 - left:0;  
139 - width:100%;  
140 - height:100%;  
141 - background-color: rgba(0, 0, 0, 0.4);  
142 - } 95 + <div class="button-container">
  96 + <span on-click="_onOpenClick">
  97 + <iron-icon class="myspace" icon="icons:folder-open"></iron-icon>
  98 + <!--create-new-folder-->
  99 + </span>
  100 + </div>
143 101
144 - </style> 102 + <paper-material id="window" class="window" elevation="5">
145 103
146 - <template>  
147 - <paper-material elevation="5" id="window" class="window">  
148 <div class="transparent"></div> 104 <div class="transparent"></div>
149 - <paper-toolbar id="toolbar"> 105 +
  106 + <paper-toolbar class="toolbar">
150 <search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet> 107 <search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet>
151 - <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>  
152 </paper-toolbar> 108 </paper-toolbar>
153 - <div id="container_content"><content></content></div>  
154 - </paper-material>  
155 109
156 - <div id="button_container" class="horizontal layout">  
157 - <span class="button-container" id="open" on-click="_onOpenClick">  
158 - <iron-icon id="open_window_button" icon="{{icon}}"></iron-icon>  
159 - </span>  
160 - <div id="selected_item"></div>  
161 - </div> 110 + <paper-fab class="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
  111 +
  112 + <div id="container_content">
  113 + <content></content>
  114 + </div>
  115 +
  116 + </paper-material>
162 117
163 </template> 118 </template>
164 119
@@ -171,50 +126,12 @@ @@ -171,50 +126,12 @@
171 is: 'animated-button-container-controllet', 126 is: 'animated-button-container-controllet',
172 127
173 listeners:{ 128 listeners:{
174 - 'animated-button-container-controllet_element-selected' : '_elementSelected',  
175 'search-panel-controllet_content-changed' : '_handleSearch', 129 'search-panel-controllet_content-changed' : '_handleSearch',
176 'animated-button-container-controllet_close' : '_onCloseClick', 130 'animated-button-container-controllet_close' : '_onCloseClick',
177 - 'animated-button-container-controllet_open-window' : '_onOpenClick'  
178 }, 131 },
179 132
180 properties: { 133 properties: {
181 - selected : {  
182 - type : Number,  
183 - value : 0  
184 - },  
185 - height:{  
186 - type: String,  
187 - value: "300px"  
188 - },  
189 - width:{  
190 - type: String,  
191 - value: "450px"  
192 - },  
193 - entryAnimation : {  
194 - type : String,  
195 - value : ""  
196 - },  
197 - icon:{  
198 - type: String,  
199 - value: "assessment"  
200 - },  
201 - iconHeight:{  
202 - type: String,  
203 - value: "36"  
204 - },  
205 - iconWidth:{  
206 - type: String,  
207 - value: "36"  
208 - },  
209 - backgroundButtonColor:{  
210 - type: String,  
211 - value: undefined  
212 134
213 - },  
214 - exitAnimation : {  
215 - type : String,  
216 - value : ""  
217 - },  
218 searchFunction: { 135 searchFunction: {
219 type: String, 136 type: String,
220 notify: true 137 notify: true
@@ -222,43 +139,17 @@ @@ -222,43 +139,17 @@
222 }, 139 },
223 140
224 ready: function(){ 141 ready: function(){
225 - /*this.$.window.style.height = this.height + "vh";  
226 - this.$.window.style.width = (this.width - 0.5) + "vw";  
227 - this.$.close.style.left = (this.width - 3.5) + "vw";*/  
228 -  
229 - this.$.window.style.height = this.height + "px";  
230 - this.$.window.style.width = this.width + "px";  
231 - this.$.close.style.left = (this.width - 30) + "px";  
232 -  
233 -  
234 $(this.$.container_content).perfectScrollbar(); 142 $(this.$.container_content).perfectScrollbar();
235 -  
236 - this.$.open.style.height = this.iconHeight + "px";  
237 - this.$.open.style.width = this.iconWidth + "px";  
238 - this.$.open_window_button.style.backgroundColor = this.backgroundButtonColor;  
239 - this.$.open_window_button.style.width = this.iconWidth + "px";  
240 - this.$.open_window_button.style.height = this.iconHeight + "px";  
241 - this.$.button_container.style.height = this.iconHeight + "px";  
242 }, 143 },
243 144
244 _onOpenClick: function() { 145 _onOpenClick: function() {
245 - /*this.entryAnimation = 'fade-in-animation';  
246 - this.exitAnimation = 'fade-out-animation';*/  
247 - //this.selected = 1;  
248 $(this.$.window).show(); 146 $(this.$.window).show();
249 }, 147 },
250 148
251 _onCloseClick: function(){ 149 _onCloseClick: function(){
252 - /*this.entryAnimation = 'fade-out-animation';  
253 - this.exitAnimation = 'fade-in-animation';*/  
254 - //this.selected = 0;  
255 $(this.$.window).hide(); 150 $(this.$.window).hide();
256 }, 151 },
257 152
258 - _elementSelected: function(e){  
259 - this.$.selected_item.innerHTML = "";  
260 - this.$.selected_item.appendChild(e.detail.selectedElement);  
261 - },  
262 _handleSearch: function(e){ 153 _handleSearch: function(e){
263 if(this.$.container_content.children[0]._handleSearch != undefined) { 154 if(this.$.container_content.children[0]._handleSearch != undefined) {
264 this.$.container_content.children[0]._handleSearch(e); 155 this.$.container_content.children[0]._handleSearch(e);
controllets/animated-button-container-controllet/animated-button-container-controllet_old.html 0 → 100755
  View file @2ab5559
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  2 +<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
  3 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
  4 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
  5 +<link rel="import" href="../../bower_components/paper-material/paper-material.html">
  6 +<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
  7 +<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
  8 +<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
  9 +<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
  10 +
  11 +<link rel="import" href="../../controllets/items-list-controllet/item-list-controllet.html">
  12 +<link rel="import" href="../../controllets/search-panel-controllet/search-panel-controllet.html">
  13 +
  14 +<dom-module id="animated-button-container-controllet">
  15 +
  16 + <style>
  17 +
  18 + :host {
  19 + @apply(--layout-horizontal);
  20 + @apply(--layout-center-center);
  21 + }
  22 + #pages{
  23 + position: absolute;
  24 + top: -38px;
  25 + left: 113px;
  26 + }
  27 +
  28 + .window {
  29 + display: none;
  30 + position: fixed;
  31 + right: 0;
  32 + left: 0;
  33 + top: 20%;
  34 + margin-right: auto;
  35 + margin-left: auto;
  36 + z-index: 1000;
  37 + }
  38 +
  39 + .hidden{
  40 + display: none;
  41 + }
  42 +
  43 + #close{
  44 + position: absolute;
  45 + top: 8px;
  46 + left: 28.5vw;
  47 + --iron-icon-height: 20px;
  48 + --iron-icon-width: 20px;
  49 + width: 24px;
  50 + height: 24px;
  51 + --paper-fab-background:#9e9e9e;
  52 + z-index: 1001;
  53 + }
  54 +
  55 + #open{
  56 + --paper-fab-background:transparent;
  57 + background: transparent;
  58 + }
  59 +
  60 + #selected_item{
  61 + /*margin-left: 25px;*/
  62 + margin-top: -5px;
  63 + padding: 0;
  64 + ms-transform: scale(0.60);
  65 + -moz-transform: scale(0.60);
  66 + -o-transform: scale(0.60);
  67 + -webkit-transform: scale(0.60);
  68 + transform: scale(0.60);
  69 + -ms-transform-origin: 0 0;
  70 + -moz-transform-origin: 0 0;
  71 + -o-transform-origin: 0 0;
  72 + -webkit-transform-origin: 0 0;
  73 + transform-origin: 0 0;
  74 + /*max-height: 64px;
  75 + max-width: 64px;*/
  76 + }
  77 +
  78 + #container_content{
  79 + z-index: 1000;
  80 + position: relative;
  81 + overflow: auto;
  82 + height: 100%;
  83 + background-color: #e8e8e8;
  84 + }
  85 + #toolbar{
  86 + background: #2196F3;
  87 + height: 45px;
  88 + }
  89 +
  90 + #search_from_animated_button_container{
  91 + position: absolute;
  92 + top: 0px;
  93 + left: 0px;
  94 + }
  95 +
  96 + .button-container{
  97 + color: #fff;
  98 + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  99 +
  100 + position: relative;
  101 + }
  102 +
  103 + .button-container:hover{
  104 + color: #fff;
  105 + box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  106 + -webkit-transition: 0.2s ease-out;
  107 + -moz-transition: 0.2s ease-out;
  108 + -o-transition: 0.2s ease-out;
  109 + -ms-transition: 0.2s ease-out;
  110 + transition: 0.2s ease-out;
  111 + cursor: pointer;
  112 + }
  113 +
  114 + .button-container::before{
  115 + position: absolute;
  116 + content: '';
  117 + top: 0;
  118 + left: 0;
  119 + width: 100%;
  120 + height: 100%;
  121 + background-color: rgba(0, 0, 0, 0);
  122 + }
  123 +
  124 +
  125 + .button-container:hover::before{
  126 + background-color: rgba(0, 0, 0, .15);
  127 + -webkit-transition: 0.2s ease-out;
  128 + -moz-transition: 0.2s ease-out;
  129 + -o-transition: 0.2s ease-out;
  130 + -ms-transition: 0.2s ease-out;
  131 + transition: 0.2s ease-out;
  132 + }
  133 +
  134 + .transparent
  135 + {
  136 + position:fixed;
  137 + top:0;
  138 + left:0;
  139 + width:100%;
  140 + height:100%;
  141 + background-color: rgba(0, 0, 0, 0.4);
  142 + }
  143 +
  144 + </style>
  145 +
  146 + <template>
  147 + <paper-material elevation="5" id="window" class="window">
  148 + <div class="transparent"></div>
  149 + <paper-toolbar id="toolbar">
  150 + <search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet>
  151 + <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
  152 + </paper-toolbar>
  153 + <div id="container_content"><content></content></div>
  154 + </paper-material>
  155 +
  156 + <div id="button_container" class="horizontal layout">
  157 + <span class="button-container" id="open" on-click="_onOpenClick">
  158 + <iron-icon id="open_window_button" icon="{{icon}}"></iron-icon>
  159 + </span>
  160 + <div id="selected_item"></div>
  161 + </div>
  162 +
  163 + </template>
  164 +
  165 + <script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
  166 +
  167 + <script>
  168 +
  169 + Polymer({
  170 +
  171 + is: 'animated-button-container-controllet',
  172 +
  173 + listeners:{
  174 + 'animated-button-container-controllet_element-selected' : '_elementSelected',
  175 + 'search-panel-controllet_content-changed' : '_handleSearch',
  176 + 'animated-button-container-controllet_close' : '_onCloseClick',
  177 + 'animated-button-container-controllet_open-window' : '_onOpenClick'
  178 + },
  179 +
  180 + properties: {
  181 + selected : {
  182 + type : Number,
  183 + value : 0
  184 + },
  185 + height:{
  186 + type: String,
  187 + value: "300px"
  188 + },
  189 + width:{
  190 + type: String,
  191 + value: "450px"
  192 + },
  193 + entryAnimation : {
  194 + type : String,
  195 + value : ""
  196 + },
  197 + icon:{
  198 + type: String,
  199 + value: "assessment"
  200 + },
  201 + iconHeight:{
  202 + type: String,
  203 + value: "36"
  204 + },
  205 + iconWidth:{
  206 + type: String,
  207 + value: "36"
  208 + },
  209 + backgroundButtonColor:{
  210 + type: String,
  211 + value: undefined
  212 +
  213 + },
  214 + exitAnimation : {
  215 + type : String,
  216 + value : ""
  217 + },
  218 + searchFunction: {
  219 + type: String,
  220 + notify: true
  221 + }
  222 + },
  223 +
  224 + ready: function(){
  225 + /*this.$.window.style.height = this.height + "vh";
  226 + this.$.window.style.width = (this.width - 0.5) + "vw";
  227 + this.$.close.style.left = (this.width - 3.5) + "vw";*/
  228 +
  229 + this.$.window.style.height = this.height + "px";
  230 + this.$.window.style.width = this.width + "px";
  231 + this.$.close.style.left = (this.width - 30) + "px";
  232 +
  233 +
  234 + $(this.$.container_content).perfectScrollbar();
  235 +
  236 + this.$.open.style.height = this.iconHeight + "px";
  237 + this.$.open.style.width = this.iconWidth + "px";
  238 + this.$.open_window_button.style.backgroundColor = this.backgroundButtonColor;
  239 + this.$.open_window_button.style.width = this.iconWidth + "px";
  240 + this.$.open_window_button.style.height = this.iconHeight + "px";
  241 + this.$.button_container.style.height = this.iconHeight + "px";
  242 + },
  243 +
  244 + _onOpenClick: function() {
  245 + /*this.entryAnimation = 'fade-in-animation';
  246 + this.exitAnimation = 'fade-out-animation';*/
  247 + //this.selected = 1;
  248 + $(this.$.window).show();
  249 + },
  250 +
  251 + _onCloseClick: function(){
  252 + /*this.entryAnimation = 'fade-out-animation';
  253 + this.exitAnimation = 'fade-in-animation';*/
  254 + //this.selected = 0;
  255 + $(this.$.window).hide();
  256 + },
  257 +
  258 + _elementSelected: function(e){
  259 + this.$.selected_item.innerHTML = "";
  260 + this.$.selected_item.appendChild(e.detail.selectedElement);
  261 + },
  262 + _handleSearch: function(e){
  263 + if(this.$.container_content.children[0]._handleSearch != undefined) {
  264 + this.$.container_content.children[0]._handleSearch(e);
  265 + }else{
  266 + if(this.searchFunction != undefined){
  267 + this.searchFunction = new Function('e','return '+ this.searchFunction);
  268 + this.searchFunction(e);
  269 + }
  270 + }
  271 + }
  272 +
  273 + });
  274 +
  275 + </script>
  276 +</dom-module>
controllets/paper-card-controllet/_paper-card-controllet.html deleted
View file @c5169e0
1 -<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>  
2 -<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>  
3 -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>  
4 -  
5 -  
6 -<dom-module id="paper-card-controllet">  
7 -  
8 - <template>  
9 - <style>  
10 - :host {  
11 - color: #333;  
12 - font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;  
13 - display: inline-block;  
14 - margin: 0 8px 8px ;  
15 - font-size: 14px;  
16 - text-align: justify;  
17 - line-height: 10px;  
18 - --paper-fab-background: var(--accent-color);  
19 - }  
20 -  
21 - paper-material {  
22 - border-radius: 2px;  
23 - background-color: white;  
24 - }  
25 -  
26 - .preview {  
27 - position: relative;  
28 - margin-bottom: 0px;  
29 - /*max-width: 200px;  
30 - max-height: 200px;  
31 - min-width: 200px;  
32 - min-height: 200px;*/  
33 - }  
34 -  
35 - .legend {  
36 - position: absolute;  
37 - background: rgba(0,0,0,0.5);  
38 - bottom: 0;  
39 - color: white;  
40 - height: 40px;  
41 - padding: 0 16px;  
42 - left: 0; right: 0;  
43 - }  
44 -  
45 - paper-fab {  
46 - position: absolute;  
47 - right: 10px;  
48 - bottom: -18px;  
49 - --paper-fab-background:#2196F3;  
50 - }  
51 -  
52 - .content ::content {  
53 - padding: 0 16px 8px;  
54 - font-weight: 300;  
55 - color: var(--secondary-text-color);  
56 - line-height: 24px;  
57 - }  
58 - ::content.buttons {  
59 - margin-top: 8px;  
60 - }  
61 - ::content paper-button, ::content paper-icon-button {  
62 - font-weight: 500;  
63 - color: var(--accent-color);  
64 - }  
65 -  
66 - paper-material{  
67 - max-height: 260px;  
68 - max-width: 200px;  
69 - min-height: 260px;  
70 - min-width: 200px;  
71 - }  
72 -  
73 - #card_content{  
74 - overflow: hidden;  
75 - max-width: 200px;  
76 - max-height: 240px;  
77 - min-width: 200px;  
78 - min-height: 240px;  
79 - }  
80 -  
81 - #datalet_preview{  
82 -  
83 - -ms-transform: scale(0.95);  
84 - -moz-transform: scale(0.95);  
85 - -o-transform: scale(0.95);  
86 - -webkit-transform: scale(0.95);  
87 - transform: scale(0.95);  
88 -  
89 - }  
90 -  
91 - #text_preview{  
92 - font-size: smaller;  
93 - }  
94 -  
95 - </style>  
96 -  
97 - <paper-material elevation="{{elevation}}">  
98 - <div class="vertical layout">  
99 - <div class="preview">  
100 - <div id="card_content">  
101 - <template is="dom-if" if="{{checkType(type,'image')}}">  
102 - <img src="{{imageSrc}}">  
103 - </template>  
104 - <template is="dom-if" if="{{checkType(type,'datalet')}}">  
105 - <div id="datalet_preview"><content></content></div>  
106 - </template>  
107 - <template is="dom-if" if="{{checkType(type,'text')}}">  
108 - <div id="text_preview"><content></content></div>  
109 - </template>  
110 - </div>  
111 - <div class="horizontal layout center legend">  
112 - <span>{{legend}}</span>  
113 - <paper-fab mini icon="{{icon}}"></paper-fab>  
114 - </div>  
115 - </div>  
116 - <div class="content">  
117 - <p>{{text}}</p >  
118 - </div>  
119 - </div>  
120 - </paper-material>  
121 - </template>  
122 -  
123 - <script>  
124 - Polymer({  
125 - is:'paper-card-controllet',  
126 -  
127 - properties: {  
128 - width: {  
129 - type: Number,  
130 - value: 350,  
131 - /*observer: "_changeWidth",*/  
132 - },  
133 - height: {  
134 - type: Number,  
135 - value: 200  
136 - },  
137 -  
138 - legend:{  
139 - type: String,  
140 - value: "Legend"  
141 - },  
142 -  
143 - type:{  
144 - type: String,  
145 - value: "text"  
146 - },  
147 -  
148 - icon:{  
149 - type: String,  
150 - value: "home"  
151 - },  
152 -  
153 - imageSrc: {  
154 - type: String,  
155 - value:""  
156 - }  
157 - },  
158 - _changeWidth: function(data){  
159 - this.style.width = data + "px";  
160 - this.querySelector(".content").width = data + "px";  
161 - },  
162 -  
163 - checkType: function(type, check){  
164 - return (type == check);  
165 - },  
166 -  
167 - ready: function(){  
168 - }  
169 - })  
170 - </script>  
171 -  
172 -  
173 -</dom-module>  
174 \ No newline at end of file 0 \ No newline at end of file
controllets/paper-card-controllet/paper-card-controllet__.html deleted
View file @c5169e0
1 -<link rel="import" href="../../bower_components/polymer/polymer.html"/>  
2 -<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>  
3 -<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>  
4 -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>  
5 -  
6 -<dom-module id="paper-card-controllet">  
7 -  
8 - <template>  
9 - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
10 - <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>  
11 - <style>  
12 - :host {  
13 - display: inline-block;  
14 - margin: 0 8px 8px ;  
15 - font-size: 14px;  
16 - line-height: 10px;  
17 - --paper-fab-background: var(--accent-color);  
18 - font-family: 'Roboto', sans-serif;  
19 - }  
20 -  
21 - paper-material {  
22 - background-color: white;  
23 - border-width: 1em;  
24 - }  
25 -  
26 - .header {  
27 - position: relative;  
28 - /*margin-bottom: 24px;*/  
29 - }  
30 -  
31 -  
32 - .title  
33 - {  
34 - position: relative;  
35 - margin-left: 40px;  
36 - }  
37 -  
38 - .big  
39 - {  
40 - font-size: 1em;  
41 - padding: 8px;  
42 - }  
43 -  
44 - .small  
45 - {  
46 - font-size: 0.8em;  
47 - padding-top: 10px;  
48 - font-weight: bold;  
49 - }  
50 -  
51 - .legend {  
52 - position: relative;  
53 - float: left;  
54 - width: 100%;  
55 - background: rgba(0,0,0,0.2);  
56 - bottom: 0;  
57 - color: white;  
58 - height: 50px;  
59 - padding: 0 16px;  
60 - left: 0; right: 0;  
61 - }  
62 - paper-fab {  
63 - position: absolute;  
64 - left: 10px;  
65 - margin-top: 24px;  
66 - z-index: 10;  
67 - --paper-fab-background:#2196F3;  
68 - }  
69 -  
70 - #content ::content {  
71 - /*padding: 0 16px 8px;*/  
72 - padding: 0 16px 8px;  
73 - font-weight: 300;  
74 - color: var(--secondary-text-color);  
75 - line-height: 24px;  
76 - max-height: 400px;  
77 - position:relative;  
78 - overflow: auto;  
79 - }  
80 - ::content.buttons {  
81 - margin-top: 8px;  
82 - }  
83 - ::content paper-button, ::content paper-icon-button {  
84 - font-weight: 500;  
85 - color: var(--accent-color);  
86 - }  
87 -  
88 - #text{  
89 - position:relative;  
90 - height: auto;  
91 - padding: 8px 8px 8px 8px;  
92 - font-size: 10px;  
93 - color: rgba(0,0,0,0.4);  
94 - font-family: 'Roboto', sans-serif;  
95 - }  
96 - </style>  
97 -  
98 -  
99 - <paper-material animated elevation="{{elevation}}" flex>  
100 -  
101 - <div class="vertical layout">  
102 -  
103 - <div class="header">  
104 -  
105 - <template is="dom-if" if="{{legend}}">  
106 -  
107 - <div class="legend horizontal layout center">  
108 - <div class="title flex">  
109 - <div class="big">{{legend}}</div>  
110 - <!--<div class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>-->  
111 - </div>  
112 - <!-- Adding icon based on card type -->  
113 -  
114 - <template is="dom-if" if="{{checkType(type, 'text')}}">  
115 -  
116 - <paper-fab mini icon="create"></paper-fab>  
117 -  
118 - </template>  
119 -  
120 - <template is="dom-if" if="{{checkType(type, 'image')}}">  
121 -  
122 - <paper-fab mini icon="perm-media"></paper-fab>  
123 -  
124 - </template>  
125 -  
126 - <template is="dom-if" if="{{checkType(type, 'datalet')}}">  
127 -  
128 - <paper-fab mini icon="assessment"></paper-fab>  
129 -  
130 - </template>  
131 -  
132 - <template is="dom-if" if="{{checkType(type, 'link')}}">  
133 -  
134 - <paper-fab mini icon="link"></paper-fab>  
135 -  
136 - </template>  
137 -  
138 - <!--<div id="text">  
139 - Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e  
140 - della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal  
141 - sedicesimo secolo.  
142 - </div>-->  
143 -  
144 - </div>  
145 -  
146 - </template>  
147 -  
148 - <div id="content">  
149 - <content></content>  
150 - </div>  
151 - </div>  
152 -  
153 - </div>  
154 - </paper-material>  
155 -  
156 - </template>  
157 -  
158 - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
159 -  
160 - <script>  
161 - Polymer({  
162 - is: "paper-card-controllet",  
163 - properties: {  
164 - width: {  
165 - type: Number,  
166 - observer: "_changeWidth",  
167 - },  
168 - height: {  
169 - type: Number,  
170 - observer: "_changeHeight",  
171 - },  
172 - type:{  
173 - type: String,  
174 - value: "text"  
175 - }  
176 - },  
177 -  
178 - _changeWidth: function(data){  
179 - this.style.width = data + "px";  
180 - //this.$.content.style.width = data + "px";  
181 - //$(this.$.content).perfectScrollbar();  
182 - },  
183 -  
184 - _changeHeight: function(data){  
185 - this.style.height = (data + 20) + "px";  
186 - this.$.content.style.height = data + "px";  
187 - //$(this.$.content).perfectScrollbar();  
188 - },  
189 -  
190 - checkType: function(type, check){  
191 - return (type == check);  
192 - }  
193 - })  
194 - </script>  
195 -  
196 -</dom-module>  
197 \ No newline at end of file 0 \ No newline at end of file
controllets/paper-card-controllet/paper-card-controllet_old.html deleted
View file @c5169e0
1 -<link rel="import" href="../../bower_components/polymer/polymer.html"/>  
2 -<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>  
3 -<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>  
4 -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>  
5 -  
6 -<dom-module id="paper-card-controllet">  
7 -  
8 - <template>  
9 - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
10 - <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>  
11 - <style>  
12 - :host {  
13 - display: inline-block;  
14 - margin: 0 8px 8px ;  
15 - font-size: 14px;  
16 - text-align: justify;  
17 - line-height: 10px;  
18 - --paper-fab-background: var(--accent-color);  
19 - font-family: 'Roboto', sans-serif;  
20 - padding-bottom: 30px;  
21 - }  
22 -  
23 - paper-material {  
24 - background-color: white;  
25 - border-width: 1em;  
26 - }  
27 -  
28 - .footer {  
29 - position: relative;  
30 - height: 21px;  
31 - }  
32 -  
33 - .legend {  
34 - position: relative;  
35 - top: -50px;  
36 - background: rgba(0,0,0,0.8);  
37 - bottom: 0;  
38 - color: white;  
39 - height: 50px;  
40 - padding: 0 16px;  
41 - left: 0; right: 0;  
42 - z-index: 1000;  
43 - word-wrap: break-word;  
44 - }  
45 - paper-fab {  
46 - position: absolute;  
47 - right: 10px;  
48 - bottom: -18px;  
49 - z-index: 10;  
50 - --paper-fab-background:#2196F3;  
51 - }  
52 -  
53 - #content ::content {  
54 - /*padding: 0 16px 8px;*/  
55 - padding: 0 16px 8px;  
56 - font-weight: 300;  
57 - color: var(--secondary-text-color);  
58 - line-height: 24px;  
59 - max-height: 400px;  
60 - position:relative;  
61 - overflow: auto;  
62 - }  
63 -  
64 - ::content.buttons {  
65 - margin-top: 8px;  
66 - }  
67 -  
68 - ::content paper-button, ::content paper-icon-button {  
69 - font-weight: 500;  
70 - color: var(--accent-color);  
71 - }  
72 -  
73 - #comment{  
74 - position:relative;  
75 - top: -50px;  
76 - min-height: 50px;  
77 - height: auto;  
78 - padding: 8px 8px 8px 8px;  
79 - font-size: 10px;  
80 - color: rgba(0,0,0,0.4);  
81 - font-family: 'Roboto', sans-serif;  
82 - word-wrap: break-word;  
83 - }  
84 -  
85 - .delete{  
86 - position: absolute;  
87 - top: -12px;  
88 - left: -12px;  
89 - --iron-icon-height: 18px;  
90 - --iron-icon-width: 18px;  
91 - width: 24px;  
92 - height: 24px;  
93 - --paper-fab-background:#cccccc;  
94 - }  
95 -  
96 - .fullscreen{  
97 - position: absolute;  
98 - top: 36px;  
99 - right: 54px;  
100 - --iron-icon-height: 18px;  
101 - --iron-icon-width: 18px;  
102 - width: 24px;  
103 - height: 24px;  
104 - --paper-fab-background:#cccccc;  
105 - }  
106 -  
107 - #fullscreen_container{  
108 - position: fixed;  
109 - width: 80%;  
110 - /*height: 60%;*/  
111 - right: 0;  
112 - left: 0;  
113 - top: 5%;  
114 - margin-right: auto;  
115 - margin-left: auto;  
116 - z-index: 1100;  
117 - display: none;  
118 - padding: 40px;  
119 - line-height: 20px;  
120 - }  
121 -  
122 - .close_fullscreen{  
123 - position: absolute;  
124 - top: 5px;  
125 - right: 1vw;  
126 - --iron-icon-height: 18px;  
127 - --iron-icon-width: 18px;  
128 - width: 24px;  
129 - height: 24px;  
130 - --paper-fab-background:#cccccc;  
131 - }  
132 -  
133 - #fullscreen_content{  
134 - position: relative;  
135 - height: 100%;  
136 - width: 100%;  
137 - z-index: 1000;  
138 - }  
139 -  
140 - </style>  
141 -  
142 -  
143 - <paper-material animated elevation="{{elevation}}" flex>  
144 -  
145 - <paper-fab class="delete" mini icon="delete" on-click="_handleDeleteClick"></paper-fab>  
146 -  
147 - <div class="vertical layout">  
148 - <div id="content">  
149 - <content></content>  
150 - </div>  
151 -  
152 - <div class="legend horizontal layout center">  
153 - <span>{{cardTitle}}</span>  
154 -  
155 - <paper-fab class="fullscreen" mini icon="fullscreen" on-click="_handleFullscreenClick"></paper-fab>  
156 -  
157 - <!-- Adding icon based on card type -->  
158 -  
159 - <template is="dom-if" if="{{checkType(cardType, 'text')}}">  
160 -  
161 - <paper-fab class="modify" mini icon="create" on-click="_handleDetailsClick"></paper-fab>  
162 -  
163 - </template>  
164 -  
165 - <template is="dom-if" if="{{checkType(cardType, 'image')}}">  
166 -  
167 - <paper-fab class="modify" mini icon="perm-media" on-click="_handleDetailsClick"></paper-fab>  
168 -  
169 - </template>  
170 -  
171 - <template is="dom-if" if="{{checkType(cardType, 'datalet')}}">  
172 -  
173 - <paper-fab class="modify" mini icon="assessment" on-click="_handleDetailsClick"></paper-fab>  
174 -  
175 - </template>  
176 -  
177 - <template is="dom-if" if="{{checkType(cardType, 'link')}}">  
178 -  
179 - <paper-fab class="modify" mini icon="link" on-click="_handleDetailsClick"></paper-fab>  
180 -  
181 - </template>  
182 -  
183 - </div>  
184 -  
185 - <div class="footer">  
186 - <template is="dom-if" if="{{comment}}">  
187 - <div id="comment">{{comment}}</div>  
188 - </template>  
189 - </div>  
190 -  
191 - <paper-material elevation="3" id="fullscreen_container">  
192 - <paper-fab class="close_fullscreen" mini icon="close" on-click="_handleCloseFullscreenClick"></paper-fab>  
193 - <div id="fullscreen_content"></div>  
194 - </paper-material>  
195 -  
196 - </div>  
197 - </paper-material>  
198 -  
199 - </template>  
200 -  
201 - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
202 -  
203 - <script>  
204 - Polymer({  
205 - is: "paper-card-controllet",  
206 - properties: {  
207 - width: {  
208 - type: Number,  
209 - observer: "_changeWidth"  
210 - },  
211 - height: {  
212 - type: Number,  
213 - observer: "_changeHeight"  
214 - },  
215 - cardType:{  
216 - type: String,  
217 - value: "text"  
218 - },  
219 - comment:{  
220 - cardType: String,  
221 - value: ""  
222 - },  
223 - cardTitle:{  
224 - type: String,  
225 - value: ""  
226 - },  
227 - elevation:{  
228 - type: Number,  
229 - value: 3  
230 - }  
231 -  
232 - },  
233 -  
234 - attached: function(){  
235 - if(this.cardType == "text"){  
236 - this.$.content.style.backgroundColor = "#ffc";  
237 - }  
238 - },  
239 -  
240 - _changeWidth: function(data){  
241 - this.style.width = data + "px";  
242 - //this.$.content.style.width = data + "px";  
243 - //$(this.$.content).perfectScrollbar();  
244 - },  
245 -  
246 - _changeHeight: function(data){  
247 - this.style.height = (data) + "px";  
248 - this.$.content.style.height = data + "px";  
249 - this.style.height = (this.height + ((this.text != "") ? 50 : 0)) + "px";  
250 - $(this.$.content).perfectScrollbar();  
251 - },  
252 -  
253 - checkType: function(type, check){  
254 - return (type == check);  
255 - },  
256 -  
257 - _handleDetailsClick: function(e){  
258 - this.fire('paper-card-controllet_details-clicked', {data : this});  
259 - },  
260 -  
261 - _handleDeleteClick: function(e){  
262 - this.fire('paper-card-controllet_delete-clicked', {data : this});  
263 - },  
264 -  
265 - _handleFullscreenClick: function(e){  
266 -  
267 - switch(this.cardType){  
268 - case 'text':  
269 - this.$.fullscreen_content.style.backgroundColor = "#ffc";  
270 - break;  
271 - case 'link':  
272 - window.open(this.getAttribute('card-link'),'_blank');  
273 - return;  
274 - }  
275 -  
276 - var html = this.$.content.innerHTML;  
277 - this.$.content.innerHTML = "";  
278 - this.$.fullscreen_content.innerHTML = html;  
279 -  
280 - this.$.fullscreen_container.style.display = "inline-block";  
281 - },  
282 -  
283 - _handleCloseFullscreenClick: function(e){  
284 -  
285 - var html = this.$.fullscreen_content.innerHTML;  
286 - this.$.fullscreen_content.innerHTML = "";  
287 - this.$.content.innerHTML = html;  
288 -  
289 - this.$.fullscreen_container.style.display = "none";  
290 - }  
291 - })  
292 - </script>  
293 -  
294 -</dom-module>  
295 \ No newline at end of file 0 \ No newline at end of file
controllets/search-panel-controllet/search-panel-controllet.html
  View file @2ab5559
@@ -65,14 +65,14 @@ Example: @@ -65,14 +65,14 @@ Example:
65 --paper-input-container-input-color: #ffffff; 65 --paper-input-container-input-color: #ffffff;
66 --paper-input-container-focus-color: #ffffff; 66 --paper-input-container-focus-color: #ffffff;
67 --paper-input-container-color: #ffffff; 67 --paper-input-container-color: #ffffff;
68 - position: absolute;  
69 - top: -12px;  
70 - width: 20vw; 68 + /*position: absolute;*/
  69 + /*top: -12px;*/
  70 + /*width: 20vw;*/
  71 + width: 392px;
71 } 72 }
72 73
73 - neon-animated-pages 74 + paper-icon-button
74 { 75 {
75 - /*width: 20vw;*/  
76 } 76 }
77 77
78 </style> 78 </style>
@@ -84,7 +84,7 @@ Example: @@ -84,7 +84,7 @@ Example:
84 <neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> 84 <neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
85 <neon-animatable></neon-animatable> 85 <neon-animatable></neon-animatable>
86 <neon-animatable> 86 <neon-animatable>
87 - <paper-input id="search_text" class="search-text" autofocus label="search" autosave="search_text" results="5" transition="fade-in-animation" value="{{searchKey}}"> 87 + <paper-input id="search_text" class="search-text" autofocus label="search" autosave="search_text" results="5" transition="fade-in-animation" value="{{searchKey}}" no-label-float>
88 </paper-input> 88 </paper-input>
89 </neon-animatable> 89 </neon-animatable>
90 </neon-animated-pages> 90 </neon-animated-pages>