packages - update view to begin to look like new mockup

This is one of many commits that will be to enhance the ui to support
package install/update/remove for a system.  This commit is primarily
to start to make the UI look like the target.

src/app/controllers/systems_controller.rb

@@ -192,7 +192,8 @@ def packages
     else
       packages = []
     end
-    render :partial=>"packages", :layout => "tupane_layout", :locals=>{:system=>@system, :packages => packages, :offset => offset}
+    render :partial=>"packages", :layout => "tupane_layout", :locals=>{:system=>@system, :packages => packages,
+                                                                       :offset => offset, :editable => @system.editable?}
   end
 
   def more_packages

src/app/stylesheets/sections/systems.scss

@@ -138,4 +138,62 @@
     height: 16px;
     margin-right: 4px;
   }
+  .summary {
+    background-color: $white_color;
+    @include border-radius(5px);
+    border: 1px solid $border_color;
+    font-family: $headlinefont;
+    color: #747474;
+    font-size: 14px;
+    .summary_text {
+        margin: 8px 0 2px 8px;
+        padding: 0px;
+        float: left;
+    }
+    .packages_icon {
+      height: 23px;
+      width: 16px;
+      background: $check_icon_black;
+      float: left;
+      margin: 8px;
+      &.up_to_date {
+       background: $check_icon_black;
+      }
+      &.out_of_date {
+       background: $warning_icon_black;
+      }
+    }
+    .summary_top {
+      width: 100%;
+      height: 36px;
+      font-size: 15px;
+      @include border-radius(10px)
+    }
+    .summary_left {
+      border-right: 1px solid $border_color;
+      width: 49%;
+      float: left;
+      clear: left;
+    }
+    .summary_right {
+      width: 49%;
+      float: right;
+    }
+    .summary_num {
+      font-size: 24px;
+      color: #999;
+    }
+  }
+  .packages_icon {
+    width: 8px;
+    background: $check_icon_black;
+    float: left;
+    margin-top: 2px;
+    &.up_to_date {
+     background: $check_icon_black;
+    }
+    &.out_of_date {
+     background: $warning_icon_black;
+    }
+  }
 }

src/app/views/systems/_packages.html.haml

@@ -1,4 +1,4 @@
-= javascript :filtertable, :system_packages
+= javascript :system_packages
 
 = content_for :title do
   #{@system.name}
@@ -7,24 +7,44 @@
   = render_navigation(:items => systems_navigation, :expand_all => true, :level => 1)
 
 = content_for :content do
+  .grid_8.summary
+    .summary_top
+      .packages_icon
+      .fl
+        = image_tag("boxshadow.png")
+      .summary_text.fl #{_("All Packages are up-to-date.")}
+
   - if packages.length > 0
-    = render :partial => "common/filter_table"
-    %table.filter_table.packages.ajaxScroll
+    %table.packages.ajaxScroll
       %thead
-        %th
+        %th{:colspan => 3}
           %a#package_sort{"data-sort"=>"asc", :class=>"ascending"}
             #{_("Name")}
         %th
-          #{_("Arch")}
+          #{_("Date Added")}
       %tbody
         -packages.each do |p|
           %tr
+            %td.package_select
+              = check_box_tag "subscription_id[#{p.id}]", false
+            %td.package_status.packages_icon
             %td{:class=>"package"}
               #{p.nvrea}
             %td{:class=>"arch"}
-              #{p.arch}
+              TODO: installed date
+
     %a#more{"data-scroll_url"=>url_for(more_packages_system_path()), "data-page_size"=>current_user.page_size, "data-offset"=>offset, :class=>"fl"} #{_("More...")}
+
+    - if editable
+      .prefix_2.grid_6.ra
+        #update_key.button{}
+          #{_("Update")}
+        #remove_key.button{}
+          #{_("Remove")}
+
     #list-spinner
       = image_tag("spinner.gif", :class=>"ajax_scroll")
+
   - else
-    %p There are no packages to display.
+    %p There are no packages to display.
+