WebCompDev / 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 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 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 5 <link rel="import" href="../../bower_components/paper-material/paper-material.html">
6 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 9 <link rel="import" href="../../controllets/search-panel-controllet/search-panel-controllet.html">
13 10  
14 11 <dom-module id="animated-button-container-controllet">
15 12  
16 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 40 .window {
  41 + height: 600px;
  42 + width: 484px;
29 43 display: none;
30 44 position: fixed;
  45 + top: 20%;
31 46 right: 0;
32 47 left: 0;
33   - top: 20%;
34 48 margin-right: auto;
35 49 margin-left: auto;
36 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 78 position: absolute;
92 79 top: 0px;
93 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 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 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 104 <div class="transparent"></div>
149   - <paper-toolbar id="toolbar">
  105 +
  106 + <paper-toolbar class="toolbar">
150 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 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 118 </template>
164 119  
... ... @@ -171,50 +126,12 @@
171 126 is: 'animated-button-container-controllet',
172 127  
173 128 listeners:{
174   - 'animated-button-container-controllet_element-selected' : '_elementSelected',
175 129 'search-panel-controllet_content-changed' : '_handleSearch',
176 130 'animated-button-container-controllet_close' : '_onCloseClick',
177   - 'animated-button-container-controllet_open-window' : '_onOpenClick'
178 131 },
179 132  
180 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 135 searchFunction: {
219 136 type: String,
220 137 notify: true
... ... @@ -222,43 +139,17 @@
222 139 },
223 140  
224 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 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 145 _onOpenClick: function() {
245   - /*this.entryAnimation = 'fade-in-animation';
246   - this.exitAnimation = 'fade-out-animation';*/
247   - //this.selected = 1;
248 146 $(this.$.window).show();
249 147 },
250 148  
251 149 _onCloseClick: function(){
252   - /*this.entryAnimation = 'fade-out-animation';
253   - this.exitAnimation = 'fade-in-animation';*/
254   - //this.selected = 0;
255 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 153 _handleSearch: function(e){
263 154 if(this.$.container_content.children[0]._handleSearch != undefined) {
264 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 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 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 0 \ No newline at end of file
controllets/search-panel-controllet/search-panel-controllet.html
  View file @2ab5559
... ... @@ -65,14 +65,14 @@ Example:
65 65 --paper-input-container-input-color: #ffffff;
66 66 --paper-input-container-focus-color: #ffffff;
67 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 78 </style>
... ... @@ -84,7 +84,7 @@ Example:
84 84 <neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
85 85 <neon-animatable></neon-animatable>
86 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 88 </paper-input>
89 89 </neon-animatable>
90 90 </neon-animated-pages>
... ...