Patch adds a RAM size slider to the new VM wizard and makes the menu …

…bars more space efficient (Achim Hasenmueller). git-svn-id: http://vboxweb.googlecode.com/svn/trunk@85 729376a8-6c6b-11de-afdd-bb9f892af8c1
snaewe · Aug 28, 2009 · 8a700f2 · 8a700f2
1 parent 3a4b7b1
commit 8a700f2
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 23 deletions.
diff --git a/templates/dialogs.html b/templates/dialogs.html
@@ -89,6 +89,24 @@
                                     </tr>
                                 </table>
                             </div>
+                            <div class="step">
+                                <table width="100%">
+                                    <tr>
+                                        <td class="wizardpagetitle">Memory</td>
+                                    </tr>
+                                    <tr>
+                                        <td class="wizardform">
+                                            <table>
+                                                <tr><td style="padding-right: 10px">Choose the amount of RAM to dedice to this virtual machine. The recommended size
+                                                for the guest operating system you've chosen is <b><span id="newvm-recommendedram"/></b> MB.</td></tr>
+                                                <tr><td><div id="newvm-ramslider"></div></td></tr>
+                                                <tr><td><table width="100%"><tr><td align="left"><b>4 MB</b></td><td align="right"><b><span id="newvm-maxram"/></b> MB</td></tr></table></td></tr>
+                                                <tr><td>Selected RAM size: <input id="newvm-ramsize" maxlength="4" size="4"/> MB.</td></tr>
+                                            </table>
+                                        </td>
+                                    </tr>
+                                </table>
+                            </div>
                             <!-- these become to Back Next buttoms -->
                             <div style="position: absolute; bottom: 30px;">
                                 <input type="reset" value="Reset" />
@@ -100,7 +118,6 @@
             </table>
             <div id="menu_OSType" class="menu">
                 <a rel="text" >
-                    <img src="/images/vbox/os_win_other.png" alt="img"/>
                     Select the operating system family and version of the guest that you plan to run in this virtual machine.<br/>
                 </a>
                 <a rel="separator"> </a>

