<link rel="import" href="../../bower_components/polymer/polymer.html" /> <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"> <script src="../../locales/room_controllet_ln.js"></script> <dom-module id="room-controllet"> <template> <style is="custom-style"> iron-icon { padding: 0px; margin: 0px; } 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"; } 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; } .div_icon{ display: inline-block; height: 20px; width: 20px; margin:4px 6px 4px 2px; } p { margin: 0px; padding: 8px 0px 0px 0px; white-space: nowrap; } .ptop{ padding-top: 0px; } </style> <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="room_info" class="room-tooltip"> <iron-icon icon="communication:call-made" class="this" style="color: #2196F3;"></iron-icon> <p class="ptop">{{_thisRoom}} <b style="color: #2196F3;">{{subject}}</b>,</p> <p>{{_createdBy}} <b style="color: #2196F3;">{{roomOwner}}</b> {{_has}}:</p> <p><iron-icon class="div_icon" style$="background-color: {{roomColor}};"></iron-icon><b style$="color: {{roomColor}};">{{_howManyViews}} {{_views}}</b> (<b style$="color: {{roomColor}};">{{roomViews}}</b>),</p> <p><iron-icon icon="editor:border-left"></iron-icon> <b>{{_howManyComments}} {{_comments}}</b> (<b>{{comments}}</b>) {{_and}}</p> <p><iron-icon icon="editor:border-bottom"></iron-icon> <b>{{_howManyDatasets}} {{_datasets}}</b> (<b>{{datasets}}</b>).</p> </paper-dialog> </div> </template> <script> Polymer({ is : 'room-controllet', properties : { roomId : { type : Number, value : undefined }, roomColor : { type : String, value : "" }, roomHeight : { type : String, value : "" }, roomWidth : { type : String, value : "" }, roomOwner : { type : String, value : "" }, roomShape : { type : Array, value : undefined }, body : { type : String, value : "" }, subject : { type : String, value : "" }, timestamp : { type : String, value : "" }, roomViews : { type : Number, value : undefined }, comments : { type : Number, value : undefined }, datasets : { type : Number, value : undefined }, //LN _thisRoom : { type : String }, _createdBy : { type : String }, _has : { type : String }, _views : { type : String }, _comments : { type : String }, _datasets : { type : String }, _and : { type : String }, _howManyViews : { type : String }, _howManyComments : { type : String }, _howManyDatasets : { type : String } }, attached : function() { this._translate(); }, _translate : function() { room_ln["ln"] = ODE.user_language; this._thisRoom = room_ln["thisRoom_" + room_ln["ln"]]; this._createdBy = room_ln["createdBy_" + room_ln["ln"]]; this._has = room_ln["has_" + room_ln["ln"]]; this._views = room_ln["views_" + room_ln["ln"]]; this._comments = room_ln["comments_" + room_ln["ln"]]; this._datasets = room_ln["datasets_" + room_ln["ln"]]; this._and = room_ln["and_" + room_ln["ln"]]; this._howManyViews = room_ln[this.roomShape[0] + "_" + room_ln["ln"]]; this._howManyComments = room_ln[this.roomShape[1] + "_" + room_ln["ln"]]; this._howManyDatasets = room_ln[this.roomShape[2] + "_" + room_ln["ln"]]; }, _showTooltip: function() { this.$.room_info.open(); }, _hideTooltip: function() { this.$.room_info.close(); } }); </script> </dom-module>