Commit 13c53ccdff67f6f05ffaf480d28dbc7424c4c236
1 parent
85f3ac36
cards updates
Showing
3 changed files
with
104 additions
and
89 deletions
controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html
100644 → 100755
@@ -83,7 +83,7 @@ | @@ -83,7 +83,7 @@ | ||
83 | </div> | 83 | </div> |
84 | </div> | 84 | </div> |
85 | <div class="card-actions"> | 85 | <div class="card-actions"> |
86 | - <paper-button>Explore</paper-button> | 86 | + <paper-button on-click="_onExplore">Explore</paper-button> |
87 | <paper-icon-button icon="expand-less" on-click="_toggle" style="float:right;"> | 87 | <paper-icon-button icon="expand-less" on-click="_toggle" style="float:right;"> |
88 | </paper-icon-button> | 88 | </paper-icon-button> |
89 | <iron-collapse class="iron-collapse-over" id="more_info" no-animation> | 89 | <iron-collapse class="iron-collapse-over" id="more_info" no-animation> |
@@ -124,6 +124,10 @@ | @@ -124,6 +124,10 @@ | ||
124 | type: String, | 124 | type: String, |
125 | value: "text" | 125 | value: "text" |
126 | }, | 126 | }, |
127 | + roomUrl: { | ||
128 | + type: String, | ||
129 | + value: undefined | ||
130 | + } | ||
127 | }, | 131 | }, |
128 | 132 | ||
129 | attached: function(){ | 133 | attached: function(){ |
@@ -134,6 +138,10 @@ | @@ -134,6 +138,10 @@ | ||
134 | var iconButton = Polymer.dom(event).localTarget; | 138 | var iconButton = Polymer.dom(event).localTarget; |
135 | iconButton.icon = moreInfo.opened ? 'expand-less' : 'expand-more'; | 139 | iconButton.icon = moreInfo.opened ? 'expand-less' : 'expand-more'; |
136 | moreInfo.toggle(); | 140 | moreInfo.toggle(); |
141 | + }, | ||
142 | + | ||
143 | + _onExplore: function(e){ | ||
144 | + window.location = this.roomUrl; | ||
137 | } | 145 | } |
138 | 146 | ||
139 | }) | 147 | }) |
controllets/paper-card-controllet/paper-card-controllet.html
@@ -18,6 +18,9 @@ | @@ -18,6 +18,9 @@ | ||
18 | font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; | 18 | font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; |
19 | font-size: 16px; | 19 | font-size: 16px; |
20 | background-color: white; | 20 | background-color: white; |
21 | + position: relative; | ||
22 | + float: left; | ||
23 | + margin: 40px; | ||
21 | } | 24 | } |
22 | 25 | ||
23 | #content { | 26 | #content { |
@@ -30,7 +33,7 @@ | @@ -30,7 +33,7 @@ | ||
30 | top: -48px; | 33 | top: -48px; |
31 | height: 32px; | 34 | height: 32px; |
32 | padding: 16px 0px 0px 8px; | 35 | padding: 16px 0px 0px 8px; |
33 | - z-index: 1000; | 36 | + /*z-index: 1000;*/ |
34 | background: rgba(0,0,0,0.8); | 37 | background: rgba(0,0,0,0.8); |
35 | color: white; | 38 | color: white; |
36 | font-weight: 700; | 39 | font-weight: 700; |
@@ -222,11 +225,13 @@ | @@ -222,11 +225,13 @@ | ||
222 | _changeWidth: function(){ | 225 | _changeWidth: function(){ |
223 | this.style.width = this.width + "px"; | 226 | this.style.width = this.width + "px"; |
224 | this.$.content.style.width = this.width - 8 + "px"; | 227 | this.$.content.style.width = this.width - 8 + "px"; |
228 | + this.$.paper_card_container.style.width = this.width + "px"; | ||
225 | }, | 229 | }, |
226 | 230 | ||
227 | _changeHeight: function(){ | 231 | _changeHeight: function(){ |
228 | this.style.height = this.height + 64 + "px"; | 232 | this.style.height = this.height + 64 + "px"; |
229 | this.$.content.style.height = this.height - 4 + "px"; | 233 | this.$.content.style.height = this.height - 4 + "px"; |
234 | + this.$.paper_card_container.style.height = this.height + "px"; | ||
230 | $(this.$.content).perfectScrollbar(); | 235 | $(this.$.content).perfectScrollbar(); |
231 | }, | 236 | }, |
232 | 237 |
controllets/postit-container-controllet/postit-container-controllet.html
@@ -62,6 +62,7 @@ | @@ -62,6 +62,7 @@ | ||
62 | /*height: 80vh; | 62 | /*height: 80vh; |
63 | width: 120vh;*/ | 63 | width: 120vh;*/ |
64 | display: none; | 64 | display: none; |
65 | + width: 50%; | ||
65 | height: 80%; | 66 | height: 80%; |
66 | position: fixed; | 67 | position: fixed; |
67 | top: 15%; | 68 | top: 15%; |
@@ -88,7 +89,7 @@ | @@ -88,7 +89,7 @@ | ||
88 | top: 0px; | 89 | top: 0px; |
89 | right: 0px; | 90 | right: 0px; |
90 | --paper-fab-background:#B6B6B6; | 91 | --paper-fab-background:#B6B6B6; |
91 | - z-index: 9999; | 92 | + /*z-index: 9999;*/ |
92 | } | 93 | } |
93 | 94 | ||
94 | paper-fab#addPostit { | 95 | paper-fab#addPostit { |
@@ -99,7 +100,7 @@ | @@ -99,7 +100,7 @@ | ||
99 | top: 0px; | 100 | top: 0px; |
100 | right: 48px; | 101 | right: 48px; |
101 | --paper-fab-background:#2196F3; | 102 | --paper-fab-background:#2196F3; |
102 | - z-index: 9999; | 103 | + /*z-index: 9999;*/ |
103 | } | 104 | } |
104 | 105 | ||
105 | #container_content { | 106 | #container_content { |
@@ -114,6 +115,7 @@ | @@ -114,6 +115,7 @@ | ||
114 | h2,p{ | 115 | h2,p{ |
115 | font-size:100%; | 116 | font-size:100%; |
116 | font-weight:normal; | 117 | font-weight:normal; |
118 | + word-break: break-all; | ||
117 | } | 119 | } |
118 | ul,li{ | 120 | ul,li{ |
119 | list-style:none; | 121 | list-style:none; |
@@ -188,6 +190,52 @@ | @@ -188,6 +190,52 @@ | ||
188 | z-index:5; | 190 | z-index:5; |
189 | } | 191 | } |
190 | 192 | ||
193 | + #addForm{ | ||
194 | + text-decoration:none; | ||
195 | + color:#000; | ||
196 | + background:#ffc; | ||
197 | + display:none; | ||
198 | + height:20em; | ||
199 | + width:20em; | ||
200 | + padding:1em; | ||
201 | + -moz-box-shadow:5px 5px 7px rgba(33,33,33,1); | ||
202 | + -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); | ||
203 | + box-shadow: 5px 5px 7px rgba(33,33,33,.7); | ||
204 | + -moz-transition:-moz-transform .15s linear; | ||
205 | + -o-transition:-o-transform .15s linear; | ||
206 | + -webkit-transition:-webkit-transform .15s linear; | ||
207 | + position: absolute; | ||
208 | + top: 25%; | ||
209 | + left: 25%; | ||
210 | + } | ||
211 | + | ||
212 | + #newTitle{ | ||
213 | + background: #E6E6E6; | ||
214 | + border-radius: 3px; | ||
215 | + } | ||
216 | + | ||
217 | + #newTitle:focus{ | ||
218 | + background: transparent; | ||
219 | + border-radius: 3px; | ||
220 | + border: 2px solid #2196F3; | ||
221 | + } | ||
222 | + | ||
223 | + #newContent{ | ||
224 | + background: #E6E6E6; | ||
225 | + border-radius: 3px; | ||
226 | + } | ||
227 | + | ||
228 | + #newContent:focus{ | ||
229 | + background: transparent; | ||
230 | + border-radius: 3px; | ||
231 | + border: 2px solid #2196F3; | ||
232 | + } | ||
233 | + | ||
234 | + [contenteditable=true]:empty:before { | ||
235 | + content: attr(placeholder); | ||
236 | + display: block; /* For Firefox */ | ||
237 | + } | ||
238 | + | ||
191 | </style> | 239 | </style> |
192 | 240 | ||
193 | <template> | 241 | <template> |
@@ -203,103 +251,34 @@ | @@ -203,103 +251,34 @@ | ||
203 | <div class="transparent"></div> | 251 | <div class="transparent"></div> |
204 | 252 | ||
205 | <paper-fab class="close" mini icon="close" on-click="_onCloseClick"></paper-fab> | 253 | <paper-fab class="close" mini icon="close" on-click="_onCloseClick"></paper-fab> |
206 | - <paper-fab id="addPostit" icon="add" title='{text key="spodcollaborative+add_content"}' class="dropdown-trigger"></paper-fab> | 254 | + <paper-fab id="addPostit" icon="add" title='Add new postit' class="dropdown-trigger" on-click="_onAddPostitClick"></paper-fab> |
207 | <div id="container_content"> | 255 | <div id="container_content"> |
208 | <content> | 256 | <content> |
209 | - <ul> | ||
210 | - <!--<template is="dom-repeat" items="{{data}}"> | 257 | + <ul id="postit_container"> |
258 | + | ||
259 | + <template is="dom-repeat" items="{{data}}"> | ||
211 | <li> | 260 | <li> |
212 | <a href="#"> | 261 | <a href="#"> |
213 | - <h3>{{items.title}}</h3> | ||
214 | - <p>{{items.content}}</p> | 262 | + <h3>{{item.title}}</h3> |
263 | + <p>{{item.content}}</p> | ||
215 | </a> | 264 | </a> |
216 | </li> | 265 | </li> |
217 | - </template>--> | ||
218 | - | ||
219 | - <li> | ||
220 | - <a href="#"> | ||
221 | - <h3>My note #1</h3> | ||
222 | - <p> | ||
223 | - At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis | ||
224 | - praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias | ||
225 | - excepturi sint occaecati cupiditate non provident | ||
226 | - </p> | ||
227 | - </a> | ||
228 | - </li> | ||
229 | - <li> | ||
230 | - <a href="#"> | ||
231 | - <h2>My note #2</h2> | ||
232 | - <p> | ||
233 | - Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod | ||
234 | - maxime placeat facere possimus | ||
235 | - </p> | ||
236 | - </a> | ||
237 | - </li> | ||
238 | - <li> | ||
239 | - <a href="#"> | ||
240 | - <h2>My note #3</h2> | ||
241 | - <p> | ||
242 | - Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. | ||
243 | - Et harum quidem rerum facilis est et expedita distinctio | ||
244 | - </p> | ||
245 | - </a> | ||
246 | - </li> | ||
247 | - <li> | ||
248 | - <a href="#"> | ||
249 | - <h2>My note #4</h2> | ||
250 | - <p> | ||
251 | - Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet | ||
252 | - ut et voluptates repudiandae sint et molestiae non recusandae. | ||
253 | - </p> | ||
254 | - </a> | ||
255 | - </li> | ||
256 | - <li> | ||
257 | - <a href="#"> | ||
258 | - <h2>My note #5</h2> | ||
259 | - <p> | ||
260 | - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod | ||
261 | - tempor incididunt ut labore et dolore magna aliqua | ||
262 | - </p> | ||
263 | - </a> | ||
264 | - </li> | ||
265 | - <!-- <li> | ||
266 | - <a href="#"> | ||
267 | - <h2>My note #6</h2> | ||
268 | - <p> | ||
269 | - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | ||
270 | - </p> | ||
271 | - </a> | ||
272 | - </li> | ||
273 | - <li> | ||
274 | - <a href="#"> | ||
275 | - <h2>My note #7</h2> | ||
276 | - <p> | ||
277 | - Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias | ||
278 | - consequatur aut perferendis doloribus asperiores repellat | ||
279 | - </p> | ||
280 | - </a> | ||
281 | - </li> | ||
282 | - <li> | ||
283 | - <a href="#"> | ||
284 | - <h2>My note #8</h2> | ||
285 | - <p> | ||
286 | - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | ||
287 | - Excepteur sint occaecat cupidatat non proident | ||
288 | - </p> | ||
289 | - </a> | ||
290 | - </li> | ||
291 | - <li> | ||
292 | - <a href="#"> | ||
293 | - <h2>My note #9</h2> | ||
294 | - <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | ||
295 | - </a> | ||
296 | - </li>--> | 266 | + </template> |
297 | </ul> | 267 | </ul> |
268 | + | ||
269 | + <div id="addForm"> | ||
270 | + <h3 id="newTitle" contentEditable="true" onkeypress="return (this.innerText.length <= 13)" placeholder="Title"></h3> | ||
271 | + <p id="newContent" contentEditable="true" onkeypress="return (this.innerText.length <= 199)" placeholder="Content"></p> | ||
272 | + <paper-fab class="close" mini icon="close" on-click="_onCloseCreatePostitFormClick"></paper-fab> | ||
273 | + <paper-fab id="addPostit" icon="save" title='Add new postit' class="dropdown-trigger" on-click="_onAddNewPostitFormClick" ></paper-fab> | ||
274 | + </div> | ||
275 | + | ||
298 | </content> | 276 | </content> |
299 | </div> | 277 | </div> |
300 | 278 | ||
301 | </paper-material> | 279 | </paper-material> |
302 | 280 | ||
281 | + | ||
303 | </template> | 282 | </template> |
304 | 283 | ||
305 | <script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script> | 284 | <script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script> |
@@ -318,11 +297,17 @@ | @@ -318,11 +297,17 @@ | ||
318 | data : { | 297 | data : { |
319 | type: Array, | 298 | type: Array, |
320 | value: undefined | 299 | value: undefined |
300 | + }, | ||
301 | + | ||
302 | + open : { | ||
303 | + type: Boolean, | ||
304 | + value: false | ||
321 | } | 305 | } |
322 | }, | 306 | }, |
323 | 307 | ||
324 | ready: function(){ | 308 | ready: function(){ |
325 | $(this.$.container_content).perfectScrollbar(); | 309 | $(this.$.container_content).perfectScrollbar(); |
310 | + if(this.open == true) $(this.$.window).show(); | ||
326 | }, | 311 | }, |
327 | 312 | ||
328 | _onOpenClick: function() { | 313 | _onOpenClick: function() { |
@@ -331,6 +316,23 @@ | @@ -331,6 +316,23 @@ | ||
331 | 316 | ||
332 | _onCloseClick: function(){ | 317 | _onCloseClick: function(){ |
333 | $(this.$.window).hide(); | 318 | $(this.$.window).hide(); |
319 | + }, | ||
320 | + | ||
321 | + _onAddPostitClick: function(){ | ||
322 | + this.$.addForm.style.display = "block"; | ||
323 | + }, | ||
324 | + | ||
325 | + _onCloseCreatePostitFormClick: function(){ | ||
326 | + this.$.addForm.style.display = "none"; | ||
327 | + }, | ||
328 | + | ||
329 | + _onAddNewPostitFormClick: function(){ | ||
330 | + //$(this.$.postit_container).append('<li><a href="#"><h2>' + this.$.newTitle.innerText + '</h2><p>' + this.$.newContent.innerText + '</p></a></li>'); | ||
331 | + this.fire('postit-container-controllet_create-new-postit', {title : this.$.newTitle.innerText, content: this.$.newContent.innerText, id: this.id}); | ||
332 | + this.$.addForm.style.display = "none"; | ||
333 | + this.$.newTitle.innerHTML = "Title"; | ||
334 | + this.$.newContent.innerHTML = "Content"; | ||
335 | + | ||
334 | } | 336 | } |
335 | 337 | ||
336 | }); | 338 | }); |