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
marcometz · May 25, 2012 · 02ab094 · 02ab094
1 parent 73b051f
commit 02ab094
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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;
   }
-}
+}
diff --git 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
@@ -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; }
   }
 
-}
+}
diff --git 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 {
 
     }
   }
-}
+}
+
+}
diff --git 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
@@ -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
@@ -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