[deltacloud-devel] [PATCH] Initial styling of selected packages as an inline list, inspired by suse studio.

[Jakub Steiner]

- removed all the line noise. Using whitespace as a separator.
- bug: removing a packae seems to remove all
- restructured the styling to be in the #build context
- use links for package names and include a hidden field so the package selection is
actually stored.
- Use .live() for package removal and dropdowns
- readd functionality - Add all packages if the collection checkbox is checked.
- show package details when clicking on a name. Always shown when nojavascript

applies on next: 1e487e84813b219464b85765d06696177641f1fa
---
 src/app/stylesheets/_base.scss                 |   18 +++
 src/app/stylesheets/aggregator.scss            |  140 ++++++++++++++++--------
 src/app/views/templates/_managed_content.haml  |   24 ++--
 src/app/views/templates/content_selection.haml |   10 ++-
 src/app/views/templates/new.haml               |   43 ++++++--
 src/public/javascripts/application.js          |   25 ++++
 6 files changed, 192 insertions(+), 68 deletions(-)

diff --git a/src/app/stylesheets/_base.scss b/src/app/stylesheets/_base.scss
index 07c9d77..3ac43c6 100644
--- a/src/app/stylesheets/_base.scss
+++ b/src/app/stylesheets/_base.scss
@@ -34,6 +34,24 @@ $badcl: #cb292b;
   -webkit-border-radius: $radius;
 }
 
+  @mixin border-radius-top($radius) {
+    border-top-right-radius: $radius;
+    border-top-left-radius: $radius;
+    -moz-border-radius-topright: $radius;
+    -moz-border-radius-topleft: $radius;
+    -webkit-border-top-right-radius: $radius;
+    -webkit-border-top-left-radius: $radius;
+  }
+
+  @mixin border-radius-bottom($radius) {
+    border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
+    -moz-border-radius-bottomright: $radius;
+    -moz-border-radius-bottomleft: $radius;
+    -webkit-border-bottom-right-radius: $radius;
+    -webkit-border-bottom-left-radius: $radius;
+  }
+
 @mixin box-shadow($x,$y,$blur,$color) {
   box-shadow: $x $y $blur $color;
   -moz-box-shadow: $x $y $blur $color;
diff --git a/src/app/stylesheets/aggregator.scss b/src/app/stylesheets/aggregator.scss
index 6d0a070..2056b52 100644
--- a/src/app/stylesheets/aggregator.scss
+++ b/src/app/stylesheets/aggregator.scss
@@ -182,7 +182,7 @@ h2 { font-size: 130%; }
 h3 {
   font-size: 120%;
   &.gap {
-    margin-top: 3em;
+    margin: 3em 0 1em;
   }
 }
 h4 {
@@ -430,48 +430,6 @@ input[type='submit'].icon {
   }
 }
 
-.packagegroupsidebar {
-  display: block;
-  text-align: right;
-  font-size: 120%;
-  li {
-    display: block;
-    margin: 0;
-  }
-  .icon {
-    text-transform: capitalize;
-  }
-}
-  #collections {
-    margin: 0 0 1em;
-    font-weight: bold;
-  }
-
-.metagrouppackages {
-  display: block;
-  &>li {
-    display: block;
-    text-transform: uppercase;
-    margin: 0 2em 2em 0; padding: 0;
-    label {
-      cursor: pointer;
-    }
-    ul {
-      @include column-count(3);
-      display: block;
-      text-transform: none;
-      font-size: 95%;
-      li {
-        display: block;
-        margin: 0 0 0 4px;
-        text-transform: capitalize;
-        label {
-          font-weight: normal;
-        }
-      }
-    }
-  }
-}
 
 .searchedpackages, .collections {
   display: block;
@@ -857,6 +815,7 @@ li.operation>ul, li.administration>ul, li.build>ul,
li.runtime>ul {
 }
 
 #content {
+  position: relative;
   margin-top: 2em;
   margin-bottom: 60px;
   overflow: hidden;
@@ -1172,12 +1131,101 @@ a.iconbutton {
     display: inline-block;
     padding: 6px 0 6px 24px;
   }
+  .packagewrap {
+    position: relative;
+    float: left;
+    padding: 4px 22px 4px 4px;
+    margin: 2px;
+    @include border-radius(4px);
+    .remove_package {
+      position: absolute;
+      width: 16px; height: 16px;
+      top: 50%; right: 4px;
+      border: none;
+      background: url(../../images/icons/action-icons.png) no-repeat -32px 0 !important;
+      text-indent: -200em;
+      padding: 0; margin: -8px 0;
+      @include border-radius(2px);
+      &:hover {
+        @include no-box-shadow();
+        background: lighten($dcprimary,10%) url(../../images/icons/action-icons.png)
no-repeat -32px 0 !important;
+      }
+    }
+    .packagename {
+      cursor: pointer;
+      &:hover {
+        color: white;
+      }
+    }
+    &.selected {
+      color: white;
+      background-color: $dcprimary;
+      .packagename {
+        color: white;
+      }
+    }
+    &:hover {
+      color: white;
+      background-color: $dcprimary;
+      .packagename {
+        color: white;
+      }
+    }
+  }
 
-  .packagename {
-    opacity: 1;
-    color: #000;
+  .packagegroupsidebar {
+    display: block;
+    text-align: right;
+    font-size: 120%;
+    li {
+      display: block;
+      margin: 0;
+    }
+    .icon {
+      text-transform: capitalize;
+    }
+  }
+    #collections {
+      margin: 0 0 1em;
+      font-weight: bold;
+    }
+
+  .metagrouppackages {
+    display: block;
+    &>li {
+      display: block;
+      text-transform: uppercase;
+      margin: 0 2em 2em 0; padding: 0;
+      label {
+        cursor: pointer;
+      }
+      ul {
+        @include column-count(3);
+        display: block;
+        text-transform: none;
+        font-size: 95%;
+        li {
+          display: block;
+          margin: 0 0 0 4px;
+          text-transform: capitalize;
+          label {
+            font-weight: normal;
+          }
+        }
+      }
+    }
   }
 }
