Permalink
Browse files

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
  • Loading branch information...
1 parent 5e3b454 commit 91c99744e0e646e7a17a4daed564d15232e440b7 vboxweb committed Aug 14, 2009
Showing with 67 additions and 56 deletions.
  1. +34 −31 www/static/css/layout-default.css
  2. +11 −10 www/static/js/vboxVMListView.js
  3. +5 −5 www/static/js/vboxVMToolbar.js
  4. +17 −10 www/templates/index.html
@@ -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,114 +59,117 @@ 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;
}
/* 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 {
@@ -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 =
- '<li class="ui-widget-content">' +
- '<table>'+
+ '<tr class="vmlist-entry-row"><td>' +
+ '<table class="vmlist-entry-table" width="100%">'+
'<tr>'+
'<td>'+
'<img alt="" class="vmlist-entry-osicon" src="' + curItem.osIcon() + '"/>' +
'</td>'+
- '<td nowrap="nowrap">'+
- curItem.name() + '<br/>' +
+ '<td width="100%" nowrap="nowrap" class="vmlist-entry-vmname">'+
+ '<b>' + curItem.name() + '</b><br/>' +
'<img alt="" class="vmlist-entry-stateicon" src="' + vbGlobal.vmStateIcon(curItem.state()) + '"/>&nbsp;' +
vbGlobal.vmStateDescription(curItem.state()) +
'</td>'+
'</tr>'+
'</table>'+
- '</li>';
- jQuery(newItem).appendTo('ol#vmList');
+ '</td></tr>';
+ 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());
},
@@ -116,7 +116,7 @@ var vboxVMToolbar = Class.create(
if (state == VMState.PoweredOff ||
state == VMState.Aborted)
{
- jQuery("#toolbar-button-vm-settings-span").html('<img id="toolbar-button-settings" src="/images/vbox/vm_settings_32px.png" alt="VM settings"/>');
+ jQuery("#toolbar-button-vm-settings-span").html('<img id="toolbar-button-settings" src="/images/vbox/vm_settings_32px.png" alt=""/>');
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('<img id="toolbar-button-start-pause" src="/images/vbox/vm_start_32px.png" alt="Start VM"/">');
+ jQuery("#toolbar-button-vm-start-span").html('<img id="toolbar-button-start-pause" src="/images/vbox/vm_start_32px.png" alt=""/">');
jQuery("#toolbar-button-start-pause").qtip({ content: 'Start currently selected virtual machine' });
}
else if (state == VMState.Running)
{
- jQuery("#toolbar-button-vm-start-span").html('<img id="toolbar-button-start-pause" src="/images/vbox/vm_pause_32px.png" alt="Pause VM"/>');
+ jQuery("#toolbar-button-vm-start-span").html('<img id="toolbar-button-start-pause" src="/images/vbox/vm_pause_32px.png" alt=""/>');
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('<img id="toolbar-button-stop-discard" src="/images/vbox/vm_discard_32px.png" alt="Discard saved state"/>');
+ jQuery("#toolbar-button-vm-stop-span").html('<img id="toolbar-button-stop-discard" src="/images/vbox/vm_discard_32px.png" alt=""/>');
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('<img id="toolbar-button-stop-discard" src="/images/vbox/vm_poweroff_32px.png" alt="Power off VM"/>');
+ jQuery("#toolbar-button-vm-stop-span").html('<img id="toolbar-button-stop-discard" src="/images/vbox/vm_poweroff_32px.png" alt=""/>');
jQuery("#toolbar-button-stop-discard").qtip({ content: 'Power down the currently selected virtual machine' });
}
else
View
@@ -267,20 +267,27 @@
<table width="100%"cellspacing="0">
<tr>
<td align="left">
- <img id="toolbar-button-new" src="/images/vbox/vm_new_32px.png" alt="New VM"/>
+ <img id="toolbar-button-new" src="/images/vbox/vm_new_32px.png" alt=""/>
<span id="toolbar-button-vm-settings-span"></span>
<span id="toolbar-button-vm-start-span"></span>
<span id="toolbar-button-vm-stop-span"></span>
</td>
<td align="right">
- <span id="toolbar-username-span" style="display:inline-block; vertical-align:top"></span>
- <img id="toolbar-button-logout" src="/images/vbox/vm_poweroff_32px.png" alt="Logout"/>
+ <table>
+ <tr>
+ <td><span id="toolbar-username-span" style="display:inline-block; vertical-align:center"></span></td>
+ <td><img id="toolbar-button-logout" src="/images/vbox/logout_32px.png" alt=""/></td>
+ </tr>
+ </table>
</td>
</tr>
</table>
</div>
- <ol id="vmList" class="outer-layout-west" style="display: none; list-style-type: none;"><li/></ol>
+ <div class="outer-layout-west" style="display: none;">
+ <!-- this table represents the list of VMs -->
+ <table id="vmList" cellspacing="0"></table>
+ </div>
<div id="vmTab" class="outer-layout-center" style="display: none;">
@@ -298,7 +305,7 @@
<div class="tab-sections">
<div id="tab-details-sec-vm-general" class="tab-section">
<div id="tab-details-hdr-general" class="tab-section-header">
- <img class="tab-section-hdr-icon" alt="Machine" src="/images/vbox/machine_16px.png"/>
+ <img class="tab-section-hdr-icon" alt="" src="/images/vbox/machine_16px.png"/>
<span class="tab-section-hdr-text">General</span>
</div>
<div id="tab-details-vm-general-name">
@@ -316,7 +323,7 @@
<div class="tab-section" id="tab-details-sec-vm-system">
<div id="tab-details-hdr-system" class="tab-section-header">
- <img class="tab-section-hdr-icon" alt="Chipset" src="/images/vbox/chipset_16px.png"/>
+ <img class="tab-section-hdr-icon" alt="" src="/images/vbox/chipset_16px.png"/>
<span class="tab-section-hdr-text">System</span>
</div>
<div id="tab-details-vm-system-ram">
@@ -348,7 +355,7 @@
<div class="tab-section" id="tab-details-sec-vm-display">
<div id="tab-details-hdr-display" class="tab-section-header">
- <img class="tab-section-hdr-icon" alt="VRDP" src="/images/vbox/vrdp_16px.png"/>
+ <img class="tab-section-hdr-icon" alt="" src="/images/vbox/vrdp_16px.png"/>
<span class="tab-section-hdr-text">Display</span>
</div>
<div id="tab-details-vm-display-videomem">
@@ -357,20 +364,20 @@
<div style="clear: both"></div>
</div>
<div id="tab-details-vm-display-3daccel">
- <div class="tab-details-vm-attribute">3D:</div>
+ <div class="tab-details-vm-attribute">3D Acceleration:</div>
<div class="tab-details-vm-value" id="tab-details-vm-display-3daccel-val"></div>
<div style="clear: both"></div>
</div>
<div id="tab-details-vm-display-rdpport">
- <div class="tab-details-vm-attribute">VRDP Port:</div>
+ <div class="tab-details-vm-attribute">Remote Display Server:</div>
<div class="tab-details-vm-value" id="tab-details-vm-display-rdpport-val"></div>
<div style="clear: both"></div>
</div>
</div>
<div class="tab-section" id="tab-details-sec-vm-harddisks">
<div id="tab-details-hdr-harddisks" class="tab-section-header">
- <img class="tab-section-hdr-icon" alt="Hard Disks" src="/images/vbox/hd_16px.png"/>
+ <img class="tab-section-hdr-icon" alt="" src="/images/vbox/hd_16px.png"/>
<span class="tab-section-hdr-text">Hard Disks</span>
</div>
<ul id="tab-details-vm-harddisks-list" class="harddisks-list"><li/></ul>

0 comments on commit 91c9974

Please sign in to comment.