From 91c99744e0e646e7a17a4daed564d15232e440b7 Mon Sep 17 00:00:00 2001 From: vboxweb Date: Fri, 14 Aug 2009 15:30:36 +0000 Subject: [PATCH] Changed the VM list to be a table instead of a list, this yields much better results. Some small CSS improvements as well (Achim Hasenmueller). git-svn-id: http://vboxweb.googlecode.com/svn/trunk@52 729376a8-6c6b-11de-afdd-bb9f892af8c1 --- www/static/css/layout-default.css | 65 ++++++++++++++++--------------- www/static/js/vboxVMListView.js | 21 +++++----- www/static/js/vboxVMToolbar.js | 10 ++--- www/templates/index.html | 27 ++++++++----- 4 files changed, 67 insertions(+), 56 deletions(-) diff --git a/www/static/css/layout-default.css b/www/static/css/layout-default.css index e4b1239..8851298 100644 --- a/www/static/css/layout-default.css +++ b/www/static/css/layout-default.css @@ -24,9 +24,9 @@ */ body { - font-family: Verdana, Arial; - font-size: 0.85em; - } + font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; + font-size: 80%; +} /* Global application layout panes. */ @@ -35,19 +35,19 @@ body { background: #5889AB; color: #FFFFFF; padding: 5px 10px; - } +} /* VM List. */ .outer-layout-west { padding: 0 !important; overflow: auto !important; /* Respect footer - don't overdraw it. */ - } +} /* Center. */ .outer-layout-center { padding: 0px; overflow: auto; /* Override layout default 'auto'. */ - } +} /* south */ .outer-layout-south { @@ -59,90 +59,93 @@ body { color: #666; border: 1px solid #BBB; /* Match pane-border. */ background-color: #999; - } - .ui-layout-toggler:hover { +} + +.ui-layout-toggler:hover { background-color: #FC6; - } - .ui-layout-toggler-west , - .ui-layout-toggler-east { +} + +.ui-layout-toggler-west , +.ui-layout-toggler-east { border-width: 1px 0; - } +} /* Hide the toggler-button when the pane is 'slid open'. */ - .ui-layout-resizer-sliding .ui-layout-toggler { +.ui-layout-resizer-sliding .ui-layout-toggler { display: none; - } +} /* The VM list entries. */ #vmList li { /* The element itself. */ border: 0; margin: 3px; - } +} #vmList .ui-selecting { /* Element in selecting state (hover). */ background: #5889AB; - } +} #vmList .ui-selected { /* Element is selected. */ background: #47789A; color: white; - } +} #vmList .vmlist-entry-osicon { padding: 5px; border: 0px; width: 32px; height: 32px; - } +} #vmList.vmlist-entry-stateicon { padding: 5px; border: 0px; width: 16px; height: 16px; - } +} /* The tab pages container. */ #TabPanelsContainer { padding: 10px; overflow: auto; /* Override Layout default 'auto' */ - } +} /* Our tab pages in outer-layout-center. */ .tabs-center-page { overflow: hidden; border: 0px; - } +} /* The icon on the tab header. */ .tabs-center-page-icon { border: 0px; padding-top: 4px; padding-right: 5px; - } +} /* Tab Page. */ .tab-section { margin-bottom: 15px; - } +} .tab-section-header { border: 0px; font-weight: bolder; margin-bottom: 5px; - } +} .tab-section-hdr-text { vertical-align: middle; - } +} .tab-section-hdr-icon { border: 0; vertical-align: middle; - } + } .tab-details-vm-attribute { - width: 150px; + width: 170px; float: left; } + .tab-details-vm-value { float: left; } @@ -150,23 +153,23 @@ body { /* Specific pages. */ #tabs-center-rdp { padding: 0; /* Override tab-theme, needed for no vertical scrollbars. */ - } +} #tab-rdp-form-connect { width: 500px; - } +} #tab-rdp-form-connect label { float: left; width: 100px; - } +} .harddisks-list { margin-top:0; list-style-type: none; padding: 0; margin-left: 0; - } +} /* the message list */ td.message { diff --git a/www/static/js/vboxVMListView.js b/www/static/js/vboxVMListView.js index 3374bac..1c07b81 100644 --- a/www/static/js/vboxVMListView.js +++ b/www/static/js/vboxVMListView.js @@ -203,37 +203,38 @@ var vboxVMListView = Class.create( var numItems = this.mVMModel.getCount(); var newItems = ""; console.log("vboxVMListView::invalidate: Item count: %d", numItems); - jQuery("#vmList li").remove(); /* Remove all existing elements (also from DOM?) */ + /* empty table */ + jQuery("#vmList").html(""); for (var i = 0; i < numItems; i++) { /** @todo Needs cleanup! Maybe put this into a template? */ var curItem = this.mVMModel.itemByRow(i); var newItemData = ''; var newItem = - '
  • ' + - ''+ + ''; + jQuery("#vmList").append(newItem); } /* Select first item */ /* @todo Save old selected item, create list (see above) and select the old VM again (if still present). Otherwise set first entry. */ - jQuery("#vmList li:first").toggleClass('ui-selected'); + jQuery("#vmList .vmlist-entry-row:first").toggleClass('ui-selected'); /* (Re-)connect all handlers */ - jQuery('ol#vmList li'). + jQuery('#vmList .vmlist-entry-row'). mouseover(function() { jQuery(this).toggleClass('ui-state-hover'); @@ -256,7 +257,7 @@ var vboxVMListView = Class.create( selectionChanged: function(event) { - var curIndex = jQuery("#vmList li").index(event.currentTarget); + var curIndex = jQuery("#vmList .vmlist-entry-row").index(event.currentTarget); this.mCurItem = this.mVMModel.itemByRow(curIndex); console.log("vboxVMListView::selectionChanged: mCurItem = %s", this.mCurItem.name()); }, diff --git a/www/static/js/vboxVMToolbar.js b/www/static/js/vboxVMToolbar.js index bdb4ce5..753abf6 100644 --- a/www/static/js/vboxVMToolbar.js +++ b/www/static/js/vboxVMToolbar.js @@ -116,7 +116,7 @@ var vboxVMToolbar = Class.create( if (state == VMState.PoweredOff || state == VMState.Aborted) { - jQuery("#toolbar-button-vm-settings-span").html('VM settings'); + jQuery("#toolbar-button-vm-settings-span").html(''); jQuery("#toolbar-button-settings").qtip({ content: 'Change settings of selected virtual machine' }); } else @@ -128,12 +128,12 @@ var vboxVMToolbar = Class.create( state == VMState.Saved || state == VMState.Paused) { - jQuery("#toolbar-button-vm-start-span").html('Start VM'); + jQuery("#toolbar-button-vm-start-span").html(''); jQuery("#toolbar-button-start-pause").qtip({ content: 'Start currently selected virtual machine' }); } else if (state == VMState.Running) { - jQuery("#toolbar-button-vm-start-span").html('Pause VM'); + jQuery("#toolbar-button-vm-start-span").html(''); jQuery("#toolbar-button-start-pause").qtip({ content: 'Pause the currently selected virtual machine' }); } else @@ -142,13 +142,13 @@ var vboxVMToolbar = Class.create( /* saved VMs can be discarded */ if (state == VMState.Saved) { - jQuery("#toolbar-button-vm-stop-span").html('Discard saved state'); + jQuery("#toolbar-button-vm-stop-span").html(''); jQuery("#toolbar-button-stop-discard").qtip({ content: 'Discard the saved state of the currently selected virtual machine' }); } else if (state == VMState.Running || state == VMState.Paused) { - jQuery("#toolbar-button-vm-stop-span").html('Power off VM'); + jQuery("#toolbar-button-vm-stop-span").html(''); jQuery("#toolbar-button-stop-discard").qtip({ content: 'Power down the currently selected virtual machine' }); } else diff --git a/www/templates/index.html b/www/templates/index.html index da6bcd4..1d4997a 100644 --- a/www/templates/index.html +++ b/www/templates/index.html @@ -267,20 +267,27 @@
    ' + + ''+ ''+ ''+ - ''+ ''+ '
    '+ '' + ''+ - curItem.name() + '
    ' + + '    		'+ + '' + curItem.name() + '
    ' + ' ' + vbGlobal.vmStateDescription(curItem.state()) + '
    '+ - ''; - jQuery(newItem).appendTo('ol#vmList'); + '
    - New VM + - - Logout + + + + + +
    - +