mirrors/deluge
0
0
Fork 0
mirror of https://git.deluge-torrent.org/deluge synced 2025-08-09 18:08:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

huge update to mooui

Browse source 
continuting change to camelcase
This commit is contained in:
Damien Churchill 2008-09-29 23:09:44 +00:00
commit a7f1704c28
10 changed files with 515 additions and 517 deletions
Download patch file Download diff file Expand all files Collapse all files

20
deluge/ui/webui/templates/ajax/render/html/preferences_bandwidth.html
View file

@ -2,27 +2,27 @@
<fieldset> <fieldset>
<legend>$_('Global Bandwidth Usage')</legend> <legend>$_('Global Bandwidth Usage')</legend>
<label>$_('Max Connections'):</label> <label>$_('Max Connections'):</label>
<input type="text" name="max_connections_global" class="mooui-spinner" /> <input type="text" name="max_connections_global" class="moouiSpinner" />
<br/> <br/>
<label>$_('Max Upload Slots'):</label> <label>$_('Max Upload Slots'):</label>
<input type="text" name="max_upload_slots_global" class="mooui-spinner" /> <input type="text" name="max_upload_slots_global" class="moouiSpinner" />
<br/> <br/>
<label>$_('Max Download Speed') (KiB/s):</label> <label>$_('Max Download Speed') (KiB/s):</label>
<input type="text" name="max_download_speed" class="mooui-spinner" /> <input type="text" name="max_download_speed" class="moouiSpinner" />
<br/> <br/>
<label>$_('Max Upload Speed') (KiB/s):</label> <label>$_('Max Upload Speed') (KiB/s):</label>
<input type="text" name="max_upload_speed" class="mooui-spinner" /> <input type="text" name="max_upload_speed" class="moouiSpinner" />
<br/> <br/>
<label>$_('Max Half-Open Connections'):</label> <label>$_('Max Half-Open Connections'):</label>
<input type="text" name="max_half_open_connections" class="mooui-spinner" /> <input type="text" name="max_half_open_connections" class="moouiSpinner" />
<br/> <br/>
<label>$_('Max Conection Attempts per Second'):</label> <label>$_('Max Conection Attempts per Second'):</label>
<input type="text" name="max_connections_per_second" class="mooui-spinner" /> <input type="text" name="max_connections_per_second" class="moouiSpinner" />
<br/> <br/>
<label class="fluid"> <label class="fluid">
@ -33,19 +33,19 @@
<fieldset> <fieldset>
<legend>$_('Per Torrent Bandwidth Usage')</legend> <legend>$_('Per Torrent Bandwidth Usage')</legend>
<label>$_('Max Connections'):</label> <label>$_('Max Connections'):</label>
<input type="text" name="max_connections_per_torrent" class="mooui-spinner" /> <input type="text" name="max_connections_per_torrent" class="moouiSpinner" />
<br/> <br/>
<label>$_('Max Upload Slots'):</label> <label>$_('Max Upload Slots'):</label>
<input type="text" name="max_upload_slots_per_torrent" class="mooui-spinner" /> <input type="text" name="max_upload_slots_per_torrent" class="moouiSpinner" />
<br/> <br/>
<label>$_('Max Download Speed') (KiB/s):</label> <label>$_('Max Download Speed') (KiB/s):</label>
<input type="text" name="max_download_speed_per_torrent" class="mooui-spinner" /> <input type="text" name="max_download_speed_per_torrent" class="moouiSpinner" />
<br/> <br/>
<label>$_('Max Upload Speed') (KiB/s):</label> <label>$_('Max Upload Speed') (KiB/s):</label>
<input type="text" name="max_upload_speed_per_torrent" class="mooui-spinner" /> <input type="text" name="max_upload_speed_per_torrent" class="moouiSpinner" />
<br/> <br/>
</fieldset> </fieldset>
</form> </form>

2
deluge/ui/webui/templates/ajax/render/html/preferences_daemon.html
View file

@ -1,7 +1,7 @@
<form> <form>
<fieldset> <fieldset>
<legend>$_('Port')</legend> <legend>$_('Port')</legend>
<label>$_('Daemon Port'):</label><input type="text" name="daemon_port" class="mooui-spinner" /><br/> <label>$_('Daemon Port'):</label><input type="text" name="daemon_port" class="moouiSpinner" /><br/>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>$_('Connections')</legend> <legend>$_('Connections')</legend>

8
deluge/ui/webui/templates/ajax/render/html/preferences_network.html
View file

@ -9,11 +9,11 @@
<label class="fluid"> <label class="fluid">
$_('From'): $_('From'):
</label> </label>
<input type="text" name="start_listen_port" class="mooui-spinner" /> <input type="text" name="start_listen_port" class="moouiSpinner" />
<label class="fluid"> <label class="fluid">
$_('To'): $_('To'):
</label> </label>
<input type="text" name="end_listen_port" class="mooui-spinner" /><br/> <input type="text" name="end_listen_port" class="moouiSpinner" /><br/>
</fieldset> </fieldset>
<fieldset> <fieldset>
@ -26,11 +26,11 @@
<label class="fluid"> <label class="fluid">
$_('From'): $_('From'):
</label> </label>
<input type="text" name="start_outgoing_port" class="mooui-spinner" /> <input type="text" name="start_outgoing_port" class="moouiSpinner" />
<label class="fluid"> <label class="fluid">
$_('To'): $_('To'):
</label> </label>
<input type="text" name="end_outgoing_port" class="mooui-spinner" /><br/> <input type="text" name="end_outgoing_port" class="moouiSpinner" /><br/>
</fieldset> </fieldset>
<fieldset> <fieldset>

14
deluge/ui/webui/templates/ajax/render/html/preferences_queue.html
View file

@ -5,17 +5,17 @@
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>$_('Active Torrents')</legend> <legend>$_('Active Torrents')</legend>
<label>$_('Total active'):</label><input type="text" name="max_active_limit" class="mooui-spinner" /><br/> <label>$_('Total active'):</label><input type="text" name="max_active_limit" class="moouiSpinner" /><br/>
<label>$_('Total active downloading'):</label><input type="text" name="max_active_downloading" class="mooui-spinner" /><br/> <label>$_('Total active downloading'):</label><input type="text" name="max_active_downloading" class="moouiSpinner" /><br/>
<label>$_('Total active seeding'):</label><input type="text" name="max_active_seeding" class="mooui-spinner" /><br/> <label>$_('Total active seeding'):</label><input type="text" name="max_active_seeding" class="moouiSpinner" /><br/>
<label class="fluid"><input type="checkbox" name="dont_count_slow_torrents" />$_('Do not count slow torrents')</label> <label class="fluid"><input type="checkbox" name="dont_count_slow_torrents" />$_('Do not count slow torrents')</label>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>$_('Seeding')</legend> <legend>$_('Seeding')</legend>
<label>$_('Share Ratio Limit'):</label><input type="text" name="share_ratio_limit" class="mooui-spinner" /><br/> <label>$_('Share Ratio Limit'):</label><input type="text" name="share_ratio_limit" class="moouiSpinner" /><br/>
<label>$_('Seed Time Ratio'):</label><input type="text" name="stop_seed_ratio" class="mooui-spinner" /><br/> <label>$_('Seed Time Ratio'):</label><input type="text" name="stop_seed_ratio" class="moouiSpinner" /><br/>
<label>$_('Seed Time') (m):</label><input type="text" name="seed_time_limit" class="mooui-spinner" /><br/> <label>$_('Seed Time') (m):</label><input type="text" name="seed_time_limit" class="moouiSpinner" /><br/>
<label class="fluid"><input type="checkbox" name="stop_seed_at_ratio" />$_('Stop seeding when share ratio reaches'):</label><input type="text" name="stop_seed_ratio" class="mooui-spinner" /> <label class="fluid"><input type="checkbox" name="stop_seed_at_ratio" />$_('Stop seeding when share ratio reaches'):</label><input type="text" name="stop_seed_ratio" class="moouiSpinner" />
<label class="fluid"><input type="checkbox" name="remote_seed_at_ratio" />$_('Remove torrent when share ratio reached')</label> <label class="fluid"><input type="checkbox" name="remote_seed_at_ratio" />$_('Remove torrent when share ratio reached')</label>
</fieldset> </fieldset>
</form> </form>

