From cae620336b3c6ba370df3cacd0b4c1aa766d4b05 Mon Sep 17 00:00:00 2001
From: renato <rended83@gmail.com>
Date: Mon, 18 Jan 2016 12:00:13 +0100
Subject: [PATCH] room tooltip

---
 controllets/animated-grid-controllet/animated-grid-controllet.html |  61 ++++++++++++++++++++++++++++++++-----------------------------
 controllets/room-controllet/room-controllet.html                   | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------
 2 files changed, 106 insertions(+), 60 deletions(-)

diff --git a/controllets/animated-grid-controllet/animated-grid-controllet.html b/controllets/animated-grid-controllet/animated-grid-controllet.html
index 367c1de..908e77c 100755
--- a/controllets/animated-grid-controllet/animated-grid-controllet.html
+++ b/controllets/animated-grid-controllet/animated-grid-controllet.html
@@ -28,7 +28,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         }
 
         /* ---- grid-item ---- */
-        ::content .grid-item {float: left;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 3px solid white;}
+        ::content .grid-item {
+            float: left;
+            box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
+            border-top: 4px solid white;
+            border-left: 4px solid white;
+            cursor: pointer;
+        }
         ::content .grid-sizer {width: 200px;}
         ::content .grid-item-w20  {width:  200px;}
         ::content .grid-item-w40  {width:  400px;}
