[Ovirt-devel] [PATCH server] add collapsable sections to vm form

[Mohammed Morsi]

the vm form is getting cluttered, this patch simply add
collapsable sections to the form, making the 'storage'
and 'network' sections collapsed by default

credit goes to jayg for contributing alot to
this patch in terms of simplification and cleanup
---
 src/app/helpers/application_helper.rb |    4 +-
 src/app/views/vm/_form.rhtml          |   35 ++++++++++++++++++++++----------
 src/public/stylesheets/components.css |    1 +
 src/public/stylesheets/layout.css     |   11 ++++++++-
 4 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/app/helpers/application_helper.rb b/src/app/helpers/application_helper.rb
index 0c6562e..7922c6f 100644
--- a/src/app/helpers/application_helper.rb
+++ b/src/app/helpers/application_helper.rb
@@ -72,8 +72,8 @@ module ApplicationHelper
 
   def check_box_tag_with_label(label, name, value = "1", checked = false) 
     %{ 
-      <div class="i"><label for="#{name}">#{_(label)}</label>
-      #{check_box_tag name, value, checked}</div>
+      <div class="i">#{check_box_tag name, value, checked}
+      <label for="#{name}">#{_(label)}</label></div>
      }
   end
 
diff --git a/src/app/views/vm/_form.rhtml b/src/app/views/vm/_form.rhtml
index 034c3df..8373bf4 100644
--- a/src/app/views/vm/_form.rhtml
+++ b/src/app/views/vm/_form.rhtml
@@ -6,15 +6,19 @@
 <%= hidden_field 'vm', 'vm_resource_pool_id' %>
 <%= hidden_field_tag 'hardware_pool_id', @hardware_pool.id if @hardware_pool %>
 
+  <div class="form_heading clickable open">General</div>
+  <div class="vm_form_section">
     <%= text_field_with_label "Name:", "vm", "description", {:style=>"width:250px;"}  %>
     <%= text_field_with_label "UUID:", "vm", "uuid",  {:style=>"width:250px;"} %>
     <%= select_with_label "Operating System:", 'vm', 'provisioning_and_boot_settings', @provisioning_options, :style=>"width:250px;" %>
     <% if controller.action_name == "edit" %><b style="color: #FF0000">*Warning* Editing provision could overwrite vm</b><% end %>
+
     <div class="clear_row" style="height:15px;"></div>
+  </div>
+  <div class="clear_row"></div>
 
-    <div class="form_heading">Resources</div>
-    <div class="clear_row"></div>
-    <div class="clear_row"></div>
+  <div class="form_heading clickable open">Resources</div>
+  <div class="vm_form_section">
     <div style="float:left;width:150px;" >
       <%= text_field_with_label "CPUs:", "vm", "num_vcpus_allocated",  {:style=>"width:100px; margin-bottom:2px;"}, {:style=>"padding-right: 50px;"} %>
       <div class="field_helptext">max to create: <%=create_resources[:cpus]%> </div>
@@ -27,6 +31,11 @@
     </div>
     <div style="clear:both;"></div>
     <div class="clear_row"></div>
+  </div>
+  <div class="clear_row"></div>
+
+  <div class="form_heading clickable closed">Storage</div>
+  <div class="vm_form_section"  style="display:none;">
     <div class="field_title">Storage: </div>
     <div style="height:150px; overflow:auto; border:#CCCCCC solid 1px;">
       <ul id="storage_volumes_tree" class="ovirt-tree"></ul>
@@ -35,10 +44,11 @@
     <!-- FIXME: fill in total here -->
     <div style="background:#F3F3F3; padding:6px; border-left:#CCCCCC solid 1px; border-right:#CCCCCC solid 1px; border-bottom:#CCCCCC solid 1px; ">Total:</div>
     <div class="clear_row" style="height:15px;"></div>
-    <div class="clear_row"></div>
-    <div class="clear_row"></div>
+  </div>
+  <div class="clear_row"></div>
 
-    <div class="form_heading">Network</div>
+  <div class="form_heading clickable closed">Network</div>
+  <div class="vm_form_section" style="display:none;">
     <div class="clear_row"></div>
     <div class="clear_row"></div>
     <div style="float:left;">
@@ -47,12 +57,11 @@
     <div style="float:left;">
       <%= select_with_label "Network:", 'vm', 'network_id', @networks.insert(0, ""), :style=>"width:250px;" %>
     </div>
-    <div style="clear:both;"></div>
-    <div class="clear_row"></div>
     <div class="clear_row"></div>
 
     <%= check_box_tag_with_label "Forward vm's vnc port locally", "forward_vnc", 1, @vm.forward_vnc %>
-    <div class="clear_row"></div>
+  </div>
+  <div class="clear_row"></div>
 
    <%= check_box_tag_with_label "Start VM Now? (pending current resource availability)", "start_now", nil if create or @vm.state == Vm::STATE_STOPPED %>
    <%= check_box_tag_with_label "Restart VM Now? (pending current resource availability)", "restart_now", nil if @vm.state == Vm::STATE_RUNNING %>
@@ -103,7 +112,11 @@ ${htmlList(pools, id)}
         channel: 'STORAGE_VOLUME',
         refresh: VmCreator.returnToVmForm
       });
+
+      $('#vm_form .form_heading').bind('click', function(e){
+          if(this === e.target){
+            $(this).toggleClass('open').toggleClass('closed').next().slideToggle('slow');
+          }
+      });
     });
 </script>
-
-
diff --git a/src/public/stylesheets/components.css b/src/public/stylesheets/components.css
index 41ad3d0..074cc09 100644
--- a/src/public/stylesheets/components.css
+++ b/src/public/stylesheets/components.css
@@ -339,3 +339,4 @@
   height: 11px;
 }
 
+.vm_form_section {padding-left: 2em;}
\ No newline at end of file
diff --git a/src/public/stylesheets/layout.css b/src/public/stylesheets/layout.css
index f232c6c..9ecfe44 100644
--- a/src/public/stylesheets/layout.css
+++ b/src/public/stylesheets/layout.css
@@ -124,8 +124,14 @@ a { color:#000000; text-decoration: none;}
   font-size: 130%;
 }
 
+ /* ----- General Effects ----- */
+.clickable {cursor:pointer;}
 
+.open {background:url(../images/dir_open.png) left center no-repeat;}
 
+.closed {background:url(../images/dir_closed.png) left center no-repeat;}
+
+.hidden {display:none;}
 
 /*  ----- Right side of Header --------  */
 
@@ -427,9 +433,10 @@ a { color:#000000; text-decoration: none;}
 }
 
 .form_heading {
-  font-size:115%; color:  #666666;
+  font-size:1.15em;
+  color:  #666666;
   border-top:#CCCCCC 1px dotted;
-  padding-top: 10px;
+  padding: 1.2em 0em 1em 1.5em;
 }
 
 .field_title {
-- 
1.6.0.6