diff --git a/www/static/css/layout-default.css b/www/static/css/layout-default.css
@@ -210,7 +210,7 @@ td.vmMessageBody {
 /*
  * Menu bar
  */
-.menu{
+.menu {
   display:none;
 }
 
@@ -222,7 +222,7 @@ td.vmMessageBody {
     background-color: #C8C8C8;
 }
 
-.rootVoices{
+.rootVoices {
     background-color:#C8C8C8;
 }
 .rootVoices td.rootVoice {
@@ -236,7 +236,7 @@ td.vmMessageBody {
     cursor: pointer;
 }
 
-.rootVoices td.rootVoice.selected{
+.rootVoices td.rootVoice.selected {
     background: gray;
     color: #ffffff;
     cursor: pointer;
@@ -248,19 +248,18 @@ td.vmMessageBody {
     width: 180px;
 }
 
-.menuShadow{
+.menuShadow {
     padding: 2px;
     padding-bottom: 0px;
     left: -2px;
     top: 1px;
 }
 
-/* AH: there's still some bogus stuff from the sample, cleanup! */
-.menuContainer{
+.menuContainer {
     background-color: gray;
     padding: 0;
 }
-.menuContainer .line{
+.menuContainer .line {
     background-color: transparent;
     width: 100%;
 }
@@ -270,57 +269,59 @@ td.vmMessageBody {
     font-size: 14px;
     border-bottom: 1px solid darkred;
 }
-.menuContainer .line.title a{
+.menuContainer .line.title a {
     font-size: 14px;
 }
-.menuContainer td a{
+.menuContainer td a {
     text-decoration: none;
     color: #f3f3f3;
 }
-.menuContainer td.voice{
+/* the text portion of a menu entry */
+.menuContainer td.voice {
     font-family: Arial,Helvetica,sans-serif;
     font-size: 12px;
-    padding: 7px;
+    padding: 5px;
 }
-.menuContainer .separator{
+.menuContainer .separator {
     background-color: #999;
     height: 1px;
 }
-.menuContainer td.img{
+/* the image left oft a menu entry */
+.menuContainer td.img {
     font-family: Arial,Helvetica,sans-serif;
     text-align: center;
     font-size: 12px;
     color: #c3c3c3;
     background-color: transparent;
     width: 24px;
-    padding: 5px;
+    padding: 1px;
 }
-.menuContainer td.img img{
+.menuContainer td.img img {
     width: 20px;
 }
-.menuContainer .textBox{
-    padding: 10px;
+.menuContainer .textBox {
+    padding: 5px;
     font-family: Arial,Helvetica,sans-serif;
     font-size: 12px;
     background: dimgray url("/images/vbox/header_bgnd.jpg");
     color: #c3c3c3;
 }
-.menuContainer .selected td{
+.menuContainer .selected td {
     background-color: #f3f3f3;
     background-image: url("/images/vbox/bgnd_sel_2.jpg")
 }
-.menuContainer .selected td a{
+.menuContainer .selected td a {
     color: #000;
 }
 .menuContainer .disabled td, .menuContainer .disabled td a {
     color: #cccccc;
 }
-.menuContainer .subMenuOpener{
+.menuContainer .subMenuOpener {
     background-image: url("/images/vbox/menuArrow_w.gif");
     background-repeat: no-repeat;
     background-position: right;
 }
-.menuContainer .selected .subMenuOpener{
+.menuContainer .selected .subMenuOpener {
     background-image: url("/images/vbox/menuArrow.gif");
     background-repeat: no-repeat;
     background-position: right;

diff --git a/www/static/js/vboxDialogs.js b/www/static/js/vboxDialogs.js
@@ -143,14 +143,34 @@ var vboxDialogs = Class.create(
              */
             selectOSType = function(osTypeId)
             {
+                var guestOSType = vbGlobal.mVirtualBox.getGuestOSTypeById(osTypeId);
                 jQuery("#ostype-selected").html(
                     "<img alt=\"\" width=\"20px\" align=\"top\" style=\"padding-right: 20px;\" src=\"" +
                     vbGlobal.vmGuestOSTypeIcon(osTypeId, false) + "\"/>" +
                     "<span id=\"ostype-selected-id\">" +
-                    vbGlobal.mVirtualBox.getGuestOSTypeById(osTypeId).getDescription() +
+                    guestOSType.getDescription() +
                     "</span>"
                 );
+                /* set the recommended RAM size */
+                /* it's kind of dirty to do all this slider business here, think of a better solution! */
+                jQuery("#newvm-recommendedram").text(guestOSType.getRecommendedRAM());
+                jQuery("#newvm-ramsize").val(guestOSType.getRecommendedRAM());
+                /** TODO: get max ram from server */
+                jQuery("#newvm-maxram").text("4096");
+                jQuery("#newvm-ramslider").slider({
+                    max: 4096,
+                    step: 4,
+                    value: guestOSType.getRecommendedRAM(),
+                    slide: function(event, ui) {
+                        jQuery("#newvm-ramsize").val(ui.value);
+                    }
+                });
+                jQuery("#newvm-ramslider").slider('option', 'value', guestOSType.getRecommendedRAM());
+                jQuery("#newvm-ramsize").keyup(function() {
+                    jQuery("#newvm-ramslider").slider('option', 'value', jQuery(this).val());
+                });
             }
+
             var osTypes = vbGlobal.mVirtualBox.mArrGuestOSTypes;
             for (var i = 0; i < osTypes.length; i++)
             {

diff --git a/www/templates/index.html b/www/templates/index.html
@@ -69,6 +69,7 @@
         <script type="text/javascript" src="/static/js/ui/ui.sortable.js"></script>
         <script type="text/javascript" src="/static/js/ui/ui.resizable.js"></script>
         <script type="text/javascript" src="/static/js/ui/ui.tabs.js"></script>
+        <script type="text/javascript" src="/static/js/ui/ui.slider.js"></script>
         <!-- jQuery UI plugins -->
         <script type="text/javascript" src="/static/js/ui/jquery.qtip-1.0.0-rc3.js"></script>
         <script type="text/javascript" src="/static/js/ui/mbMenu.min.js"></script>