54
deluge/ui/webui/templates/ajax/static/css/mooui.css
View file

@ -4,13 +4,13 @@
* Depends: [] * Depends: []
*/ */
ul.mooui-menu { ul.moouiMenu {
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
padding: 0; padding: 0;
} }
ul.mooui-menu li { ul.moouiMenu li {
position: relative; position: relative;
list-style: none; list-style: none;
margin: 1px; margin: 1px;
@ -21,40 +21,40 @@ ul.mooui-menu li {
background: no-repeat 2px; background: no-repeat 2px;
} }
ul.mooui-menu li.mooui-menu-icon { ul.moouiMenu li.moouiMenuIcon {
padding-left: 20px; padding-left: 20px;
} }
ul.mooui-menu li.mooui-menu-sep { ul.moouiMenu li.moouiMenuSep {
height: 1px; height: 1px;
line-height: 1px; line-height: 1px;
} }
ul.mooui-menu li.mooui-menu-toggle input { ul.moouiMenu li.moouiMenuToggle input {
cursor: pointer; cursor: pointer;
} }
ul.mooui-menu li.mooui-menu-toggle span span { ul.moouiMenu li.moouiMenuToggle span span {
position: relative; position: relative;
top: -3px; top: -3px;
} }
ul.mooui-menu li > ul { ul.moouiMenu li > ul {
display: none; display: none;
position: relative; position: relative;
top: -20px; top: -20px;
width: 400px; width: 400px;
} }
ul.mooui-menu li:hover { ul.moouiMenu li:hover {
cursor: pointer; cursor: pointer;
} }
ul.mooui-menu li:hover > ul { ul.moouiMenu li:hover > ul {
display: block; display: block;
} }
ul.mooui-menu li.mooui-menu-sep:hover { ul.moouiMenu li.moouiMenuSep:hover {
cursor: default; cursor: default;
} }
@ -64,7 +64,7 @@ ul.mooui-menu li.mooui-menu-sep:hover {
* Depends: [] * Depends: []
*/ */
.mooui-progressbar span { .moouiProgressBar span {
text-align: center; text-align: center;
float: left; float: left;
} }
@ -75,20 +75,22 @@ ul.mooui-menu li.mooui-menu-sep:hover {
* Depends: [] * Depends: []
*/ */
.mooui-pane { .moouiPane {
position: absolute; float: left;
position: relative;
} }
.mooui-splitter { .moouiSplitter {
position: absolute; position: relative;
float: left;
background: Gray; background: Gray;
} }
.mooui-splitter-vertical { .moouiSplitterVertical {
cursor: e-resize; cursor: e-resize;
} }
.mooui-splitter-horizontal { .moouiSplitterHorizontal {
cursor: n-resize; cursor: n-resize;
} }
@ -98,13 +100,13 @@ ul.mooui-menu li.mooui-menu-sep:hover {
* Depends: [] * Depends: []
*/ */
.mooui-tabs ul { .moouiTabs ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.mooui-tabs li { .moouiTabs li {
float: left; float: left;
padding: 4px; padding: 4px;
cursor: pointer; cursor: pointer;
@ -113,15 +115,15 @@ ul.mooui-menu li.mooui-menu-sep:hover {
-webkit-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0;
} }
.mooui-tabs div { .moouiTabs div {
clear: left; clear: left;
} }
.mooui-tabpage { .moouiTabPage {
display: none; display: none;
} }
.mooui-tabpage-active { .moouiTabPageActive {
display: block; display: block;
} }
@ -131,20 +133,20 @@ ul.mooui-menu li.mooui-menu-sep:hover {
* Depends: [] * Depends: []
*/ */
.mooui-window { .moouiWindow {
position: fixed; position: fixed;
top: 0px; top: 0px;
left: 200px; left: 200px;
z-index: 100; z-index: 100;
} }
.mooui-window-title { .moouiWindowTitle {
margin: 10px; margin: 10px;
cursor: pointer; cursor: pointer;
float: left; float: left;
} }
.mooui-window-close { .moouiWindowClose {
float: right; float: right;
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -152,7 +154,7 @@ ul.mooui-menu li.mooui-menu-sep:hover {
cursor: pointer; cursor: pointer;
} }
.mooui-window-content { .moouiWindowContent {
clear: both; clear: both;
padding: 5px; padding: 5px;
} }

4
deluge/ui/webui/templates/ajax/static/js/deluge-ui.js
View file

@ -79,7 +79,7 @@ Deluge.UI = {
this.torrentAction(e.action, e.value) this.torrentAction(e.action, e.value)
}.bind(this)) }.bind(this))
this.grid.addEvent('row_menu', function(e) { this.grid.addEvent('rowMenu', function(e) {
e.stop() e.stop()
var value = this.grid.selectedRow.torrent.is_auto_managed; var value = this.grid.selectedRow.torrent.is_auto_managed;
menu.items[3].items[4].set(value) menu.items[3].items[4].set(value)
@ -87,7 +87,7 @@ Deluge.UI = {
menu.show(e) menu.show(e)
}.bindWithEvent(this)) }.bindWithEvent(this))
this.grid.addEvent('selectedchanged', function(e) { this.grid.addEvent('selectedChanged', function(e) {
if ($chk(this.grid.selectedRow)) { if ($chk(this.grid.selectedRow)) {
this.details.update(this.grid.selectedRow.id); this.details.update(this.grid.selectedRow.id);
} else { } else {

509
deluge/ui/webui/templates/ajax/static/js/mooui.js
View file

@ -128,17 +128,17 @@ Array.implement({
Element.implement({ Element.implement({
getInnerSize: function() { getInnerSize: function() {
this.getPadding() this.getPadding();
if ((/^(?:body|html)$/i).test(this.tagName)) return this.getWindow().getSize(); if ((/^(?:body|html)$/i).test(this.tagName)) return this.getWindow().getSize();
return {x: this.clientWidth - this.padding.x, y: this.clientHeight - this.padding.y}; return {x: this.clientWidth - this.padding.x, y: this.clientHeight - this.padding.y};
}, },
getInnerHeight: function() { getInnerHeight: function() {
return this.getInnerSize().y return this.getInnerSize().y;
}, },
getInnerWidth: function() { getInnerWidth: function() {
return this.getInnerSize().x return this.getInnerSize().x;
}, },
getSizeModifiers: function() { getSizeModifiers: function() {
@ -339,46 +339,69 @@ Widgets = {
'Damien Churchill' 'Damien Churchill'
], ],
license: 'GPLv3' license: 'GPLv3'
} };
elementMethods = [
'addClass',
'hasClass',
'removeClass',
'toggleClass',
'getInnerSize',
'getTop',
'getLeft',
'getWidth',
'getHeight',
'getScrollTop',
'getScrollLeft',
'getScrollHeight',
'getScrollWidth',
'getSize',
'getScrollSize',
'getScroll',
'getScrolls',
'getOffsetParent',
'getOffsets',
'getPosition',
'getCoordinates',
'getInnerWidth',
'getInnerHeight',
'getStyle',
'getParent',
'getSizeModifiers'
];
Widgets.Base = new Class({ Widgets.Base = new Class({
Implements: [Events,Options], Implements: [Events,Options],
options: { options: {
width: 0,
height: 0,
expand: false expand: false
}, },
initialize: function(element, options) { initialize: function(element, options) {
this.setOptions(options) this.setOptions(options);
this.element = $(element) this.element = $(element);
this.ismoouiwidget = true this.element.store('moouiWidget', this);
this.width = (this.options.width) ? this.options.width : this.element.getStyle('width').toInt() this.isMoouiWidget = true;
this.height = (this.options.height) ? this.options.height : this.element.getStyle('height').toInt() this.width = this.element.getStyle('width').toInt();
$A(['addClass', 'hasClass', 'removeClass', 'toggleClass', 'getInnerSize', this.height = this.element.getStyle('height').toInt();
'getTop', 'getLeft', 'getWidth', 'getHeight', 'getScrollTop', elementMethods.each(function(method) {
'getScrollLeft', 'getScrollHeight', 'getScrollWidth', 'getSize', if (this.element[method]) {
'getScrollSize', 'getScroll', 'getScrolls', 'getOffsetParent',
'getOffsets', 'getPosition', 'getCoordinates', 'getInnerWidth',
'getInnerHeight', 'getStyle', 'getParent', 'getSizeModifiers'
]).each(function(method) {
if (this.element[method])
this[method] = this.element[method].bind(this.element); this[method] = this.element[method].bind(this.element);
}, this) };
}, this);
}, },
refresh: function() { refresh: function() {
this.element.removeProperty('style'); this.element.removeProperty('style');
this.width = (this.options.width) ? this.options.width : this.element.getStyle('width').toInt() this.width = this.element.getStyle('width').toInt()
this.height = (this.options.height) ? this.options.height : this.element.getStyle('height').toInt() this.height = this.element.getStyle('height').toInt()
this.getSizeModifiers(); this.getSizeModifiers();
if (this.refreshChildren) this.refreshChildren(); if (this.refreshChildren) this.refreshChildren();
}, },
expand: function() { expand: function() {
var parent = this.getParent() var parent = this.getParent();
var parentSize = this.getParent().getInnerSize(); var parentSize = this.getParent().getInnerSize();
this.element.getSizeModifiers(); this.element.getSizeModifiers();
parentSize.y -= this.element.modifiers.y; parentSize.y -= this.element.modifiers.y;
@ -386,28 +409,28 @@ Widgets.Base = new Class({
this.sets({'width': parentSize.x, 'height': parentSize.y}); this.sets({'width': parentSize.x, 'height': parentSize.y});
}, },
set: function(property, value, nofire) { set: function(property, value, noFire) {
if (property == 'height' || property == 'width') { if (property == 'height' || property == 'width') {
var eventArgs = {}; var eventArgs = {};
eventArgs[property] = value; eventArgs[property] = value;
eventArgs['old_' + property] = this[property]; eventArgs[('old-' + property).camelCase()] = this[property];
this[property] = value; this[property] = value;
if (value > 0) this.element.setStyle(property, value); if (value > 0) this.element.setStyle(property, value);
if (!nofire) this.fireEvent('resize', eventArgs); if (!noFire) this.fireEvent('resize', eventArgs);
} else { } else {
this[property] = value; this[property] = value;
this.element.setStyle(property, value) this.element.setStyle(property, value);
} }
}, },
sets: function(properties) { sets: function(properties) {
properties = new Hash(properties); properties = new Hash(properties);
var fireResize = false; var fireResize = false;
var eventArgs = {} var eventArgs = {};
properties.each(function(value, key) { properties.each(function(value, key) {
if (key == 'height' || key == 'width') { if (key == 'height' || key == 'width') {
eventArgs['old_' + key] = this[key] eventArgs[('old-' + key).camelCase()] = this[key];
eventArgs[key] = value eventArgs[key] = value;
fireResize = true; fireResize = true;
} }
this.set(key, value, true); this.set(key, value, true);
@ -416,16 +439,22 @@ Widgets.Base = new Class({
}, },
toElement: function() { toElement: function() {
return this.element return this.element;
} }
}) });
$W = function(wrap) { $W = function(wrap) {
if (!wrap.ismoouiwidget) if (!wrap.isMoouiWidget) {
return new Widgets.Base($(wrap)) if (wrap.retrieve) {
else wrap = wrap.retrieve('moouiWidget');
return wrap return (wrap) ? wrap : new Widgets.Base(wrap);
} } else {
return new Widgets.Base(wrap);
};
} else {
return wrap;
};
};
/* /*
* Script: Widgets.js * Script: Widgets.js
* The base class for all UI widgets * The base class for all UI widgets
@ -462,15 +491,15 @@ Widgets.PopupMenu = new Class({
}, },
_build: function(items) { _build: function(items) {
var menu = new Element('ul') var menu = new Element('ul')
menu.addClass('mooui-menu') menu.addClass('moouiMenu')
items.each(function(item) { items.each(function(item) {
if (item.type == 'text') { if (item.type == 'text') {
var el = new Element('li') var el = new Element('li')
el.addClass('mooui-menu-text') el.addClass('moouiMenuText')
new Element('span').set('text', item.text).inject(el) new Element('span').set('text', item.text).inject(el)
if ($defined(item.icon)) { if ($defined(item.icon)) {
el.setStyle('background-image', 'url('+item.icon+')') el.setStyle('background-image', 'url('+item.icon+')')
el.addClass('mooui-menu-icon') el.addClass('moouiMenuIcon')
} }
el.inject(menu) el.inject(menu)
el.addEvent('click', function(e) { el.addEvent('click', function(e) {
@ -479,14 +508,14 @@ Widgets.PopupMenu = new Class({
}.bind(this)) }.bind(this))
} else if (item.type == 'toggle') { } else if (item.type == 'toggle') {
var el = new Element('li'); var el = new Element('li');
el.addClass('mooui-menu-toggle'); el.addClass('moouiMenuToggle');
var toggle = new Element('span').inject(el); var toggle = new Element('span').inject(el);
item.checkbox = new Element('input', {type: 'checkbox'}).inject(toggle); item.checkbox = new Element('input', {type: 'checkbox'}).inject(toggle);
new Element('span').set('text', item.text).inject(toggle) new Element('span').set('text', item.text).inject(toggle)
if (item.value) item.checkbox.checked = item.value; if (item.value) item.checkbox.checked = item.value;
if ($defined(item.icon)) { if ($defined(item.icon)) {
el.setStyle('background-image', 'url('+item.icon+')'); el.setStyle('background-image', 'url('+item.icon+')');
el.addClass('mooui-menu-icon'); el.addClass('moouiMenuIcon');
} }
el.inject(menu); el.inject(menu);
var clicked = function(e) { var clicked = function(e) {
@ -504,14 +533,14 @@ Widgets.PopupMenu = new Class({
el.addEvent('click', clicked) el.addEvent('click', clicked)
} else if (item.type == 'seperator') { } else if (item.type == 'seperator') {
new Element('li').addClass('mooui-menu-sep').inject(menu) new Element('li').addClass('moouiMenuSep').inject(menu)
} else if (item.type == 'submenu') { } else if (item.type == 'submenu') {
var el = new Element('li') var el = new Element('li')
el.addClass('mooui-menu-sub') el.addClass('mooui-menu-sub')
new Element('span').set('text', item.text).inject(el) new Element('span').set('text', item.text).inject(el)
if ($defined(item.icon)) { if ($defined(item.icon)) {
el.setStyle('background-image', 'url('+item.icon+')') el.setStyle('background-image', 'url('+item.icon+')')
el.addClass('mooui-menu-icon') el.addClass('moouiMenuIcon')
} }
var sub = this._build(item.items).inject(el) var sub = this._build(item.items).inject(el)
el.addEvent('mouseenter', function(e) { el.addEvent('mouseenter', function(e) {
@ -542,7 +571,7 @@ Widgets.PopupMenu = new Class({
} }
}, },
show: function(e) { show: function(e) {
this.show_pos(e.client.x+10, e.client.y-10) this.showPos(e.client.x+10, e.client.y-10)
}, },
fixSize: function(el) { fixSize: function(el) {
@ -568,7 +597,7 @@ Widgets.PopupMenu = new Class({
}); });
}, },
show_pos: function(x, y) { showPos: function(x, y) {
this.element.setStyles({ this.element.setStyles({
'left': x, 'left': x,
'top': y - 2 'top': y - 2
@ -594,32 +623,35 @@ Widgets.ProgressBar = new Class({
Extends: Widgets.Base, Extends: Widgets.Base,
initialize: function() { initialize: function() {
this.parent(new Element('div')) this.parent(new Element('div'));
this.element.addClass('mooui-progressbar') this.bound = {
this.bar = new Element('div').inject(this.element) onResize: this.onResize.bindWithEvent(this)
this.textspan = new Element('span').inject(this.bar) };
this.sets({width: 200, height: 20}) this.element.addClass('moouiProgressBar');
this.addEvent('resize', this.on_resize.bindWithEvent(this)) this.bar = new Element('div').inject(this.element);
this.textSpan = new Element('span').inject(this.bar);
this.sets({width: 200, height: 20});
this.addEvent('resize', this.bound.onResize);
}, },
on_resize: function() { onResize: function() {
this.textspan.setStyles({'width': this.width, 'height': this.height}) this.textSpan.setStyles({'width': this.width, 'height': this.height});
this.update(this.text, this.percent) this.update(this.text, this.percent);
}, },
update: function(text, percent) { update: function(text, percent) {
if (this.text != text) { if (this.text != text) {
this.text = text this.text = text;
this.textspan.set('text', text) this.textSpan.set('text', text);
} };
if (this.percent != percent) { if (this.percent != percent) {
this.percent = percent this.percent = percent;
this.bar.setStyles({ this.bar.setStyles({
'width': Math.floor(this.width / 100.0 * percent), 'width': Math.floor(this.width / 100.0 * percent),
'height': this.height 'height': this.height
}) });
} };
} }
}); });
/* /*
@ -646,66 +678,109 @@ Widgets.SplitPane = new Class({
initialize: function(element, pane1, pane2, options) { initialize: function(element, pane1, pane2, options) {
this.parent(element, options); this.parent(element, options);
this.bound = {
onResize: this.onResize.bindWithEvent(this),
onMouseDown: this.onMouseDown.bindWithEvent(this),
onMouseMove: this.onMouseMove.bindWithEvent(this),
onMouseUp: this.onMouseUp.bindWithEvent(this)
};
this.horizontal = (this.options.direction == 'horizontal') ? true : false; this.horizontal = (this.options.direction == 'horizontal') ? true : false;
this.pane1 = $W(pane1); this.pane1 = $W(pane1);
this.pane2 = $W(pane2); this.pane2 = $W(pane2);
if (this.options.expand) this.expand(); if (this.options.expand) this.expand();
this.init_pane(this.pane1, this.options.pane1) this.initPane(this.pane1, this.options.pane1);
this.init_pane(this.pane2, this.options.pane2) this.initPane(this.pane2, this.options.pane2);
this.init_splitter() this.initSplitter();
this.calculatePositions() this.calculatePositions();
this.setPosition(this.pane1); this.setPosition(this.pane1);
this.setPosition(this.splitter); this.setPosition(this.splitter);
this.setPosition(this.pane2); this.setPosition(this.pane2);
this.init_drag() this.splitter.addEvent('mousedown', this.bound.onMouseDown);
this.addEvent('resize', this.onResize.bindWithEvent(this)) this.addEvent('resize', this.onResize.bindWithEvent(this));
}, },
init_splitter: function() { initSplitter: function() {
this.splitter = new Element('div').addClass('mooui-splitter') this.splitter = new Element('div').addClass('moouiSplitter');
this.splitter.inject(this.pane1, 'after') this.splitter.inject(this.pane1, 'after');
this.splitter.paneinfo = {} this.splitter.paneinfo = {};
if (this.horizontal) { if (this.horizontal) {
this.splitter.addClass('mooui-splitter-vertical') this.splitter.addClass('moouiSplitterVertical');
} else { } else {
this.splitter.addClass('mooui-splitter-horizontal') this.splitter.addClass('moouiSplitterHorizontal');
} };
this.splitter.grab(new Element('div')) this.splitter.grab(new Element('div'));
this.splitter.grab(new Element('div')) this.splitter.grab(new Element('div'));
this.splitter.grab(new Element('div')) this.splitter.grab(new Element('div'));
}, },
init_drag: function() { onMouseDown: function(e) {
this.drag = new Drag(this.splitter) window.addEvent('mouseup', this.bound.onMouseUp);
this.drag.addEvent('drag', this.onDrag.bindWithEvent(this)) window.addEvent('mousemove', this.bound.onMouseMove);
this.mouseStart = {
x: e.client.x,
y: e.client.y
};
this.paneInfo = {
one: {
startWidth: this.pane1.paneinfo.width,
startHeight: this.pane1.paneinfo.height
},
two: {
startWidth: this.pane2.paneinfo.width,
startHeight: this.pane2.paneinfo.height
}
};
},
onMouseMove: function(e) {
if (this.horizontal) { if (this.horizontal) {
this.drag.options.limit = { diff = e.client.x - this.mouseStart.x;
x: [ p1width = this.paneInfo.one.startWidth + diff;
this.pane1.paneinfo.left + this.pane1.paneinfo.min - this.pane1.element.modifiers.x, p2width = this.paneInfo.two.startWidth - diff;
this.pane1.paneinfo.left + this.getInnerWidth() - this.pane2.paneinfo.min - this.pane1.element.modifiers.x - this.pane2.element.modifiers.x if ((this.pane1.paneinfo.min - this.pane1.element.modifiers.y) > p1width) {
], this.pane1.paneinfo.width = this.pane1.paneinfo.min;
y: [this.pane1.paneinfo.top, this.pane1.paneinfo.top] this.pane2.paneinfo.width = this.paneInfo.two.startWidth + (this.paneInfo.one.startWidth - this.pane1.paneinfo.min);
} } else if ((this.pane2.paneinfo.min - this.pane2.element.modifiers.y) > p2width) {
this.pane2.paneinfo.width = this.pane2.paneinfo.min;
this.pane1.paneinfo.width = this.paneInfo.one.startWidth + (this.paneInfo.two.startWidth - this.pane2.paneinfo.min);
} else { } else {
this.drag.options.limit = { this.pane1.paneinfo.width = p1width;
x: [this.pane1.paneinfo.left, this.pane1.paneinfo.left], this.pane2.paneinfo.width = p2width;
y: [ };
this.pane1.paneinfo.top + this.pane1.paneinfo.min, } else {
this.pane1.top + this.getInnerHeight() - this.pane2.paneinfo.min diff = e.client.y - this.mouseStart.y;
] p1height = this.paneInfo.one.startHeight + diff;
} p2height = this.paneInfo.two.startHeight - diff;
} if (this.pane1.paneinfo.min > p1height) {
this.pane1.paneinfo.height = this.pane1.paneinfo.min;
this.pane2.paneinfo.height = this.paneInfo.two.startHeight + (this.paneInfo.one.startHeight - this.pane1.paneinfo.min);
} else if (this.pane2.paneinfo.min > p2height) {
this.pane2.paneinfo.height = this.pane2.paneinfo.min;
this.pane1.paneinfo.height = this.paneInfo.one.startHeight + (this.paneInfo.two.startHeight - this.pane2.paneinfo.min);
} else {
this.pane1.paneinfo.height = p1height;
this.pane2.paneinfo.height = p2height;
};
};
this.setPosition(this.pane1);
this.setPosition(this.pane2);
}, },
init_pane: function(pane, options) { onMouseUp: function(e) {
pane.addClass('mooui-pane'); window.removeEvent('mouseup', this.bound.onMouseUp);
window.removeEvent('mousemove', this.bound.onMouseMove);
},
initPane: function(pane, options) {
pane.addClass('moouiPane');
pane.paneinfo = {} pane.paneinfo = {}
if (options) { if (options) {
pane.paneinfo.min = (options.min) ? options.min : 0; pane.paneinfo.min = (options.min) ? options.min : 0;
pane.paneinfo.expand = (options.expand) ? options.expand : false; pane.paneinfo.expand = (options.expand) ? options.expand : false;
} };
}, },
calculatePositions: function(resized) { calculatePositions: function(resized) {
@ -725,22 +800,19 @@ Widgets.SplitPane = new Class({
}, },
calculateInitial: function(dm, ds, pm, ps) { calculateInitial: function(dm, ds, pm, ps) {
var size = this.getInnerSize(), position = this.pane1.getPosition(this); var size = this.getInnerSize();
this.pane1.getSizeModifiers(); this.pane2.getSizeModifiers(); this.pane1.getSizeModifiers(); this.pane2.getSizeModifiers();
this.splitter.getSizeModifiers(); this.splitter.getSizeModifiers();
position.x -= this.pane1.element.margin.left;
position.y -= this.pane1.element.margin.top;
// Calculate Size // Calculate Size
if (this.pane1.paneinfo.expand) { if (this.pane1.paneinfo.expand) {
this.pane2.paneinfo[dm] = this.pane2.paneinfo.min - this.pane2.element.modifiers[pm]; this.pane2.paneinfo[dm] = this.pane2.paneinfo.min;
this.pane1.paneinfo[dm] = size[pm] - this.pane2.paneinfo.min - this.options.splitSize; this.pane1.paneinfo[dm] = size[pm] - this.pane2.paneinfo.min - this.options.splitSize;
this.pane1.paneinfo[dm] -= this.pane1.element.modifiers[pm]; this.pane1.paneinfo[dm] -= this.pane1.element.modifiers[pm] + this.pane2.element.modifiers[pm];
} else { } else {
this.pane1.paneinfo[dm] = this.pane1.paneinfo.min - this.pane1.element.modifiers[pm]; this.pane1.paneinfo[dm] = this.pane1.paneinfo.min;
this.pane2.paneinfo[dm] = size[pm] - this.pane1.paneinfo.min - this.options.splitSize; this.pane2.paneinfo[dm] = size[pm] - this.pane1.paneinfo.min - this.options.splitSize;
this.pane2.paneinfo[dm] -= this.pane2.element.modifiers[pm]; this.pane2.paneinfo[dm] -= this.pane2.element.modifiers[pm] + this.pane1.element.modifiers[pm];
} }
this.pane1.paneinfo[ds] = this.pane2.paneinfo[ds] = size[ps]; this.pane1.paneinfo[ds] = this.pane2.paneinfo[ds] = size[ps];
this.pane1.paneinfo[ds] -= this.pane1.element.modifiers[ps]; this.pane1.paneinfo[ds] -= this.pane1.element.modifiers[ps];
@ -748,28 +820,14 @@ Widgets.SplitPane = new Class({
this.splitter.paneinfo[ds] = size[ps]; this.splitter.paneinfo[ds] = size[ps];
this.splitter.paneinfo[dm] = this.options.splitSize; this.splitter.paneinfo[dm] = this.options.splitSize;
// Calculate Position
$A([this.pane1, this.splitter, this.pane2]).each(function(item) {
item.paneinfo.left = position.x;
item.paneinfo.top = position.y;
if (item.modifiers)
position[pm] += item.paneinfo[dm] + item.modifiers[pm];
else
position[pm] += item.paneinfo[dm] + item.element.modifiers[pm];
})
}, },
calculateResize: function(resized, dm, ds, pm, ps) { calculateResize: function(resized, dm, ds, pm, ps) {
var size = this.getInnerSize(), position = this.pane1.getPosition(this); size = this.getInnerSize();
this.pane1.getSizeModifiers(); this.pane2.getSizeModifiers(); this.pane1.getSizeModifiers(); this.pane2.getSizeModifiers();
this.splitter.getSizeModifiers(); this.splitter.getSizeModifiers();
position.x -= this.pane1.element.margin.left; if (resized[dm] && resized[dm] != resized[('old-' + dm).camelCase()]) {
position.y -= this.pane1.element.margin.top;
if (resized[dm] && resized[dm] != resized['old_' + dm]) {
if (this.pane1.paneinfo.expand) { if (this.pane1.paneinfo.expand) {
this.pane1.paneinfo[dm] = size[pm] - this.pane2.paneinfo[dm] - this.options.splitSize; this.pane1.paneinfo[dm] = size[pm] - this.pane2.paneinfo[dm] - this.options.splitSize;
this.pane1.paneinfo[dm] -= this.pane1.element.modifiers[pm] + this.pane2.element.modifiers[pm]; this.pane1.paneinfo[dm] -= this.pane1.element.modifiers[pm] + this.pane2.element.modifiers[pm];
@ -777,79 +835,29 @@ Widgets.SplitPane = new Class({
this.pane2.paneinfo[dm] = size[pm] - this.pane1.paneinfo[dm] - this.options.splitSize; this.pane2.paneinfo[dm] = size[pm] - this.pane1.paneinfo[dm] - this.options.splitSize;
this.pane2.paneinfo[dm] -= this.pane2.element.modifiers[pm] + this.pane1.element.modifiers[pm]; this.pane2.paneinfo[dm] -= this.pane2.element.modifiers[pm] + this.pane1.element.modifiers[pm];
} }
} };
if (resized[ds] && resized[ds] != resized['old_' + ds]) { if (resized[ds] && resized[ds] != resized[('old-' + ds).camelCase()]) {
this.pane1.paneinfo[ds] = this.pane2.paneinfo[ds] = size[ps]; this.pane1.paneinfo[ds] = this.pane2.paneinfo[ds] = size[ps];
this.splitter.paneinfo[ds] = size[ps]; this.splitter.paneinfo[ds] = size[ps];
this.splitter.paneinfo[ds] -= this.splitter.modifiers[ps]; this.splitter.paneinfo[ds] -= this.splitter.modifiers[ps];
this.pane1.paneinfo[ds] -= this.pane1.element.modifiers[ps]; this.pane1.paneinfo[ds] -= this.pane1.element.modifiers[ps];
this.pane2.paneinfo[ds] -= this.pane2.element.modifiers[ps]; this.pane2.paneinfo[ds] -= this.pane2.element.modifiers[ps];
} };
$A([this.pane1, this.splitter, this.pane2]).each(function(item) {
item.paneinfo.left = position.x;
item.paneinfo.top = position.y;
if (item.modifiers)
position[pm] += item.paneinfo[dm] + item.modifiers[pm];
else
position[pm] += item.paneinfo[dm] + item.element.modifiers[pm];
})
if (this.horizontal) {
this.drag.options.limit = {
x: [
this.pane1.paneinfo.left + this.pane1.paneinfo.min,
this.pane1.paneinfo.left + this.getInnerWidth() - this.pane2.paneinfo.min
],
y: [this.pane1.paneinfo.top, this.pane1.paneinfo.top]
}
} else {
this.drag.options.limit = {
x: [this.pane1.paneinfo.left, this.pane1.paneinfo.left],
y: [
this.pane1.paneinfo.top + this.pane1.paneinfo.min,
this.pane1.top + this.getInnerHeight() - this.pane2.paneinfo.min
]
}
}
}, },
setPosition: function(object) { setPosition: function(object) {
if (object.hasClass('mooui-splitter')) { if (object.hasClass('moouiSplitter')) {
var func = object.setStyles.bind(object); sets = object.setStyles.bind(object);
} else { } else {
var func = object.sets.bind(object); sets = object.sets.bind(object);
} };
sets({
func({
width: object.paneinfo.width, width: object.paneinfo.width,
height: object.paneinfo.height, height: object.paneinfo.height
left: object.paneinfo.left,
top: object.paneinfo.top
}); });
}, },
onDrag: function(splitter) {
var position = splitter.getPosition(this)
if (this.horizontal) {
var diff = position.x - this.splitter.paneinfo.left
this.pane2.paneinfo.left += diff
this.pane1.paneinfo.width += diff
this.pane2.paneinfo.width -= diff
this.splitter.paneinfo.left += diff
} else {
var diff = position.y - this.splitter.paneinfo.top
this.pane2.paneinfo.top += diff
this.pane1.paneinfo.height += diff
this.pane2.paneinfo.height -= diff
this.splitter.paneinfo.top += diff
}
this.setPosition(this.pane1)
this.setPosition(this.pane2)
},
onResize: function(event) { onResize: function(event) {
this.calculatePositions(event) this.calculatePositions(event)
this.setPosition(this.pane1); this.setPosition(this.pane1);
@ -871,13 +879,17 @@ Widgets.Tabs = new Class({
Extends: Widgets.Base, Extends: Widgets.Base,
initialize: function(element) { initialize: function(element) {
this.parent(element) this.parent(element);
this.pages = [] this.bound = {
this.currentPage = -1 onResize: this.onResize.bindWithEvent(this)
this.tabs_list = new Element('ul').inject(this.element) };
this.pages_div = new Element('div').inject(this.element) this.pages = [];
this.currentPage = -1;
this.tabsList = new Element('ul').inject(this.element);
this.element.addClass('moouiTabs');
this.pagesDiv = new Element('div').inject(this.element);
if (this.options.expand) this.expand() if (this.options.expand) this.expand();
}, },
addPage: function(page) { addPage: function(page) {
@ -890,8 +902,8 @@ Widgets.Tabs = new Class({
}.bindWithEvent(this)) }.bindWithEvent(this))
page.tab = tab page.tab = tab
this.tabs_list.grab(tab) this.tabsList.grab(tab)
this.pages_div.grab(page.element.addClass('mooui-tabpage')) this.pagesDiv.grab(page.element.addClass('moouiTabPage'))
var pageIndex = this.pages.indexOf(page) var pageIndex = this.pages.indexOf(page)
if (this.currentPage < 0) { if (this.currentPage < 0) {
@ -901,15 +913,15 @@ Widgets.Tabs = new Class({
}, },
select: function(id) { select: function(id) {
this.pages[this.currentPage].removeClass('mooui-tabpage-active') this.pages[this.currentPage].removeClass('moouiTabPageActive')
this.pages[this.currentPage].tab.removeClass('mooui-tabs-active') this.pages[this.currentPage].tab.removeClass('moouiTabActive')
this.pages[id].addClass('mooui-tabpage-active') this.pages[id].addClass('moouiTabPageActive')
this.pages[id].tab.addClass('mooui-tabs-active') this.pages[id].tab.addClass('moouiTabActive')
this.currentPage = id this.currentPage = id
this.fireEvent('pageChanged') this.fireEvent('pageChanged')
}, },
on_resize: function() { onResize: function() {
this._pages.each(function(page) { this._pages.each(function(page) {
page.resize(this.width, this.height - 45) page.resize(this.width, this.height - 45)
}, this) }, this)
@ -962,54 +974,43 @@ Widgets.VBox = new Class({
addBox: function(box, options) { addBox: function(box, options) {
box = $W(box) box = $W(box)
box.boxinfo = (options) ? options : {fixed: false}; box.boxInfo = (options) ? options : {fixed: false};
this.boxes.include(box); this.boxes.include(box);
this.element.grab(box); this.element.grab(box);
box.element.setStyle('position', 'absolute'); box.element.setStyle('position', 'relative');
}, },
calculatePositions: function() { calculatePositions: function() {
if (this.options.expand) this.expand(); if (this.options.expand) this.expand();
var size = this.getInnerSize(); var size = this.getInnerSize();
var position = this.boxes[0].getPosition(this);
var height = size.y, resizable = 0; var height = size.y, resizable = 0;
this.boxes.each(function(box) { this.boxes.each(function(box) {
box.getSizeModifiers() box.getSizeModifiers()
if (!box.boxinfo.fixed) resizable++; if (!box.boxInfo.fixed) resizable++;
else height -= box.height + box.element.modifiers.y else height -= box.height + box.element.modifiers.y
}, this) }, this);
position.x -= this.boxes[0].element.margin.left
position.y -= this.boxes[0].element.margin.top
var boxHeight = height / resizable, remainder = height % resizable var boxHeight = height / resizable, remainder = height % resizable
this.boxes.each(function(box) { this.boxes.each(function(box) {
var boxinfo = {} var boxInfo = {}
if (!box.boxinfo.fixed) { if (!box.boxInfo.fixed) {
var setHeight = boxHeight - box.element.modifiers.y var setHeight = boxHeight - box.element.modifiers.y
if (remainder > 0) { setHeight -= 1; remainder-- } if (remainder > 0) { setHeight -= 1; remainder-- }
boxinfo.height = setHeight boxInfo.height = setHeight;
} else { } else {
boxinfo.height = box.height boxInfo.height = box.height;
} }
boxinfo.width = size.x - box.element.modifiers.x boxInfo.width = size.x - box.element.modifiers.x
boxinfo.top = position.y
boxinfo.left = position.x
box.sets({ box.sets({
height: boxinfo.height, height: boxInfo.height,
width: boxinfo.width, width: boxInfo.width
top: boxinfo.top, });
left: boxinfo.left
})
position.y += box.height + box.element.modifiers.y
}, this) }, this)
}, },
refreshChildren: function() { refreshChildren: function() {
this.boxes.each(function(box) { this.boxes.each(function(box) {
box.refresh(); box.refresh();
box.element.setStyle('position', 'absolute');
}); });
} }
}) })
@ -1029,13 +1030,13 @@ Widgets.Window = new Class({
initialize: function(options) { initialize: function(options) {
var element = new Element('div'); var element = new Element('div');
this.parent(element, options); this.parent(element, options);
this.addClass('mooui-window'); this.addClass('moouiWindow');
this.sets({ this.sets({
width: this.options.width, width: this.options.width,
height: this.options.height height: this.options.height
}); });
this.element.setStyle('opacity', 0); this.element.setStyle('opacity', 0);
this.title = new Element('h3').addClass('mooui-window-title'); this.title = new Element('h3').addClass('moouiWindowTitle');
this.element.grab(this.title); this.element.grab(this.title);
this.title.set('text', this.options.title); this.title.set('text', this.options.title);
@ -1043,13 +1044,13 @@ Widgets.Window = new Class({
handle: this.title handle: this.title
}); });
this.close = new Element('div').addClass('mooui-window-close'); this.close = new Element('div').addClass('moouiWindowClose');
this.close.inject(this.element); this.close.inject(this.element);
this.close.addEvent('click', function(e) { this.close.addEvent('click', function(e) {
this.hide(); this.hide();
}.bindWithEvent(this)); }.bindWithEvent(this));
this.content = new Element('div').addClass('mooui-window-content'); this.content = new Element('div').addClass('moouiWindowContent');
this.content.inject(this.element); this.content.inject(this.element);
if (this.options.url) { if (this.options.url) {
@ -1255,6 +1256,12 @@ Widgets.DataGrid = new Class({
initialize: function(element, options) { initialize: function(element, options) {
if (!element) element = this.createElement if (!element) element = this.createElement
this.parent(element, options) this.parent(element, options)
this.bound = {
onResize: this.onResize.bindWithEvent(this),
onRowMenu: this.onRowMenu.bindWithEvent(this),
onRowClick: this.onRowClick.bindWithEvent(this)
}
this.columns = [] this.columns = []
this.options.columns.each(function(column_info) { this.options.columns.each(function(column_info) {
var column = new Widgets.DataGridColumn(column_info) var column = new Widgets.DataGridColumn(column_info)
@ -1271,9 +1278,9 @@ Widgets.DataGrid = new Class({
this.sorted_by = 0 this.sorted_by = 0
this.columns[0].order = -1 this.columns[0].order = -1
if ($chk(this.element)) { this.scanElement() } else { this.createElement } if ($chk(this.element)) { this.scanElement() } else { this.createElement }
this.element.setStyle('MozUserSelect', 'none') this.element.setStyle('MozUserSelect', 'none');
this.resizeColumns() this.resizeColumns();
this.addEvent('resize', this.resized.bindWithEvent(this)) this.addEvent('resize', this.bound.onResize);
}, },
createElement: function() { createElement: function() {
@ -1290,7 +1297,7 @@ Widgets.DataGrid = new Class({
}, },
scanElement: function() { scanElement: function() {
this.element.addClass('mooui-datagrid') this.element.addClass('moouiDataGrid')
this.table = this.element.getElement('table') this.table = this.element.getElement('table')
if (!this.table) this.table = new Element('table').inject(this.element) if (!this.table) this.table = new Element('table').inject(this.element)
this.header = this.table.getElement('thead') this.header = this.table.getElement('thead')
@ -1314,31 +1321,31 @@ Widgets.DataGrid = new Class({
row.store = row_info.store row.store = row_info.store
this.rows.include(row) this.rows.include(row)
row.update(row_info) row.update(row_info)
row.addEvent('menu', this.onrowmenu.bind(this)); row.addEvent('menu', this.bound.onRowMenu);
row.addEvent('click', this.onrowclick.bind(this)) row.addEvent('click', this.bound.onRowClick);
if (!noRender) this.render() if (!noRender) this.render();
}, },
onrowmenu: function(e) { onRowMenu: function(e) {
if (!this.selectedRow) { if (!this.selectedRow) {
this.selectRow(e.row) this.selectRow(e.row);
} };
this.fireEvent('row_menu', e) this.fireEvent('rowMenu', e);
}, },
onrowclick: function(e) { onRowClick: function(e) {
e.row.index = this.displayRows.indexOf(this.getById(e.row.id)) e.row.index = this.displayRows.indexOf(this.getById(e.row.id));
if (e.shift) { if (e.shift) {
this.deselectRows() this.deselectRows();
this.selectRows(e.row.index) this.selectRows(e.row.index);
} else if (e.control) { } else if (e.control) {
if (e.row.selected) { this.deselectRow(e.row) } if (e.row.selected) { this.deselectRow(e.row) }
else { this.selectRow(e.row) } else { this.selectRow(e.row) };
} else { } else {
this.deselectRows() this.deselectRows();
this.selectRow(e.row) this.selectRow(e.row);
} }
this.fireEvent('row_click', e) this.fireEvent('rowClick', e);
}, },
deselectRow: function(row) { deselectRow: function(row) {
@ -1347,7 +1354,7 @@ Widgets.DataGrid = new Class({
row.element.removeClass('selected') row.element.removeClass('selected')
if (row == this.selectedRow) { if (row == this.selectedRow) {
this.selectedRow = null this.selectedRow = null
this.fireEvent('selectedchanged') this.fireEvent('selectedChanged')
} }
}, },
@ -1360,13 +1367,11 @@ Widgets.DataGrid = new Class({
}, },
filter: function() { filter: function() {
if (!$chk(this.filterer)) { this.filterer = (this.filterer) ? this.filterer : $lambda(true);
this.filterer = $lambda(true) this.displayRows.empty();
} this.rows.each(function(row) {
this.displayRows.empty() if (this.filterer(row)) {this.displayRows.include(row)}
this.rows.each(function(r) { }.bind(this));
if (this.filterer(r)) {this.displayRows.include(r)}
}.bind(this))
}, },
getById: function(id) { getById: function(id) {
@ -1393,8 +1398,8 @@ Widgets.DataGrid = new Class({
}, },
render: function() { render: function() {
this.filter() this.filter();
this.resort() this.resort();
var rows = [], rowIds = [] var rows = [], rowIds = []
this.rows.each(function(row) { this.rows.each(function(row) {
if (this.displayRows.contains(row)) { if (this.displayRows.contains(row)) {
@ -1428,7 +1433,7 @@ Widgets.DataGrid = new Class({
}, this) }, this)
}, },
resized: function() { onResize: function() {
var width = this.width var width = this.width
var columnWidth = this.options.columns.sum('width') var columnWidth = this.options.columns.sum('width')
if (columnWidth > width) this.table.setStyle('width', columnWidth) if (columnWidth > width) this.table.setStyle('width', columnWidth)
@ -1464,7 +1469,7 @@ Widgets.DataGrid = new Class({
row.selected = true row.selected = true
row.element.addClass('selected') row.element.addClass('selected')
this.selectedRow = row this.selectedRow = row
this.fireEvent('selectedchanged') this.fireEvent('selectedChanged');
}, },
sort: function(column, index) { sort: function(column, index) {

40
deluge/ui/webui/templates/ajax/static/themes/classic/style.css
View file

@ -74,15 +74,15 @@ body {
text-align: right; text-align: right;
} }
.mooui-splitter { .moouiSplitter {
background: none; background: none;
} }
.mooui-splitter-vertical { .moouiSplitterVertical {
background: url(split_vertical.png) repeat-y; background: url(split_vertical.png) repeat-y;
} }
.mooui-splitter-horizontal { .moouiSplitterHorizontal {
background: url(split_horizontal.png) repeat-x; background: url(split_horizontal.png) repeat-x;
} }
@ -138,39 +138,39 @@ body {
text-decoration: none; text-decoration: none;
} }
.mooui-datagrid { .moouiDataGrid {
overflow: auto; overflow: auto;
margin: 5px; margin: 5px;
border: 1px solid #2a425c; border: 1px solid #2a425c;
} }
.mooui-datagrid table { .moouiDataGrid table {
/*background: #304663;*/ /*background: #304663;*/
border-spacing: 0px; border-spacing: 0px;
} }
.mooui-datagrid table th { .moouiDataGrid table th {
font-weight: normal; font-weight: normal;
border: 1px outset #1c2431; border: 1px outset #1c2431;
margin-bottom: 2px; margin-bottom: 2px;
cursor: pointer; cursor: pointer;
} }
.mooui-datagrid table td { .moouiDataGrid table td {
padding: 2px; padding: 2px;
border-bottom: 1px solid #1c2431; border-bottom: 1px solid #1c2431;
cursor: pointer; cursor: pointer;
} }
.mooui-datagrid table tr.selected td { background: #900; } .moouiDataGrid table tr.selected td { background: #900; }
.mooui-datagrid table tr:hover td { background: #68a; } .moouiDataGrid table tr:hover td { background: #68a; }
.mooui-progressbar div { .moouiProgressBar div {
background: #4573a5; background: #4573a5;
-moz-border-radius:5px; /*ff only setting*/ -moz-border-radius:5px; /*ff only setting*/
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
} }
.mooui-progressbar span { .moouiProgressBar span {
text-align: center; text-align: center;
} }
@ -179,37 +179,37 @@ body {
background: #1c2431 url(simple_line_flipped.png) repeat-x; background: #1c2431 url(simple_line_flipped.png) repeat-x;
} }
.mooui-menu { .moouiMenu {
background: #304663 url(menu_bg.jpg) repeat-x; background: #304663 url(menu_bg.jpg) repeat-x;
border: 1px outset #37506f; border: 1px outset #37506f;
} }
ul.mooui-menu li.mooui-menu-sep { ul.moouiMenu li.moouiMenuSep {
background-color: #aaa; background-color: #aaa;
} }
ul.mooui-menu li:hover { ul.moouiMenu li:hover {
background-color: #426187; background-color: #426187;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
} }
ul.mooui-menu li.mooui-menu-sep:hover { ul.moouiMenu li.moouiMenuSep:hover {
background-color: #aaa; background-color: #aaa;
} }
.mooui-window { .moouiWindow {
background: #426187; background: #426187;
border: 1px solid #1c2431; border: 1px solid #1c2431;
-moz-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
} }
.mooui-window-close { .moouiWindowClose {
background-image: url(window_close.png); background-image: url(window_close.png);
} }
.mooui-window-title { .moouiWindowTitle {
margin: 5px; margin: 5px;
} }
@ -281,7 +281,7 @@ form br {
margin-left: 100px; margin-left: 100px;
} }
.mooui-window-content #preferences .categories li:hover { .moouiWindowContent #preferences .categories li:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -305,7 +305,7 @@ form br {
font-weight: bold; font-weight: bold;
} }
.mooui-spinner { .moouiSpinner {
width: 40px; width: 40px;
margin-right: 20px; margin-right: 20px;
} }

55
deluge/ui/webui/templates/ajax/static/themes/white/style.css
View file

@ -74,19 +74,10 @@ body {
font-size: 26px; font-size: 26px;
} }
.mooui-splitter { .moouiSplitter {
background: none; background: none;
} }
/*.mooui-splitter-vertical {
background: url(/template/static/images/split_vertical.png) repeat-y;
}
.mooui-splitter-horizontal {
background: url(/template/static/images/split_horizontal.png) repeat-x;
}*/
#toolbar #buttons #add {background-image:url(/template/static/icons/32/add.png)} #toolbar #buttons #add {background-image:url(/template/static/icons/32/add.png)}
#toolbar #buttons #remove {background-image:url(/template/static/icons/32/remove.png)} #toolbar #buttons #remove {background-image:url(/template/static/icons/32/remove.png)}
#toolbar #buttons #pause {background-image:url(/template/static/icons/32/pause.png)} #toolbar #buttons #pause {background-image:url(/template/static/icons/32/pause.png)}
@ -145,7 +136,7 @@ body {
} }
.mooui-datagrid { .moouiDataGrid {
overflow: auto; overflow: auto;
margin: 5px; margin: 5px;
border: 4px solid #C3D9FF; border: 4px solid #C3D9FF;
@ -153,33 +144,33 @@ body {
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
} }
.mooui-datagrid table { .moouiDataGrid table {
/*background: #304663;*/ /*background: #304663;*/
border-spacing: 0px; border-spacing: 0px;
} }
.mooui-datagrid table th { .moouiDataGrid table th {
font-weight: normal; font-weight: normal;
background: #C3D9FF; background: #C3D9FF;
margin-bottom: 2px; margin-bottom: 2px;
cursor: pointer; cursor: pointer;
} }
.mooui-datagrid table td { .moouiDataGrid table td {
padding: 2px; padding: 2px;
border-bottom: 1px solid #1c2431; border-bottom: 1px solid #1c2431;
cursor: pointer; cursor: pointer;
} }
.mooui-datagrid table tr.selected td { background: #E0ECFF; } .moouiDataGrid table tr.selected td { background: #E0ECFF; }
.mooui-datagrid table tr:hover td { background: #FFFFCC; } .moouiDataGrid table tr:hover td { background: #FFFFCC; }
.mooui-progressbar div { .moouiProgressBar div {
background: #C3D9FF; background: #C3D9FF;
-moz-border-radius:5px; /*ff only setting*/ -moz-border-radius:5px; /*ff only setting*/
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
} }
.mooui-progressbar span { .moouiProgressBar span {
text-align: center; text-align: center;
} }
@ -187,21 +178,21 @@ body {
padding: 5px; padding: 5px;
} }
#details .mooui-tabs li { #details .moouiTabs li {
background: #E0ECFF; background: #E0ECFF;
padding: 7px; padding: 7px;
font-size: 1.1em; font-size: 1.1em;
} }
#details .mooui-tabs li:hover { #details .moouiTabs li:hover {
background: #C3D9FF; background: #C3D9FF;
} }
#details li.mooui-tabs-active { #details li.moouiTabActive {
background: #C3D9FF; background: #C3D9FF;
} }
#details .mooui-tabpage { #details .moouiTabPage {
background: #C3D9FF; background: #C3D9FF;
padding: 5px; padding: 5px;
-moz-border-radius:0 5px 5px 5px; -moz-border-radius:0 5px 5px 5px;
@ -248,37 +239,37 @@ body {
-moz-border-radius: 7px 7px 0px 0px; -moz-border-radius: 7px 7px 0px 0px;
} }
.mooui-menu { .moouiMenu {
background: #E0ECFF; background: #E0ECFF;
border: 1px outset Gray; border: 1px outset Gray;
} }
ul.mooui-menu li.mooui-menu-sep { ul.moouiMenu li.moouiMenuSep {
background-color: Gray; background-color: Gray;
} }
ul.mooui-menu li:hover { ul.moouiMenu li:hover {
background-color: #a0a0a0; background-color: #a0a0a0;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
} }
ul.mooui-menu li.mooui-menu-sep:hover { ul.moouiMenu li.moouiMenuSep:hover {
background-color: Gray; background-color: Gray;
} }
.mooui-window { .moouiWindow {
background: #C3D9FF; background: #C3D9FF;
border: 1px solid #1c2431; border: 1px solid #1c2431;
-moz-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
} }
.mooui-window-close { .moouiWindowClose {
background-image: url(/template/static/images/window_close.png); background-image: url(/template/static/themes/white/window_close.png);
} }
.mooui-window-title { .moouiWindowTitle {
margin: 5px; margin: 5px;
} }
@ -346,7 +337,7 @@ form br {
margin-left: 100px; margin-left: 100px;
} }
.mooui-window-content #preferences .categories li:hover { .moouiWindowContent #preferences .categories li:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -370,7 +361,7 @@ form br {
font-weight: bold; font-weight: bold;
} }
.mooui-spinner { .moouiSpinner {
width: 40px; width: 40px;
margin-right: 20px; margin-right: 20px;
} }

18
deluge/ui/webui/templates/ajax/template_style.css
View file

@ -43,21 +43,21 @@ html, body {
padding: 5px; padding: 5px;
} }
#details .mooui-tabs li { #details .moouiTabs li {
background: #37506f; background: #37506f;
padding: 7px; padding: 7px;
font-size: 1.1em; font-size: 1.1em;
} }
#details .mooui-tabs li:hover { #details .moouiTabs li:hover {
background: #426187; background: #426187;
} }
#details li.mooui-tabs-active { #details li.moouiTabActive {
background: #426187; background: #426187;
} }
#details .mooui-tabpage { #details .moouiTabPage {
background: #426187; background: #426187;
padding: 5px; padding: 5px;
-moz-border-radius:0 5px 5px 5px; -moz-border-radius:0 5px 5px 5px;
@ -123,28 +123,28 @@ html, body {
display: block; display: block;
} }
.mooui-window-content #preferences .categories { .moouiWindowContent #preferences .categories {
float: left; float: left;
width: 100px; width: 100px;
padding-left: 10px; padding-left: 10px;
} }
.mooui-window-content #preferences .pref_pages h3 { .moouiWindowContent #preferences .pref_pages h3 {
margin-bottom: 5px; margin-bottom: 5px;
} }
.mooui-window-content #preferences .pref_pages { .moouiWindowContent #preferences .pref_pages {
float: left; float: left;
width: 380px; width: 380px;
} }
.mooui-window-content #preferences .categories ul { .moouiWindowContent #preferences .categories ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
padding-left: 10px; padding-left: 10px;
} }
.mooui-window-content #preferences .categories li { .moouiWindowContent #preferences .categories li {
cursor: pointer; cursor: pointer;
} }