[PATCH conductor] deployable detail styles and fixes through biuldpush ui
jtomasek at redhat.com
jtomasek at redhat.com
Tue Dec 6 11:14:48 UTC 2011
From: Jiri Tomasek <jtomasek at redhat.com>
---
src/app/stylesheets/custom.scss | 1 -
src/app/stylesheets/layout.scss | 110 +++++++++-------
src/app/views/deployables/_form.html.haml | 18 ++--
src/app/views/deployables/_new.html.haml | 8 +-
.../views/deployables/_new_from_image.html.haml | 2 +-
src/app/views/deployables/show.html.haml | 138 +++++++++++---------
.../deployments/launch_from_catalog.html.haml | 9 +-
src/app/views/images/edit_xml.html.haml | 4 +-
src/app/views/images/new.html.haml | 2 +-
src/app/views/images/overview.html.haml | 2 +-
src/app/views/images/show.html.haml | 14 +-
.../_provider_selection.html.haml | 4 +-
12 files changed, 172 insertions(+), 140 deletions(-)
diff --git a/src/app/stylesheets/custom.scss b/src/app/stylesheets/custom.scss
index 4f72278..2943ce4 100644
--- a/src/app/stylesheets/custom.scss
+++ b/src/app/stylesheets/custom.scss
@@ -17,7 +17,6 @@
}
/*fixes the button_to helper used in button-group problem*/
-.button-group .button_to div{display: inline;}
.button-group .button_to div .button.pill{
-webkit-border-radius: 0em 50em;
-moz-border-radius: 0em 50em 50em 0em;
diff --git a/src/app/stylesheets/layout.scss b/src/app/stylesheets/layout.scss
index c1f3886..f999fa9 100644
--- a/src/app/stylesheets/layout.scss
+++ b/src/app/stylesheets/layout.scss
@@ -183,6 +183,7 @@ svg {
form{
display: inline;
}
+form.button_to > div {display: inline;}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
@@ -1637,54 +1638,42 @@ section.admin-content-section{
p.description{ margin-bottom: 20px }
-}
-
-header.admin-page-header + section.admin-content-section{margin-top: 26px;}
-section.admin-content-section + section.admin-content-section {margin-top: 26px;}
-section.admin-content-section{ margin-bottom: 10px; }
-
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-Build Push
+Centered div
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-section.admin-content-section{
- .content.buildpush{
- fieldset{margin-top: 20px;}
-
- textarea.edit_xml{
- box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
- width: 100%;
- padding: 5px 3px;
- height: 300px;
- border: 1px solid #C4C4C4;
- resize: vertical;
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.50);
- -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.50);
- -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.50);
- }
-
- div.centered{
- width: 600px; margin: 10px auto;
- }
+ div.centered{
+ width: 600px; margin: 10px auto;
+ }
- div.lefted{
- padding-right: 380px;
- margin: 0px 50px;
- min-height: 160px;
- h2{
- font-family: $font-family-primary;
- font-size: 21px;
- font-weight: 200;
- margin-bottom: 4px;
- padding-right: 40px;
- text-align: center;
- }
- p{ text-align: center; margin: 10px 0px 10px 0px; }
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+Left aligned div
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+ div.lefted{
+ padding-right: 380px;
+ margin: 0px 50px;
+ min-height: 160px;
+ h2{
+ font-family: $font-family-primary;
+ font-size: 21px;
+ font-weight: 200;
+ margin-bottom: 4px;
+ padding-right: 40px;
+ text-align: center;
}
- div.lefted.image-upload-overview{background: url(../../images/template-valid.png) no-repeat 600px top;}
- div.lefted.new-catalog-entry-from-image{background: url(../../images/template-valid.png) no-repeat 600px top;}
+ p{ text-align: center; margin: 10px 0px 10px 0px; }
}
+
}
+header.admin-page-header + section.admin-content-section{margin-top: 10px;}
+section.admin-content-section + section.admin-content-section {margin-top: 10px;}
+section.admin-content-section{ margin-bottom: 10px; }
+
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+Build Push
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+div.lefted.image-upload-overview{background: url(../../images/template-valid.png) no-repeat 600px top;}
+div.lefted.new-catalog-entry-from-image{background: url(../../images/template-valid.png) no-repeat 600px top;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
User Card
@@ -2396,6 +2385,18 @@ ul.instances-array{
}
/************************************************************************** */
+/********************************************* Deployable Detail page */
+/************************************************************************** */
+
+table.light_table{
+ margin: 10px;
+ td,th{ padding: 10px; }
+ th{border-bottom: 1px solid #CCCCCC;}
+ td:first-child, th:first-child{padding-left: 0px;}
+ td:last-child, th:last-child{padding-right: 0px;}
+}
+
+/************************************************************************** */
/********************************************* Launch from catalog elements */
/************************************************************************** */
@@ -2504,14 +2505,14 @@ ul.catalog_pretty {
background: -ms-linear-gradient(top, #efefef 0%,#e0e0e0 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #efefef 0%,#e0e0e0 100%); /* W3C */
+ display: table;
+ width: 100%;
+ box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
div.controls{
- width: 200px;
- float: right;
text-align: right;
display: table-cell;
vertical-align: middle;
- div{ display: inline; }
a{ margin-right: 10px; text-decoration: none; }
a:after{ content: " ▼"; }
a:hover{ color: black; }
@@ -2519,13 +2520,14 @@ ul.catalog_pretty {
div.info{
padding-left: 32px;
- background: transparent url('../../images/deployment_large_icon_provider.png') no-repeat left top;
+ background: transparent url('../../images/deployment_large_icon_provider.png') no-repeat left center;
h2{ font-size: 16px; }
+ display: table-cell;
+ vertical-align: middle;
}
}
div.details.collapsible{
- display: none;
background: #eee;
border-top: 1px solid #ccc;
table{
@@ -2535,6 +2537,7 @@ ul.catalog_pretty {
td:last-child, th:last-child{padding-right: 0px;}
th{border-bottom: 1px solid #CCCCCC;}
}
+ &.collapsed{display: none;}
}
}
}
@@ -2970,7 +2973,6 @@ body.monitor form.generic{
input.short{
width: 100px;
}
-
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -3067,7 +3069,19 @@ body.administer form.generic{
span.text_instead_input{
display: inline-block;
- padding: 6px;
+ padding: 6px 0px;
+ }
+
+ textarea.edit_xml{
+ box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
+ width: 100%;
+ padding: 5px 3px;
+ height: 300px;
+ border: 1px solid #C4C4C4;
+ resize: vertical;
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.50);
+ -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.50);
+ -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.50);
}
}
diff --git a/src/app/views/deployables/_form.html.haml b/src/app/views/deployables/_form.html.haml
index fa6ec32..1c50786 100644
--- a/src/app/views/deployables/_form.html.haml
+++ b/src/app/views/deployables/_form.html.haml
@@ -1,15 +1,15 @@
- if @deployable.errors.any?
= render 'layouts/error_messages', :object => @deployable
-%fieldset
- = form_for @deployable do |form|
+= form_for @deployable do |form|
+ %fieldset
- if params[:edit_xml]
%p
- = form.label :xml, t('.deployable_xml')
- = form.text_area :xml, :class => 'long'
+ %h2= t('.deployable_xml')
+ = form.text_area :xml, :class => 'edit_xml'
- else
%p
= label_tag :catalog_id, t('catalog_entries.form.catalog')
- = @catalog.name
+ %span.text_instead_input= @catalog.name
.clear
%p
= form.label :name, t('catalog_entries.index.name')
@@ -19,8 +19,8 @@
= form.text_area :description, :class => 'long'
%p
= form.label :xml, t('.deployable_xml')
- = link_to t("catalog_entries.properties.edit_deployable_xml"), edit_catalog_deployable_path(@catalog.id, @deployable.id, :edit_xml=>true)
+ %span.text_instead_input= link_to t("catalog_entries.properties.edit_deployable_xml"), edit_catalog_deployable_path(@catalog.id, @deployable.id, :edit_xml=>true)
-%fieldset.options
- = link_to t('cancel'), catalog_path(@catalog), :class => 'button danger'
- = submit_tag t('save'), :name => 'save', :class => 'button', :id => 'save_button'
+ %fieldset.align-center
+ = link_to t('cancel'), catalog_path(@catalog), :class => 'button danger'
+ = submit_tag t('save'), :name => 'save', :class => 'button', :id => 'save_button'
diff --git a/src/app/views/deployables/_new.html.haml b/src/app/views/deployables/_new.html.haml
index a1d1589..2b431a5 100644
--- a/src/app/views/deployables/_new.html.haml
+++ b/src/app/views/deployables/_new.html.haml
@@ -10,9 +10,9 @@
%nav#image-upload-tabs.faceted
%ul.tabs
%li
- = link_to t('catalog_entries.new.upload'), new_catalog_deployable_path(@catalog), :id => "upload", :class => "#{'selected' if @form_option == 'upload'}"
+ = link_to t('catalog_entries.new.upload'), new_catalog_deployable_path(@catalog), :id => "upload", :class => "#{'active' if @form_option == 'upload'}"
%li
- = link_to t('catalog_entries.new.from_url'), new_catalog_deployable_path(@catalog, :from_url => true), :id => "from_url", :class => "#{'selected' if @form_option == 'from_url'}"
+ = link_to t('catalog_entries.new.from_url'), new_catalog_deployable_path(@catalog, :from_url => true), :id => "from_url", :class => "#{'active' if @form_option == 'from_url'}"
.form_option
= render :partial => @form_option
@@ -48,8 +48,8 @@
});
function change_selected($add_selected, $remove_selected){
- $remove_selected.removeClass('selected');
- $add_selected.addClass('selected');
+ $remove_selected.removeClass('active');
+ $add_selected.addClass('active');
}
function read_name_field() {
diff --git a/src/app/views/deployables/_new_from_image.html.haml b/src/app/views/deployables/_new_from_image.html.haml
index 2e1b285..b8030be 100644
--- a/src/app/views/deployables/_new_from_image.html.haml
+++ b/src/app/views/deployables/_new_from_image.html.haml
@@ -2,7 +2,7 @@
%h1.deployables= t('.catalog_entry_name', :name => @deployable.name)
%section.admin-content-section
- .content.buildpush
+ .content
= form_for @deployable, :html => {:class => 'generic'} do |form|
= hidden_field_tag :create_from_image, params[:create_from_image]
- if @deployable.errors.any?
diff --git a/src/app/views/deployables/show.html.haml b/src/app/views/deployables/show.html.haml
index 6a8576a..f2b1c14 100644
--- a/src/app/views/deployables/show.html.haml
+++ b/src/app/views/deployables/show.html.haml
@@ -8,86 +8,106 @@
= link_to t('deployments.overview.launch'), launch_new_deployments_path(:deployable_id => @deployable.id, :pool_id => @catalog.pool), :id => :launch_deployment
-%section.admin-content-section.deployable
- %section.image
- %header
- %h2= t('.image')
- %table
+%section.admin-content-section
+ %header
+ %h2.users= t('.images')
+ .content
+ .centered
+ %table.light_table
%thead
%tr
- %th=t'.name'
+ %th
+ %th
+ %strong=t'.name'
%th=t'.hwp_profile'
- %th=t'.hdd'
- %th=t'.ram'
- %th=t'.arch'
+ %th.align-center=t'.hdd'
+ %th.align-center=t'.ram'
+ %th.align-center=t'.arch'
%tbody
- - @image_details.each do |assembly|
- %tr
- - if assembly.has_key?(:name)
- %td=assembly[:name]
- -else
- %td=assembly[:error_name]
- -if assembly.has_key?(:hwp)
- %td=assembly[:hwp][:name]
- %td=assembly[:hwp][:hdd]
- %td=assembly[:hwp][:ram]
- %td=assembly[:hwp][:arch]
- -else
- %td Not exist in DB
+ - @image_details.each do |assembly|
+ %tr
+ %td image ready
+ - if assembly.has_key?(:name)
+ %td
+ %strong=assembly[:name]
+ -else
+ %td=assembly[:error_name]
+ -if assembly.has_key?(:hwp)
+ %td=assembly[:hwp][:name]
+ %td.align-center=assembly[:hwp][:hdd]
+ %td.align-center=assembly[:hwp][:ram]
+ %td.align-center=assembly[:hwp][:arch]
+ -else
+ %td Not exist in DB
- %section.build
+%section.admin-content-section
+ - if @missing_images.empty?
%header
%h2= t('.build')
-
- - if @missing_images.empty?
+ .section-controls
= form_tag(catalog_deployable_build_path(@catalog, @deployable)) do
= select_tag :build_options, options_for_select([[t(".build_missing"), :build_missing], [t(".push_missing"), :push_missing]])
- = submit_tag t('.start'), :id => :start_build
+ = submit_tag t('.start'), :id => :start_build, :class => 'button pill'
+ .content
+ %p.description.align-center= t('.build_description')
- %p.description= t('.build_description')
-
- %ul#providers-list
- - @build_results.each do |provider_type, results|
- %li
- = provider_type
- %ul
+ %ul#providers-list.catalog_pretty
+ - @build_results.each do |provider_type, results|
+ %li.collapse_entity
+ .summary
+ .info
+ %h2= provider_type
+ .controls
+ = link_to t(".details"),"#", :class => "collapse"
+ .details.collapsible
+ %table
+ %tr
+ %th=t'.provider'
+ %th=t'.account'
+ %th.align-center=t'.status'
- results.each do |result|
- %li
- %span.provider= result[:provider]
- %span.account= result[:account]
- %span.status= result[:status]
- - else
- %h3= t('.missing_images')
- %ul#missing-images-list
- - @missing_images.each do |uuid|
- %li= uuid
-
-
- %section.catalogs
+ %tr
+ %td= result[:provider]
+ %td= result[:account]
+ %td.align-center= result[:status]
+ - else
%header
- %h2= t('.catalogs')
+ %h2= t('.build')
+ .content
+ %h3= t('.missing_images')
+ %ul#missing-images-list
+ - @missing_images.each do |uuid|
+ %li= uuid
- %p= t('.choose_catalog')
+%section.admin-content-section
+ %header
+ %h2= t('.catalogs')
+ .section-controls
= form_for(:catalog_entry, :url => catalog_entries_path) do |f|
+ = f.label :catalog_id, t('catalog_entries.show.choose_catalog')
= f.select :catalog_id, options_for_select(@catalogs_options)
= f.hidden_field(:deployable_id, :value => @deployable.id)
- = f.submit t('catalog_entries.show.add_catalog'), :id => :add_catalog
-
- %table
+ = f.submit t('catalog_entries.show.add_catalog'), :id => :add_catalog, :class => 'button pill'
+ .content
+ .centered
+ %table.light_table
%tr
%th
- %label= t('.catalog_name')
%th
- %label= t('.environment')
+ %label
+ %strong= t('.catalog_name')
+ %th
+ %label
+ %strong= t('.environment')
- @deployable.catalog_entries.each do |catalog_entry|
%tr
- %td
- = button_to t('catalog_entries.show.delete'), catalog_entry_path(catalog_entry), :method => 'delete', :confirm => "#{t'catalog_entries.show.confirm_delete'}", :id => 'delete'
- = catalog_entry.catalog.name
+ %td= button_to t('catalog_entries.show.delete'), catalog_entry_path(@catalog_entry), :method => 'delete', :confirm => "#{t'catalog_entries.show.confirm_delete'}", :id => 'delete'
+ %td= catalog_entry.catalog.name
%td= catalog_entry.catalog.pool.pool_family.name
- - if check_privilege(Privilege::PERM_VIEW, at permission_object)
- %section.roles
- %header
- %h2= t('users.users')
+- if check_privilege(Privilege::PERM_VIEW, at permission_object)
+ %section.admin-content-section
+ %header
+ %h2.roles= t('users.users')
+ .content
= render :partial => 'permissions/permissions'
diff --git a/src/app/views/deployments/launch_from_catalog.html.haml b/src/app/views/deployments/launch_from_catalog.html.haml
index ca262e8..0c70fcf 100644
--- a/src/app/views/deployments/launch_from_catalog.html.haml
+++ b/src/app/views/deployments/launch_from_catalog.html.haml
@@ -11,14 +11,13 @@
- @deployables.each do |deployable|
%li.collapse_entity
.summary
- .controls
- = link_to t(".details"),"#", :class => "collapse"
- = button_to t(".select"), launch_time_params_deployments_path(:deployment => { :name => deployable.name, :pool_id => @catalog.pool.id }, :deployable_id => deployable.id ), :class=> "button pill"
.info
%h2= deployable.name
%p= deployable.description
- .clear
- .details.collapsible
+ .controls
+ = link_to t(".details"),"#", :class => "collapse"
+ = button_to t(".select"), launch_time_params_deployments_path(:deployment => { :name => deployable.name, :pool_id => @catalog.pool.id }, :deployable_id => deployable.id ), :class=> "button pill"
+ .details.collapsible.collapsed
%table
%tr
%th
diff --git a/src/app/views/images/edit_xml.html.haml b/src/app/views/images/edit_xml.html.haml
index 0f4ee68..da13b83 100644
--- a/src/app/views/images/edit_xml.html.haml
+++ b/src/app/views/images/edit_xml.html.haml
@@ -9,8 +9,8 @@
%header
%h2= t('.edit')
- .content.tight.buildpush
- = form_tag(overview_images_path, {:method => :post}) do
+ .content.tight
+ = form_tag(overview_images_path, {:method => :post, :class => 'generic'}) do
= hidden_field_tag :environment, @environment.id
= hidden_field_tag :name, @name
= text_area_tag :image_xml, @xml, :class => 'edit_xml'
diff --git a/src/app/views/images/new.html.haml b/src/app/views/images/new.html.haml
index e9ec326..838bb63 100644
--- a/src/app/views/images/new.html.haml
+++ b/src/app/views/images/new.html.haml
@@ -6,7 +6,7 @@
= link_to t('images.environment', :environment => @environment.name), pool_family_path(@environment), :class => 'rounded-link'
%section.admin-content-section
- .content.buildpush
+ .content
.centered
%p.description.align-center
%strong= t('.description', :environment => @environment.name)
diff --git a/src/app/views/images/overview.html.haml b/src/app/views/images/overview.html.haml
index 4e70112..0167513 100644
--- a/src/app/views/images/overview.html.haml
+++ b/src/app/views/images/overview.html.haml
@@ -6,7 +6,7 @@
= link_to t('images.environment', :environment => @environment.name), pool_family_path(@environment), :class => 'rounded-link'
%section.admin-content-section
- .content.buildpush
+ .content
= form_tag(images_path, {:method => :post}) do
= hidden_field_tag :environment, @environment.id
= hidden_field_tag :name, @name
diff --git a/src/app/views/images/show.html.haml b/src/app/views/images/show.html.haml
index c712b1b..707cce3 100644
--- a/src/app/views/images/show.html.haml
+++ b/src/app/views/images/show.html.haml
@@ -10,13 +10,13 @@
%section.admin-content-section
%header
- %h2
- = t('.provider_images')
- = t'.view_build'
- = form_tag image_path(@image.id), :method => :get do
- = select_tag :build, options_for_build_select(@builds, @build, @latest_build)
- = submit_tag t('.select_build'), :id => 'seletect_build_button'
- = button_to t('.rebuild_all'), rebuild_all_image_path(@image.id)
+ %h2= t('.provider_images')
+ .section-controls
+ = t'.view_build'
+ = form_tag image_path(@image.id), :method => :get do
+ = select_tag :build, options_for_build_select(@builds, @build, @latest_build)
+ = submit_tag t('.select_build'), :id => 'seletect_build_button'
+ = button_to t('.rebuild_all'), rebuild_all_image_path(@image.id)
.content
%dl.image_builds
- @account_groups.each do |driver, group|
diff --git a/src/app/views/provider_accounts/_provider_selection.html.haml b/src/app/views/provider_accounts/_provider_selection.html.haml
index 36236cb..268512f 100644
--- a/src/app/views/provider_accounts/_provider_selection.html.haml
+++ b/src/app/views/provider_accounts/_provider_selection.html.haml
@@ -1,11 +1,11 @@
%fieldset#provider_type
%p
= label_tag :provider_name, t(".provider_name")
- = @provider.name
+ %span.text_instead_input= @provider.name
.clear
%p
= label_tag t('.cloud_type')
- = @provider.provider_type.name
+ %span.text_instead_input= @provider.provider_type.name
.clear
- unless @provider.provider_type.deltacloud_driver.nil?
= render :partial => "provider_form", :locals => { :provider_type => @provider.provider_type}
--
1.7.7.3
More information about the aeolus-devel
mailing list