Skip to content

Commit

Permalink
Changed the VM list to be a table instead of a list, this yields much…
Browse files Browse the repository at this point in the history 
… 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
vboxweb committed Aug 14, 2009
1 parent 5e3b454 commit 91c9974
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 56 deletions.
65 changes: 34 additions & 31 deletions www/static/css/layout-default.css
View file
Expand Up @@ -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. */

Expand All @@ -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 {
Expand All @@ -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 {
Expand Down
21 changes: 11 additions & 10 deletions www/static/js/vboxVMListView.js
View file
Expand Up @@ -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');
Expand All @@ -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());
},
Expand Down
10 changes: 5 additions & 5 deletions www/static/js/vboxVMToolbar.js
View file
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
27 changes: 17 additions & 10 deletions www/templates/index.html
View file
Expand Up @@ -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;">

Expand All @@ -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">
Expand All @@ -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">
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand Down

0 comments on commit 91c9974

Please sign in to comment.