[PATCH conductor] deployable detail styles and fixes through biuldpush ui
Tomas Sedovic
tsedovic at redhat.com
Tue Dec 6 12:13:22 UTC 2011
On 12/06/2011 12:14 PM, jtomasek at redhat.com wrote:
> 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}
ACK
More information about the aeolus-devel
mailing list