+  #dropdown {
+    position: absolute;
+    background-color: white;
+    border: 1px solid $dcprimary;
+    @include border-radius-bottom(4px);
+    padding: 1em;
+    display: none;
+    z-index: 2;
+    font-size: 95%;
+  }
 
 /* IE and other horror browser workarounds */
 
diff --git a/src/app/views/templates/_managed_content.haml
b/src/app/views/templates/_managed_content.haml
index 0657ff1..86b076f 100644
--- a/src/app/views/templates/_managed_content.haml
+++ b/src/app/views/templates/_managed_content.haml
@@ -1,20 +1,20 @@
 #selected_packages
   %h3.gap Managed Content to Bundle
-  %hr
-  %label.header.alpha.prefix_2.grid_7 Name:
-  %label.header.omega.grid_2.suffix_5 Repository:
-  %label.grid_2.alpha.clear Managed:
-  .grid_14.omega
+  .grid_16.alpha.omega
     - if @selected_packages.empty?
       No selected packages
     - else
       - repos = @repository_manager.repositories_hash
       - @selected_packages.sort.each do |pkg|
         - pkg_group = @groups.keys.find {|g| @groups[g][:packages][pkg]}
-        %fieldset.clearfix
-          = text_field_tag 'packages[]', pkg, :id =>
"package_#{pkg}", :class => "alpha grid_7 packagename"
-          .grid_2= (pkg_group and repo = repos[@groups[pkg_group][:repository_id]]) ?
repo.name.to_s : ' '
-          .grid_5.omega
-            %button{:type => 'button', :disabled => 'disabled'}
Config
-            %button{:type => 'button', :disabled => 'disabled'}
Metadata
-            = submit_tag "Remove", :name =>
"remove_package_#{pkg}", :id => "remove_package_#{pkg}", :class
=> 'remove_package'
+        .packagewrap
+          %a.packagename{:id => "package_#{pkg}"}=pkg
+          = hidden_field_tag 'packages[]', pkg, :id =>
"package_#{pkg}"
+          = submit_tag "Remove", :name => "remove_package_#{pkg}",
:id => "remove_package_#{pkg}", :class => 'remove_package'
+          .dropdown
+            %section
+              Repository:
+              %label= (pkg_group and repo = repos[@groups[pkg_group][:repository_id]]) ?
repo.name.to_s : ' '
+            %fieldset.nomargin
+              %button{:disabled => true} Browse
+              %button{:disabled => true} Config
diff --git a/src/app/views/templates/content_selection.haml
b/src/app/views/templates/content_selection.haml
index e5961fe..31fd6f4 100644
--- a/src/app/views/templates/content_selection.haml
+++ b/src/app/views/templates/content_selection.haml
@@ -11,13 +11,21 @@
       var url = '#{url_for :action => 'dispatch', :id => @id}';
       $('#metagrouppackages, ').load(url, data, function() {
         Aggregator.hook_selected_packages();
+        //select all packages in collection
+        $(".softwaregroups").click(function() {
+          if ($(this).attr("checked") === true) {
+           
$(this).parent().siblings("ul").find("input[type='checkbox']").attr("checked","checked");
+          } else {
+           
$(this).parent().siblings("ul").find("input[type='checkbox']").removeAttr("checked");
+          }
+        });
       });
     });
     Aggregator.hook_selected_packages();
   });
 
 .grid_16
