[PATCH aggregator 1/2]: I tried to cleanup Image Builder CSS [PATCH aggregator 2/2]: List of selected packages on "Software" page is now collapsible in JS version (non-JS version still displays expanded list)
(this patchset depends on previous Image Builder patches)
From: Jan Provaznik jprovazn@redhat.com
* cleaned up CSS for Image Builder * fixed repository selection --- src/app/util/repository_manager.rb | 4 +- src/app/views/templates/_groups.haml | 4 +- src/app/views/templates/_packages.haml | 4 +- src/app/views/templates/_selected_packages.haml | 21 ++-- src/app/views/templates/new.haml | 6 +- src/app/views/templates/services.haml | 10 +- src/app/views/templates/software.haml | 3 +- src/public/stylesheets/components.css | 197 +++++++++-------------- 8 files changed, 103 insertions(+), 146 deletions(-)
diff --git a/src/app/util/repository_manager.rb b/src/app/util/repository_manager.rb index 6770faf..5e7cad4 100644 --- a/src/app/util/repository_manager.rb +++ b/src/app/util/repository_manager.rb @@ -142,7 +142,7 @@ class RepositoryManager unless @all_groups @all_groups = {} repositories.keys.each do |r| - next if repository and r != 'all' and repository == r + next if repository and r != 'all' and repository != r get_repository(r).get_groups.each do |group, data| if @all_groups[group] @all_groups[group][:packages].merge!(data[:packages]) @@ -159,7 +159,7 @@ class RepositoryManager unless @all_packages @all_packages = [] repositories.keys.each do |r| - next if repository and r != 'all' and repository == r + next if repository and r != 'all' and repository != r @all_packages += get_repository(r).get_packages end end diff --git a/src/app/views/templates/_groups.haml b/src/app/views/templates/_groups.haml index 46b4521..21fce86 100644 --- a/src/app/views/templates/_groups.haml +++ b/src/app/views/templates/_groups.haml @@ -1,9 +1,9 @@ -%ul{:class => 'groups_to_select'} +%ul{:class => 'groups_to_select selection_list'} - @groups.keys.sort.each do |group| %li - pkgs = @groups[group][:packages].keys.join("','") = group - %a{:class => 'select_group', :href => url_for(:action => 'select_group', :id => params[:id], :group => group)} + %a{:class => 'select_group action_link', :href => url_for(:action => 'select_group', :id => params[:id], :group => group)} Select %ul{:class => 'groupkgs'} - @groups[group][:packages].each do |pkg, type| diff --git a/src/app/views/templates/_packages.haml b/src/app/views/templates/_packages.haml index 2019351..1e0c2a5 100644 --- a/src/app/views/templates/_packages.haml +++ b/src/app/views/templates/_packages.haml @@ -1,6 +1,6 @@ -%ul{:class => 'packages_to_select'} +%ul{:class => 'packages_to_select selection_list'} - @packages.each do |pkg| %li = pkg[:name] - %a{:class => 'select_package', :href => url_for(:action => 'select_package', :id => params[:id], :package => pkg[:name], :repository => pkg[:repository_id])} + %a{:class => 'select_package action_link', :href => url_for(:action => 'select_package', :id => params[:id], :package => pkg[:name], :repository => pkg[:repository_id])} Select diff --git a/src/app/views/templates/_selected_packages.haml b/src/app/views/templates/_selected_packages.haml index 7497ef5..3cb3601 100644 --- a/src/app/views/templates/_selected_packages.haml +++ b/src/app/views/templates/_selected_packages.haml @@ -1,10 +1,11 @@ -- @image_descriptor.xml.all_packages_by_group.each do |group| - %li{:class => 'group'} - = group[:name] - %a{:class => 'remove_group', :href => url_for(:action => 'remove_group', :id => @image_descriptor.id, :group => group[:name])} - Remove - %ul{:class => 'groupkgs'} - - group[:pkgs].each do |pkg| - %li{:class => 'pkgname'} - %input{:type => 'checkbox', :name => 'xml[packages][]', :value => group[:name] + '#' + pkg[:name], :checked => pkg[:checked]} - = pkg[:name] +%ul{:id => "selected_packages", :class => "selection_list"} + - @image_descriptor.xml.all_packages_by_group.each do |group| + %li{:class => 'group'} + = group[:name] + %a{:class => 'remove_group action_link', :href => url_for(:action => 'remove_group', :id => @image_descriptor.id, :group => group[:name])} + Remove + %ul{:class => 'groupkgs'} + - group[:pkgs].each do |pkg| + %li{:class => 'pkgname'} + %input{:type => 'checkbox', :name => 'xml[packages][]', :value => group[:name] + '#' + pkg[:name], :checked => pkg[:checked]} + = pkg[:name] diff --git a/src/app/views/templates/new.haml b/src/app/views/templates/new.haml index 5a1adda..96474c9 100644 --- a/src/app/views/templates/new.haml +++ b/src/app/views/templates/new.haml @@ -8,15 +8,15 @@ %li %label Name = text_field_tag 'xml[name]', @image_descriptor.xml.name - %span Provide a unique name for template master. Users will see this name when they choose this image to instantiate. + .description Provide a unique name for template master. Users will see this name when they choose this image to instantiate. %li %label Platform = select_tag("xml[platform]", @image_descriptor.xml.platforms.map{|repid, rep| "<option value="#{repid}" selected="#{repid == @image_descriptor.xml.platform ? 'selected' : ''}">#{rep['name']}</option>"}) - %span Choose the software operating system. + .description Choose the software operating system. %li %label Description = text_area_tag("xml[description]", @image_descriptor.xml.description, :rows => 4) - %span Provide a description of your template master. Be descriptive to help users to identify the images created with this master. + .description Provide a description of your template master. Be descriptive to help users to identify the images created with this master. .submit = submit_tag "Cancel", :name => "cancel" = submit_tag "Next", :name => "next" diff --git a/src/app/views/templates/services.haml b/src/app/views/templates/services.haml index 836f3d0..19083a4 100644 --- a/src/app/views/templates/services.haml +++ b/src/app/views/templates/services.haml @@ -11,27 +11,27 @@ %label Storage = check_box_tag 'xml[services][amazon3_storage]', '1', @image_descriptor.xml.services.include?('amazon3_storage') = label_tag 'xml[services][amazon3_storage]', 'Enable Amazon S3 storage', :class => "plain" - %span Provides cloud aware table storage for both user-data and guest-images and snapshots compatible with Amazon S3, for any (internal & external)cloud deployment + .description Provides cloud aware table storage for both user-data and guest-images and snapshots compatible with Amazon S3, for any (internal & external)cloud deployment %li %label Inter-node Messaging = check_box_tag 'xml[services][inter_node_messaging]', '1', @image_descriptor.xml.services.include?('inter_node_messaging') = label_tag 'xml[services][inter_node_messaging]', 'Enable inter-node messaging', :class => "plain" - %span Provides cloud aware messaging to facilitate instance-to-instance and instance-to-external communication compatible with Amazon SQS, for any (internal & external)cloud deployment + .description Provides cloud aware messaging to facilitate instance-to-instance and instance-to-external communication compatible with Amazon SQS, for any (internal & external)cloud deployment %li %label Availability = check_box_tag 'xml[services][availability]', '1', @image_descriptor.xml.services.include?('availability') = label_tag 'xml[services][availability]', 'Enable high availability services', :class => "plain" - %span Provides REST API's that allow applications and administrators to inspect instances and know the active state and configuration. Choose high availability to actively maintain and manage application availability when run in cloud + .description Provides REST API's that allow applications and administrators to inspect instances and know the active state and configuration. Choose high availability to actively maintain and manage application availability when run in cloud %li %label JBoss = check_box_tag 'xml[services][jboss]', '1', @image_descriptor.xml.services.include?('jboss') = label_tag 'xml[services][jboss]', 'Enable JBoss infrastructure', :class => "plain" - %span Provides cloud ready JBoss infrastructure to be run in public and internal clouds + .description Provides cloud ready JBoss infrastructure to be run in public and internal clouds %li %label Cooling Tower = check_box_tag 'xml[services][cooling_tower]', '1', @image_descriptor.xml.services.include?('cooling_tower') = label_tag 'xml[services][cooling_tower]', 'Enable Cooling Tower', :class => "plain" - %span Provides multi-tenant, lightweight container for managing many cloud ready PaaS services inside a single instance + .description Provides multi-tenant, lightweight container for managing many cloud ready PaaS services inside a single instance .submit = submit_tag "Cancel", :name => "cancel" = submit_tag "Back", :name => "back" diff --git a/src/app/views/templates/software.haml b/src/app/views/templates/software.haml index 03b56f3..541dd7b 100644 --- a/src/app/views/templates/software.haml +++ b/src/app/views/templates/software.haml @@ -69,8 +69,7 @@ .pkglist{:style => "margin-left: 30px", :class => "left-pkglist"} %div{:class => "ui-tabs ui-widget ui-widget-content ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header"} Selected packages - %ul{:id => "selected_packages"} - = render :partial => 'selected_packages' + = render :partial => 'selected_packages' .submit = submit_tag "Cancel", :name => "cancel" = submit_tag "Back", :name => "back" diff --git a/src/public/stylesheets/components.css b/src/public/stylesheets/components.css index eaf0b81..874d8bc 100644 --- a/src/public/stylesheets/components.css +++ b/src/public/stylesheets/components.css @@ -382,74 +382,108 @@ ul.nav li:hover { }
#image_descriptor_form { + border : none; + padding : 1em 0; + background : none; width: 800px; margin: 20px; display: inline-block; }
-#image_descriptor_form ul li textarea { - width: 302px; +/* dcloud form redefines all input fields */ +#image_descriptor_form input { + width: auto; }
-#image_descriptor_form ul li select { +#image_descriptor_form ul li textarea, +#image_descriptor_form ul li select, +#image_descriptor_form ul li input[type=text] { width: 302px; + float : left; + border-top: 1px solid #7f7f7f; + background : #fff; + border-bottom: 1px solid #7f7f7f; + border-left : 1px solid #000; + border-right : 1px solid #000; + -moz-border-radius : 4px; }
-#image_descriptor_form ul li input { - width: 302px; +#image_descriptor_form .description { + float : left; + width : 300px; + font-size : 95%; + padding-left : 1em; + padding-bottom: 20px; +} + +#image_descriptor_form label { + color : #000; + font-size : 90%; + font-weight : bold; +} + +#image_descriptor_form label.plain { + font-weight : normal; }
#image_descriptor_form .pkglist { - float:left; - width:380px; - height:300px; - overflow:auto; + float: left; + width: 380px; + height: 300px; + overflow: auto; background-color: white; - border : 2px solid #ccc; - -moz-border-radius : 6px; + border: 2px solid #ccc; + -moz-border-radius: 6px; +} + +#image_descriptor_form .submit { + padding-top: 20px; }
-#image_descriptor_form .pkglist .select_package, -#image_descriptor_form .pkglist .select_group, -#image_descriptor_form .pkglist .remove_group { +#image_descriptor_form .pkglist .action_link { float:right; width: 60px !important; - cursor: pointer; color: blue; }
-#image_descriptor_form .pkglist .select_repository { - float:right; - padding: 5px 0px 5px 0px; +#image_descriptor_form .selection_list > li { + padding-bottom: 10px; }
-#image_descriptor_form .pkglist .select_repository select { - width:150px; +#image_descriptor_form .groupkgs { + padding-left: 20px; }
-#image_descriptor_form .pkglist_wrapper { - width:800px; +#image_descriptor_form .pkglist .ui-tabs { + padding : 0; +} + +#image_descriptor_form .pkglist .ui-tabs .ui-tabs-panel { + padding : 1em 0.5em; +} + +#image_descriptor_form .left-pkglist .ui-widget-header { + height : 26px; + padding : 10px; }
#image_descriptor_form .pkglist ul.ui-tabs-nav { background-color: white; - width : 373px; + width : 379px; height : 44px; }
-#image_descriptor_form .pkglist ul li.select { - float : right; - margin-top : 5px; +#image_descriptor_form .pkglist .select_repository { + float:right; + padding: 5px 0px 5px 0px; }
-#image_descriptor_form .groupkgs li { - padding-left: 20px; +#image_descriptor_form .pkglist .select_repository select { + width:150px; }
-#image_descriptor_form .side_panel label { - float: none; - font-size: 1em; - padding: 5px; +#image_descriptor_form #selected_packages { + padding: 10px; }
#image_descriptor_form .side_panel { @@ -461,8 +495,14 @@ ul.nav li:hover { min-height: 300px; }
-#image_descriptor_form .submit { - padding-top: 20px; +#image_descriptor_form .side_panel label { + float: none; + font-size: 1em; + padding: 5px; +} + +#image_descriptor_form .side_panel li { + padding-bottom: 20px; }
#image_descriptor_form .main_panel { @@ -483,8 +523,9 @@ ul.nav li:hover { font-size: 1em; }
-#image_descriptor_form .side_panel li { - padding-bottom: 20px; +#image_descriptor_form .expand_target_list_button { + float: right; + display: none; }
#image_descriptor_form .target_list li { @@ -493,10 +534,6 @@ ul.nav li:hover { padding: 5px; }
-#image_descriptor_form .groups_to_select > li { - padding-bottom: 10px; -} - #image_descriptor_form .target_list li .status { float: right; width: 100px; @@ -511,83 +548,3 @@ ul.nav li:hover { text-align: center; padding: 30px; } - -#image_descriptor_form .expand_target_list_button { - float: right; - display: none; -} - -/* mfojtik's hacks ;-) */ - -#image_descriptor_form.dcloud_form { - background : none; - border : none; - margin : 20px; - padding : 1em 0; -} - -#image_descriptor_form.dcloud_form li { - clear : both; -} - -#image_descriptor_form.dcloud_form label { - color : #000; - font-size : 90%; - font-weight : bold; -} - -#image_descriptor_form.dcloud_form label.plain { - font-weight : normal; -} - -#image_descriptor_form.dcloud_form span { - float : left; - width : 300px; - font-size : 95%; - padding-left : 1em; - padding-bottom: 10px; -} - -#image_descriptor_form.dcloud_form .ui-tabs li span { - width : 60px; - padding-left : 0; -} - -#image_descriptor_form.dcloud_form input[type=text], -#image_descriptor_form.dcloud_form textarea, -#image_descriptor_form.dcloud_form select { - float : left; - border-top: 1px solid #7f7f7f; - background : #fff; - border-bottom: 1px solid #7f7f7f; - border-left : 1px solid #000; - border-right : 1px solid #000; - -moz-border-radius : 4px; -} - -#image_descriptor_form.dcloud_form select { - width : 312px; - float : left; -} - -#selected_packages > li { - padding-top: 10px; - padding-left: 10px; -} - -#image_descriptor_form.dcloud_form textarea { - width : 308px; -} - -.pkglist .ui-tabs { - padding : 0; -} - -.pkglist .ui-tabs .ui-tabs-panel { - padding : 1em 0.5em; -} - -.left-pkglist .ui-tabs { - height : 26px; - padding : 10px; -}
From: Jan Provaznik jprovazn@redhat.com
--- src/app/views/templates/software.haml | 20 ++++++++++++++++++++ src/public/stylesheets/components.css | 22 +++++++++++++++++++++- 2 files changed, 41 insertions(+), 1 deletions(-)
diff --git a/src/app/views/templates/software.haml b/src/app/views/templates/software.haml index 541dd7b..e4feb85 100644 --- a/src/app/views/templates/software.haml +++ b/src/app/views/templates/software.haml @@ -28,6 +28,26 @@ $("#selected_packages").load($(ev.target).attr('href'), loadCallback); return false; }); + createTree(); + }; + function createTree() { + $("li.group").each(function() { + $(this).addClass("closed_folder"); + $(this).click(toggleNode); + }) + $("li.group > ul > li").addClass("hidden"); + }; + function toggleNode(ev) { + var n = $(ev.target); + if (n.hasClass("closed_folder")) { + n.removeClass("closed_folder"); + n.addClass("opened_folder"); + $("ul > li", n).removeClass("hidden"); + } else { + n.removeClass("opened_folder"); + n.addClass("closed_folder"); + $("ul > li", n).addClass("hidden"); + } }; function get_repository(ev) { var rep = $(ev.target).val(); diff --git a/src/public/stylesheets/components.css b/src/public/stylesheets/components.css index 874d8bc..e66d5b0 100644 --- a/src/public/stylesheets/components.css +++ b/src/public/stylesheets/components.css @@ -446,10 +446,30 @@ ul.nav li:hover { color: blue; }
+#image_descriptor_form .closed_folder { + background-image: url(/images/dir_closed.png); + background-repeat: no-repeat; + cursor: pointer; +} + +#image_descriptor_form .opened_folder { + background-image: url(/images/dir_open.png); + background-repeat: no-repeat; + cursor: pointer; +} + +#image_descriptor_form .hidden { + display: none; +} + #image_descriptor_form .selection_list > li { padding-bottom: 10px; }
+#image_descriptor_form .group { + padding-left: 20px; +} + #image_descriptor_form .groupkgs { padding-left: 20px; } @@ -482,7 +502,7 @@ ul.nav li:hover { width:150px; }
-#image_descriptor_form #selected_packages { +#image_descriptor_form .selection_list { padding: 10px; }
On 06/17/2010 02:11 PM, jprovazn@redhat.com wrote:
[PATCH aggregator 1/2]: I tried to cleanup Image Builder CSS [PATCH aggregator 2/2]: List of selected packages on "Software" page is now collapsible in JS version (non-JS version still displays expanded list)
(this patchset depends on previous Image Builder patches)
Please ignore this patchset, it's not applicable because of some changes in patch "image builder - package selection and javascript".
I sent updated patchset again.
--Jan
deltacloud-devel@lists.fedorahosted.org