- 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 */