-  %h3 Managed Content Selection
+  %h4 Managed Content Selection
 
   - form_tag :action => "dispatch" do
     - unless @embed
diff --git a/src/app/views/templates/new.haml b/src/app/views/templates/new.haml
index 3d16f4f..bef3bf8 100644
--- a/src/app/views/templates/new.haml
+++ b/src/app/views/templates/new.haml
@@ -35,7 +35,32 @@
         });
       });
     });
-    $('.remove_package').click(function() { $(this).parent().parent().remove();
});
+    //removing packages from the list
+    $('.remove_package').live('click', function (e) {
+      e.preventDefault();
+      $(this).parent().hide(300, function () {
+        $(this).remove();
+      });
+    });
+    //displaying extended package info and actions
+    $('.dropdown').hide();
+    $('.packagename').live('click', function () {
+      var dropdowncontent = $(this).siblings('.dropdown').html(),
+      $dropdown = $("#dropdown");
+      $('.packagewrap').removeClass('selected');
+      $(this).parent().addClass('selected');
+      $dropdown.empty().html(dropdowncontent).css({
+        'top': $(this).positionAncestor('#content').top + 17,
+        'left': $(this).positionAncestor('#content').left - 4
+      }).show();
+    });
+    //catch #content clicks and hide the #dropdown if it's not within it
+    $("#content").click(function (e) {
+      if(!e.target.id === 'dropdown' ||
!$(e.target).closest("#dropdown").length) {
+        $("#dropdown").hide();
+        $('.packagewrap').removeClass('selected');
+      }
+    });
     // select correct package repo when we change platform
     $("select[name='tpl[platform]']").change(function() {
       if ($submit.is(':hidden')) {
@@ -47,7 +72,7 @@
         e.preventDefault();
         var url = '#{url_for :action => 'managed_content'}';
         var new_pkgs =
$("input:checked[name='packages[]']").map(function() {return
$(this).val()}).get();
-        var old_pkgs = 
$("input:text[name='packages[]']").map(function() {return
$(this).val()}).get()
+        var old_pkgs = 
$("input:hidden[name='packages[]']").map(function() {return
$(this).val()}).get()
         var cached_pkgs = 
$("input:hidden[name='cached_packages[]']").map(function() {return
$(this).val()}).get()
         var data = {
           'selected_packages[]': old_pkgs.concat(new_pkgs.concat(cached_pkgs)),
@@ -58,17 +83,19 @@
         $('#managed_content').load(url, data, function(){
           //$('#package_selection_list').empty().show();
           $('#add_software_button').show();
-          $('.remove_package').click(function() {
$(this).parent().parent().remove(); });
+          $('.dropdown').hide();
         });
       });
       $('#cancel_add_software').click(function(e) {
         e.preventDefault();
         $('#package_selection_list').hide();
         $('#add_software_button').show();
+        $('.dropdown').hide();
       });
     }
   });
 
