[PATCH conductor] deployable detail styles and fixes through biuldpush ui

jtomasek at redhat.com jtomasek at redhat.com
Tue Dec 6 11:14:48 UTC 2011


From: Jiri Tomasek <jtomasek at redhat.com>

---
 src/app/stylesheets/custom.scss                    |    1 -
 src/app/stylesheets/layout.scss                    |  110 +++++++++-------
 src/app/views/deployables/_form.html.haml          |   18 ++--
 src/app/views/deployables/_new.html.haml           |    8 +-
 .../views/deployables/_new_from_image.html.haml    |    2 +-
 src/app/views/deployables/show.html.haml           |  138 +++++++++++---------
 .../deployments/launch_from_catalog.html.haml      |    9 +-
 src/app/views/images/edit_xml.html.haml            |    4 +-
 src/app/views/images/new.html.haml                 |    2 +-
 src/app/views/images/overview.html.haml            |    2 +-
 src/app/views/images/show.html.haml                |   14 +-
 .../_provider_selection.html.haml                  |    4 +-
 12 files changed, 172 insertions(+), 140 deletions(-)

diff --git a/src/app/stylesheets/custom.scss b/src/app/stylesheets/custom.scss
index 4f72278..2943ce4 100644
--- a/src/app/stylesheets/custom.scss
+++ b/src/app/stylesheets/custom.scss
@@ -17,7 +17,6 @@
 }
 
 /*fixes the button_to helper used in button-group problem*/
