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

[Jason Guiditta]

On Fri, 2009-07-24 at 14:02 -0400, Mohammed Morsi wrote:
> 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 {
ACK, much better!