+#dropdown
 .grid_16
   %h2 Template
   - form_for @tpl, :url => { :action => "dispatch" } do
@@ -78,7 +105,6 @@
     = render :partial => 'basics'
 
     %h3.disabled.gap Local Content to Bundle
-    %hr
     %fieldset.clearfix
       = label_tag :local_bundle_name, 'Local:', :class => "disabled
grid_2 alpha"
       = text_field_tag 'local_bundle_name[]', 'Bundle Name', :disabled
=> true, :class => "grid_8"
@@ -104,13 +130,12 @@
       = render :partial => 'managed_content'
 
     .clearfix
-      .grid_14.alpha.prefix_2
+      .grid_16.alpha.omega
         = submit_tag "Add Software", :name => "add_software_form",
:id => "add_software_button", :class => "iconbutton"
 
     #package_selection_list{:style => 'display: none'}
 
-    %h3.gap.clear Preboot Configuration
-    %hr
+    %h3.clear.gap Preboot Configuration
     %fieldset.clearfix
       .grid_4.alpha
         = radio_button_tag :configure_via_script, 'no', :disabled => true
@@ -122,5 +147,5 @@
         = label_tag :configure_via_script, 'Configure Via Script'
       = file_field_tag 'script_file', :disabled => true, :class =>
'grid_12 omega'
 
-    = submit_tag "Save", :name => "save", :class =>
"dialogbutton"
-    = submit_tag "Cancel", :name => "cancel", :class =>
"dialogbutton"
+    = submit_tag "Save", :name => "save", :class =>
"formbutton"
+    = submit_tag "Cancel", :name => "cancel", :class =>
"formbutton"
diff --git a/src/public/javascripts/application.js
b/src/public/javascripts/application.js
index 57bfa35..50edbe4 100644
--- a/src/public/javascripts/application.js
+++ b/src/public/javascripts/application.js
@@ -112,6 +112,31 @@ var Aggregator = {
       }
     });
   };
+  $.fn.positionAncestor = function(selector) {
+    var left = 0;
+    var top = 0;
+    this.each(function(index, element) {
+        // check if current element has an ancestor matching a selector
+        // and that ancestor is positioned
+        var $ancestor = $(this).closest(selector);
+        if ($ancestor.length && $ancestor.css("position") !==
"static") {
+            var $child = $(this);
+            var childMarginEdgeLeft = $child.offset().left -
parseInt($child.css("marginLeft"), 10);
+            var childMarginEdgeTop = $child.offset().top -
parseInt($child.css("marginTop"), 10);
+            var ancestorPaddingEdgeLeft = $ancestor.offset().left +
parseInt($ancestor.css("borderLeftWidth"), 10);
+            var ancestorPaddingEdgeTop = $ancestor.offset().top +
parseInt($ancestor.css("borderTopWidth"), 10);
+            left = childMarginEdgeLeft - ancestorPaddingEdgeLeft;
+            top = childMarginEdgeTop - ancestorPaddingEdgeTop;
+            // we have found the ancestor and computed the position
+            // stop iterating
+            return false;
+        }
+    });
+    return {
+        left:    left,
+        top:    top
+    }
+};
 })(jQuery);
 
 /* Aggregator JS */
-- 
1.7.2.3