From 13c53ccdff67f6f05ffaf480d28dbc7424c4c236 Mon Sep 17 00:00:00 2001
From: luigser <luigser@gmail.com>
Date: Tue, 15 Mar 2016 12:42:55 +0100
Subject: [PATCH] cards updates

---
 controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html |  10 +++++++++-
 controllets/paper-card-controllet/paper-card-controllet.html                       |   7 ++++++-
 controllets/postit-container-controllet/postit-container-controllet.html           | 176 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------
 3 files changed, 104 insertions(+), 89 deletions(-)
 mode change 100644 => 100755 controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html

diff --git a/controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html b/controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html
old mode 100644
new mode 100755
index 0ef99ce..91fc670
--- a/controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html
+++ b/controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html
@@ -83,7 +83,7 @@
                     </div>
                 </div>
                 <div class="card-actions">
-                    <paper-button>Explore</paper-button>
+                    <paper-button on-click="_onExplore">Explore</paper-button>
                     <paper-icon-button icon="expand-less" on-click="_toggle" style="float:right;">
                     </paper-icon-button>
                     <iron-collapse class="iron-collapse-over" id="more_info" no-animation>
@@ -124,6 +124,10 @@
                     type: String,
                     value: "text"
                 },
+                roomUrl: {
+                    type: String,
+                    value: undefined
+                }
             },
 
             attached: function(){
@@ -134,6 +138,10 @@
                 var iconButton = Polymer.dom(event).localTarget;
                 iconButton.icon = moreInfo.opened ? 'expand-less' : 'expand-more';
                 moreInfo.toggle();
+            },
+
+            _onExplore: function(e){
+                window.location = this.roomUrl;
             }
 
         })
diff --git a/controllets/paper-card-controllet/paper-card-controllet.html b/controllets/paper-card-controllet/paper-card-controllet.html
index 5a479db..c706f6e 100755
--- a/controllets/paper-card-controllet/paper-card-controllet.html
+++ b/controllets/paper-card-controllet/paper-card-controllet.html
@@ -18,6 +18,9 @@
                 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                 font-size: 16px;
                 background-color: white;
+                position: relative;
+                float: left;
+                margin: 40px;
             }
 
             #content {
@@ -30,7 +33,7 @@
                 top: -48px;
                 height: 32px;
                 padding: 16px 0px 0px 8px;
-                z-index: 1000;
+                /*z-index: 1000;*/
                 background: rgba(0,0,0,0.8);
                 color: white;
                 font-weight: 700;
@@ -222,11 +225,13 @@
             _changeWidth: function(){
                 this.style.width = this.width + "px";
                 this.$.content.style.width = this.width - 8 + "px";
+                this.$.paper_card_container.style.width = this.width + "px";
             },
 
             _changeHeight: function(){
                 this.style.height = this.height + 64 + "px";
                 this.$.content.style.height = this.height - 4 + "px";
+                this.$.paper_card_container.style.height = this.height + "px";
                 $(this.$.content).perfectScrollbar();
             },
 
diff --git a/controllets/postit-container-controllet/postit-container-controllet.html b/controllets/postit-container-controllet/postit-container-controllet.html
index 7c67b92..f82bf36 100755
--- a/controllets/postit-container-controllet/postit-container-controllet.html
+++ b/controllets/postit-container-controllet/postit-container-controllet.html
@@ -62,6 +62,7 @@
             /*height: 80vh;
             width: 120vh;*/
             display: none;
+            width: 50%;
             height: 80%;
             position: fixed;
             top: 15%;
@@ -88,7 +89,7 @@
             top: 0px;
             right: 0px;
             --paper-fab-background:#B6B6B6;
-            z-index: 9999;
+            /*z-index: 9999;*/
         }
 
         paper-fab#addPostit {
@@ -99,7 +100,7 @@
             top: 0px;
             right: 48px;
             --paper-fab-background:#2196F3;
-            z-index: 9999;
+            /*z-index: 9999;*/
         }
 
         #container_content {
@@ -114,6 +115,7 @@
         h2,p{
             font-size:100%;
             font-weight:normal;
+            word-break: break-all;
         }
         ul,li{
             list-style:none;
@@ -188,6 +190,52 @@
             z-index:5;
         }
 
+        #addForm{
+            text-decoration:none;
+            color:#000;
+            background:#ffc;
+            display:none;
+            height:20em;
+            width:20em;
+            padding:1em;
+            -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
+            -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
+            box-shadow: 5px 5px 7px rgba(33,33,33,.7);
+            -moz-transition:-moz-transform .15s linear;
+            -o-transition:-o-transform .15s linear;
+            -webkit-transition:-webkit-transform .15s linear;
+            position: absolute;
+            top: 25%;
+            left: 25%;
+        }
+
+        #newTitle{
+            background: #E6E6E6;
+            border-radius: 3px;
+        }
+
+        #newTitle:focus{
+            background: transparent;
+            border-radius: 3px;
+            border: 2px solid #2196F3;
+        }
+
+        #newContent{
+            background: #E6E6E6;
+            border-radius: 3px;
+        }
+
+        #newContent:focus{
+            background: transparent;
+            border-radius: 3px;
+            border: 2px solid #2196F3;
+        }
+
+        [contenteditable=true]:empty:before {
+            content: attr(placeholder);
+            display: block; /* For Firefox */
+        }
+
     </style>
 
     <template>
