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 | 83 | </div> |
| 84 | 84 | </div> |
| 85 | 85 | <div class="card-actions"> |
| 86 | - <paper-button>Explore</paper-button> | |
| 86 | + <paper-button on-click="_onExplore">Explore</paper-button> | |
| 87 | 87 | <paper-icon-button icon="expand-less" on-click="_toggle" style="float:right;"> |
| 88 | 88 | </paper-icon-button> |
| 89 | 89 | <iron-collapse class="iron-collapse-over" id="more_info" no-animation> |
| ... | ... | @@ -124,6 +124,10 @@ |
| 124 | 124 | type: String, |
| 125 | 125 | value: "text" |
| 126 | 126 | }, |
| 127 | + roomUrl: { | |
| 128 | + type: String, | |
| 129 | + value: undefined | |
| 130 | + } | |
| 127 | 131 | }, |
| 128 | 132 | |
| 129 | 133 | attached: function(){ |
| ... | ... | @@ -134,6 +138,10 @@ |
| 134 | 138 | var iconButton = Polymer.dom(event).localTarget; |
| 135 | 139 | iconButton.icon = moreInfo.opened ? 'expand-less' : 'expand-more'; |
| 136 | 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 | 18 | font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; |
| 19 | 19 | font-size: 16px; |
| 20 | 20 | background-color: white; |
| 21 | + position: relative; | |
| 22 | + float: left; | |
| 23 | + margin: 40px; | |
| 21 | 24 | } |
| 22 | 25 | |
| 23 | 26 | #content { |
| ... | ... | @@ -30,7 +33,7 @@ |
| 30 | 33 | top: -48px; |
| 31 | 34 | height: 32px; |
| 32 | 35 | padding: 16px 0px 0px 8px; |
| 33 | - z-index: 1000; | |
| 36 | + /*z-index: 1000;*/ | |
| 34 | 37 | background: rgba(0,0,0,0.8); |
| 35 | 38 | color: white; |
| 36 | 39 | font-weight: 700; |
| ... | ... | @@ -222,11 +225,13 @@ |
| 222 | 225 | _changeWidth: function(){ |
| 223 | 226 | this.style.width = this.width + "px"; |
| 224 | 227 | this.$.content.style.width = this.width - 8 + "px"; |
| 228 | + this.$.paper_card_container.style.width = this.width + "px"; | |
| 225 | 229 | }, |
| 226 | 230 | |
| 227 | 231 | _changeHeight: function(){ |
| 228 | 232 | this.style.height = this.height + 64 + "px"; |
| 229 | 233 | this.$.content.style.height = this.height - 4 + "px"; |
| 234 | + this.$.paper_card_container.style.height = this.height + "px"; | |
| 230 | 235 | $(this.$.content).perfectScrollbar(); |
| 231 | 236 | }, |
| 232 | 237 | ... | ... |
controllets/postit-container-controllet/postit-container-controllet.html
| ... | ... | @@ -62,6 +62,7 @@ |
| 62 | 62 | /*height: 80vh; |
| 63 | 63 | width: 120vh;*/ |
| 64 | 64 | display: none; |
| 65 | + width: 50%; | |
| 65 | 66 | height: 80%; |
| 66 | 67 | position: fixed; |
| 67 | 68 | top: 15%; |
| ... | ... | @@ -88,7 +89,7 @@ |
| 88 | 89 | top: 0px; |
| 89 | 90 | right: 0px; |
| 90 | 91 | --paper-fab-background:#B6B6B6; |
| 91 | - z-index: 9999; | |
| 92 | + /*z-index: 9999;*/ | |
| 92 | 93 | } |
| 93 | 94 | |
| 94 | 95 | paper-fab#addPostit { |
| ... | ... | @@ -99,7 +100,7 @@ |
| 99 | 100 | top: 0px; |
| 100 | 101 | right: 48px; |
| 101 | 102 | --paper-fab-background:#2196F3; |
| 102 | - z-index: 9999; | |
| 103 | + /*z-index: 9999;*/ | |
| 103 | 104 | } |
| 104 | 105 | |
| 105 | 106 | #container_content { |
| ... | ... | @@ -114,6 +115,7 @@ |
| 114 | 115 | h2,p{ |
| 115 | 116 | font-size:100%; |
| 116 | 117 | font-weight:normal; |
| 118 | + word-break: break-all; | |
| 117 | 119 | } |
| 118 | 120 | ul,li{ |
| 119 | 121 | list-style:none; |
| ... | ... | @@ -188,6 +190,52 @@ |
| 188 | 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 | 239 | </style> |
| 192 | 240 | |
| 193 | 241 | <template> |
| ... | ... | @@ -203,103 +251,34 @@ |
| 203 | 251 | <div class="transparent"></div> |
| 204 | 252 | |
| 205 | 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 | 255 | <div id="container_content"> |
| 208 | 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 | 260 | <li> |
| 212 | 261 | <a href="#"> |
| 213 | - <h3>{{items.title}}</h3> | |
| 214 | - <p>{{items.content}}</p> | |
| 262 | + <h3>{{item.title}}</h3> | |
| 263 | + <p>{{item.content}}</p> | |
| 215 | 264 | </a> |
| 216 | 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 | 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 | 276 | </content> |
| 299 | 277 | </div> |
| 300 | 278 | |
| 301 | 279 | </paper-material> |
| 302 | 280 | |
| 281 | + | |
| 303 | 282 | </template> |
| 304 | 283 | |
| 305 | 284 | <script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script> |
| ... | ... | @@ -318,11 +297,17 @@ |
| 318 | 297 | data : { |
| 319 | 298 | type: Array, |
| 320 | 299 | value: undefined |
| 300 | + }, | |
| 301 | + | |
| 302 | + open : { | |
| 303 | + type: Boolean, | |
| 304 | + value: false | |
| 321 | 305 | } |
| 322 | 306 | }, |
| 323 | 307 | |
| 324 | 308 | ready: function(){ |
| 325 | 309 | $(this.$.container_content).perfectScrollbar(); |
| 310 | + if(this.open == true) $(this.$.window).show(); | |
| 326 | 311 | }, |
| 327 | 312 | |
| 328 | 313 | _onOpenClick: function() { |
| ... | ... | @@ -331,6 +316,23 @@ |
| 331 | 316 | |
| 332 | 317 | _onCloseClick: function(){ |
| 333 | 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 | }); | ... | ... |