jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Remove css variables

Browse Source
This commit is contained in:
Faris Ansari 2017-12-11 12:08:19 +05:30
parent 344de18c41
commit a4677014da
4 changed files with 21 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@ -51,7 +51,7 @@
const smallData = false; const smallData = false;
if (!smallData) { if (!smallData) {
for (let i = 0; i < 5; i++) { for (let i = 0; i < 10; i++) {
data.rows = data.rows.concat(data.rows); data.rows = data.rows.concat(data.rows);
} }
} else { } else {
@ -60,24 +60,14 @@
console.log('No of Rows:', data.rows.length) console.log('No of Rows:', data.rows.length)
performance.mark("DataTable-start"); const start = performance.now();
var datatable = new DataTable('section', { var datatable = new DataTable('section', {
addSerialNoColumn: true, addSerialNoColumn: true,
enableClusterize: true, enableClusterize: true,
takeAvailableSpace: true, takeAvailableSpace: true,
data data
}); });
performance.mark("DataTable-end"); console.log(performance.now() - start);
performance.measure(
"DataTable",
"DataTable-start",
"DataTable-end"
);
var measures = performance.getEntriesByName("DataTable");
var measure = measures[0];
console.log(measure.duration);
window.datatable = datatable; window.datatable = datatable;
}) })

1
lib/frappe-datatable.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
src/cellmanager.js
View File

@ -224,7 +224,7 @@ export default class CellManager {
const rowHeader = $(rowHeaderSelector, this.wrapper); const rowHeader = $(rowHeaderSelector, this.wrapper);
$.style([colHeader, rowHeader], { $.style([colHeader, rowHeader], {
backgroundColor: 'var(--light-bg)' backgroundColor: '#f5f7fa' // light-bg
}); });
this.lastHeaders = [colHeader, rowHeader]; this.lastHeaders = [colHeader, rowHeader];

34
src/style.scss
View File

@ -1,11 +1,9 @@
/* variables */ /* variables */
.data-table { $border-color: #d1d8dd;
--border-color: #d1d8dd; $primary-color: rgb(82, 146, 247);
--primary-color: rgb(82, 146, 247); $light-bg: #f5f7fa;
--light-bg: #f5f7fa; $light-red: #FD8B8B;
--light-red: #FD8B8B;
}
/* resets */ /* resets */
*, *::after, *::before { *, *::after, *::before {
@ -37,7 +35,7 @@ button, input {
table td { table td {
padding: 0; padding: 0;
border: 1px solid var(--border-color); border: 1px solid $border-color;
} }
thead td { thead td {
@ -53,7 +51,7 @@ button, input {
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: var(--light-bg); background-color: $light-bg;
opacity: 0.5; opacity: 0.5;
font-size: 2em; font-size: 2em;
@ -78,10 +76,10 @@ button, input {
.body-scrollable { .body-scrollable {
max-height: 500px; max-height: 500px;
overflow: auto; overflow: auto;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid $border-color;
&.row-highlight-all .data-table-row:not(.row-unhighlight) { &.row-highlight-all .data-table-row:not(.row-unhighlight) {
background-color: var(--light-bg); background-color: $light-bg;
} }
} }
@ -103,7 +101,7 @@ button, input {
top: 0; top: 0;
width: 4px; width: 4px;
height: 100%; height: 100%;
background-color: var(--primary-color); background-color: $primary-color;
cursor: col-resize; cursor: col-resize;
} }
@ -150,18 +148,18 @@ button, input {
padding: 5px 10px; padding: 5px 10px;
&:hover { &:hover {
background-color: var(--light-bg); background-color: $light-bg;
} }
} }
} }
.data-table-col.remove-column { .data-table-col.remove-column {
background-color: var(--light-red); background-color: $light-red;
transition: 300ms background-color ease-in-out; transition: 300ms background-color ease-in-out;
} }
.data-table-col.sortable-chosen { .data-table-col.sortable-chosen {
background-color: var(--light-bg); background-color: $light-bg;
} }
} }
@ -196,7 +194,7 @@ button, input {
} }
&.selected .content { &.selected .content {
border: 2px solid var(--primary-color); border: 2px solid $primary-color;
} }
&.editing { &.editing {
@ -205,13 +203,13 @@ button, input {
} }
.edit-cell { .edit-cell {
border: 2px solid var(--primary-color); border: 2px solid $primary-color;
display: block; display: block;
} }
} }
&.highlight { &.highlight {
background-color: var(--light-bg); background-color: $light-bg;
} }
&:hover .column-resizer { &:hover .column-resizer {
@ -225,7 +223,7 @@ button, input {
.data-table-row { .data-table-row {
&.row-highlight { &.row-highlight {
background-color: var(--light-bg); background-color: $light-bg;
} }
} }