@@ -203,103 +251,34 @@
             <div class="transparent"></div>
 
             <paper-fab class="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
-            <paper-fab id="addPostit" icon="add" title='{text key="spodcollaborative+add_content"}' class="dropdown-trigger"></paper-fab>
+            <paper-fab id="addPostit" icon="add" title='Add new postit' class="dropdown-trigger" on-click="_onAddPostitClick"></paper-fab>
             <div id="container_content">
                 <content>
-                    <ul>
-                        <!--<template is="dom-repeat" items="{{data}}">
+                    <ul id="postit_container">
+
+                        <template is="dom-repeat" items="{{data}}">
                             <li>
                                 <a href="#">
-                                    <h3>{{items.title}}</h3>
-                                    <p>{{items.content}}</p>
+                                    <h3>{{item.title}}</h3>
+                                    <p>{{item.content}}</p>
                                 </a>
                             </li>
-                        </template>-->
-
-                        <li>
-                            <a href="#">
-                                <h3>My note #1</h3>
-                                <p>
-                                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
-                                    praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
-                                    excepturi sint occaecati cupiditate non provident
-                                </p>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#">
-                                <h2>My note #2</h2>
-                                <p>
-                                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
-                                    maxime placeat facere possimus
-                                </p>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#">
-                                <h2>My note #3</h2>
-                                <p>
-                                    Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
-                                    Et harum quidem rerum facilis est et expedita distinctio
-                                </p>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#">
-                                <h2>My note #4</h2>
-                                <p>
-                                    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet
-                                    ut et voluptates repudiandae sint et molestiae non recusandae.
-                                </p>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#">
-                                <h2>My note #5</h2>
-                                <p>
-                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua
-                                </p>
-                            </a>
-                        </li>
-                       <!-- <li>
-                            <a href="#">
-                                <h2>My note #6</h2>
-                                <p>
-                                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                                </p>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#">
-                                <h2>My note #7</h2>
-                                <p>
-                                    Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias
-                                    consequatur aut perferendis doloribus asperiores repellat
-                                </p>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#">
-                                <h2>My note #8</h2>
-                                <p>
-                                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                                    Excepteur sint occaecat cupidatat non proident
-                                </p>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#">
-                                <h2>My note #9</h2>
-                                <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-                            </a>
-                        </li>-->
+                        </template>
                     </ul>
+
+                    <div id="addForm">
+                        <h3 id="newTitle" contentEditable="true" onkeypress="return (this.innerText.length <= 13)" placeholder="Title"></h3>
+                        <p id="newContent" contentEditable="true" onkeypress="return (this.innerText.length <= 199)" placeholder="Content"></p>
+                        <paper-fab class="close" mini icon="close" on-click="_onCloseCreatePostitFormClick"></paper-fab>
+                        <paper-fab id="addPostit" icon="save" title='Add new postit' class="dropdown-trigger" on-click="_onAddNewPostitFormClick" ></paper-fab>
+                    </div>
+
                 </content>
             </div>
 
         </paper-material>
 
+
     </template>
 
     <script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
@@ -318,11 +297,17 @@
                 data : {
                     type: Array,
                     value: undefined
+                },
+
+                open : {
+                    type: Boolean,
+                    value: false
                 }
             },
 
             ready: function(){
                 $(this.$.container_content).perfectScrollbar();
+                if(this.open == true) $(this.$.window).show();
             },
 
             _onOpenClick: function() {
@@ -331,6 +316,23 @@
 
             _onCloseClick: function(){
                 $(this.$.window).hide();
+            },
+
+            _onAddPostitClick: function(){
+                this.$.addForm.style.display = "block";
+            },
+
+            _onCloseCreatePostitFormClick: function(){
+                this.$.addForm.style.display = "none";
+            },
+
+            _onAddNewPostitFormClick: function(){
+                //$(this.$.postit_container).append('<li><a href="#"><h2>' + this.$.newTitle.innerText + '</h2><p>' + this.$.newContent.innerText + '</p></a></li>');
+                this.fire('postit-container-controllet_create-new-postit', {title : this.$.newTitle.innerText, content: this.$.newContent.innerText, id: this.id});
+                this.$.addForm.style.display  = "none";
+                this.$.newTitle.innerHTML   = "Title";
+                this.$.newContent.innerHTML = "Content";
+
             }
 
         });
--
libgit2 0.21.4