[Ovirt-devel] [PATCH server] add toggable sections to vm form
Mohammed Morsi
mmorsi at redhat.com
Fri Jun 19 17:15:21 UTC 2009
the vm form is getting cluttered, this patch simply add
collapsable sections to the form, making the 'resources'
and 'network' sections collapsed by default
- icon added
- methods added to the js
- reorganization / cleanup in rhtml, indentation changes,
no functionality or content changes
---
src/app/views/vm/_form.rhtml | 109 +++++++++++++++++++++++------------
src/public/images/Sort_right_11.png | Bin 0 -> 212 bytes
src/public/javascripts/ovirt.js | 25 ++++++++
3 files changed, 97 insertions(+), 37 deletions(-)
create mode 100644 src/public/images/Sort_right_11.png
diff --git a/src/app/views/vm/_form.rhtml b/src/app/views/vm/_form.rhtml
index 034c3df..4be7bba 100644
--- a/src/app/views/vm/_form.rhtml
+++ b/src/app/views/vm/_form.rhtml
@@ -6,52 +6,77 @@
<%= hidden_field 'vm', 'vm_resource_pool_id' %>
<%= hidden_field_tag 'hardware_pool_id', @hardware_pool.id if @hardware_pool %>
- <%= 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 class="form_heading">Resources</div>
- <div class="clear_row"></div>
- <div class="clear_row"></div>
- <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>
- <div class="field_helptext">max to start: <%=start_resources[:cpus]%> </div>
+ <div class="form_heading">
+ <%= link_to image_tag("Sort_down_11.png") + "General", "#",
+ :id => "vm_general_section_link" %>
</div>
- <div style="float:left;">
- <%= text_field_with_label "Memory:", "vm", "memory_allocated_in_mb", {:style=>"width:100px; margin-bottom:2px;"}, {:afterfield=>" mb"} %>
- <div class="field_helptext">max to create: <%=create_resources[:memory_in_mb]%> mb </div>
- <div class="field_helptext">max to start: <%=start_resources[:memory_in_mb]%> mb </div>
+ <div id="vm_general_config">
+ <%= 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>
- <div style="clear:both;"></div>
- <div class="clear_row"></div>
- <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>
+ <div class="clear_row" style="height:15px;"></div>
+
+ <div class="form_heading">
+ <%= link_to image_tag("Sort_right_11.png") + "Resources", "#",
+ :id => "vm_resource_section_link" %>
</div>
+ <div id="vm_resources_config">
+ <div class="clear_row"></div>
+ <div class="clear_row"></div>
+ <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>
+ <div class="field_helptext">max to start: <%=start_resources[:cpus]%> </div>
+ </div>
+ <div style="float:left;">
+ <%= text_field_with_label "Memory:", "vm", "memory_allocated_in_mb", {:style=>"width:100px; margin-bottom:2px;"}, {:afterfield=>" mb"} %>
+ <div class="field_helptext">max to create: <%=create_resources[:memory_in_mb]%> mb </div>
+ <div class="field_helptext">max to start: <%=start_resources[:memory_in_mb]%> mb </div>
+ </div>
+ <div style="clear:both;"></div>
+ <div class="clear_row"></div>
- <!-- 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="field_title">Storage: </div>
+ <div style="height:150px; overflow:auto; border:#CCCCCC solid 1px;">
+ <ul id="storage_volumes_tree" class="ovirt-tree"></ul>
+ </div>
+
+ <!-- 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>
<div class="clear_row" style="height:15px;"></div>
<div class="clear_row"></div>
<div class="clear_row"></div>
- <div class="form_heading">Network</div>
- <div class="clear_row"></div>
- <div class="clear_row"></div>
- <div style="float:left;">
- <%= text_field_with_label "VNIC:", "vm", "vnic_mac_addr", {:style=>"width:250;"} %>
- </div>
- <div style="float:left;">
- <%= select_with_label "Network:", 'vm', 'network_id', @networks.insert(0, ""), :style=>"width:250px;" %>
+ <div class="form_heading">
+ <%= link_to image_tag("Sort_right_11.png") + "Network", "#",
+ :id => "vm_network_section_link" %>
</div>
- <div style="clear:both;"></div>
- <div class="clear_row"></div>
- <div class="clear_row"></div>
+ <div id="vm_network_config">
+ <div class="clear_row"></div>
+ <div class="clear_row"></div>
+ <div style="float:left;">
+ <%= text_field_with_label "VNIC:", "vm", "vnic_mac_addr", {:style=>"width:250;"} %>
+ </div>
+ <div style="float:left;">
+ <br/>
+ <% if @networks.size > 0 %>
+ <select id="vm_networks_ids" name="vm[network_ids][]" multiple="true">
+ <%= options_from_collection_for_select @networks, "id", "name",
+ @vm.networks.collect { |x| x.id.to_i } %>
+ </select>
+ <% else %>
+ <br/><b>No networks available</b>
+ <% end %>
+ </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 %>
+ <%= check_box_tag_with_label "Forward vm's vnc port locally", "forward_vnc", 1, @vm.forward_vnc %>
+ </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 %>
@@ -104,6 +129,16 @@ ${htmlList(pools, id)}
refresh: VmCreator.returnToVmForm
});
});
-</script>
+ toggle_visability_on_click('#vm_general_config', '#vm_general_section_link', 'General');
+ toggle_visability_on_click('#vm_resources_config','#vm_resource_section_link', 'Resources');
+ toggle_visability_on_click('#vm_network_config', '#vm_network_section_link', 'Network');
+ // initially show general, hide resources / networks section
+ $(document).ready(function(){
+ show_section_with_header('#vm_general_config', '#vm_general_section_link', 'General');
+ hide_section_with_header('#vm_resources_config', '#vm_resource_section_link', 'Resources');
+ hide_section_with_header('#vm_network_config', '#vm_network_section_link', 'Network');
+ });
+
+</script>
diff --git a/src/public/images/Sort_right_11.png b/src/public/images/Sort_right_11.png
new file mode 100644
index 0000000000000000000000000000000000000000..9162bd69dcf43c55431bf655eeaa5250b61c8083
GIT binary patch
literal 212
zcmeAS at N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOUqhjKx9jP7LeL$-D$|*pj^6T^Rm@
z;DWu&Cj&(|3p^r=fm(z?n2}-D90{Nxdx at v7EBj40VSZUQ&8U<npiqdXi(`ny<*DaR
z^Bz#(VGfurdqY9kNc;B;Z*IZ)7u-%Mp4{9p>BH7Z@*ZN7%C1bRV!m+s+4sM8iQP=u
zRvZbx?{I`L{Jg9FXXS14Jv$F^=o=hLZId(q626k%RLSoX(0m3 at S3j3^P6<r_br3`w
literal 0
HcmV?d00001
diff --git a/src/public/javascripts/ovirt.js b/src/public/javascripts/ovirt.js
index 67dc455..3c57b07 100644
--- a/src/public/javascripts/ovirt.js
+++ b/src/public/javascripts/ovirt.js
@@ -394,3 +394,28 @@ function get_server_from_url()
var end = window.location.href.indexOf('/', 8) - start;
return window.location.href.substr(start, end);
}
+
+// hides the specified section, altering the specified header div with updated title / arrow
+function hide_section_with_header(section, header, title){
+ content = '<img src="/ovirt/images/Sort_right_11.png" />' + title;
+ $(header).html(content);
+ $(section).hide('slow');
+};
+
+// show the specified section, altering the specified header div with updated title / arrow
+function show_section_with_header(section, header, title){
+ content = '<img src="/ovirt/images/Sort_down_11.png" />' + title;
+ $(header).html(content);
+ $(section).show('slow');
+};
+
+// wire up the header to invoke either the show or hide function on click
+function toggle_visability_on_click(section, header, title){
+ $(header).bind('click', function(){
+ if($(section).is(':hidden')){
+ show_section_with_header(section, header, title);
+ }else{
+ hide_section_with_header(section, header, title);
+ }
+ });
+};
--
1.6.0.6
More information about the ovirt-devel
mailing list