From 02ab094efd539f8f7ec0e879e2e300a41eeae475 Mon Sep 17 00:00:00 2001 From: ronen barzel Date: Sat, 19 May 2012 12:08:00 +0100 Subject: [PATCH] Add class 'active_admin' to body, and contain all css rules under body.active_admin so that active_admin css styles don't spill into rest of app --- .../stylesheets/active_admin/_base.css.scss | 60 ++++++++++--------- .../active_admin/_typography.css.scss | 2 +- .../components/_flash_messages.css.scss | 6 +- .../active_admin/mixins/_icons.css.scss | 10 +++- .../active_admin/pages/_logged_out.scss | 4 +- .../stylesheets/active_admin/print.css.scss | 12 +++- lib/active_admin/views/pages/base.rb | 1 + .../templates/3.1/active_admin.css.scss | 12 +++- spec/unit/views/pages/layout_spec.rb | 40 +++++++++++++ 9 files changed, 105 insertions(+), 42 deletions(-) diff --git a/app/assets/stylesheets/active_admin/_base.css.scss b/app/assets/stylesheets/active_admin/_base.css.scss index b54b06453bb..fce38245f7a 100644 --- a/app/assets/stylesheets/active_admin/_base.css.scss +++ b/app/assets/stylesheets/active_admin/_base.css.scss @@ -1,36 +1,40 @@ /* Active Admin CSS */ // Reset Away! -@include global-reset; +body.active_admin { + @include global-reset; +} // Partials -@import "active_admin/typography"; -@import "active_admin/header"; -@import "active_admin/forms"; -@import "active_admin/components/comments"; -@import "active_admin/components/flash_messages"; -@import "active_admin/components/date_picker"; -@import "active_admin/components/popovers"; -@import "active_admin/components/tables"; -@import "active_admin/components/batch_actions"; -@import "active_admin/components/blank_slates"; -@import "active_admin/components/breadcrumbs"; -@import "active_admin/components/dropdown_menu"; -@import "active_admin/components/buttons"; -@import "active_admin/components/grid"; -@import "active_admin/components/links"; -@import "active_admin/components/pagination"; -@import "active_admin/components/panels"; -@import "active_admin/components/columns"; -@import "active_admin/components/scopes"; -@import "active_admin/components/status_tags"; -@import "active_admin/components/table_tools"; -@import "active_admin/pages/dashboard"; -@import "active_admin/pages/logged_out"; -@import "active_admin/structure/footer"; -@import "active_admin/structure/main_structure"; -@import "active_admin/structure/title_bar"; +body.active_admin { + @import "active_admin/typography"; + @import "active_admin/header"; + @import "active_admin/forms"; + @import "active_admin/components/comments"; + @import "active_admin/components/flash_messages"; + @import "active_admin/components/date_picker"; + @import "active_admin/components/popovers"; + @import "active_admin/components/tables"; + @import "active_admin/components/batch_actions"; + @import "active_admin/components/blank_slates"; + @import "active_admin/components/breadcrumbs"; + @import "active_admin/components/dropdown_menu"; + @import "active_admin/components/buttons"; + @import "active_admin/components/grid"; + @import "active_admin/components/links"; + @import "active_admin/components/pagination"; + @import "active_admin/components/panels"; + @import "active_admin/components/columns"; + @import "active_admin/components/scopes"; + @import "active_admin/components/status_tags"; + @import "active_admin/components/table_tools"; + @import "active_admin/pages/dashboard"; + @import "active_admin/pages/logged_out"; + @import "active_admin/structure/footer"; + @import "active_admin/structure/main_structure"; + @import "active_admin/structure/title_bar"; +} -body { +body.active_admin { @include sans-family; line-height: 150%; font-size: 72%; diff --git a/app/assets/stylesheets/active_admin/_typography.css.scss b/app/assets/stylesheets/active_admin/_typography.css.scss index f12389f4761..3044b4bc533 100644 --- a/app/assets/stylesheets/active_admin/_typography.css.scss +++ b/app/assets/stylesheets/active_admin/_typography.css.scss @@ -25,7 +25,7 @@ // Default font settings. The font-size percentage is of 16px. (0.75 * 16px = 12px) */ html { font-size:100.01%; } -body { font-size: 75%; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; } +& { font-size: 75%; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; } // Headings h1,h2,h3,h4,h5,h6 { diff --git a/app/assets/stylesheets/active_admin/components/_flash_messages.css.scss b/app/assets/stylesheets/active_admin/components/_flash_messages.css.scss index f2e319981eb..d3c85f2bdbd 100644 --- a/app/assets/stylesheets/active_admin/components/_flash_messages.css.scss +++ b/app/assets/stylesheets/active_admin/components/_flash_messages.css.scss @@ -1,4 +1,4 @@ -body.logged_in { +&.logged_in { .flash { @include gradient(#f7f1d3, #f5edc5); @include text-shadow(#fafafa); @@ -25,7 +25,7 @@ body.logged_in { } } -body.logged_out { +&.logged_out { .flash { @include no-shadow; @include text-shadow(#fff); @@ -36,4 +36,4 @@ body.logged_out { margin-bottom: 10px; padding: 0; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/active_admin/mixins/_icons.css.scss b/app/assets/stylesheets/active_admin/mixins/_icons.css.scss index 58aa5c0defc..69fdf9b7fe1 100644 --- a/app/assets/stylesheets/active_admin/mixins/_icons.css.scss +++ b/app/assets/stylesheets/active_admin/mixins/_icons.css.scss @@ -1,5 +1,7 @@ -span.icon { vertical-align: middle; display: inline-block; } -span.icon svg { vertical-align: baseline; } +body.active_admin { + span.icon { vertical-align: middle; display: inline-block; } + span.icon svg { vertical-align: baseline; } +} @mixin icon-color ($color) { span.icon svg { @@ -17,4 +19,6 @@ span.icon svg { vertical-align: baseline; } @include icon-size($size); } -@include icon-size(0.8em); +body.active_admin { + @include icon-size(0.8em); +} diff --git a/app/assets/stylesheets/active_admin/pages/_logged_out.scss b/app/assets/stylesheets/active_admin/pages/_logged_out.scss index a45c9861084..f9e73efb737 100644 --- a/app/assets/stylesheets/active_admin/pages/_logged_out.scss +++ b/app/assets/stylesheets/active_admin/pages/_logged_out.scss @@ -1,4 +1,4 @@ -body.logged_out { +&.logged_out { background: #e8e9ea; #content_wrapper{ @@ -41,4 +41,4 @@ body.logged_out { a { float: right; margin-top: -32px; } } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/active_admin/print.css.scss b/app/assets/stylesheets/active_admin/print.css.scss index 5b59698d51a..d0825f3b4bc 100644 --- a/app/assets/stylesheets/active_admin/print.css.scss +++ b/app/assets/stylesheets/active_admin/print.css.scss @@ -9,9 +9,11 @@ $text-color: black; @include global-reset; // Partials -@import "active_admin/typography"; +body.active_admin { + @import "active_admin/typography"; +} -body { +body.active_admin { font-family: Helvetica, Arial, sans-serif; line-height: 150%; font-size: 72%; @@ -22,6 +24,8 @@ body { color: $text-color; } +body.active_admin { + a { color: $text-color; text-decoration: none; @@ -281,4 +285,6 @@ form { } } -} \ No newline at end of file +} + +} diff --git a/lib/active_admin/views/pages/base.rb b/lib/active_admin/views/pages/base.rb index 10d0f8b8748..77c85e8a8a3 100644 --- a/lib/active_admin/views/pages/base.rb +++ b/lib/active_admin/views/pages/base.rb @@ -15,6 +15,7 @@ def build(*args) def add_classes_to_body @body.add_class(params[:action]) @body.add_class(params[:controller].gsub('/', '_')) + @body.add_class("active_admin") @body.add_class("logged_in") @body.add_class(active_admin_namespace.name.to_s + "_namespace") end diff --git a/lib/generators/active_admin/assets/templates/3.1/active_admin.css.scss b/lib/generators/active_admin/assets/templates/3.1/active_admin.css.scss index b858060902f..93ba94d87ff 100644 --- a/lib/generators/active_admin/assets/templates/3.1/active_admin.css.scss +++ b/lib/generators/active_admin/assets/templates/3.1/active_admin.css.scss @@ -9,5 +9,13 @@ // Overriding any non-variable SASS must be done after the fact. // For example, to change the default status-tag color: -// .status { & { background: #6090DB;} } - +// +// body.active_admin { +// .status { +// background: #6090DB; +// } +// } +// +// Notice that active_admin SASS rules are nested within a +// 'body.active_admin' selector to prevent them from affecting +// other pages in the app. diff --git a/spec/unit/views/pages/layout_spec.rb b/spec/unit/views/pages/layout_spec.rb index 2c8027b523c..f8188abb22e 100644 --- a/spec/unit/views/pages/layout_spec.rb +++ b/spec/unit/views/pages/layout_spec.rb @@ -19,4 +19,44 @@ end + describe "the body" do + + let(:active_admin_namespace){ ActiveAdmin::Namespace.new(ActiveAdmin::Application.new, :myspace) } + let(:active_admin_application){ ActiveAdmin.application } + let(:view_factory) { ActiveAdmin::ViewFactory.new } + + before(:each) do + @assigns = {} + @helpers = mock('Helpers', + :active_admin_application => active_admin_application, + :active_admin_config => mock('Config', :action_items? => nil, :sidebar_sections? => nil), + :active_admin_namespace => active_admin_namespace, + :breadcrumb_links => [], + :content_for => "", + :csrf_meta_tag => "", + :current_active_admin_user => nil, + :current_active_admin_user? => false, + :current_menu => mock('Menu', :items => []), + :flash => {}, + :javascript_path => "/dummy/", + :link_to => "", + :render_or_call_method_or_proc_on => "", + :stylesheet_link_tag => mock(:html_safe => ""), + :view_factory => view_factory, + :params => {:controller => 'UsersController', :action => 'edit'}) + end + + + it "should have class 'active_admin'" do + layout = ActiveAdmin::Views::Pages::Layout.new(@assigns, @helpers) + layout.build.class_list.should include 'active_admin' + end + + it "should have namespace class" do + layout = ActiveAdmin::Views::Pages::Layout.new(@assigns, @helpers) + layout.build.class_list.should include "#{active_admin_namespace.name}_namespace" + end + + end + end