Skip to content

Commit 3b8806b

Browse files
author
Denis Talakevich
committed
add collapsible
1 parent 62e5273 commit 3b8806b

File tree

9 files changed

+240
-62
lines changed

9 files changed

+240
-62
lines changed

‎README.rdoc‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@ Add including of css file
1010

1111
to the app/assets/stylesheets/active_admin.css.scss
1212

13+
And including of coffee file (optional, need only for collapsed sidebar)
14+
15+
//= require active_admin_sidebar
16+
17+
to the app/assets/javascripts/active_admin.js
18+
1319

1420
Changing sidebar position dynamically with before_filter
1521

@@ -37,13 +43,24 @@ Moving sidebar to the left within all resource (config/initializers/active_admin
3743
left_sidebar! if respond_to?(:left_sidebar!)
3844
end
3945

40-
Disabling using sidebar layout on dashboards (if you setup sidebar position with initializer)
46+
Also you can use sidebar collapsing. It will add css icon in title of first sidebar will save current state in session
47+
48+
left_sidebar!(collapsed: true)
49+
50+
You can override button color according to your color theme:
51+
52+
body.active_admin {
53+
#active_admin_content.left_sidebar, #active_admin_content.collapsed_sidebar {
54+
.collapse_btn, .uncollapse_btn {
55+
cursor: pointer;
56+
background-color: #767270;
57+
border-radius: 5px;
58+
color: #ffffff;
59+
}
60+
}
61+
}
62+
4163

42-
ActiveAdmin.register_page "Dashboard" do
43-
controller {skip_before_filter :left_sidebar!}
44-
#.....
45-
end
46-
4764
Example
4865

4966
http://oi45.tinypic.com/1zx1a3r.png

‎app/assets/javascripts/active_admin_sidebar.coffee‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
$(document).ready ->
2+
if $('body').hasClass('index') && ($('#active_admin_content').hasClass('collapsible_sidebar'))
3+
4+
$aa_content = $('#active_admin_content')
5+
6+
$aa_content.find('.sidebar_section:first>h3').append(
7+
'<span class="collapse_btn icono-caret-left" title="Hide sidebar"></span>')
8+
9+
$aa_content.prepend(
10+
'<span class="uncollapse_btn icono-caret-right" title="Show sidebar"></span>')
11+
12+
set_collapsed_sidebar = (value) ->
13+
$.getJSON(this.href, {collapsed_sidebar: value})
14+
15+
$aa_content.on 'click', '.collapse_btn, .uncollapse_btn', (e) ->
16+
if !$aa_content.hasClass('collapsed_sidebar')
17+
set_collapsed_sidebar(true)
18+
$aa_content.removeClass('left_sidebar')
19+
$aa_content.addClass('collapsed_sidebar')
20+
else
21+
set_collapsed_sidebar(false)
22+
$aa_content.removeClass('collapsed_sidebar')
23+
$aa_content.addClass('left_sidebar')

‎app/assets/stylesheets/active_admin_sidebar.css.scss‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎app/assets/stylesheets/active_admin_sidebar.scss‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
@import "active_admin_sidebar_pure_icons";
2+
3+
body.active_admin {
4+
#active_admin_content.left_sidebar, #active_admin_content.collapsed_sidebar {
5+
#sidebar {
6+
display: block;
7+
margin-left: 0;
8+
}
9+
10+
.paginated_collection_contents {
11+
clear: none;
12+
float: left;
13+
width: 100%;
14+
}
15+
16+
.blank_slate_container {
17+
clear: none;
18+
}
19+
20+
.columns {
21+
clear: none;
22+
}
23+
24+
#main_content_wrapper {
25+
float: inherit;
26+
margin-left: 298px;
27+
width: auto;
28+
#main_content {
29+
float: inherit;
30+
margin: 0;
31+
.tabs .comments {
32+
.active_admin_comment {
33+
clear: none;
34+
}
35+
}
36+
}
37+
38+
}
39+
40+
.table_tools:after {
41+
clear: none;
42+
padding-bottom: 16px;
43+
}
44+
45+
.collapse_btn, .uncollapse_btn {
46+
background-color: #767270;
47+
border-radius: 5px;
48+
color: #ffffff;
49+
cursor: pointer;
50+
}
51+
52+
.collapse_btn {
53+
clear: both;
54+
display: block;
55+
float: right;
56+
}
57+
58+
.uncollapse_btn {
59+
display: none;
60+
margin-top: 5px;
61+
position: absolute;
62+
}
63+
64+
}
65+
}
66+
67+
body.active_admin #active_admin_content.collapsed_sidebar {
68+
69+
#main_content_wrapper {
70+
margin-left: 30px;
71+
}
72+
73+
#sidebar {
74+
display: none;
75+
}
76+
77+
.uncollapse_btn {
78+
display: block;
79+
}
80+
81+
}
82+
83+
body.active_admin.index #active_admin_content.with_sidebar.collapsible_sidebar {
84+
#main_content_wrapper #main_content {
85+
margin-right: 0;
86+
}
87+
}