@@ -42,44 +48,41 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         ::content .grid-item-c4 {background-color: #2C29FF;}
         /* ---- grid-item ---- */
 
-        ::content .room-body    {color:#FFFFFF;}
+        ::content .room-body
+        {
+            height: calc(100% - 16px);/* 100% =*200/400 -4 border*/
+            width: calc(100% - 16px);
+            color:#FFFFFF;
+            padding: 8px;
+            word-wrap: break-word;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
         ::content .room-subject
         {
             position: absolute;
-            width: 100%;
-            height: 30px;
-            bottom: 30px;
-            background-color: rgba(0,0,0,0.6);
+            width: calc(100% - 16px);
+            height: 32px;
+            bottom: 32px;
+            background-color: rgba(0,0,0,0.8);
+            padding: 16px 0px 0px 16px;
             color: #FFFFFF;
-        }
-        ::content .room-subject span
-        {
-            top: 5px;
-            left: 5px;
-            position: relative;
-            text-overflow: ellipsis;
+            font-weight: 700;
+            white-space: nowrap;
+            word-wrap: break-word;
             overflow: hidden;
-            white-space:nowrap;
-            text-overflow:ellipsis;
-            display:inline-block;
-        }
-        ::content .room-body span
-        {
-            top: 5px;
-            left: 5px;
-            position: relative;
             text-overflow: ellipsis;
-            overflow: hidden;
-            text-overflow:ellipsis;
-            display:inline-block;
         }
+
         ::content .room-timestamp
         {
             position: absolute;
-            right:3px;
-            bottom: 3px;
-            font-size: 8px;
-            color: #CCCCCC;
+            bottom: 0px;
+            right:0px;
+            color: #FFFFFF;
+            padding: 8px;
+            font-size: small;
+            line-height: 16px;
         }
     </style>
 
diff --git a/controllets/room-controllet/room-controllet.html b/controllets/room-controllet/room-controllet.html
index f9fa644..c062a7f 100644
--- a/controllets/room-controllet/room-controllet.html
+++ b/controllets/room-controllet/room-controllet.html
@@ -2,46 +2,79 @@
 
 <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
 
+<link rel="import" href="../../bower_components/iron-icons/editor-icons.html">
+<link rel="import" href="../../bower_components/iron-icons/communication-icons.html">
+<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
+
 <dom-module id="room-controllet">
 
     <template>
 
         <style is="custom-style">
 
-            .room {
-                cursor: pointer;
+            iron-icon {
+                padding: 0px;
+                margin: 0px;
             }
 
-            .room-body {
+            iron-icon.this {
+                position: absolute;
+                top: -3px;
+                left: -3px;
+
+                -moz-transform: scaleX(-1);
+                -o-transform: scaleX(-1);
+                -webkit-transform: scaleX(-1);
+                transform: scaleX(-1);
+                filter: FlipH;
+                -ms-filter: "FlipH";
 
             }
 
-            .room-subject {
+            paper-dialog {
+                margin: 0px;
+            }
 
+            .room-tooltip {
+                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                position: absolute;
+                min-width: 250px;
+                top: 49px;
+                left: 98px;
+                padding: 16px;
             }
 
-            .room-timestamp {
+            .div_icon{
+                display: inline-block;
+                height: 20px;
+                width: 20px;
+                margin:4px 6px 4px 2px;
+            }
 
+            p {
+                padding-top: 8px;
+                margin: 0px;
+                white-space: nowrap;
             }
 
-            .room-tooltip {
-                position: absolute;
-                border: 2px solid #2196F3;
-                background-color: #E0E0E0;
-                min-width: 248px;
-                top: 0px;
-                left: 0px;
+            .ptop{
+                padding-top: 0px;
             }
 
         </style>
 
-        <div id={{roomId}} class$="grid-item room {{roomHeight}} {{roomWidth}}" on-mouseover="_showTooltip" on-mouseout="_hideTooltip">
-            <div class="room-body"><span>{{body}}</span></div>
+        <div id={{roomId}} class$="grid-item {{roomHeight}} {{roomWidth}}" on-mouseover="_showTooltip" on-mouseout="_hideTooltip" style$="background-color: {{roomColor}};">
+            <div class="room-body">{{body}}</div>
             <div class="room-subject"><span>{{subject}}</span></div>
             <div class="room-timestamp">{{timestamp}}</div>
 
-            <paper-dialog id="pippo" class="room-tooltip">
-                {{roomId}}
+            <paper-dialog id="room_info" class="room-tooltip">
+                <iron-icon icon="communication:call-made" class="this" style="color: #2196F3;"></iron-icon>
+                <p class="ptop">This room <b style="color: #2196F3;">{{subject}}</b>,</p>
+                <p>created by <b style="color: #2196F3;">{{roomOwner}}</b> has:</p>
+                <p><iron-icon class="div_icon" style$="background-color: {{roomColor}};"></iron-icon><b style$="color: {{roomColor}};">{{_howMany(roomShape, 0)}} views</b> (<b style$="color: {{roomColor}};">{{roomViews}}</b>),</p>
+                <p><iron-icon icon="editor:border-left"></iron-icon> <b>{{_howMany(roomShape, 1)}} comments</b> (<b>{{comments}}</b>) and</p>
+                <p><iron-icon icon="editor:border-bottom"></iron-icon> <b>{{_howMany(roomShape, 2)}} datasets</b> (<b>{{datasets}}</b>).</p>
             </paper-dialog>
         </div>
 
@@ -75,6 +108,16 @@
                     value : ""
                 },
 
+                roomOwner : {
+                    type  : String,
+                    value : ""
+                },
+
+                roomShape : {
+                    type  : Array,
+                    value : undefined
+                },
+
                 body : {
                     type  : String,
                     value : ""
@@ -90,7 +133,7 @@
                     value : ""
                 },
 
-                openData : {
+                roomViews : {
                     type  : Number,
                     value : undefined
                 },
@@ -98,31 +141,31 @@
                 comments : {
                     type  : Number,
                     value : undefined
+                },
+
+                datasets : {
+                    type  : Number,
+                    value : undefined
                 }
 
             },
 
             attached : function() {
-                var room = document.getElementById(this.roomId);
-                $(room).css('background', this.roomColor);
+                console.log(this.views);
             },
 
             _showTooltip: function() {
-
-                var room = document.getElementById(this.roomId);
-                var pos = room.getBoundingClientRect();
-                console.log(pos.top);
-                console.log(pos.left);
-//                $(this.$.pippo).css("top", 1000);
-//                $(this.$.pippo).css("left", 100);
-//                $("#pippo").css("top", pos.top - 4);
-//                $("#pippo").css("left", pos.left - 4);
-                this.$.pippo.open();
+                this.$.room_info.open();
             },
 
             _hideTooltip: function() {
-                this.$.pippo.close();
-                console.log("eeeeeeeeeeeeeeeeee")
+                this.$.room_info.close();
+            },
+
+            _howMany: function(A, i) {
+//                return this.roomShape[i];
+//                console.log(i);
+                return A[i];
             }
 
         });
--
libgit2 0.21.4