From: Kenneth Keiter kkeiter@redhat.com
--- src/app/stylesheets/layout.scss | 66 +++++++++++++++++---- src/app/views/layouts/_pretty_filter_toggle.haml | 7 ++- src/app/views/pools/_header_index.haml | 8 +++ src/app/views/pools/index.haml | 9 +--- src/features/deployment.feature | 4 +- src/features/instance.feature | 2 +- src/features/pool.feature | 20 +++--- src/features/step_definitions/web_steps.rb | 4 + src/public/images/button-viewtoggle.png | Bin 0 -> 3555 bytes src/public/javascripts/application.js | 6 ++ 10 files changed, 90 insertions(+), 36 deletions(-) create mode 100644 src/public/images/button-viewtoggle.png
diff --git a/src/app/stylesheets/layout.scss b/src/app/stylesheets/layout.scss index 285f714..44d37dc 100644 --- a/src/app/stylesheets/layout.scss +++ b/src/app/stylesheets/layout.scss @@ -1,6 +1,6 @@ /* ########################################################################### Generated SCSS for Aeolus UI [aeolus_ui] -Compiled on 2011-06-16 16:13:58 -0700 +Compiled on 2011-06-16 17:12:35 -0700 ########################################################################### */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -701,7 +701,7 @@ http://github.com/necolas/css3-github-buttons ------------------------------------------ */
-/* ------------------------------------------------------------------------------------------------------------- BUTTON */ +/* ----------------------------------------------------------------- BUTTON */
.button { position: relative; @@ -767,7 +767,7 @@ http://github.com/necolas/css3-github-buttons border: 0; }
-/* ............................................................................................................. Icons */ +/* ------------------------------------------------------------------ Icons */
.button.icon:before { content: ""; @@ -936,15 +936,15 @@ http://github.com/necolas/css3-github-buttons .button.user.icon:active:before { background-position: -12px -360px; }
-/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */ +/* ------------------------------------------------------ BUTTON EXTENSIONS */
-/* ............................................................................................................. Primary */ +/* ---------------------------------------------------------------- Primary */
.button.primary { font-weight: bold; }
-/* ............................................................................................................. Danger */ +/* ----------------------------------------------------------------- Danger */
.button.danger { color: #900; @@ -974,7 +974,7 @@ http://github.com/necolas/css3-github-buttons background-image: linear-gradient(#b33630, #dc5f59); }
-/* ............................................................................................................. Pill */ +/* ------------------------------------------------------------------- Pill */
.button.pill { -webkit-border-radius: 50em; @@ -982,13 +982,13 @@ http://github.com/necolas/css3-github-buttons border-radius: 50em; }
-/* ............................................................................................................. Disable */ +/* ---------------------------------------------------------------- Disable */
.button.disable { opacity: 0.5; }
-/* ............................................................................................................. Big */ +/* -------------------------------------------------------------------- Big */
.button.big { font-size: 14px; @@ -997,9 +997,9 @@ http://github.com/necolas/css3-github-buttons .button.big.icon:before { top: 0; }
-/* ------------------------------------------------------------------------------------------------------------- BUTTON GROUPS */ +/* ---------------------------------------------------------- BUTTON GROUPS */
-/* ............................................................................................................. Standard */ +/* --------------------------------------------------------------- Standard */
.button-group { display: inline-block; @@ -1057,7 +1057,7 @@ http://github.com/necolas/css3-github-buttons border-bottom-left-radius: 0; }
-/* ............................................................................................................. Minor */ +/* ------------------------------------------------------------------ Minor */
.button-group.minor-group .button { border: 1px solid #d4d4d4; @@ -1081,13 +1081,53 @@ http://github.com/necolas/css3-github-buttons opacity: 0.8; }
-/* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */ +/* ------------------------------------------------------- BUTTON CONTAINER */ /* For mixing buttons and button groups, e.g., in a navigation bar */
.button-container .button, .button-container .button-group { vertical-align: top; } +/* --------------------------------------------------------- CUSTOM BUTTONS */ + +span.view-toggle{ + display: inline-block; +} + +a.view-toggle{ + background: url('../../images/button-viewtoggle.png') no-repeat top left; + display: block; + float:left; + width: 38px; + height: 27px; +} + +a.view-toggle span{ + position: absolute; + top: -999em; +} + +a.view-toggle.pretty{ + &:active{ + background-position: -75px 0px; + } +} + +a.view-toggle.filter{ + width: 36px; + background-position: -39px 0px; + &:active{ + background-position: -114px 0px; + } +} + +a.view-toggle.pretty.active{ + background-position: -75px 0px; +} + +a.view-toggle.filter.active{ + background-position: -114px 0px; +}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Application Input Controls -- v.0.0.1 [input] (input.scss) diff --git a/src/app/views/layouts/_pretty_filter_toggle.haml b/src/app/views/layouts/_pretty_filter_toggle.haml index c985915..3ccb45b 100644 --- a/src/app/views/layouts/_pretty_filter_toggle.haml +++ b/src/app/views/layouts/_pretty_filter_toggle.haml @@ -1,2 +1,5 @@ -= link_to "Pretty View", pretty_link, :id => 'pretty_view', :class => (filter_view? ? '' : 'active') -= link_to "Filter View", filter_link, :id => 'filter_view', :class => (filter_view? ? 'active' : '') \ No newline at end of file +%span.view-toggle + %a.view-toggle.pretty#pretty_view{:href => pretty_link, :class => (filter_view? ? '' : 'active')} + %span Graphic View + %a.view-toggle.filter#filter_view{:href => filter_link, :class => (filter_view? ? 'active' : '')} + %span Filter View diff --git a/src/app/views/pools/_header_index.haml b/src/app/views/pools/_header_index.haml index e69de29..fe2895d 100644 --- a/src/app/views/pools/_header_index.haml +++ b/src/app/views/pools/_header_index.haml @@ -0,0 +1,8 @@ +%header.page-header + %h1.section-index Overview + #obj_actions.button-container + = pretty_filter_toggle(pools_path(:view => 'pretty'), pools_path(:view => 'filter')) + = link_to "New Pool", new_pool_path, { :class => 'button primary' } + .corner + += render :partial => 'scoreboard_index' \ No newline at end of file diff --git a/src/app/views/pools/index.haml b/src/app/views/pools/index.haml index 1eb7fc5..e54f4da 100644 --- a/src/app/views/pools/index.haml +++ b/src/app/views/pools/index.haml @@ -1,11 +1,4 @@ -%header.page-header - %h1.section-index Overview - #obj_actions.button-container - = pretty_filter_toggle(pools_path(:view => 'pretty'), pools_path(:view => 'filter')) - = link_to "New Pool", new_pool_path, { :class => 'button primary' } - .corner - -= render :partial => 'scoreboard_index' += render :partial => 'header_index' = render :partial => 'alerts_index' %section.content-section.toggle-view.pools = render :partial => @view diff --git a/src/features/deployment.feature b/src/features/deployment.feature index de5b4cf..b8a07dd 100644 --- a/src/features/deployment.feature +++ b/src/features/deployment.feature @@ -10,7 +10,7 @@ Feature: Manage Deployments Scenario: List deployments Given there is a deployment named "MySQL Cluster" belonging to "Databases" owned by "bob" And I am on the pools page - When I follow "Filter View" + When I follow link with ID "filter_view" And I follow "Deployments" within "#details-view" Then I should see "MySQL Cluster" And I should see "bob" @@ -19,7 +19,7 @@ Feature: Manage Deployments Given there is a deployment named "MySQL Cluster" belonging to "Databases" owned by "bob" And I am on the pools page And I request XHR - When I follow "Filter View" + When I follow link with ID "filter_view" And I follow "Deployments" Then I should see "MySQL Cluster" And I should see "bob" diff --git a/src/features/instance.feature b/src/features/instance.feature index c110c8d..ce9e9ea 100644 --- a/src/features/instance.feature +++ b/src/features/instance.feature @@ -38,7 +38,7 @@ Feature: Manage Instances And I am on the home page When I follow "Monitor" Then I should be on the pools page - When I follow "Filter View" + When I follow link with ID "filter_view" And I follow "Instances" Then I should be on the pools page And I should see "mock1" diff --git a/src/features/pool.feature b/src/features/pool.feature index 189bd6a..a314fab 100644 --- a/src/features/pool.feature +++ b/src/features/pool.feature @@ -55,7 +55,7 @@ Feature: Manage Pools And a pool "Amazon Startrek Pool" exists And a pool "Redhat Voyager Pool" exists When I go to the pools page - And I follow "Filter View" + And I follow link with ID "filter_view" Then there should be 3 pools When I check "Redhat Voyager Pool" pool And I check "Amazon Startrek Pool" pool @@ -70,7 +70,7 @@ Feature: Manage Pools Given I am on the pools page And there is not a pool named "mockpool" And there is not a pool named "foopool" - When I follow "Filter View" + When I follow link with ID "filter_view" And I follow "New Pool" Then I should be on the new pool page And I should see "Create New Pool" @@ -82,7 +82,7 @@ Feature: Manage Pools And I should see "mockpool" And I should have a pool named "mockpool" When I go to the pools page - And I follow "Filter View" + And I follow link with ID "filter_view" And I follow "New Pool" Then I should be on the new pool page And I should see "Create New Pool" @@ -96,7 +96,7 @@ Feature: Manage Pools
Scenario: Cannot delete default_pool Given I am on the pools page - When I follow "Filter View" + When I follow link with ID "filter_view" And I check "default_pool" pool And I press "Destroy" Then I should see "The default pool cannot be deleted" @@ -105,7 +105,7 @@ Feature: Manage Pools Scenario: Cannot delete default_pool by renaming it Given I renamed default_pool to pool_default And I am on the pools page - When I follow "Filter View" + When I follow link with ID "filter_view" And I check "pool_default" pool And I press "Destroy" Then I should see "The default pool cannot be deleted" @@ -158,16 +158,16 @@ Feature: Manage Pools Scenario: Switch pretty view to filtred view on pools index Given I am on the pools page And I see "Overview" - When I follow "Filter View" + And I follow link with ID "filter_view" Then I should see "Pools" within "#details-view" And I should see "Instances" within "#details-view" And I should see "Deployments" within "#details-view"
Scenario: Switch from filtred view to pretty view on pools index Given I am on the pools page - And I follow "Filter View" + And I follow link with ID "filter_view" And I should see "Pools" within "#details-view" - When I follow "Pretty View" + When I follow link with ID "pretty_view" Then I should see "Your Pools" within "section.pools"
Scenario: Display alerts @@ -179,11 +179,11 @@ Feature: Manage Pools Scenario: Pools#show pretty view Given a pool "mockpool" exists with deployment "mockdeployment" When I am viewing the pool "mockpool" - And I follow "Pretty View" + And I follow link with ID "pretty_view" Then I should see "0 Instances" within "#content .content-section.toggle-view"
Scenario: Pools#show filter view Given a pool "mockpool" exists with deployment "mockdeployment" When I am viewing the pool "mockpool" - And I follow "Filter View" + And I follow link with ID "filter_view" Then I should not see "0 Instances" within "#content .content-section.toggle-view" diff --git a/src/features/step_definitions/web_steps.rb b/src/features/step_definitions/web_steps.rb index e6d6808..3671f23 100644 --- a/src/features/step_definitions/web_steps.rb +++ b/src/features/step_definitions/web_steps.rb @@ -34,6 +34,10 @@ When /^(?:|I )follow "([^"]*)"$/ do |link| click_link(link) end
+When /^(?:|I )follow link with ID "([^"]*)"$/ do |link_id| + find("//a[@id='#{link_id}']").click +end + When /^(?:|I )follow "([^"]*)" within "([^"]*)"$/ do |link, parent| click_link_within(parent, link) end diff --git a/src/public/images/button-viewtoggle.png b/src/public/images/button-viewtoggle.png new file mode 100644 index 0000000000000000000000000000000000000000..d96bb9ed110e331d4d3e015a9d1617c0e4602714 GIT binary patch literal 3555 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 M8z<{#E5BR+17H%?dH?_b
literal 0 HcmV?d00001
diff --git a/src/public/javascripts/application.js b/src/public/javascripts/application.js index b4dfd6e..5c9458f 100644 --- a/src/public/javascripts/application.js +++ b/src/public/javascripts/application.js @@ -94,15 +94,21 @@ var Conductor = {
bind_pretty_toggle: function() { Conductor.nicelyHookAjaxClick($("#pretty_view"), function() { + var link_element = this; $.get($(this).attr("href"), $(this).serialize(), function(result) { $('#content .toggle-view').html(result); + $(link_element).addClass('active'); + $("#filter_view").removeClass('active'); }); }); Conductor.nicelyHookAjaxClick($("#filter_view"), function() { + var link_element = this; $.get($(this).attr("href"), $(this).serialize(), function(result) { $('#content .toggle-view').html(result); $('#details-selected').hide(); $('#details-view').tabs(); + $(link_element).addClass('active'); + $("#pretty_view").removeClass('active'); }); }); },