Commit 980ade3eaa318fc7c2c1d8cb0b873e02a46cdb03
1 parent
55ba476b
room-controllet
Showing
1 changed file
with
34 additions
and
18 deletions
controllets/room-controllet/room-controllet.html
| @@ -24,18 +24,26 @@ | @@ -24,18 +24,26 @@ | ||
| 24 | 24 | ||
| 25 | } | 25 | } |
| 26 | 26 | ||
| 27 | + .room-tooltip { | ||
| 28 | + position: absolute; | ||
| 29 | + border: 2px solid #2196F3; | ||
| 30 | + background-color: #E0E0E0; | ||
| 31 | + min-width: 248px; | ||
| 32 | + top: 0px; | ||
| 33 | + left: 0px; | ||
| 34 | + } | ||
| 35 | + | ||
| 27 | </style> | 36 | </style> |
| 28 | 37 | ||
| 29 | - <div id={{roomId}} class="grid-item room" on-mouseover="_showTooltip"> | 38 | + <div id={{roomId}} class$="grid-item room {{roomHeight}} {{roomWidth}}" on-mouseover="_showTooltip" on-mouseout="_hideTooltip"> |
| 30 | <div class="room-body"><span>{{body}}</span></div> | 39 | <div class="room-body"><span>{{body}}</span></div> |
| 31 | <div class="room-subject"><span>{{subject}}</span></div> | 40 | <div class="room-subject"><span>{{subject}}</span></div> |
| 32 | <div class="room-timestamp">{{timestamp}}</div> | 41 | <div class="room-timestamp">{{timestamp}}</div> |
| 33 | - </div> | ||
| 34 | 42 | ||
| 35 | - <paper-dialog id="dialog_info_input"> | ||
| 36 | - <h2 id="dialog_name"></h2> | ||
| 37 | - <p id="dialog_description"></p> | ||
| 38 | - </paper-dialog> | 43 | + <paper-dialog id="pippo" class="room-tooltip"> |
| 44 | + {{roomId}} | ||
| 45 | + </paper-dialog> | ||
| 46 | + </div> | ||
| 39 | 47 | ||
| 40 | </template> | 48 | </template> |
| 41 | 49 | ||
| @@ -58,13 +66,13 @@ | @@ -58,13 +66,13 @@ | ||
| 58 | }, | 66 | }, |
| 59 | 67 | ||
| 60 | roomHeight : { | 68 | roomHeight : { |
| 61 | - type : Number, | ||
| 62 | - value : undefined | 69 | + type : String, |
| 70 | + value : "" | ||
| 63 | }, | 71 | }, |
| 64 | 72 | ||
| 65 | roomWidth : { | 73 | roomWidth : { |
| 66 | - type : Number, | ||
| 67 | - value : undefined | 74 | + type : String, |
| 75 | + value : "" | ||
| 68 | }, | 76 | }, |
| 69 | 77 | ||
| 70 | body : { | 78 | body : { |
| @@ -96,17 +104,25 @@ | @@ -96,17 +104,25 @@ | ||
| 96 | 104 | ||
| 97 | attached : function() { | 105 | attached : function() { |
| 98 | var room = document.getElementById(this.roomId); | 106 | var room = document.getElementById(this.roomId); |
| 99 | - console.log(room); | ||
| 100 | - $(room).height(this.roomHeight); | ||
| 101 | - $(room).width(this.roomWidth); | ||
| 102 | - $(room).css('background', this.roomColor) | ||
| 103 | -// $(this.$.room).height(this.roomHeight); | ||
| 104 | -// $(this.$.room).width(this.roomWidth); | ||
| 105 | -// $(this.$.room).css('background', this.color) | 107 | + $(room).css('background', this.roomColor); |
| 106 | }, | 108 | }, |
| 107 | 109 | ||
| 108 | _showTooltip: function() { | 110 | _showTooltip: function() { |
| 109 | - console.log("weeeeeeeeeeee"); | 111 | + |
| 112 | + var room = document.getElementById(this.roomId); | ||
| 113 | + var pos = room.getBoundingClientRect(); | ||
| 114 | + console.log(pos.top); | ||
| 115 | + console.log(pos.left); | ||
| 116 | +// $(this.$.pippo).css("top", 1000); | ||
| 117 | +// $(this.$.pippo).css("left", 100); | ||
| 118 | +// $("#pippo").css("top", pos.top - 4); | ||
| 119 | +// $("#pippo").css("left", pos.left - 4); | ||
| 120 | + this.$.pippo.open(); | ||
| 121 | + }, | ||
| 122 | + | ||
| 123 | + _hideTooltip: function() { | ||
| 124 | + this.$.pippo.close(); | ||
| 125 | + console.log("eeeeeeeeeeeeeeeeee") | ||
| 110 | } | 126 | } |
| 111 | 127 | ||
| 112 | }); | 128 | }); |