Sending again this patchset (older version is not applicable because of some fixes in patch "image builder - package selection and javascript")
[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 2d86afd..d6e744e 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, :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, :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 a6e134b..d4bf011 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 c6692a4..f080f7d 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 75c207b..258944a 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
* cleaned up CSS for Image Builder --- 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/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 2d86afd..d6e744e 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, :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, :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 a6e134b..d4bf011 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 c6692a4..f080f7d 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 75c207b..258944a 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; -}
On Tue, 2010-06-22 at 17:14 +0200, jprovazn@redhat.com wrote:
From: Jan Provaznik jprovazn@redhat.com
- cleaned up CSS for Image Builder
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(-)
ACK, this looks good to me.
-j
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 258944a..6bbde13 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).toggle( + function() { + var n = $(this); + n.removeClass("closed_folder"); + n.addClass("opened_folder"); + $("ul > li", n).removeClass("hidden"); + }, function() { + var n = $(this); + n.removeClass("opened_folder"); + n.addClass("closed_folder"); + $("ul > li", n).addClass("hidden"); + } + ); + }) + $("li.group > ul > li").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; }
From: Jan Provaznik jprovazn@redhat.com
--- src/app/views/templates/_selected_packages.haml | 3 +- src/app/views/templates/software.haml | 19 ++++++++++++++++++ src/public/stylesheets/components.css | 24 ++++++++++++++++++++++- 3 files changed, 44 insertions(+), 2 deletions(-)
diff --git a/src/app/views/templates/_selected_packages.haml b/src/app/views/templates/_selected_packages.haml index d6e744e..b0f8efe 100644 --- a/src/app/views/templates/_selected_packages.haml +++ b/src/app/views/templates/_selected_packages.haml @@ -1,7 +1,8 @@ %ul{:id => "selected_packages", :class => "selection_list"} - @image_descriptor.xml.all_packages_by_group.each do |group| %li{:class => 'group'} - = group[:name] + %span{:class => "groupname"} + = group[:name] %a{:class => 'remove_group action_link', :href => url_for(:action => 'remove_group', :id => @image_descriptor, :group => group[:name])} Remove %ul{:class => 'groupkgs'} diff --git a/src/app/views/templates/software.haml b/src/app/views/templates/software.haml index 258944a..dee8eeb 100644 --- a/src/app/views/templates/software.haml +++ b/src/app/views/templates/software.haml @@ -28,6 +28,25 @@ $("#selected_packages").load($(ev.target).attr('href'), loadCallback); return false; }); + createTree(); + }; + function createTree() { + $("li.group").each(function() { + var group = $(this); + group.addClass("closed_folder"); + $(".groupname", group).toggle( + function() { + group.removeClass("closed_folder"); + group.addClass("opened_folder"); + $("ul > li", group).removeClass("hidden"); + }, function() { + group.removeClass("opened_folder"); + group.addClass("closed_folder"); + $("ul > li", group).addClass("hidden"); + } + ); + }) + $("li.group > ul > li").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..64df832 100644 --- a/src/public/stylesheets/components.css +++ b/src/public/stylesheets/components.css @@ -446,10 +446,32 @@ ul.nav li:hover { color: blue; }
+#image_descriptor_form .closed_folder { + background-image: url(/images/dir_closed.png); + background-repeat: no-repeat; +} + +#image_descriptor_form .opened_folder { + background-image: url(/images/dir_open.png); + background-repeat: no-repeat; +} + +#image_descriptor_form .groupname { + 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 +504,7 @@ ul.nav li:hover { width:150px; }
-#image_descriptor_form #selected_packages { +#image_descriptor_form .selection_list { padding: 10px; }
On Wed, 2010-06-23 at 16:46 +0200, jprovazn@redhat.com wrote:
From: Jan Provaznik jprovazn@redhat.com
src/app/views/templates/_selected_packages.haml | 3 +- src/app/views/templates/software.haml | 19 ++++++++++++++++++ src/public/stylesheets/components.css | 24 ++++++++++++++++++++++- 3 files changed, 44 insertions(+), 2 deletions(-)
ACK, this behaves as expected. Nice next step might be to add this behavior in the groups tab on the left panel.
-j
From: Jan Provaznik jprovazn@redhat.com
--- src/app/views/templates/_groups.haml | 6 +++--- src/app/views/templates/software.haml | 10 ++++++---- 2 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/src/app/views/templates/_groups.haml b/src/app/views/templates/_groups.haml index 21fce86..5a4ae07 100644 --- a/src/app/views/templates/_groups.haml +++ b/src/app/views/templates/_groups.haml @@ -1,8 +1,8 @@ %ul{:class => 'groups_to_select selection_list'} - @groups.keys.sort.each do |group| - %li - - pkgs = @groups[group][:packages].keys.join("','") - = group + %li{:class => 'group'} + %span{:class => "groupname"} + = group %a{:class => 'select_group action_link', :href => url_for(:action => 'select_group', :id => params[:id], :group => group)} Select %ul{:class => 'groupkgs'} diff --git a/src/app/views/templates/software.haml b/src/app/views/templates/software.haml index 998ce9b..02e3220 100644 --- a/src/app/views/templates/software.haml +++ b/src/app/views/templates/software.haml @@ -16,6 +16,7 @@ $("#selected_packages").load($(ev.target).attr('href'), loadCallback); return false; }); + createTree('.groups_to_select'); } }); // when JS is enabled, hide the Dashboard content -- it'll be loaded @@ -28,10 +29,11 @@ $("#selected_packages").load($(ev.target).attr('href'), loadCallback); return false; }); - createTree(); + createTree('#selected_packages'); }; - function createTree() { - $("li.group").each(function() { + function createTree(tree_selector) { + var tree = $(tree_selector); + $("li.group", tree).each(function() { var group = $(this); group.addClass("closed_folder"); $(".groupname", group).toggle( @@ -46,7 +48,7 @@ } ); }) - $("li.group > ul > li").addClass("hidden"); + $("li.group > ul > li", tree).addClass("hidden"); }; function get_repository(ev) { var rep = $(ev.target).val();
deltacloud-devel@lists.fedorahosted.org
-
Jan Provazník -
Jason Guiditta