[PATCH conductor 20/21] UI improvements for provider selection and priority groups

ifarkas at redhat.com ifarkas at redhat.com
Thu Jul 26 07:15:34 UTC 2012


From: Imre Farkas <ifarkas at redhat.com>

---
 src/app/stylesheets/layout.scss                    |   83 +++++++++++++-------
 .../views/provider_priority_groups/_form.html.haml |   64 +++++++++------
 .../views/provider_priority_groups/edit.html.haml  |    2 +-
 .../views/provider_priority_groups/index.html.haml |   58 ++++++++------
 .../views/provider_priority_groups/new.html.haml   |    2 +-
 src/config/locales/en.yml                          |   10 +++
 6 files changed, 141 insertions(+), 78 deletions(-)

diff --git a/src/app/stylesheets/layout.scss b/src/app/stylesheets/layout.scss
index c64d8fb..2c387d0 100644
--- a/src/app/stylesheets/layout.scss
+++ b/src/app/stylesheets/layout.scss
@@ -1787,43 +1787,69 @@ ul.image_builds{
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 Priority Group form
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-div.priority-group .provider {
+#priority-group-form {
+  legend {
+    font-family: $font-family-primary;
+    font-size: 16px;
+  }
+}
 
-  header {
-    background-color: #E5E5E5;
-    border: 1px solid #BCBCBC;
-    -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.20);
-    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.20);
-    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.20);
-    height: 37px;
-    position: relative;
-    width: 100%;
+ul.priority-groups {
+  li {
+    border: 1px solid #CCCCCC;
+    -webkit-border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px;
+    margin: 10px 0 20px 0px;
 
-    h3.name {
-      padding: 5px 100px 0px 5px;
-      float: left;
-    }
+    .summary {
+      background: -moz-linear-gradient(top, #efefef 0%, #e0e0e0 100%);
+      background: -webkit-linear-gradient(top, #efefef 0%,#e0e0e0 100%);
+      display: table;
+      width: 100%;
 
-    .score {
-      padding: 9px 0px 0px 0px;
-      color: #666666;
-      font-size: 15px;
-      font-family: $font-family-primary;
+      .info {
+        padding: 10px 10px 10px 42px;
+
+        h3 {
+          font-size: 16px
+        }
+      }
+
+      .controls {
+        display: table-cell;
+        padding: 10px;
+        text-align: right;
+        vertical-align: middle;
+      }
     }
-  }
 
-  .button-group{
-    position: absolute;
-    right: 5px;
-    top: 5px;
-  }
+    .details {
+      background: none repeat scroll 0 0 #EEEEEE;
+      border-top: 1px solid #CCCCCC;
+      padding: 10px;
+
+      table {
+        margin: 0 0 0 32px;
 
-  .provider-accounts-table {
-    padding: 0px 0px 30px 0px;
+        th {
+          border-bottom: 1px solid #CCCCCC;
+        }
+
+        th, td {
+          padding: 10px;
+        }
+
+        td.center {
+          text-align: center;
+        }
+      }
+    }
   }
 }
 
+#no-provider-account {
+  padding-bottom: 50px;
+}
+
 
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 Flat Table Component -- v.0.0.1 [flat_table] (flat_table.scss)
@@ -2112,6 +2138,7 @@ table.pool_families{
     color: white;
 
     text-decoration: none;
+    white-space: nowrap;
     padding: 3px 6px;
     -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
     border: 1px solid #343434;
diff --git a/src/app/views/provider_priority_groups/_form.html.haml b/src/app/views/provider_priority_groups/_form.html.haml
index c72918a..e1b2f56 100644
--- a/src/app/views/provider_priority_groups/_form.html.haml
+++ b/src/app/views/provider_priority_groups/_form.html.haml
@@ -3,6 +3,8 @@
     = render 'layouts/error_messages', :object => @priority_group
 
   %fieldset
+    %legend= t('provider_priority_groups.form.basic_data')
+
     .field
       = form.label :name
       .input
@@ -12,43 +14,57 @@
       .input
         = form.text_field :score
 
-  - @providers.each do |provider|
-    .provider
-
-      %header
-        %h3.name
-          = check_box_tag("provider_ids[]", provider.id, @priority_group.include?(provider), :class => 'provider-checkbox')
-          = provider.name
-
-      .provider-accounts-table
-        = filter_table(provider_accounts_header(:with_checkbox_placeholder => true, :without_alert => true), provider.provider_accounts, {:without_form => true}) do |account|
-          %tr{:class => cycle('nostripe','stripe')}
-            %td{:class => 'checkbox'}
-              = check_box_tag("provider_account_ids[]", account.id, @priority_group.include?(account), :class => 'provider-account-checkbox')
-            %td= link_to(account.name, provider_provider_account_path(account.provider, account))
-            %td= account.credentials_hash['username']
-            %td= account.provider.name
-            %td= account.provider.provider_type.name
-            %td= account.priority
-            %td{:class => 'center'}= number_to_percentage account.quota.percentage_used, :precision => 0
-            %td{:class => 'center'}= account.quota.maximum_running_instances || t('provider_accounts.properties.unlimited')
+  %fieldset
+    %legend= t('provider_priority_groups.form.providers_and_provider_accounts')
+
+    - if @providers.any?
+      %ul.priority-groups
+        - @providers.each do |provider|
+          %li
+            .summary
+              .info
+                %h3.name
+                  = check_box_tag("provider_ids[]", provider.id, @priority_group.include?(provider), :class => 'provider-checkbox')
+                  = provider.name
+            .details
+              %table
+                %tr
+                  %th
+                  %th
+                    %strong= t('provider_priority_groups.index.provider_account_name')
+                  %th= t('provider_priority_groups.index.provider_account_username')
+                  %th= ProviderAccount.human_attribute_name(:priority)
+                  %th= t('provider_priority_groups.index.quota_percentage_used')
+                  %th= t('provider_priority_groups.index.quota_maximum_running_instances')
+
+                - provider.provider_accounts.each do |account|
+                  %tr
+                    %td= check_box_tag("provider_account_ids[]", account.id, @priority_group.include?(account), :class => 'provider-account-checkbox')
+                    %td= link_to account.name, provider_provider_account_path(account.provider, account)
+                    %td= account.credentials_hash['username']
+                    %td= account.priority
+                    %td{:class => 'center'}= number_to_percentage account.quota.percentage_used, :precision => 0
+                    %td{:class => 'center'}= account.quota.maximum_running_instances or t('provider_accounts.properties.unlimited')
+    - else
+      #no-provider-account.align-center
+        %strong= t("provider_priority_groups.index.no_priority_group")
 
 :javascript
   $(document).ready(function() {
-    $(".priority-group .provider h3.name").live("click", function(event) {
+    $(".priority-groups li h3.name").live("click", function(event) {
       var $providerCheckbox = $(this).find('input.provider-checkbox');
-      var providerAccountCheckboxes = $(this).parents('.provider').find('input.provider-account-checkbox')
+      var providerAccountCheckboxes = $(this).parents('li').find('input.provider-account-checkbox')
 
       $.each(providerAccountCheckboxes, function(index, providerAccountCheckbox) {
         $(providerAccountCheckbox).prop('checked', $providerCheckbox.prop('checked'));
       });
     });
 
-    $(".priority-group .provider .provider-account-checkbox").live("click", function(event) {
+    $(".priority-groups li .provider-account-checkbox").live("click", function(event) {
       var $providerAccountCheckbox = $(this);
 
       if ($providerAccountCheckbox.prop('checked') == false) {
-        var $providerCheckbox = $(this).parents('.provider').find('input.provider-checkbox')
+        var $providerCheckbox = $(this).parents('li').find('input.provider-checkbox')
         $providerCheckbox.prop('checked', false);
       }
     });
diff --git a/src/app/views/provider_priority_groups/edit.html.haml b/src/app/views/provider_priority_groups/edit.html.haml
index 092a45e..30c1bb2 100644
--- a/src/app/views/provider_priority_groups/edit.html.haml
+++ b/src/app/views/provider_priority_groups/edit.html.haml
@@ -8,7 +8,7 @@
   %h1.no-icon= t('provider_priority_groups.edit.title')
 
 %section.content-section
-  .content
+  .content#priority-group-form
     = form_for @priority_group, :url => pool_provider_selection_provider_priority_group_path(@pool) do |form|
       = render :partial => 'form', :locals => { :form => form }
       %fieldset.options
diff --git a/src/app/views/provider_priority_groups/index.html.haml b/src/app/views/provider_priority_groups/index.html.haml
index 8a4eab2..e742820 100644
--- a/src/app/views/provider_priority_groups/index.html.haml
+++ b/src/app/views/provider_priority_groups/index.html.haml
@@ -13,28 +13,38 @@
       = link_to(t('provider_priority_groups.index.add_new'), new_pool_provider_selection_provider_priority_group_path(@pool), :class => 'button pill')
     %h2= t('provider_selection.show.edit_strategy', :name => 'Stict Order')
   .content
-    .priority-group
+    - if @priority_groups.any?
+      %ul.priority-groups
+        - @priority_groups.each do |priority_group|
+          %li
+            .summary
+              .info
+                %h2= priority_group.name
+                %p!= "#{ProviderPriorityGroup.human_attribute_name(:score)}: #{priority_group.score}"
+              .controls
+                = link_to(t('edit'), edit_pool_provider_selection_provider_priority_group_path(priority_group.pool, priority_group), :class => "button pill")
+                = link_to(t('delete'), pool_provider_selection_provider_priority_group_path(priority_group.pool, priority_group), :method => :delete, :confirm => t('provider_priority_groups.index.confirm_delete'), :class => "button pill danger")
+            .details
+              %table
+                %tr
+                  %th
+                    %strong= t('provider_priority_groups.index.provider_account_name')
+                  %th= t('provider_priority_groups.index.provider_account_username')
+                  %th= t('provider_priority_groups.index.provider_name')
+                  %th= t('provider_priority_groups.index.provider_type')
+                  %th= ProviderAccount.human_attribute_name(:priority)
+                  %th= t('provider_priority_groups.index.quota_percentage_used')
+                  %th= t('provider_priority_groups.index.quota_maximum_running_instances')
 
-      - @priority_groups.each do |priority_group|
-        .provider
-          %header
-            %h3.name
-              %p= priority_group.name
-
-            .score
-              != "(#{ProviderPriorityGroup.human_attribute_name(:score)}: #{priority_group.score})"
-
-            .button-group
-              = link_to(t('edit'), edit_pool_provider_selection_provider_priority_group_path(priority_group.pool, priority_group), :class => "button pill")
-              = link_to(t('delete'), pool_provider_selection_provider_priority_group_path(priority_group.pool, priority_group), :method => :delete, :confirm => t('provider_priority_groups.index.confirm_delete'), :class => "button pill danger")
-
-          .provider-accounts-table
-            = filter_table(provider_accounts_header(:without_checkbox => true, :without_alert => true), priority_group.all_provider_accounts, {:without_form => true}) do |account|
-              %tr{:class => cycle('nostripe','stripe')}
-                %td= link_to account.name, provider_provider_account_path(account.provider, account)
-                %td= account.credentials_hash['username']
-                %td= account.provider.name
-                %td= account.provider.provider_type.name
-                %td= account.priority
-                %td{:class => 'center'}= number_to_percentage account.quota.percentage_used, :precision => 0
-                %td{:class => 'center'}= account.quota.maximum_running_instances or t('provider_accounts.properties.unlimited')
+                - priority_group.all_provider_accounts.each do |account|
+                  %tr
+                    %td= link_to account.name, provider_provider_account_path(account.provider, account)
+                    %td= account.credentials_hash['username']
+                    %td= account.provider.name
+                    %td= account.provider.provider_type.name
+                    %td= account.priority
+                    %td{:class => 'center'}= number_to_percentage account.quota.percentage_used, :precision => 0
+                    %td{:class => 'center'}= account.quota.maximum_running_instances or t('provider_accounts.properties.unlimited')
+    - else
+      #no-provider-account.align-center
+        %strong= t("provider_priority_groups.index.no_priority_group")
\ No newline at end of file
diff --git a/src/app/views/provider_priority_groups/new.html.haml b/src/app/views/provider_priority_groups/new.html.haml
index 0acdd97..0b5e26c 100644
--- a/src/app/views/provider_priority_groups/new.html.haml
+++ b/src/app/views/provider_priority_groups/new.html.haml
@@ -8,7 +8,7 @@
   %h1.no-icon= t('provider_priority_groups.new.title')
 
 %section.content-section
-  .content
+  .content#priority-group-form
     = form_for @priority_group, :url => pool_provider_selection_provider_priority_groups_path(@pool) do |form|
       = render :partial => 'form', :locals => { :form => form }
       %fieldset.options
diff --git a/src/config/locales/en.yml b/src/config/locales/en.yml
index f3fdba4..8523180 100644
--- a/src/config/locales/en.yml
+++ b/src/config/locales/en.yml
@@ -1300,6 +1300,13 @@ en:
     index:
       add_new: Add new
       confirm_delete: "Are you sure you want to delete this priority group?"
+      provider_account_name: "Account Name"
+      provider_account_username: "Username"
+      provider_name: "Provider Name"
+      provider_type: "Provider Type"
+      quota_percentage_used: "Quota Used"
+      quota_maximum_running_instances: "Quota Limit"
+      no_priority_group: 'No available priority group to display'
     new:
       title: 'Add new Priority Group'
       back: "Provider Groups for Pool: %{pool}"
@@ -1308,6 +1315,9 @@ en:
       title: 'Edit Priority Group'
       back: "Provider Groups for Pool: %{pool}"
       save: 'Save Priority Group'
+    form:
+      basic_data: "Basic Data"
+      providers_and_provider_accounts: "Providers & Provider Accounts"
     flash:
       created: "Priority Group successfully created"
       updated: "Priority Group successfully updated"
-- 
1.7.10.4




More information about the aeolus-devel mailing list