deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-04 15:43:15 +02:00
Code Issues Releases Wiki Activity

Restyled extensions

Browse source
This commit is contained in:
Max Guglielmi 2015-08-09 15:18:09 +10:00
parent d8fe61aa28
commit 0b3c5a0a87
22 changed files with 98 additions and 184 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
demos/columns-visibility.html
View file

@ -2647,10 +2647,10 @@ var tfConfig = {
alternate_rows: true,
rows_counter: true,
btn_reset: true,
btn_reset_text: "Clear",
btn_reset_text: 'Clear',
status_bar: true,
col_1: "select",
col_2: "select",
col_1: 'select',
col_2: 'select',
/* columns visibility and sort extension */
extensions:[

1
dist/starter.html vendored
View file

@ -459,6 +459,7 @@
loader: true,
status_bar: true,
mark_active_columns: true,
highlight_keywords: true,
col_number_format: [
null, null, 'US',
'US', 'US', 'US',

14
dist/tablefilter/style/colsVisibility.css vendored
View file

@ -1,6 +1,6 @@
/**
* TableFilter v0.0.0 by Max Guglielmi
* build date: 2015-08-08T07:46:20.939Z
* build date: 2015-08-09T02:22:27.647Z
* MIT License
*/
/**
@ -10,7 +10,11 @@ span.colVisSpan {
text-align: left;
}
span.colVisSpan a.colVis {
margin: 0 5px 0 5px;
display: inline-block;
padding: 7px 5px 0;
font-size: inherit;
font-weight: inherit;
vertical-align: top;
}
div.colVisCont {
position: relative;
@ -24,7 +28,7 @@ div.colVisCont {
height: auto;
width: 250px;
background-color: #fff;
margin: 28px 0 0 -100px;
margin: 35px 0 0 -100px;
z-index: 10000;
padding: 10px 10px 10px 10px;
text-align: left;
@ -56,6 +60,10 @@ div.colVisCont:before {
div.colVisCont p {
margin: 6px auto 6px auto;
}
div.colVisCont a.colVis {
display: initial;
font-weight: inherit;
}
ul.cols_checklist {
padding: 0;
margin: 0;

19
dist/tablefilter/style/filtersVisibility.css vendored
View file

@ -1,18 +1,19 @@
/**
* TableFilter v0.0.0 by Max Guglielmi
* build date: 2015-08-08T07:46:20.939Z
* build date: 2015-08-09T02:22:27.647Z
* MIT License
*/
/**
* Filters visibility extension default style
*/
span.expClpFlt,
span.expClpFlt a.btnExpClpFlt {
width: 35px;
height: 35px;
display: inline-block;
}
span.expClpFlt a.btnExpClpFlt :hover {
background-color: #f4f4f4;
}
span.expClpFlt img {
vertical-align: middle;
border: 0;
padding: 1px 1px 1px 1px;
margin: 1px 1px 1px 1px;
}
.btnExpClpFlt {
margin: 0 5px 0 5px;
padding: 8px 11px 11px 11px;
}

34
dist/tablefilter/style/tablefilter.css vendored
View file

@ -1,6 +1,6 @@
/**
* TableFilter v0.0.0 by Max Guglielmi
* build date: 2015-08-08T07:46:20.939Z
* build date: 2015-08-09T02:22:27.647Z
* MIT License
*/
/**
@ -364,16 +364,16 @@ div.grd_tblCont table td {
.grd_inf input.reset:hover {
background-color: transparent;
}
.mdiv {
.grd_inf .mdiv {
width: 40% !important;
}
.ldiv div {
.grd_inf .ldiv div {
border: 0;
}
.helpBtn {
.grd_inf .helpBtn {
border: 0 !important;
}
div.status {
.grd_inf div.status {
position: absolute;
float: none !important;
height: auto !important;
@ -382,7 +382,7 @@ div.status {
color: #333;
border: 0 !important;
}
div.tot {
.grd_inf div.tot {
border: 0 !important;
}
@ -391,16 +391,13 @@ div.tot {
*/
.helpBtn {
display: inline-block;
height: 35px;
height: 27px;
margin: 0;
padding: 8px 15px 8px 15px;
border-left: 1px solid #f4f4f4;
border-right: 1px solid #f4f4f4;
padding: 8px 15px 0 15px;
vertical-align: top;
}
.helpBtn:hover {
background-color: #f4f4f4;
border-radius: 3px;
}
div.helpCont {
position: relative;
@ -471,7 +468,9 @@ div.helpFooter h4 {
* Keyword highlighting default style
*/
span.keyword {
background-color: #fc0;
font-weight: 700;
font-style: italic;
border-bottom: 1px dotted #ccc;
}
/**
@ -591,14 +590,13 @@ span.rspgSpan {
input.reset {
display: inline-block;
width: 35px;
height: 100%;
height: 35px;
border: 0;
background: transparent url("themes/btn_clear_filters.png") center center no-repeat;
vertical-align: top;
}
input.reset:hover {
background-color: #f4f4f4;
border-radius: 3px;
}
/**
@ -609,7 +607,6 @@ div.tot {
overflow: hidden;
min-width: 150px;
height: 100%;
border-right: 1px solid #f4f4f4;
margin: 0;
padding: 0.5em;
vertical-align: middle;
@ -641,14 +638,12 @@ div.tot span {
div.status {
float: left;
overflow: hidden;
width: 150px;
min-width: 120px;
height: 100%;
border-right: 1px solid #f4f4f4;
margin: 0;
padding: 0.5em;
}
div.status span {
font-weight: 500;
font-size: inherit;
}
@ -706,14 +701,12 @@ table.TF td {
.ldiv {
float: left;
width: 30%;
height: 100%;
position: inherit;
text-align: left;
}
.mdiv {
float: left;
width: 38%;
height: 100%;
position: inherit;
text-align: center;
padding: 0;
@ -721,7 +714,6 @@ table.TF td {
.rdiv {
float: right;
width: 30%;
height: 100%;
position: inherit;
text-align: right;
}

2
dist/tablefilter/style/themes/default/default.css vendored
View file

@ -1,6 +1,6 @@
/**
* TableFilter v0.0.0 by Max Guglielmi
* build date: 2015-08-08T07:46:20.939Z
* build date: 2015-08-09T02:22:27.647Z
* MIT License
*/
/**

2
dist/tablefilter/style/themes/mytheme/mytheme.css vendored
View file

@ -1,6 +1,6 @@
/**
* TableFilter v0.0.0 by Max Guglielmi
* build date: 2015-08-08T07:46:20.939Z
* build date: 2015-08-09T02:22:27.647Z
* MIT License
*/
/**

2
dist/tablefilter/style/themes/skyblue/skyblue.css vendored
View file

@ -1,6 +1,6 @@
/**
* TableFilter v0.0.0 by Max Guglielmi
* build date: 2015-08-08T07:46:20.939Z
* build date: 2015-08-09T02:22:27.647Z
* MIT License
*/
/**

1
static/style/config.styl
View file

@ -33,6 +33,7 @@ $toolbar-bg-color = #FFF
$toolbar-font-size = inherit
$toolbar-border-color = #CCC
$toolbar-divider-color = #F4F4F4
$toolbar-hover-color = #F4F4F4
// paging
$paging-nav-button-bg-color-hover = #F4F4F4

15
static/style/extensions/colsVisibility.styl
View file

@ -2,6 +2,7 @@
* ColsVisibility extension default style
*/
@import '../config'
@import '../mixins/arrow'
@import '../mixins/box-shadow'
@ -9,11 +10,15 @@ $item-bg-color = #335EA8
$item-font-color = #fff
span.colVisSpan
text-align left
text-align left
// link
a.colVis
margin 0 5px 0 5px
display inline-block
padding 7px 5px 0
font-size inherit
font-weight inherit
vertical-align top
// container element
div.colVisCont
@ -25,7 +30,7 @@ div.colVisCont
height auto
width 250px
background-color #fff
margin 28px 0 0 -100px
margin 35px 0 0 -100px
z-index 10000
padding 10px 10px 10px 10px
text-align left
@ -34,6 +39,10 @@ div.colVisCont
p
margin 6px auto 6px auto
a.colVis
display initial
font-weight inherit
// checklist
ul.cols_checklist
padding 0

19
static/style/extensions/filtersVisibility.styl
View file

@ -2,16 +2,17 @@
* Filters visibility extension default style
*/
@import '../config'
// container
span.expClpFlt
a.btnExpClpFlt
width $min-width
height $min-height
display inline-block
// icon
span.expClpFlt img
vertical-align middle
border 0
padding 1px 1px 1px 1px
margin 1px 1px 1px 1px
:hover
background-color $toolbar-hover-color
// button
.btnExpClpFlt
margin 0 5px 0 5px
img
padding 8px 11px 11px 11px

34
static/style/grid-layout.styl
View file

@ -103,24 +103,24 @@ div.grd_tblCont table td
&:hover
background-color transparent
.mdiv
width 40% !important
.mdiv
width 40% !important
.ldiv
div
border 0
.ldiv
div
border 0
.helpBtn
border 0 !important
.helpBtn
border 0 !important
div.status
position absolute
float none !important
height auto !important
margin 19px 0 !important
font-size 12px
color #333
border 0 !important
div.status
position absolute
float none !important
height auto !important
margin 19px 0 !important
font-size 12px
color #333
border 0 !important
div.tot
border 0 !important
div.tot
border 0 !important

9
static/style/help.styl
View file

@ -9,16 +9,13 @@
// help button
.helpBtn
display inline-block
height $min-height
height 27px
margin 0
padding 8px 15px 8px 15px
border-left 1px solid $toolbar-divider-color
border-right 1px solid $toolbar-divider-color
padding 8px 15px 0 15px
vertical-align top
&:hover
background-color #F4F4F4
border-radius 3px
background-color $toolbar-hover-color
// help container
div.helpCont

4
static/style/keyword.styl
View file

@ -3,4 +3,6 @@
*/
span.keyword
background-color #ffcc00
font-weight 700
font-style italic
border-bottom 1px dotted #CCC

2
static/style/paging.styl
View file

@ -2,7 +2,7 @@
* Paging default style
*/
@import 'config'
@import 'config'
filter()
height $filter-height

5
static/style/reset-button.styl
View file

@ -7,11 +7,10 @@
input.reset
display inline-block
width $min-width
height 100%
height $min-height
border 0
background: transparent url(themes/btn_clear_filters.png) center center no-repeat
vertical-align top
&:hover
background-color #F4F4F4
border-radius 3px
background-color $toolbar-hover-color

1
static/style/rows-counter.styl
View file

@ -9,7 +9,6 @@ div.tot
overflow hidden
min-width 150px
height 100%
border-right 1px solid $toolbar-divider-color
margin 0
padding 0.5em
vertical-align middle

4
static/style/status-bar.styl
View file

@ -7,12 +7,10 @@
div.status
float left
overflow hidden
width 150px
min-width 120px
height 100%
border-right 1px solid $toolbar-divider-color
margin 0
padding 0.5em
span
font-weight 500
font-size inherit

6
static/style/toolbar.styl
View file

@ -32,7 +32,7 @@
.ldiv
float left
width 30%
height 100%
// height 100%
position inherit
text-align left
@ -40,7 +40,7 @@
.mdiv
float left
width 38%
height 100%
// height 100%
position inherit
text-align center
padding 0
@ -49,6 +49,6 @@
.rdiv
float right
width 30%
height 100%
// height 100%
position inherit
text-align right

95
static/templates/advanced-grid.html
View file

@ -1,95 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>{NAME} v{VERSION} - Selection Grid Demo</title>
<!-- @import partials/style.html -->
</head>
<body>
<h1>{NAME} v{VERSION}</h1>
<h2>Selection grid demo</h2>
<p>
To make the grid rows selectable, you need to import the
{EZEDITTABLE_LINK} plugin, enable the <code>selection</code> property
and configure the <code>advancedGrid</code> with the {EZEDITTABLE_LINK}
options.
</p>
<p>
Instructions: Double-click on a row on or press <code>enter</code> key to
perform action. Enable multiple rows selection by checking the <b>Multiple
selection</b> checkbox. Keep <code>Ctrl/Cmd</code> or <code>Shift</code> key
pressed to select multiple rows.
</p>
<!-- @import partials/pre.html -->
<div class="ezCommandEditor">
<input onclick="var ezEditTable = tf.extension('advancedGrid')._ezEditTable;
if(this.checked){
ezEditTable.selectionModel = 'multiple';
} else {
ezEditTable.selectionModel = 'single';
}" name="chkMultipleSlc" id="chkMultipleSlc" type="checkbox">
<label for="chkMultipleSlc">Multiple selection</label>
</div>
<!-- @import partials/countries-table.html -->
<div class="ezCommandEditor">
<button onclick="alert( tf.extension('advancedGrid')._ezEditTable.Selection.GetActiveRowValues() );">Active row data</button>
<button onclick="alert( tf.extension('advancedGrid')._ezEditTable.Selection.GetSelectedValues() );">Selected rows data</button>
<button onclick="tf.extension('advancedGrid')._ezEditTable.Selection.ClearSelections();">Clear Selection</button>
</div>
<!-- @import partials/tablefilter-script.html -->
<script data-config>
var filtersConfig = {
base_path: '../dist/tablefilter/',
grid_layout: true,
alternate_rows: true,
btn_reset: true,
rows_counter: true,
loader: true,
status_bar: true,
col_1: 'select',
col_2: 'select',
col_widths: [
'150px', '85px', '70px',
'120px', '120px', '100px',
'100px', '100px', '100px'
],
paging: true,
results_per_page: ['Records: ', [10,25,50,100]],
extensions:[
{
name: 'advancedGrid',
// For the purpose of this demo, ezEditTable dependency
// is loaded from its own website which is not a CDN.
// This dependency also requires a licence therefore
// DO NOT import it in this way in your projects.
filename: 'ezEditTable_min.js',
vendor_path: 'http://edittable.free.fr/ezEditTable/',
// Once ezEditTable dependency is installed in your
// project import it by pointing to a local path:
// vendor_path: 'path/to/ezEditTable'
selection: true,
default_selection: 'both',
on_validate_row: function(o, row){
var country = o.Selection.GetActiveRowValues()[0];
alert('Chosen record: ' + country);
}
}, {
name: 'sort',
types: [
'string', 'string', 'number',
'number', 'number', 'number',
'number', 'number', 'number'
]
}
]
};
var tf = new TableFilter('demo', filtersConfig);
tf.init();
</script>
<!-- @import partials/pre-inline-script.html -->
</body>
</html>

6
static/templates/columns-visibility.html
View file

@ -32,10 +32,10 @@ var tfConfig = {
alternate_rows: true,
rows_counter: true,
btn_reset: true,
btn_reset_text: "Clear",
btn_reset_text: 'Clear',
status_bar: true,
col_1: "select",
col_2: "select",
col_1: 'select',
col_2: 'select',
/* columns visibility and sort extension */
extensions:[

1
static/templates/starter.html
View file

@ -23,6 +23,7 @@
loader: true,
status_bar: true,
mark_active_columns: true,
highlight_keywords: true,
col_number_format: [
null, null, 'US',
'US', 'US', 'US',