[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

[Jason Guiditta]

On Fri, 2010-10-22 at 18:34 +0200, Jakub Steiner wrote:
>  - 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
>   
ACK, merged in with Jan's patch and pushed both.  Here is a list of
things I think are remaining to be cleaned up and/or fixed.  I don't
think it is very likely that they can all be fixed before the 3:00
Eastern time (US) build cutoff, but if any are quick fixes that could be
snuck in I;d be happy to get any that we can.

* Styling for pagination links

* Styling for 'add selected' button

* If you add software when scrolled down to the bottom of list, you
can't see that your software was added w/o scrolling back up.  Perhaps
quick initial fix cloud be to move intine list under 'package
selection'?

* If you add a collection, there is no way to 'unadd' the whole
collection', at least that I can see

* It is not clear how to close the 'detail box' when you click on an
item in the inline list of packages.  The first couple times, I hit the
'x', thinking it was close, when it was actually 'delete'.

* Clicking off of the detail box to close it only works if you are in
the main content area.  If you try, for instance, to click in the
whitespace to the left, it does not close the box.

[Jason Guiditta]

On Fri, 2010-10-22 at 17:40 +0000, Jason Guiditta wrote:
>  On Fri, 2010-10-22 at 18:34 +0200, Jakub Steiner wrote:
>  > - 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
>  > 
>  ACK, merged in with Jan's patch and pushed both.  Here is a list of
>  things I think are remaining to be cleaned up and/or fixed.  I don't
>  think it is very likely that they can all be fixed before the 3:00
>  Eastern time (US) build cutoff, but if any are quick fixes that could be
>  snuck in I;d be happy to get any that we can.
>  
>  * Styling for pagination links
>  
>  * Styling for 'add selected' button
>  
>  * If you add software when scrolled down to the bottom of list, you
>  can't see that your software was added w/o scrolling back up.  Perhaps
>  quick initial fix cloud be to move intine list under 'package
>  selection'?
>  
>  * If you add a collection, there is no way to 'unadd' the whole
>  collection', at least that I can see
>  
>  * It is not clear how to close the 'detail box' when you click on an
>  item in the inline list of packages.  The first couple times, I hit the
>  'x', thinking it was close, when it was actually 'delete'.
>  
>  * Clicking off of the detail box to close it only works if you are in
>  the main content area.  If you try, for instance, to click in the
>  whitespace to the left, it does not close the box. 
Forgot one I mentioned on irc:

* Add a 'selected' class to whatever meta-group has been clicked