Commit 1dd8eefe1b49a4256ccd0d22d70b30e649cf59d5
Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS
Showing
1 changed file
with
34 additions
and
18 deletions
controllets/room-controllet/room-controllet.html
... | ... | @@ -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 | 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 | 39 | <div class="room-body"><span>{{body}}</span></div> |
31 | 40 | <div class="room-subject"><span>{{subject}}</span></div> |
32 | 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 | 48 | </template> |
41 | 49 | |
... | ... | @@ -58,13 +66,13 @@ |
58 | 66 | }, |
59 | 67 | |
60 | 68 | roomHeight : { |
61 | - type : Number, | |
62 | - value : undefined | |
69 | + type : String, | |
70 | + value : "" | |
63 | 71 | }, |
64 | 72 | |
65 | 73 | roomWidth : { |
66 | - type : Number, | |
67 | - value : undefined | |
74 | + type : String, | |
75 | + value : "" | |
68 | 76 | }, |
69 | 77 | |
70 | 78 | body : { |
... | ... | @@ -96,17 +104,25 @@ |
96 | 104 | |
97 | 105 | attached : function() { |
98 | 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 | 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 | }); | ... | ... |