-.button-group .button_to div{display: inline;}
 .button-group .button_to div .button.pill{
   -webkit-border-radius: 0em 50em;
   -moz-border-radius: 0em 50em 50em 0em;
diff --git a/src/app/stylesheets/layout.scss b/src/app/stylesheets/layout.scss
index c1f3886..f999fa9 100644
--- a/src/app/stylesheets/layout.scss
+++ b/src/app/stylesheets/layout.scss
@@ -183,6 +183,7 @@ svg {
 form{
   display: inline;
 }
+form.button_to > div {display: inline;}
 
 /* `Clear Floated Elements
 ----------------------------------------------------------------------------------------------------*/
@@ -1637,54 +1638,42 @@ section.admin-content-section{
 
   p.description{ margin-bottom: 20px }
 
-}
-
-header.admin-page-header + section.admin-content-section{margin-top: 26px;}
-section.admin-content-section + section.admin-content-section {margin-top: 26px;}
-section.admin-content-section{ margin-bottom: 10px; }
-
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-Build Push
+Centered div
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-section.admin-content-section{
-  .content.buildpush{
-    fieldset{margin-top: 20px;}
-
-    textarea.edit_xml{
-      box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
-      width: 100%;
-      padding: 5px 3px;
-      height: 300px;
-      border: 1px solid #C4C4C4;
-      resize: vertical;
-      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.50);
-      -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.50);
-      -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.50);
-    }
-
-    div.centered{
-      width: 600px; margin: 10px auto;
-    }
+  div.centered{
+    width: 600px; margin: 10px auto;
+  }
 
-    div.lefted{
-      padding-right: 380px;
-      margin: 0px 50px;
-      min-height: 160px;
-      h2{
-        font-family: $font-family-primary;
-        font-size: 21px;
-        font-weight: 200;
-        margin-bottom: 4px;
-        padding-right: 40px;
-        text-align: center;
-      }
-      p{ text-align: center; margin: 10px 0px 10px 0px; }
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+Left aligned div
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+  div.lefted{
+    padding-right: 380px;
+    margin: 0px 50px;
+    min-height: 160px;
+    h2{
+      font-family: $font-family-primary;
+      font-size: 21px;
+      font-weight: 200;
+      margin-bottom: 4px;
+      padding-right: 40px;
+      text-align: center;
     }
-    div.lefted.image-upload-overview{background: url(../../images/template-valid.png) no-repeat 600px top;}
-    div.lefted.new-catalog-entry-from-image{background: url(../../images/template-valid.png) no-repeat 600px top;}
+    p{ text-align: center; margin: 10px 0px 10px 0px; }
   }
+
 }
 
+header.admin-page-header + section.admin-content-section{margin-top: 10px;}
+section.admin-content-section + section.admin-content-section {margin-top: 10px;}
+section.admin-content-section{ margin-bottom: 10px; }
+
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+Build Push
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+div.lefted.image-upload-overview{background: url(../../images/template-valid.png) no-repeat 600px top;}
+div.lefted.new-catalog-entry-from-image{background: url(../../images/template-valid.png) no-repeat 600px top;}
 
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 User Card
@@ -2396,6 +2385,18 @@ ul.instances-array{
 }
 
 /************************************************************************** */
+/********************************************* Deployable Detail page */
+/************************************************************************** */
+
+table.light_table{
+  margin: 10px;
+  td,th{ padding: 10px; }
+  th{border-bottom: 1px solid #CCCCCC;}
+  td:first-child, th:first-child{padding-left: 0px;}
+  td:last-child, th:last-child{padding-right: 0px;}
+}
+
+/************************************************************************** */
 /********************************************* Launch from catalog elements */
 /************************************************************************** */
 
@@ -2504,14 +2505,14 @@ ul.catalog_pretty {
       background: -ms-linear-gradient(top, #efefef 0%,#e0e0e0 100%); /* IE10+ */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
       background: linear-gradient(top, #efefef 0%,#e0e0e0 100%); /* W3C */
+      display: table;
+      width: 100%;
+      box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
 
       div.controls{
-        width: 200px;
-        float: right;
         text-align: right;
         display: table-cell;
         vertical-align: middle;
-        div{ display: inline; }
         a{ margin-right: 10px; text-decoration: none; }
         a:after{ content: " ▼"; }
         a:hover{ color: black; }
@@ -2519,13 +2520,14 @@ ul.catalog_pretty {
 
       div.info{
         padding-left: 32px;
-        background: transparent url('../../images/deployment_large_icon_provider.png') no-repeat left top;
+        background: transparent url('../../images/deployment_large_icon_provider.png') no-repeat left center;
         h2{ font-size: 16px; }
+        display: table-cell;
+        vertical-align: middle;
       }
     }
 
     div.details.collapsible{
-      display: none;
       background: #eee;
       border-top: 1px solid #ccc;
       table{
@@ -2535,6 +2537,7 @@ ul.catalog_pretty {
         td:last-child, th:last-child{padding-right: 0px;}
         th{border-bottom: 1px solid #CCCCCC;}
       }
+      &.collapsed{display: none;}
     }
   }
 }
@@ -2970,7 +2973,6 @@ body.monitor form.generic{
   input.short{
     width: 100px;
   }
-
 }
 
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -3067,7 +3069,19 @@ body.administer form.generic{
 
   span.text_instead_input{
     display: inline-block;
-    padding: 6px;
+    padding: 6px 0px;
+  }
+
+  textarea.edit_xml{
+    box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
+    width: 100%;
+    padding: 5px 3px;
+    height: 300px;
+    border: 1px solid #C4C4C4;
+    resize: vertical;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.50);
+    -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.50);
+    -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.50);
   }
 }
 
diff --git a/src/app/views/deployables/_form.html.haml b/src/app/views/deployables/_form.html.haml
index fa6ec32..1c50786 100644
--- a/src/app/views/deployables/_form.html.haml
+++ b/src/app/views/deployables/_form.html.haml
@@ -1,15 +1,15 @@
 - if @deployable.errors.any?
   = render 'layouts/error_messages', :object => @deployable
-%fieldset
-  = form_for @deployable do |form|
+= form_for @deployable do |form|
+  %fieldset
     - if params[:edit_xml]
       %p
-        = form.label :xml, t('.deployable_xml')
-        = form.text_area :xml, :class => 'long'
+        %h2= t('.deployable_xml')
+        = form.text_area :xml, :class => 'edit_xml'
     - else
       %p
         = label_tag :catalog_id, t('catalog_entries.form.catalog')
-        = @catalog.name
+        %span.text_instead_input= @catalog.name
         .clear
       %p
         = form.label :name, t('catalog_entries.index.name')
@@ -19,8 +19,8 @@
         = form.text_area :description, :class => 'long'
       %p
         = form.label :xml, t('.deployable_xml')
-        = link_to t("catalog_entries.properties.edit_deployable_xml"), edit_catalog_deployable_path(@catalog.id, @deployable.id, :edit_xml=>true)
+        %span.text_instead_input= link_to t("catalog_entries.properties.edit_deployable_xml"), edit_catalog_deployable_path(@catalog.id, @deployable.id, :edit_xml=>true)
 
-%fieldset.options
-  = link_to t('cancel'), catalog_path(@catalog), :class => 'button danger'
-  = submit_tag t('save'), :name => 'save', :class => 'button', :id => 'save_button'
+  %fieldset.align-center
+    = link_to t('cancel'), catalog_path(@catalog), :class => 'button danger'
+    = submit_tag t('save'), :name => 'save', :class => 'button', :id => 'save_button'
diff --git a/src/app/views/deployables/_new.html.haml b/src/app/views/deployables/_new.html.haml
index a1d1589..2b431a5 100644
--- a/src/app/views/deployables/_new.html.haml
+++ b/src/app/views/deployables/_new.html.haml
@@ -10,9 +10,9 @@
   %nav#image-upload-tabs.faceted
     %ul.tabs
       %li
-        = link_to t('catalog_entries.new.upload'), new_catalog_deployable_path(@catalog), :id => "upload", :class => "#{'selected' if @form_option == 'upload'}"
+        = link_to t('catalog_entries.new.upload'), new_catalog_deployable_path(@catalog), :id => "upload", :class => "#{'active' if @form_option == 'upload'}"
       %li
-        = link_to t('catalog_entries.new.from_url'), new_catalog_deployable_path(@catalog, :from_url => true), :id => "from_url", :class => "#{'selected' if @form_option == 'from_url'}"
+        = link_to t('catalog_entries.new.from_url'), new_catalog_deployable_path(@catalog, :from_url => true), :id => "from_url", :class => "#{'active' if @form_option == 'from_url'}"
 
     .form_option
       = render :partial => @form_option
@@ -48,8 +48,8 @@
   });
 
   function change_selected($add_selected, $remove_selected){
-    $remove_selected.removeClass('selected');
-    $add_selected.addClass('selected');
+    $remove_selected.removeClass('active');
+    $add_selected.addClass('active');
   }
 
   function read_name_field() {
diff --git a/src/app/views/deployables/_new_from_image.html.haml b/src/app/views/deployables/_new_from_image.html.haml
index 2e1b285..b8030be 100644
--- a/src/app/views/deployables/_new_from_image.html.haml
+++ b/src/app/views/deployables/_new_from_image.html.haml
@@ -2,7 +2,7 @@
   %h1.deployables= t('.catalog_entry_name', :name => @deployable.name)
 
 %section.admin-content-section
-  .content.buildpush
+  .content
     = form_for @deployable, :html => {:class => 'generic'} do |form|
       = hidden_field_tag :create_from_image, params[:create_from_image]
       - if @deployable.errors.any?
diff --git a/src/app/views/deployables/show.html.haml b/src/app/views/deployables/show.html.haml
index 6a8576a..f2b1c14 100644
--- a/src/app/views/deployables/show.html.haml
+++ b/src/app/views/deployables/show.html.haml
@@ -8,86 +8,106 @@
 
     = link_to t('deployments.overview.launch'), launch_new_deployments_path(:deployable_id => @deployable.id, :pool_id => @catalog.pool), :id => :launch_deployment
 
-%section.admin-content-section.deployable
-  %section.image
-    %header
-      %h2= t('.image')
-      %table
+%section.admin-content-section
+  %header
+    %h2.users= t('.images')
+  .content
+    .centered
+      %table.light_table
         %thead
           %tr
-            %th=t'.name'
+            %th
+            %th
+              %strong=t'.name'
             %th=t'.hwp_profile'
-            %th=t'.hdd'
-            %th=t'.ram'
-            %th=t'.arch'
+            %th.align-center=t'.hdd'
+            %th.align-center=t'.ram'
+            %th.align-center=t'.arch'
         %tbody
-        - @image_details.each do |assembly|
-          %tr
-            - if assembly.has_key?(:name)
-              %td=assembly[:name]
-            -else
-              %td=assembly[:error_name]
-            -if assembly.has_key?(:hwp)
-              %td=assembly[:hwp][:name]
-              %td=assembly[:hwp][:hdd]
-              %td=assembly[:hwp][:ram]
-              %td=assembly[:hwp][:arch]
-            -else
-              %td Not exist in DB
+          - @image_details.each do |assembly|
+            %tr
+              %td image ready
+              - if assembly.has_key?(:name)
+                %td
+                  %strong=assembly[:name]
+              -else
+                %td=assembly[:error_name]
+              -if assembly.has_key?(:hwp)
+                %td=assembly[:hwp][:name]
+                %td.align-center=assembly[:hwp][:hdd]
+                %td.align-center=assembly[:hwp][:ram]
+                %td.align-center=assembly[:hwp][:arch]
+              -else
+                %td Not exist in DB
 
-  %section.build
+%section.admin-content-section
+  - if @missing_images.empty?
     %header
       %h2= t('.build')
-
-      - if @missing_images.empty?
+      .section-controls
         = form_tag(catalog_deployable_build_path(@catalog, @deployable)) do
           = select_tag :build_options, options_for_select([[t(".build_missing"), :build_missing], [t(".push_missing"), :push_missing]])
-          = submit_tag t('.start'), :id => :start_build
+          = submit_tag t('.start'), :id => :start_build, :class => 'button pill'
+    .content
+      %p.description.align-center= t('.build_description')
 
-        %p.description= t('.build_description')
-
-        %ul#providers-list
-          - @build_results.each do |provider_type, results|
-            %li
-              = provider_type
-              %ul
+      %ul#providers-list.catalog_pretty
+        - @build_results.each do |provider_type, results|
+          %li.collapse_entity
+            .summary
+              .info
+                %h2= provider_type
+              .controls
+                = link_to t(".details"),"#", :class => "collapse"
+            .details.collapsible
+              %table
+                %tr
+                  %th=t'.provider'
+                  %th=t'.account'
+                  %th.align-center=t'.status'
                 - results.each do |result|
-                  %li
-                    %span.provider= result[:provider]
-                    %span.account= result[:account]
-                    %span.status= result[:status]
-      - else
-        %h3= t('.missing_images')
-        %ul#missing-images-list
-          - @missing_images.each do |uuid|
-            %li= uuid
-
-
-  %section.catalogs
+                  %tr
+                    %td= result[:provider]
+                    %td= result[:account]
+                    %td.align-center= result[:status]
+  - else
     %header
-      %h2= t('.catalogs')
+      %h2= t('.build')
+    .content
+      %h3= t('.missing_images')
+      %ul#missing-images-list
+        - @missing_images.each do |uuid|
+          %li= uuid
 
-      %p= t('.choose_catalog')
+%section.admin-content-section
+  %header
+    %h2= t('.catalogs')
+    .section-controls
       = form_for(:catalog_entry, :url => catalog_entries_path) do |f|
+        = f.label :catalog_id, t('catalog_entries.show.choose_catalog')
         = f.select :catalog_id, options_for_select(@catalogs_options)
         = f.hidden_field(:deployable_id, :value => @deployable.id)
-        = f.submit t('catalog_entries.show.add_catalog'), :id => :add_catalog
-
-      %table
+        = f.submit t('catalog_entries.show.add_catalog'), :id => :add_catalog, :class => 'button pill'
+  .content
+    .centered
+      %table.light_table
         %tr
           %th
-            %label= t('.catalog_name')
           %th
-            %label= t('.environment')
+            %label
+              %strong= t('.catalog_name')
+          %th
+            %label
+              %strong= t('.environment')
         - @deployable.catalog_entries.each do |catalog_entry|
           %tr
-            %td
-              = button_to t('catalog_entries.show.delete'), catalog_entry_path(catalog_entry), :method => 'delete', :confirm => "#{t'catalog_entries.show.confirm_delete'}", :id => 'delete'
-              = catalog_entry.catalog.name
+            %td= button_to t('catalog_entries.show.delete'), catalog_entry_path(@catalog_entry), :method => 'delete', :confirm => "#{t'catalog_entries.show.confirm_delete'}", :id => 'delete'
+            %td= catalog_entry.catalog.name
             %td= catalog_entry.catalog.pool.pool_family.name
 
-  - if check_privilege(Privilege::PERM_VIEW, at permission_object)
-    %section.roles
-      %header
-        %h2= t('users.users')
+- if check_privilege(Privilege::PERM_VIEW, at permission_object)
+  %section.admin-content-section
+    %header
+      %h2.roles= t('users.users')
+    .content
       = render :partial => 'permissions/permissions'
diff --git a/src/app/views/deployments/launch_from_catalog.html.haml b/src/app/views/deployments/launch_from_catalog.html.haml
index ca262e8..0c70fcf 100644
--- a/src/app/views/deployments/launch_from_catalog.html.haml
+++ b/src/app/views/deployments/launch_from_catalog.html.haml
@@ -11,14 +11,13 @@
     - @deployables.each do |deployable|
       %li.collapse_entity
         .summary
-          .controls
-            = link_to t(".details"),"#", :class => "collapse"
-            = button_to t(".select"), launch_time_params_deployments_path(:deployment => { :name => deployable.name, :pool_id => @catalog.pool.id }, :deployable_id => deployable.id ), :class=> "button pill"
           .info
             %h2= deployable.name
             %p= deployable.description
-          .clear
-        .details.collapsible
+          .controls
+            = link_to t(".details"),"#", :class => "collapse"
+            = button_to t(".select"), launch_time_params_deployments_path(:deployment => { :name => deployable.name, :pool_id => @catalog.pool.id }, :deployable_id => deployable.id ), :class=> "button pill"
+        .details.collapsible.collapsed
           %table
             %tr
               %th
diff --git a/src/app/views/images/edit_xml.html.haml b/src/app/views/images/edit_xml.html.haml
index 0f4ee68..da13b83 100644
--- a/src/app/views/images/edit_xml.html.haml
+++ b/src/app/views/images/edit_xml.html.haml
@@ -9,8 +9,8 @@
   %header
     %h2= t('.edit')
 
-  .content.tight.buildpush
-    = form_tag(overview_images_path, {:method => :post}) do
+  .content.tight
+    = form_tag(overview_images_path, {:method => :post, :class => 'generic'}) do
       = hidden_field_tag :environment, @environment.id
       = hidden_field_tag :name, @name
       = text_area_tag :image_xml, @xml, :class => 'edit_xml'
diff --git a/src/app/views/images/new.html.haml b/src/app/views/images/new.html.haml
index e9ec326..838bb63 100644
--- a/src/app/views/images/new.html.haml
+++ b/src/app/views/images/new.html.haml
@@ -6,7 +6,7 @@
     = link_to t('images.environment', :environment => @environment.name), pool_family_path(@environment), :class => 'rounded-link'
 
 %section.admin-content-section
-  .content.buildpush
+  .content
     .centered
       %p.description.align-center
         %strong= t('.description', :environment => @environment.name)
diff --git a/src/app/views/images/overview.html.haml b/src/app/views/images/overview.html.haml
index 4e70112..0167513 100644
--- a/src/app/views/images/overview.html.haml
+++ b/src/app/views/images/overview.html.haml
@@ -6,7 +6,7 @@
     = link_to t('images.environment', :environment => @environment.name), pool_family_path(@environment), :class => 'rounded-link'
 
 %section.admin-content-section
-  .content.buildpush
+  .content
     = form_tag(images_path, {:method => :post}) do
       = hidden_field_tag :environment, @environment.id
       = hidden_field_tag :name, @name
diff --git a/src/app/views/images/show.html.haml b/src/app/views/images/show.html.haml
index c712b1b..707cce3 100644
--- a/src/app/views/images/show.html.haml
+++ b/src/app/views/images/show.html.haml
@@ -10,13 +10,13 @@
 
 %section.admin-content-section
   %header
-    %h2
-      = t('.provider_images')
-    = t'.view_build'
-    = form_tag image_path(@image.id), :method => :get do
-      = select_tag :build, options_for_build_select(@builds, @build, @latest_build)
-      = submit_tag t('.select_build'), :id => 'seletect_build_button'
-    = button_to t('.rebuild_all'), rebuild_all_image_path(@image.id)
+    %h2= t('.provider_images')
+    .section-controls
+      = t'.view_build'
+      = form_tag image_path(@image.id), :method => :get do
+        = select_tag :build, options_for_build_select(@builds, @build, @latest_build)
+        = submit_tag t('.select_build'), :id => 'seletect_build_button'
+      = button_to t('.rebuild_all'), rebuild_all_image_path(@image.id)
   .content
     %dl.image_builds
       - @account_groups.each do |driver, group|
diff --git a/src/app/views/provider_accounts/_provider_selection.html.haml b/src/app/views/provider_accounts/_provider_selection.html.haml
index 36236cb..268512f 100644
--- a/src/app/views/provider_accounts/_provider_selection.html.haml
+++ b/src/app/views/provider_accounts/_provider_selection.html.haml
@@ -1,11 +1,11 @@
 %fieldset#provider_type
   %p
     = label_tag :provider_name, t(".provider_name")
-    = @provider.name
+    %span.text_instead_input= @provider.name
     .clear
   %p
     = label_tag t('.cloud_type')
-    = @provider.provider_type.name
+    %span.text_instead_input= @provider.provider_type.name
     .clear
     - unless @provider.provider_type.deltacloud_driver.nil?
       = render :partial => "provider_form", :locals => { :provider_type => @provider.provider_type}
-- 
1.7.7.3




More information about the aeolus-devel mailing list