WebCompDev / COMPONENTS

Commit cae620336b3c6ba370df3cacd0b4c1aa766d4b05

Authored by Renato De Donato
1 parent 980ade3e

room tooltip

Inline Side-by-side
Showing 2 changed files with 106 additions and 60 deletions
controllets/animated-grid-controllet/animated-grid-controllet.html
  View file @cae6203
... ... @@ -28,7 +28,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
28 28 }
29 29  
30 30 /* ---- grid-item ---- */
31   - ::content .grid-item {float: left;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 3px solid white;}
  31 + ::content .grid-item {
  32 + float: left;
  33 + box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
  34 + border-top: 4px solid white;
  35 + border-left: 4px solid white;
  36 + cursor: pointer;
  37 + }
32 38 ::content .grid-sizer {width: 200px;}
33 39 ::content .grid-item-w20 {width: 200px;}
34 40 ::content .grid-item-w40 {width: 400px;}
... ... @@ -42,44 +48,41 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
42 48 ::content .grid-item-c4 {background-color: #2C29FF;}
43 49 /* ---- grid-item ---- */
44 50  
45   - ::content .room-body {color:#FFFFFF;}
  51 + ::content .room-body
  52 + {
  53 + height: calc(100% - 16px);/* 100% =*200/400 -4 border*/
  54 + width: calc(100% - 16px);
  55 + color:#FFFFFF;
  56 + padding: 8px;
  57 + word-wrap: break-word;
  58 + overflow: hidden;
  59 + text-overflow: ellipsis;
  60 + }
46 61 ::content .room-subject
47 62 {
48 63 position: absolute;
49   - width: 100%;
50   - height: 30px;
51   - bottom: 30px;
52   - background-color: rgba(0,0,0,0.6);
  64 + width: calc(100% - 16px);
  65 + height: 32px;
  66 + bottom: 32px;
  67 + background-color: rgba(0,0,0,0.8);
  68 + padding: 16px 0px 0px 16px;
53 69 color: #FFFFFF;
54   - }
55   - ::content .room-subject span
56   - {
57   - top: 5px;
58   - left: 5px;
59   - position: relative;
60   - text-overflow: ellipsis;
  70 + font-weight: 700;
  71 + white-space: nowrap;
  72 + word-wrap: break-word;
61 73 overflow: hidden;
62   - white-space:nowrap;
63   - text-overflow:ellipsis;
64   - display:inline-block;
65   - }
66   - ::content .room-body span
67   - {
68   - top: 5px;
69   - left: 5px;
70   - position: relative;
71 74 text-overflow: ellipsis;
72   - overflow: hidden;
73   - text-overflow:ellipsis;
74   - display:inline-block;
75 75 }
  76 +
76 77 ::content .room-timestamp
77 78 {
78 79 position: absolute;
79   - right:3px;
80   - bottom: 3px;
81   - font-size: 8px;
82   - color: #CCCCCC;
  80 + bottom: 0px;
  81 + right:0px;
  82 + color: #FFFFFF;
  83 + padding: 8px;
  84 + font-size: small;
  85 + line-height: 16px;
83 86 }
84 87 </style>
85 88  
... ...
controllets/room-controllet/room-controllet.html
  View file @cae6203
... ... @@ -2,46 +2,79 @@
2 2  
3 3 <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
4 4  
  5 +<link rel="import" href="../../bower_components/iron-icons/editor-icons.html">
  6 +<link rel="import" href="../../bower_components/iron-icons/communication-icons.html">
  7 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
  8 +
5 9 <dom-module id="room-controllet">
6 10  
7 11 <template>
8 12  
9 13 <style is="custom-style">
10 14  
11   - .room {
12   - cursor: pointer;
  15 + iron-icon {
  16 + padding: 0px;
  17 + margin: 0px;
13 18 }
14 19  
15   - .room-body {
  20 + iron-icon.this {
  21 + position: absolute;
  22 + top: -3px;
  23 + left: -3px;
  24 +
  25 + -moz-transform: scaleX(-1);
  26 + -o-transform: scaleX(-1);
  27 + -webkit-transform: scaleX(-1);
  28 + transform: scaleX(-1);
  29 + filter: FlipH;
  30 + -ms-filter: "FlipH";
16 31  
17 32 }
18 33  
19   - .room-subject {
  34 + paper-dialog {
  35 + margin: 0px;
  36 + }
20 37  
  38 + .room-tooltip {
  39 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  40 + position: absolute;
  41 + min-width: 250px;
  42 + top: 49px;
  43 + left: 98px;
  44 + padding: 16px;
21 45 }
22 46  
23   - .room-timestamp {
  47 + .div_icon{
  48 + display: inline-block;
  49 + height: 20px;
  50 + width: 20px;
  51 + margin:4px 6px 4px 2px;
  52 + }
24 53  
  54 + p {
  55 + padding-top: 8px;
  56 + margin: 0px;
  57 + white-space: nowrap;
25 58 }
26 59  
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;
  60 + .ptop{
  61 + padding-top: 0px;
34 62 }
35 63  
36 64 </style>
37 65  
38   - <div id={{roomId}} class$="grid-item room {{roomHeight}} {{roomWidth}}" on-mouseover="_showTooltip" on-mouseout="_hideTooltip">
39   - <div class="room-body"><span>{{body}}</span></div>
  66 + <div id={{roomId}} class$="grid-item {{roomHeight}} {{roomWidth}}" on-mouseover="_showTooltip" on-mouseout="_hideTooltip" style$="background-color: {{roomColor}};">
  67 + <div class="room-body">{{body}}</div>
40 68 <div class="room-subject"><span>{{subject}}</span></div>
41 69 <div class="room-timestamp">{{timestamp}}</div>
42 70  
43   - <paper-dialog id="pippo" class="room-tooltip">
44   - {{roomId}}
  71 + <paper-dialog id="room_info" class="room-tooltip">
  72 + <iron-icon icon="communication:call-made" class="this" style="color: #2196F3;"></iron-icon>
  73 + <p class="ptop">This room <b style="color: #2196F3;">{{subject}}</b>,</p>
  74 + <p>created by <b style="color: #2196F3;">{{roomOwner}}</b> has:</p>
  75 + <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>
  76 + <p><iron-icon icon="editor:border-left"></iron-icon> <b>{{_howMany(roomShape, 1)}} comments</b> (<b>{{comments}}</b>) and</p>
  77 + <p><iron-icon icon="editor:border-bottom"></iron-icon> <b>{{_howMany(roomShape, 2)}} datasets</b> (<b>{{datasets}}</b>).</p>
45 78 </paper-dialog>
46 79 </div>
47 80  
... ... @@ -75,6 +108,16 @@
75 108 value : ""
76 109 },
77 110  
  111 + roomOwner : {
  112 + type : String,
  113 + value : ""
  114 + },
  115 +
  116 + roomShape : {
  117 + type : Array,
  118 + value : undefined
  119 + },
  120 +
78 121 body : {
79 122 type : String,
80 123 value : ""
... ... @@ -90,7 +133,7 @@
90 133 value : ""
91 134 },
92 135  
93   - openData : {
  136 + roomViews : {
94 137 type : Number,
95 138 value : undefined
96 139 },
... ... @@ -98,31 +141,31 @@
98 141 comments : {
99 142 type : Number,
100 143 value : undefined
  144 + },
  145 +
  146 + datasets : {
  147 + type : Number,
  148 + value : undefined
101 149 }
102 150  
103 151 },
104 152  
105 153 attached : function() {
106   - var room = document.getElementById(this.roomId);
107   - $(room).css('background', this.roomColor);
  154 + console.log(this.views);
108 155 },
109 156  
110 157 _showTooltip: function() {
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();
  158 + this.$.room_info.open();
121 159 },
122 160  
123 161 _hideTooltip: function() {
124   - this.$.pippo.close();
125   - console.log("eeeeeeeeeeeeeeeeee")
  162 + this.$.room_info.close();
  163 + },
  164 +
  165 + _howMany: function(A, i) {
  166 +// return this.roomShape[i];
  167 +// console.log(i);
  168 + return A[i];
126 169 }
127 170  
128 171 });
... ...