- 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 =
rep...@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 =
rep...@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
_______________________________________________
deltacloud-devel mailing list
[email protected]
https://fedorahosted.org/mailman/listinfo/deltacloud-devel