‎app/assets/stylesheets/active_admin_sidebar_pure_icons.scss‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/* .icono-caret-left */
2+
.icono-caret-right, .icono-caret-left {
3+
height: 19px;
4+
width: 19px;
5+
}
6+
7+
.icono-caret-right:before,
8+
.icono-caret-right:after,
9+
.icono-caret-left:before,
10+
.icono-caret-left:after {
11+
bottom: 1px;
12+
box-shadow: inset 0 0 0 32px;
13+
height: 2px;
14+
margin: auto 0;
15+
position: absolute;
16+
right: 6px;
17+
transform-origin: right;
18+
width: 8px;
19+
}
20+
21+
.icono-caret-right:before, .icono-caret-left:before {
22+
top: 2px;
23+
-moz-transform: rotate(45deg);
24+
-ms-transform: rotate(45deg);
25+
-o-transform: rotate(45deg);
26+
-webkit-transform: rotate(45deg);
27+
transform: rotate(45deg);
28+
}
29+
30+
.icono-caret-right:after, .icono-caret-left:after {
31+
top: 0;
32+
-moz-transform: rotate(-45deg);
33+
-ms-transform: rotate(-45deg);
34+
-o-transform: rotate(-45deg);
35+
-webkit-transform: rotate(-45deg);
36+
transform: rotate(-45deg);
37+
}
38+
39+
.icono-caret-left {
40+
-moz-transform: rotate(180deg);
41+
-ms-transform: rotate(180deg);
42+
-o-transform: rotate(180deg);
43+
-webkit-transform: rotate(180deg);
44+
transform: rotate(180deg);
45+
}
46+
47+
[class*="icono-"] {
48+
direction: ltr;
49+
display: inline-block;
50+
font-style: normal;
51+
position: relative;
52+
text-align: left;
53+
text-indent: -9999px;
54+
vertical-align: middle;
55+
}
56+
57+
[class*="icono-"]:before,
58+
[class*="icono-"]:after {
59+
content: "";
60+
pointer-events: none;
61+
}
62+
63+
[class*="icono-"],
64+
[class*="icono-"] * {
65+
box-sizing: border-box;
66+
}

‎lib/active_admin_sidebar.rb‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
require 'active_admin'
1+
require "active_admin"
22
require "active_admin_sidebar/version"
3-
require 'active_admin_sidebar/activeadmin_views_pages_base'
4-
require 'active_admin_sidebar/positions'
3+
require "active_admin_sidebar/activeadmin_views_pages_base"
4+
require "active_admin_sidebar/positions"
55

66
module ActiveAdminSidebar
77
module Rails
@@ -12,6 +12,3 @@ class Engine < ::Rails::Engine
1212
end
1313
end
1414
end
15-
16-
17-

‎lib/active_admin_sidebar/activeadmin_views_pages_base.rb‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,15 @@ def build_page_content
1010
end
1111

1212
def left_sidebar?
13-
assigns[:sidebar_position] == :left
13+
assigns[:sidebar_options].try!(:[], :position) == :left
14+
end
15+
16+
def collapsible_sidebar?
17+
left_sidebar? && !!assigns[:sidebar_options].try!(:[], :collapsed)
18+
end
19+
20+
def sidebar_is_collapsed?
21+
!!assigns[:sidebar_options].try!(:[], :is_collapsed)
1422
end
1523

1624
def right_sidebar?
@@ -20,10 +28,14 @@ def right_sidebar?
2028
def main_content_classes
2129
classes = Arbre::HTML::ClassList.new
2230
if skip_sidebar?
23-
classes << 'without_sidebar'
31+
classes << "without_sidebar"
2432
else
25-
classes << 'with_sidebar'
26-
classes << 'left_sidebar' if left_sidebar?
33+
classes << "with_sidebar"
34+
classes << "left_sidebar" if left_sidebar?
35+
if collapsible_sidebar?
36+
classes << "collapsible_sidebar"
37+
classes << "collapsed_sidebar" if sidebar_is_collapsed?
38+
end
2739
end
2840
classes
2941
end

‎lib/active_admin_sidebar/positions.rb‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,28 @@
11
module ActiveAdminSidebar
22
module Positions
3-
def left_sidebar!
4-
@sidebar_position = :left
3+
def left_sidebar!(options = {})
4+
@sidebar_options = { position: :left }
5+
if options.fetch(:collapsed, false)
6+
collapsed_sidebar
7+
@sidebar_options.merge!(
8+
is_collapsed: session[:collapsed_sidebar],
9+
collapsed: true
10+
)
11+
end
512
end
13+
614
def right_sidebar!
7-
@sidebar_position = :right
15+
@sidebar_options = { position: :right }
16+
end
17+
18+
def collapsed_sidebar
19+
if request.xhr?
20+
if params[:collapsed_sidebar].present?
21+
collapsed = ActiveRecord::ConnectionAdapters::Column::TRUE_VALUES.include? params[:collapsed_sidebar]
22+
session[:collapsed_sidebar] = collapsed
23+
render json: { collapsed_sidebar: collapsed } and return
24+
end
25+
end
826
end
927

1028
end

‎lib/active_admin_sidebar/version.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module ActiveAdminSidebar
2-
VERSION = "0.1.0.rc2"
2+
VERSION = "0.1.0.rc3"
33
end

0 commit comments

Comments
 (0)