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 | }); |