jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

feat(icons): Use feather icons instead of raw ascii strings

Browse Source
This commit is contained in:
Faris Ansari 2018-08-23 13:52:58 +05:30
parent 307de6ed55
commit 7531e13d17
6 changed files with 115 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
index.html
View File

File diff suppressed because one or more lines are too long

17
src/cellmanager.js
View File

@ -5,6 +5,7 @@ import {
linkProperties linkProperties
} from './utils'; } from './utils';
import $ from './dom'; import $ from './dom';
import icons from './icons';
export default class CellManager { export default class CellManager {
constructor(instance) { constructor(instance) {
@ -791,16 +792,22 @@ export default class CellManager {
if (this.options.treeView && !(isHeader || isFilter) && cell.indent !== undefined) { if (this.options.treeView && !(isHeader || isFilter) && cell.indent !== undefined) {
const nextRow = this.datamanager.getRow(cell.rowIndex + 1); const nextRow = this.datamanager.getRow(cell.rowIndex + 1);
const addToggle = nextRow && nextRow.meta.indent > cell.indent; const addToggle = nextRow && nextRow.meta.indent > cell.indent;
const leftPadding = 1; const leftPadding = 20;
const unit = 'px';
// Add toggle and indent in the first column // Add toggle and indent in the first column
const firstColumnIndex = this.datamanager.getColumnIndexById('_rowIndex') + 1; const firstColumnIndex = this.datamanager.getColumnIndexById('_rowIndex') + 1;
if (firstColumnIndex === cell.colIndex) { if (firstColumnIndex === cell.colIndex) {
const padding = ((cell.indent || 0) + 1) * leftPadding; const padding = ((cell.indent || 0)) * leftPadding;
const toggleHTML = addToggle ? const toggleHTML = addToggle ?
`<span class="dt-tree-node__toggle" style="left: ${padding - leftPadding}rem"></span>` : ''; `<span class="dt-tree-node__toggle" style="left: ${padding - leftPadding}${unit}">
contentHTML = `<span class="dt-tree-node" style="padding-left: ${padding}rem"> <span class="icon-open">${icons.chevronDown}</span>
${toggleHTML}${contentHTML}</span>`; <span class="icon-close">${icons.chevronRight}</span>
</span>` : '';
contentHTML = `<span class="dt-tree-node" style="padding-left: ${padding}${unit}">
${toggleHTML}
<span>${contentHTML}</span>
</span>`;
} }
} }

3
src/columnmanager.js
View File

@ -79,7 +79,8 @@ export default class ColumnManager {
}); });
const deactivateDropdownOnBodyClick = (e) => { const deactivateDropdownOnBodyClick = (e) => {
if (e.target.matches(toggleClass)) return; const selector = [toggleClass, toggleClass + ' *'].join(',');
if (e.target.matches(selector)) return;
deactivateDropdown(); deactivateDropdown();
}; };
$.on(document.body, 'click', deactivateDropdownOnBodyClick); $.on(document.body, 'click', deactivateDropdownOnBodyClick);

3
src/defaults.js
View File

@ -1,9 +1,10 @@
import filterRows from './filterRows'; import filterRows from './filterRows';
import icons from './icons';
export default { export default {
columns: [], columns: [],
data: [], data: [],
dropdownButton: '▼', dropdownButton: icons.chevronDown,
headerDropdown: [ headerDropdown: [
{ {
label: 'Sort Ascending', label: 'Sort Ascending',

10
src/icons.js Normal file
View File

@ -0,0 +1,10 @@
/* eslint-disable max-len */
// Icons from https://feathericons.com/
let icons = {
chevronDown: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>',
chevronRight: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>'
};
export default icons;

32
src/style.css
View File

@ -151,12 +151,29 @@
} }
&--tree-close { &--tree-close {
.dt-tree-node__toggle:before { .icon-open {
content: '►'; display: none;
}
.icon-close {
display: flex;
} }
} }
} }
.icon-open, .icon-close {
width: 16px;
height: 16px;
}
.icon-open {
display: flex;
}
.icon-close {
display: none;
}
.dt-dropdown { .dt-dropdown {
position: absolute; position: absolute;
right: 10px; right: 10px;
@ -198,19 +215,14 @@
} }
.dt-tree-node { .dt-tree-node {
display: inline-block; display: flex;
align-items: center;
position: relative; position: relative;
&__toggle { &__toggle {
display: inline-block; display: inline-block;
position: absolute;
font-size: 10px;
padding: 2px;
cursor: pointer; cursor: pointer;
} margin-right: 0.2rem;
&__toggle:before {
content: '▼';
} }
} }