Restyled extensions

demos/columns-visibility.html

@@ -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_1: 'select',
-    col_2: "select",
+    col_2: 'select',
 
     /* columns visibility and sort extension */
     extensions:[

dist/starter.html

@@ -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',

dist/tablefilter/style/colsVisibility.css

@@ -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;

dist/tablefilter/style/filtersVisibility.css

@@ -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;
+  padding: 8px 11px 11px 11px;
-  border: 0;
-  padding: 1px 1px 1px 1px;
-  margin: 1px 1px 1px 1px;
-}
-.btnExpClpFlt {
-  margin: 0 5px 0 5px;
 }

dist/tablefilter/style/tablefilter.css

@@ -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;
+  padding: 8px 15px 0 15px;
-  border-left: 1px solid #f4f4f4;
-  border-right: 1px solid #f4f4f4;
   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;
 }

dist/tablefilter/style/themes/default/default.css

@@ -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  
  */ 
 /**

dist/tablefilter/style/themes/mytheme/mytheme.css

@@ -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  
  */ 
 /**

dist/tablefilter/style/themes/skyblue/skyblue.css

@@ -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  
  */ 
 /**

static/style/config.styl

@@ -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

static/style/extensions/colsVisibility.styl

@@ -2,6 +2,7 @@
  * ColsVisibility extension default style
  */
 
+@import '../config'
 @import '../mixins/arrow'
 @import '../mixins/box-shadow'
 
@@ -13,7 +14,11 @@ span.colVisSpan
 
     // 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

static/style/extensions/filtersVisibility.styl

@@ -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
+        :hover
-span.expClpFlt img
+            background-color    $toolbar-hover-color
-    vertical-align          middle
-    border                  0
-    padding                 1px 1px 1px 1px
-    margin                  1px 1px 1px 1px
 
-// button
+    img
-.btnExpClpFlt
+        padding                 8px 11px 11px 11px
-    margin                  0 5px 0 5px

static/style/help.styl

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

static/style/keyword.styl

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

static/style/reset-button.styl

@@ -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
+        background-color    $toolbar-hover-color
-        border-radius       3px

static/style/rows-counter.styl

@@ -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

static/style/status-bar.styl

@@ -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

static/style/toolbar.styl

@@ -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

static/templates/advanced-grid.html

@@ -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>

static/templates/columns-visibility.html

@@ -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_1: 'select',
-    col_2: "select",
+    col_2: 'select',
 
     /* columns visibility and sort extension */
     extensions:[

static/templates/starter.html

@@ -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',