Commit cae620336b3c6ba370df3cacd0b4c1aa766d4b05
1 parent
980ade3e
room tooltip
Showing
2 changed files
with
106 additions
and
60 deletions
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 | @@ -28,7 +28,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN | ||
| 28 | } | 28 | } |
| 29 | 29 | ||
| 30 | /* ---- grid-item ---- */ | 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 | ::content .grid-sizer {width: 200px;} | 38 | ::content .grid-sizer {width: 200px;} |
| 33 | ::content .grid-item-w20 {width: 200px;} | 39 | ::content .grid-item-w20 {width: 200px;} |
| 34 | ::content .grid-item-w40 {width: 400px;} | 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,44 +48,41 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN | ||
| 42 | ::content .grid-item-c4 {background-color: #2C29FF;} | 48 | ::content .grid-item-c4 {background-color: #2C29FF;} |
| 43 | /* ---- grid-item ---- */ | 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 | ::content .room-subject | 61 | ::content .room-subject |
| 47 | { | 62 | { |
| 48 | position: absolute; | 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 | color: #FFFFFF; | 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 | overflow: hidden; | 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 | text-overflow: ellipsis; | 74 | text-overflow: ellipsis; |
| 72 | - overflow: hidden; | ||
| 73 | - text-overflow:ellipsis; | ||
| 74 | - display:inline-block; | ||
| 75 | } | 75 | } |
| 76 | + | ||
| 76 | ::content .room-timestamp | 77 | ::content .room-timestamp |
| 77 | { | 78 | { |
| 78 | position: absolute; | 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 | </style> | 87 | </style> |
| 85 | 88 |
controllets/room-controllet/room-controllet.html
| @@ -2,46 +2,79 @@ | @@ -2,46 +2,79 @@ | ||
| 2 | 2 | ||
| 3 | <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"> | 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 | <dom-module id="room-controllet"> | 9 | <dom-module id="room-controllet"> |
| 6 | 10 | ||
| 7 | <template> | 11 | <template> |
| 8 | 12 | ||
| 9 | <style is="custom-style"> | 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 | </style> | 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 | <div class="room-subject"><span>{{subject}}</span></div> | 68 | <div class="room-subject"><span>{{subject}}</span></div> |
| 41 | <div class="room-timestamp">{{timestamp}}</div> | 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 | </paper-dialog> | 78 | </paper-dialog> |
| 46 | </div> | 79 | </div> |
| 47 | 80 | ||
| @@ -75,6 +108,16 @@ | @@ -75,6 +108,16 @@ | ||
| 75 | value : "" | 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 | body : { | 121 | body : { |
| 79 | type : String, | 122 | type : String, |
| 80 | value : "" | 123 | value : "" |
| @@ -90,7 +133,7 @@ | @@ -90,7 +133,7 @@ | ||
| 90 | value : "" | 133 | value : "" |
| 91 | }, | 134 | }, |
| 92 | 135 | ||
| 93 | - openData : { | 136 | + roomViews : { |
| 94 | type : Number, | 137 | type : Number, |
| 95 | value : undefined | 138 | value : undefined |
| 96 | }, | 139 | }, |
| @@ -98,31 +141,31 @@ | @@ -98,31 +141,31 @@ | ||
| 98 | comments : { | 141 | comments : { |
| 99 | type : Number, | 142 | type : Number, |
| 100 | value : undefined | 143 | value : undefined |
| 144 | + }, | ||
| 145 | + | ||
| 146 | + datasets : { | ||
| 147 | + type : Number, | ||
| 148 | + value : undefined | ||
| 101 | } | 149 | } |
| 102 | 150 | ||
| 103 | }, | 151 | }, |
| 104 | 152 | ||
| 105 | attached : function() { | 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 | _showTooltip: function() { | 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 | _hideTooltip: function() { | 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 | }); |