active_list 6.0.1 → 6.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/app/assets/javascripts/active_list.jquery.js.coffee +188 -0
- data/app/assets/stylesheets/active_list/background.scss +28 -23
- data/app/assets/stylesheets/active_list/minimal.scss +68 -73
- data/app/assets/stylesheets/active_list/theme.scss +163 -165
- data/lib/active_list.rb +2 -4
- data/lib/active_list/definition/action_column.rb +56 -10
- data/lib/active_list/definition/table.rb +21 -0
- data/lib/active_list/exporters/csv_exporter.rb +2 -2
- data/lib/active_list/exporters/excel_csv_exporter.rb +1 -3
- data/lib/active_list/rails.rb +2 -0
- data/lib/active_list/rails/engine.rb +4 -2
- data/lib/active_list/rails/integration.rb +46 -0
- data/lib/active_list/renderers/simple_renderer.rb +71 -36
- data/lib/active_list/version.rb +1 -1
- data/locales/eng.yml +1 -0
- data/test/dummy/Gemfile +1 -1
- data/test/dummy/Gemfile.lock +76 -78
- data/test/dummy/db/seeds.rb +6 -0
- data/test/people_controller_test.rb +7 -0
- data/test/test_helper.rb +1 -1
- metadata +8 -29
- data/app/assets/javascripts/active_list.jquery.js +0 -136
- data/lib/active_list/action_pack.rb +0 -46
- data/test/dummy/app/assets/javascripts/contacts.js.coffee +0 -3
- data/test/dummy/app/assets/javascripts/people.js.coffee +0 -3
- data/test/dummy/app/assets/stylesheets/contacts.css.scss +0 -3
- data/test/dummy/app/assets/stylesheets/people.css.scss +0 -3
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
ActiveList = {}
|
|
2
|
+
|
|
3
|
+
(($, AL) ->
|
|
4
|
+
"use strict"
|
|
5
|
+
|
|
6
|
+
# Main function which reload table with specified data parameters
|
|
7
|
+
AL.refresh = (element, options) ->
|
|
8
|
+
list = element.closest("div[data-list-source]")
|
|
9
|
+
table = element.find("table[data-current-page]").first()
|
|
10
|
+
parameters =
|
|
11
|
+
sort: table.data("list-sort-by")
|
|
12
|
+
dir: table.data("list-sort-dir")
|
|
13
|
+
page: table.data("list-current-page")
|
|
14
|
+
per_page: table.data("list-page-size")
|
|
15
|
+
only: "content"
|
|
16
|
+
|
|
17
|
+
$.extend parameters, options
|
|
18
|
+
url = list.data("list-source")
|
|
19
|
+
$.ajax url,
|
|
20
|
+
data: parameters
|
|
21
|
+
dataType: "html"
|
|
22
|
+
success: (data, status, request) ->
|
|
23
|
+
list.html data
|
|
24
|
+
selection = list.prop('selection')
|
|
25
|
+
if selection?
|
|
26
|
+
for id in selection
|
|
27
|
+
list.find("input[data-list-selector='#{id}']")
|
|
28
|
+
.attr('checked', 'checked')
|
|
29
|
+
.closest('tr').addClass('selected')
|
|
30
|
+
AL.checkGlobalButtons list
|
|
31
|
+
true
|
|
32
|
+
|
|
33
|
+
false
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
# Select a row of "many" buttons
|
|
37
|
+
AL.select = (element) ->
|
|
38
|
+
list = element.closest('div[data-list-source]')
|
|
39
|
+
row = element.closest('tr')
|
|
40
|
+
if list.prop('selection')?
|
|
41
|
+
selection = list.prop('selection')
|
|
42
|
+
else
|
|
43
|
+
selection = []
|
|
44
|
+
key = element.data('list-selector')
|
|
45
|
+
index = selection.indexOf(key)
|
|
46
|
+
if element.is ":checked"
|
|
47
|
+
if index < 0
|
|
48
|
+
selection.push(key)
|
|
49
|
+
row.addClass("selected")
|
|
50
|
+
else
|
|
51
|
+
if index >= 0
|
|
52
|
+
selection.splice(index, 1)
|
|
53
|
+
row.removeClass("selected")
|
|
54
|
+
list.prop('selection', selection)
|
|
55
|
+
AL.checkGlobalButtons list
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
# Hide/show needed global buttons
|
|
59
|
+
AL.checkGlobalButtons = (element) ->
|
|
60
|
+
list = element.closest('div[data-list-source]')
|
|
61
|
+
selection = list.prop('selection')
|
|
62
|
+
if selection.length > 0
|
|
63
|
+
list.find('*[data-list-actioner="none"]:visible').hide()
|
|
64
|
+
list.find('*[data-list-actioner="many"]:hidden').show()
|
|
65
|
+
else
|
|
66
|
+
list.find('*[data-list-actioner="none"]:hidden').show()
|
|
67
|
+
list.find('*[data-list-actioner="many"]:visible').hide()
|
|
68
|
+
list.find('a[data-list-actioner="many"]').each (index) ->
|
|
69
|
+
button = $(this)
|
|
70
|
+
unless button.prop('hrefPattern')?
|
|
71
|
+
button.prop('hrefPattern', button.attr('href'))
|
|
72
|
+
pattern = button.prop('hrefPattern')
|
|
73
|
+
url = pattern.replace(encodeURIComponent("##IDS##"), selection.join(','), 'g')
|
|
74
|
+
button.attr("href", url)
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
# Move to given page
|
|
78
|
+
AL.moveToPage = (element, page) ->
|
|
79
|
+
page_attr = undefined
|
|
80
|
+
page = element.data("list-move-to-page") if !page? or page is ""
|
|
81
|
+
alert "Cannot define which page to load: " + page if !page? or page is ""
|
|
82
|
+
if isNaN(page)
|
|
83
|
+
page_attr = page
|
|
84
|
+
page = element.attr(page_attr)
|
|
85
|
+
alert "Cannot define which page to load with attribute " + page_attr + ": " + page if isNaN(page)
|
|
86
|
+
AL.refresh element,
|
|
87
|
+
page: page
|
|
88
|
+
false
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
# Sort by one column
|
|
92
|
+
$(document).on "click", "div[data-list-source] th[data-list-column][data-list-column-sort]", (event) ->
|
|
93
|
+
sorter = $(this)
|
|
94
|
+
AL.refresh sorter,
|
|
95
|
+
sort: sorter.data("list-column")
|
|
96
|
+
dir: sorter.data("list-column-sort")
|
|
97
|
+
false
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
# Change number of item per page
|
|
101
|
+
$(document).on "click", "div[data-list-source] li[data-list-change-page-size]", (event) ->
|
|
102
|
+
sizer = $(this)
|
|
103
|
+
per_page = sizer.data("list-change-page-size")
|
|
104
|
+
if isNaN(per_page)
|
|
105
|
+
alert "@list-change-page-size attribute is not a number: " + per_page
|
|
106
|
+
else
|
|
107
|
+
AL.refresh sizer,
|
|
108
|
+
per_page: per_page
|
|
109
|
+
false
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
# Toggle visibility of a column
|
|
113
|
+
$(document).on "click", "div[data-list-source] li[data-list-toggle-column]", (event) ->
|
|
114
|
+
element = $(this)
|
|
115
|
+
visibility = ""
|
|
116
|
+
columnId = element.data("list-toggle-column")
|
|
117
|
+
list = element.closest("div[data-list-source]")
|
|
118
|
+
column = list.find("th[data-list-column=\"" + columnId + "\"]")
|
|
119
|
+
|
|
120
|
+
#$('#'+columnId);
|
|
121
|
+
className = column.data("list-column-cells")
|
|
122
|
+
className = columnId if className is null
|
|
123
|
+
search = "." + className
|
|
124
|
+
if column.hasClass("hidden")
|
|
125
|
+
$(search).removeClass "hidden"
|
|
126
|
+
column.removeClass "hidden"
|
|
127
|
+
element.removeClass "unchecked"
|
|
128
|
+
element.addClass "checked"
|
|
129
|
+
visibility = "shown"
|
|
130
|
+
else
|
|
131
|
+
$(search).addClass "hidden"
|
|
132
|
+
column.addClass "hidden"
|
|
133
|
+
element.removeClass "checked"
|
|
134
|
+
element.addClass "unchecked"
|
|
135
|
+
visibility = "hidden"
|
|
136
|
+
url = list.data("list-source")
|
|
137
|
+
$.ajax url,
|
|
138
|
+
dataType: "html"
|
|
139
|
+
data:
|
|
140
|
+
visibility: visibility
|
|
141
|
+
column: columnId
|
|
142
|
+
false
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
# Select row
|
|
146
|
+
$(document).on "click", "div[data-list-source] input[data-list-selector]", (event) ->
|
|
147
|
+
AL.select $(this)
|
|
148
|
+
true
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
# Change page of table on link clicks
|
|
152
|
+
$(document).on "click", "div[data-list-source] a[data-list-move-to-page]", (event) ->
|
|
153
|
+
AL.moveToPage $(this)
|
|
154
|
+
false
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
# Change page of table on link clicks
|
|
158
|
+
$(document).on "mouseovessr", "div[data-list-source] a[data-list-actioner='many']", (event) ->
|
|
159
|
+
element = $(this)
|
|
160
|
+
list = element.closest("div[data-list-source]")
|
|
161
|
+
selection = list.prop('selection')
|
|
162
|
+
if selection?
|
|
163
|
+
unless element.prop('hrefPattern')?
|
|
164
|
+
element.prop('hrefPattern', element.attr('href'))
|
|
165
|
+
pattern = element.prop('hrefPattern')
|
|
166
|
+
url = pattern.replace(encodeURIComponent("##IDS##"), selection.join(','), 'g')
|
|
167
|
+
console.log url
|
|
168
|
+
element.attr("href", url)
|
|
169
|
+
console.log url
|
|
170
|
+
true
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
# Change page of table on input changes
|
|
174
|
+
$(document).on "change", "div[data-list-source] input[data-list-move-to-page]", (event) ->
|
|
175
|
+
AL.moveToPage $(this)
|
|
176
|
+
false
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
# Adds title attribute based on link name
|
|
180
|
+
$(document).on "hover", "div[data-list-source] tbody tr td.act a", (event) ->
|
|
181
|
+
element = $(this)
|
|
182
|
+
title = element.attr("title")
|
|
183
|
+
element.attr "title", element.html() unless title?
|
|
184
|
+
return
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
return
|
|
188
|
+
) jQuery, ActiveList
|
|
@@ -2,38 +2,43 @@
|
|
|
2
2
|
//
|
|
3
3
|
|
|
4
4
|
@function merge-color($color-1, $color-2) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
$col2: rgb(red($color-2), green($color-2), blue($color-2));
|
|
6
|
+
$percent: 100*alpha($color-2);
|
|
7
|
+
@return mix($col2, $color-1, $percent);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
@function merge-colors($color, $color-1: rgba(0, 0, 0, 0), $color-2: rgba(0, 0, 0, 0), $color-3: rgba(0, 0, 0, 0), $color-4: rgba(0, 0, 0, 0), $color-5: rgba(0, 0, 0, 0), $color-6: rgba(0, 0, 0, 0), $color-7: rgba(0, 0, 0, 0), $color-8: rgba(0, 0, 0, 0), $color-9: rgba(0, 0, 0, 0), $color-10: rgba(0, 0, 0, 0)) {
|
|
11
|
-
|
|
11
|
+
@return merge-color(merge-color(merge-color(merge-color(merge-color(merge-color(merge-color(merge-color(merge-color(merge-color($color, $color-1), $color-2), $color-3), $color-4), $color-5), $color-6), $color-7), $color-8), $color-9), $color-10);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
$list-line-backgrounds:
|
|
15
|
-
$list-column-backgrounds:
|
|
16
|
-
$list-
|
|
14
|
+
$list-line-backgrounds: ("&" rgba(#FFF, 0)) ("&.error, &.undone" rgba(red, 0.12)) ("&.warning, &.in_progress" rgba(orange, 0.12));
|
|
15
|
+
$list-column-backgrounds: ("&" rgba(#FFF, 0)) ("&.act" rgba(#F90, 0.01)) ("&.sor" rgba(#05A, 0.05));
|
|
16
|
+
$list-selection-backgrounds: ("&" rgba(#FFF, 0)) ("&.selected" rgba(yellow, 0.3));
|
|
17
|
+
$list-hover-backgrounds: ("&" rgba(#FFF, 0)) ("&:hover" rgba(blue, 0.05));
|
|
17
18
|
|
|
18
19
|
@mixin list-colors($bgcolor: #000000, $selector: '&') {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
tr {
|
|
21
|
+
#{$selector} {
|
|
22
|
+
@each $line-background in $list-line-backgrounds {
|
|
23
|
+
#{nth($line-background, 1)} {
|
|
24
|
+
@each $selection-background in $list-selection-backgrounds {
|
|
25
|
+
#{nth($selection-background, 1)} {
|
|
26
|
+
@each $hover-background in $list-hover-backgrounds {
|
|
27
|
+
#{nth($hover-background, 1)} {
|
|
28
|
+
@each $col-background in $list-column-backgrounds {
|
|
29
|
+
td {
|
|
30
|
+
#{nth($col-background, 1)} {
|
|
31
|
+
background-color: merge-colors($bgcolor, nth($line-background, 2), nth($col-background, 2), nth($selection-background, 2), nth($hover-background, 2));
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
29
37
|
}
|
|
30
|
-
|
|
31
|
-
}
|
|
38
|
+
}
|
|
32
39
|
}
|
|
33
|
-
|
|
34
|
-
}
|
|
40
|
+
}
|
|
35
41
|
}
|
|
36
|
-
|
|
37
|
-
}
|
|
42
|
+
}
|
|
38
43
|
}
|
|
39
44
|
|
|
@@ -1,87 +1,82 @@
|
|
|
1
1
|
// Minimal style to get a working ActiveList
|
|
2
2
|
|
|
3
3
|
div[data-list-source] {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
table.list {
|
|
5
|
+
thead {
|
|
6
|
+
tr {
|
|
7
|
+
th {
|
|
8
|
+
&[data-list-column-sort] {
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
}
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
position: relative;
|
|
16
|
-
a { cursor: pointer; }
|
|
17
|
-
.list-menu-start {
|
|
18
|
-
display: block;
|
|
19
|
-
height: 16px;
|
|
20
|
-
padding: 2px;
|
|
21
|
-
}
|
|
22
|
-
&:hover {
|
|
23
|
-
.list-menu-start { z-index:5000; position: relative; top: 0px; }
|
|
24
|
-
& > ul { display: block; }
|
|
25
|
-
}
|
|
26
|
-
ul {
|
|
27
|
-
display: none;
|
|
28
|
-
position:absolute;
|
|
29
|
-
top: 20px;
|
|
30
|
-
padding: 1px;
|
|
31
|
-
margin:0;
|
|
32
|
-
& { right: 0px;}
|
|
33
|
-
html[dir="rtl"] & { left: 0px;}
|
|
34
|
-
li {
|
|
35
|
-
&[data-list-change-page-size], &[data-list-toggle-column] {
|
|
36
|
-
cursor: pointer;
|
|
37
|
-
display: block;
|
|
38
|
-
}
|
|
39
|
-
list-style-type: none;
|
|
40
|
-
width: 25ex;
|
|
41
|
-
position: relative;
|
|
42
|
-
a {
|
|
43
|
-
display: block;
|
|
44
|
-
}
|
|
45
|
-
ul {
|
|
46
|
-
display: none;
|
|
47
|
-
position: absolute;
|
|
48
|
-
top: -2px;
|
|
49
|
-
& { right: 25ex; }
|
|
50
|
-
html[dir="rtl"] & { left: 25ex; }
|
|
51
|
-
&:hover { display:block; }
|
|
52
|
-
}
|
|
53
|
-
&:hover ul { display:block; }
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&.hidden {
|
|
60
|
-
display: none;
|
|
61
|
-
}
|
|
12
|
+
&.hidden {
|
|
13
|
+
display: none;
|
|
14
|
+
}
|
|
62
15
|
|
|
63
|
-
|
|
16
|
+
}
|
|
17
|
+
}
|
|
64
18
|
}
|
|
65
|
-
}
|
|
66
19
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
20
|
+
tbody {
|
|
21
|
+
tr {
|
|
22
|
+
td.hidden {
|
|
23
|
+
display: none;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
72
26
|
}
|
|
73
|
-
|
|
27
|
+
}
|
|
74
28
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
div.extras {
|
|
78
|
-
.pagination {
|
|
29
|
+
.pagination {
|
|
79
30
|
a[data-list-move-to-page] {
|
|
80
|
-
|
|
31
|
+
cursor: pointer;
|
|
81
32
|
}
|
|
82
33
|
a[data-list-move-to-page][disabled] {
|
|
83
|
-
|
|
34
|
+
cursor: default;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.settings {
|
|
39
|
+
position: relative;
|
|
40
|
+
a { cursor: pointer; }
|
|
41
|
+
.settings-start {
|
|
42
|
+
height: 16px;
|
|
43
|
+
padding: 2px;
|
|
84
44
|
}
|
|
85
|
-
|
|
86
|
-
}
|
|
45
|
+
&:hover {
|
|
46
|
+
.list-menu-start { z-index:5000; position: relative; top: 0px; }
|
|
47
|
+
& > ul { display: block; }
|
|
48
|
+
}
|
|
49
|
+
ul {
|
|
50
|
+
display: none;
|
|
51
|
+
position:absolute;
|
|
52
|
+
top: 20px;
|
|
53
|
+
padding: 1px;
|
|
54
|
+
margin:0;
|
|
55
|
+
& { right: 0px;}
|
|
56
|
+
html[dir="rtl"] & { left: 0px;}
|
|
57
|
+
li {
|
|
58
|
+
&[data-list-change-page-size], &[data-list-toggle-column] {
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
display: block;
|
|
61
|
+
}
|
|
62
|
+
list-style-type: none;
|
|
63
|
+
width: 25ex;
|
|
64
|
+
position: relative;
|
|
65
|
+
a {
|
|
66
|
+
display: block;
|
|
67
|
+
}
|
|
68
|
+
ul {
|
|
69
|
+
display: none;
|
|
70
|
+
position: absolute;
|
|
71
|
+
top: -2px;
|
|
72
|
+
& { right: 25ex; }
|
|
73
|
+
html[dir="rtl"] & { left: 25ex; }
|
|
74
|
+
&:hover { display:block; }
|
|
75
|
+
}
|
|
76
|
+
&:hover ul { display:block; }
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
|
|
87
82
|
}
|
|
@@ -3,187 +3,185 @@
|
|
|
3
3
|
@import "compass/typography/text/replacement";
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
|
|
7
6
|
// Because Compass sprites do not seems to work well in gems
|
|
8
7
|
@mixin active-list-sprite($name, $size: 16px) {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
8
|
+
background-image: image-url("active_list.png");
|
|
9
|
+
background-repeat: no-repeat;
|
|
10
|
+
height: $size;
|
|
11
|
+
width: $size;
|
|
12
|
+
$i: 0;
|
|
13
|
+
@each $icon in menu check columns export pages first-page previous-page previous-line next-line next-page last-page sort sort-down sort-up true false {
|
|
14
|
+
@if $icon == $name {
|
|
15
|
+
background-position: (-$i * $size) 0;
|
|
16
|
+
}
|
|
17
|
+
$i: $i + 1;
|
|
18
|
+
}
|
|
20
19
|
}
|
|
21
20
|
|
|
22
21
|
|
|
23
22
|
@mixin active-list-theme($theme-color: #777777) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
& { text-align: left; }
|
|
49
|
-
html[dir="rtl"] & { text-align: right; }
|
|
50
|
-
&.spe {
|
|
51
|
-
width: 16px;
|
|
52
|
-
height: 16px;
|
|
53
|
-
.list-menu {
|
|
54
|
-
position: relative;
|
|
55
|
-
background: none;
|
|
56
|
-
.list-menu-start {
|
|
57
|
-
padding: 2px;
|
|
58
|
-
width: 16px;
|
|
59
|
-
height: 16px;
|
|
60
|
-
.icon { @include active-list-sprite(menu); display: block; }
|
|
61
|
-
.text { display: none; }
|
|
62
|
-
}
|
|
63
|
-
&:hover {
|
|
64
|
-
.list-menu-start {
|
|
65
|
-
background-color: white;
|
|
66
|
-
z-index:5000;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
ul {
|
|
70
|
-
width: $menu-width;
|
|
71
|
-
border: 1px solid $default-border-color;
|
|
72
|
-
background: #FFF;
|
|
73
|
-
@include box-shadow(0 0 5px rgba(0, 0, 0, 0.3));
|
|
74
|
-
li {
|
|
75
|
-
width: $menu-width;
|
|
76
|
-
padding: 0;
|
|
77
|
-
ul {
|
|
78
|
-
& { right: $menu-width; }
|
|
79
|
-
html[dir="rtl"] & { left: $menu-width; }
|
|
80
|
-
}
|
|
81
|
-
}
|
|
23
|
+
$default-border-color: mix($theme-color, #FFF, 30%);
|
|
24
|
+
$menu-width: 250px;
|
|
25
|
+
table.list {
|
|
26
|
+
border-collapse: collapse;
|
|
27
|
+
width: 100%;
|
|
28
|
+
border: 1px solid $default-border-color;
|
|
29
|
+
z-index: 2;
|
|
30
|
+
@include box-shadow(0 0 7px rgba(0, 0, 0, 0.15));
|
|
31
|
+
thead {
|
|
32
|
+
th {
|
|
33
|
+
border: 1px solid $default-border-color;
|
|
34
|
+
padding: 2px 3px;
|
|
35
|
+
@include background($theme-color linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8)));
|
|
36
|
+
&[data-list-column-sort] {
|
|
37
|
+
i {
|
|
38
|
+
@include active-list-sprite(sort);
|
|
39
|
+
@include inline-block;
|
|
40
|
+
margin: 0 2px;
|
|
41
|
+
}
|
|
42
|
+
&.sor[data-list-column-sort="desc"] i {
|
|
43
|
+
@include active-list-sprite(sort-down); }
|
|
44
|
+
&.sor[data-list-column-sort="asc"] i {
|
|
45
|
+
@include active-list-sprite(sort-up); }
|
|
82
46
|
}
|
|
83
|
-
&
|
|
84
|
-
|
|
47
|
+
& { text-align: left; }
|
|
48
|
+
html[dir="rtl"] & { text-align: right; }
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
tbody {
|
|
52
|
+
tr {
|
|
53
|
+
td {
|
|
54
|
+
padding: 2px 3px;
|
|
55
|
+
border-top: 1px solid mix($theme-color, #FFF, 10%);
|
|
56
|
+
border-bottom: none;
|
|
57
|
+
border-left: none;
|
|
58
|
+
border-right: none;
|
|
59
|
+
&.chk,&.act, &.dld, &.bln, &.dat, &.web { text-align:center }
|
|
60
|
+
&.dec, &.flt, &.int {
|
|
61
|
+
& { text-align: right; }
|
|
62
|
+
html[dir="rtl"] & { text-align: left; }
|
|
63
|
+
}
|
|
64
|
+
&.country { white-space: nowrap; }
|
|
65
|
+
&.color { color: white; text-shadow: 0 0 2px #000; width: 6ex; text-align: center; }
|
|
85
66
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
display: block;
|
|
89
|
-
a {
|
|
90
|
-
display: block;
|
|
91
|
-
padding: 2px;
|
|
92
|
-
.icon {
|
|
93
|
-
@include inline-block;
|
|
94
|
-
height:16px;
|
|
95
|
-
width: 16px;
|
|
96
|
-
& { margin-right: 4px; }
|
|
97
|
-
html[dir="rtl"] & { margin-left: 4px; }
|
|
98
|
-
}
|
|
99
|
-
.text {
|
|
100
|
-
@include inline-block;
|
|
101
|
-
width: $menu-width - 24px;
|
|
102
|
-
line-height: 18px;
|
|
103
|
-
font-weight: normal;
|
|
104
|
-
}
|
|
105
|
-
& * {
|
|
106
|
-
vertical-align: middle;
|
|
107
|
-
}
|
|
108
|
-
&.pages .icon { @include active-list-sprite(pages); }
|
|
109
|
-
&.columns .icon { @include active-list-sprite(columns); }
|
|
110
|
-
}
|
|
111
|
-
&.export .icon { @include active-list-sprite(export); }
|
|
112
|
-
&.check .icon { @include active-list-sprite(check); }
|
|
113
|
-
&.checked .icon { @include active-list-sprite(true); }
|
|
114
|
-
&.unchecked .icon { @include active-list-sprite(false); }
|
|
115
|
-
&:hover {
|
|
116
|
-
text-decoration: none;
|
|
117
|
-
background: mix($theme-color, #FFF, 10%);
|
|
118
|
-
}
|
|
119
|
-
&.separator {
|
|
120
|
-
padding: 0;
|
|
121
|
-
height: 1px;
|
|
122
|
-
width: $menu-width - 6px;
|
|
123
|
-
margin: 3px;
|
|
124
|
-
background: $default-border-color;
|
|
125
|
-
}
|
|
67
|
+
&:first-child td {
|
|
68
|
+
border-top: none;
|
|
126
69
|
}
|
|
127
|
-
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
tbody {
|
|
133
|
-
tr {
|
|
134
|
-
td {
|
|
135
|
-
padding: 2px 3px;
|
|
136
|
-
border-top: 1px solid mix($theme-color, #FFF, 10%);
|
|
137
|
-
border-bottom: none;
|
|
138
|
-
border-left: none;
|
|
139
|
-
border-right: none;
|
|
140
|
-
&.chk,&.act, &.dld, &.bln, &.dat, &.web { text-align:center }
|
|
141
|
-
&.dec, &.flt, &.int {
|
|
142
|
-
& { text-align: right; }
|
|
143
|
-
html[dir="rtl"] & { text-align: left; }
|
|
144
|
-
}
|
|
145
|
-
&.country { white-space: nowrap; }
|
|
146
|
-
&.color { color: white; text-shadow: 0 0 2px #000; width: 6ex; text-align: center; }
|
|
147
|
-
}
|
|
148
|
-
&:first-child td {
|
|
149
|
-
border-top: none;
|
|
150
|
-
}
|
|
70
|
+
}
|
|
151
71
|
}
|
|
152
|
-
}
|
|
153
72
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
73
|
+
@include list-colors(#FFFFFF);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.list-control {
|
|
77
|
+
z-index: 0;
|
|
78
|
+
@include background(transparentize(mix($theme-color, #FFF, 40%), 0.7));
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.pagination {
|
|
82
|
+
& { text-align: left; }
|
|
83
|
+
html[dir="rtl"] & { text-align: right; }
|
|
84
|
+
& > * {
|
|
163
85
|
margin: 0 2px;
|
|
164
|
-
|
|
165
|
-
|
|
86
|
+
}
|
|
87
|
+
.first-page, .previous-page, .next-page, .last-page {
|
|
166
88
|
@include inline-block;
|
|
167
89
|
@include squish-text;
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
90
|
+
}
|
|
91
|
+
html[dir="rtl"] & .last-page, & .first-page {
|
|
92
|
+
@include active-list-sprite(first-page);
|
|
93
|
+
}
|
|
94
|
+
html[dir="rtl"] & .first-page, & .last-page {
|
|
95
|
+
@include active-list-sprite(last-page);
|
|
96
|
+
}
|
|
97
|
+
html[dir="rtl"] & .next-page, & .previous-page {
|
|
98
|
+
@include active-list-sprite(previous-page);
|
|
99
|
+
}
|
|
100
|
+
html[dir="rtl"] & .previous-page, & .next-page {
|
|
101
|
+
@include active-list-sprite(next-page);
|
|
102
|
+
}
|
|
103
|
+
.separator {
|
|
182
104
|
@include inline-block;
|
|
183
105
|
width: 2px;
|
|
184
106
|
height: 1.2em;
|
|
185
107
|
background: transparentize($theme-color, 0.7);
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
.settings {
|
|
113
|
+
position: relative;
|
|
114
|
+
background: none;
|
|
115
|
+
.list-menu-start {
|
|
116
|
+
padding: 2px;
|
|
117
|
+
width: 16px;
|
|
118
|
+
height: 16px;
|
|
119
|
+
font-size: 0;
|
|
120
|
+
i {
|
|
121
|
+
@include active-list-sprite(menu);
|
|
122
|
+
display: block;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
&:hover {
|
|
126
|
+
.settings {
|
|
127
|
+
background-color: white;
|
|
128
|
+
z-index:5000;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
ul {
|
|
132
|
+
width: $menu-width;
|
|
133
|
+
border: 1px solid $default-border-color;
|
|
134
|
+
background: #FFF;
|
|
135
|
+
@include box-shadow(0 0 5px rgba(0, 0, 0, 0.3));
|
|
136
|
+
li {
|
|
137
|
+
width: $menu-width;
|
|
138
|
+
padding: 0;
|
|
139
|
+
ul {
|
|
140
|
+
& { right: $menu-width; }
|
|
141
|
+
html[dir="rtl"] & { left: $menu-width; }
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
& > ul {
|
|
146
|
+
top: 19px;
|
|
147
|
+
}
|
|
148
|
+
li {
|
|
149
|
+
padding: 0;
|
|
150
|
+
display: block;
|
|
151
|
+
a {
|
|
152
|
+
display: block;
|
|
153
|
+
padding: 2px;
|
|
154
|
+
line-height: 18px;
|
|
155
|
+
font-weight: normal;
|
|
156
|
+
i {
|
|
157
|
+
height:16px;
|
|
158
|
+
width: 16px;
|
|
159
|
+
& { margin-right: 4px; }
|
|
160
|
+
html[dir="rtl"] & { margin-left: 4px; }
|
|
161
|
+
}
|
|
162
|
+
& * {
|
|
163
|
+
vertical-align: middle;
|
|
164
|
+
}
|
|
165
|
+
&.pages i { @include active-list-sprite(pages); }
|
|
166
|
+
&.columns i { @include active-list-sprite(columns); }
|
|
167
|
+
}
|
|
168
|
+
&.export i { @include active-list-sprite(export); }
|
|
169
|
+
&.check i { @include active-list-sprite(check); }
|
|
170
|
+
&.checked i { @include active-list-sprite(true); }
|
|
171
|
+
&.unchecked i { @include active-list-sprite(false); }
|
|
172
|
+
&:hover {
|
|
173
|
+
text-decoration: none;
|
|
174
|
+
background: mix($theme-color, #FFF, 10%);
|
|
175
|
+
}
|
|
176
|
+
&.separator {
|
|
177
|
+
padding: 0;
|
|
178
|
+
height: 1px;
|
|
179
|
+
width: $menu-width - 6px;
|
|
180
|
+
margin: 3px;
|
|
181
|
+
background: $default-border-color;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
|
|
189
187
|
}
|