Some list watcher style changes.

This commit is contained in:
Scimonster 2013-11-04 23:06:54 +02:00
parent 01c35969d0
commit d0b9f61494
2 changed files with 14 additions and 12 deletions

View file

@ -143,7 +143,7 @@ var List = function(data, sprite) {
List.prototype.attach = function(scene) { List.prototype.attach = function(scene) {
this.el = $('<div class="list">'); this.el = $('<div class="list">');
this.el.append('<div class="list-title">'+(this.target==='Stage'?'':this.target+' ')+this.listName); this.el.append('<div class="list-title">'+(this.target==='Stage'?'':this.target+' ')+this.listName);
var c = this.containerEl = $('<div style="overflow:hidden;float:left;position:relative">').appendTo(this.el).width(this.width-19); var c = this.containerEl = $('<div style="overflow:hidden;float:left;position:relative">').appendTo(this.el).width(this.width-13).height(this.height-34);
var s = this.scrollbar = $('<div class="list-scrollbar-container"><div class="list-scrollbar">').appendTo(this.el); var s = this.scrollbar = $('<div class="list-scrollbar-container"><div class="list-scrollbar">').appendTo(this.el);
var sb = s.children('.list-scrollbar'); var sb = s.children('.list-scrollbar');
sb.mousedown(function(e){ sb.mousedown(function(e){
@ -186,10 +186,9 @@ List.prototype.update = function(){
this.contents.forEach(function(val,i){ this.contents.forEach(function(val,i){
$('<div style="clear:both">').appendTo(c).append('<div class="list-index">'+(i+1),'<div class="list-item">'+val); $('<div style="clear:both">').appendTo(c).append('<div class="list-index">'+(i+1),'<div class="list-item">'+val);
}); });
c.height(this.height-26);
c.find('.list-index').width(c.find('.list-index').last().width()); c.find('.list-index').width(c.find('.list-index').last().width());
c.find('.list-item').width(c.width()-c.find('.list-index').width()-15) c.find('.list-item').width(c.width()-c.find('.list-index').width()-15);
var s = this.scrollbar.height(this.height-26); var s = this.scrollbar.height(c.height());
s.children('.list-scrollbar').height(s.height()/c[0].scrollHeight*s.height()).css('display', s.children('.list-scrollbar').height()===c.height() ? 'none' : 'inline-block'); s.children('.list-scrollbar').height(s.height()/c[0].scrollHeight*s.height()).css('display', s.children('.list-scrollbar').height()===c.height() ? 'none' : 'inline-block');
this.el.find('.list-length').text('length: '+this.contents.length); this.el.find('.list-length').text('length: '+this.contents.length);
}; };
@ -197,3 +196,4 @@ List.prototype.update = function(){
List.prototype.updateLayer = function() { List.prototype.updateLayer = function() {
this.el.css('z-index', this.z); this.el.css('z-index', this.z);
}; };

View file

@ -102,7 +102,7 @@
border-width: 2px; border-width: 2px;
background-color: #C1C4C7; background-color: #C1C4C7;
padding-left: 3px; padding-left: 3px;
font: bold 10px Verdana, sans-serif; font: bold 11px sans-serif;
position: absolute; position: absolute;
} }
@ -111,6 +111,7 @@
text-align: center; text-align: center;
color: black; color: black;
font-weight: bold; font-weight: bold;
margin-bottom: 4px;
} }
.list .list-scrollbar-container { .list .list-scrollbar-container {
@ -132,26 +133,26 @@
float: left; float: left;
padding: 2px; padding: 2px;
margin-top: 0px; margin-top: 0px;
font: bold 10px monospace; text-align: right;
font: bold 11px;
} }
.list .list-item { .list .list-item {
float: left; float: right;
width: 70%;
height: 16px; height: 16px;
overflow: hidden; overflow: hidden;
margin-bottom: 0px; margin-bottom: 0px;
margin-right: 2px; margin-right: 2px;
padding-top: 2px;
padding-left: 5px; padding-left: 5px;
border-color: white; border-color: white;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: 4px; border-radius: 4px;
background-color: #D94D11; background-color: #cc5b22;
font-size: 10px;
color: white; color: white;
word-wrap: break-word; word-wrap: break-word;
font: bold 10px Verdana, sans-serif; font: bolder 11px sans-serif;
} }
.list .list-add { .list .list-add {
@ -161,7 +162,7 @@
height: 12px; height: 12px;
border-radius: 12px; border-radius: 12px;
color: #707070; color: #707070;
font: bold 10px Verdana, sans-serif; font: bold 10px sans-serif;
text-align: center; text-align: center;
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;
@ -225,3 +226,4 @@
background: url(img/think-bottom.png) transparent no-repeat; background: url(img/think-bottom.png) transparent no-repeat;
} }