Skip to content

Commit 7d9a645

Browse files
sa-si-devsa-si-dev
committed
features update
1 parent 7ca4a7c commit 7d9a645

13 files changed

Lines changed: 217 additions & 51 deletions

‎src/config/config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const config = {
2-
GridCoreVersion: 'v1.0.0',
2+
GridCoreVersion: 'v1.0.1',
33

44
headerHeight: '60px',
55
filtersTagsHeight: '50px',

‎src/grid-core.js‎

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export class GridCoreComponent {
2020
* @property {boolean} [showFilters=false] - Show filters button to open filters
2121
* @property {boolean} [showSettings=false] - Show settings button to customize columns
2222
* @property {boolean} [showSerialNumberCol=false] - Show serial number column
23+
* @property {string} [theme=light] - Default available themes are light and dark. But you could define custom themes and use here.
24+
* @property {string} [language=default] - Language name to get i18n text
2325
* @property {string} [tooltipFontSize=14px] - Font size for tooltip
2426
* @property {string} [tooltipAlignment=center] - CSS Text alignment for tooltip
2527
* @property {string} [tooltipEnterDelay=300] - Delay time before showing tooltip (in milliseconds)
@@ -78,7 +80,7 @@ export class GridCoreComponent {
7880

7981
/** render methods - start */
8082
render() {
81-
let html = `<div class="grid-comp-wrapper" data-unique-id="${this.uniqueId}">
83+
let html = `<div class="grid-comp-wrapper grid-comp-theme-${this.theme}" data-unique-id="${this.uniqueId}">
8284
<div class="grid-comp-header grid-comp-hide"></div>
8385
8486
<div class="grid-comp-filters-tags-wrapper">
@@ -1417,6 +1419,8 @@ export class GridCoreComponent {
14171419
this.perPageOptions = options.perPageOptions;
14181420
this.uniqueKey = options.uniqueKey;
14191421
this.apiUrl = options.apiUrl;
1422+
this.theme = options.theme.toLowerCase();
1423+
this.language = options.language.toLowerCase();
14201424
this.scrollableContent = convertToBoolean(options.scrollableContent);
14211425
this.rowsFromServer = convertToBoolean(options.rowsFromServer);
14221426
this.resizable = convertToBoolean(options.resizable);
@@ -1461,6 +1465,8 @@ export class GridCoreComponent {
14611465
disableLocalstorage: false,
14621466
showSerialNumberCol: false,
14631467
perPageOptions: [25, 50, 100],
1468+
theme: 'light',
1469+
language: 'default',
14641470
tooltipFontSize: '14px',
14651471
tooltipAlignment: 'center',
14661472
tooltipEnterDelay: 200,
@@ -1485,6 +1491,8 @@ export class GridCoreComponent {
14851491
'data-show-settings': 'showSettings',
14861492
'data-disable-localstorage': 'disableLocalstorage',
14871493
'data-show-serial-number-col': 'showSerialNumberCol',
1494+
'data-theme': 'theme',
1495+
'data-language': 'default',
14881496
'data-tooltip-font-size': 'tooltipFontSize',
14891497
'data-tooltip-alignment': 'tooltipAlignment',
14901498
'data-tooltip-enter-delay': 'tooltipEnterDelay',
@@ -1505,7 +1513,14 @@ export class GridCoreComponent {
15051513
}
15061514

15071515
setI18n() {
1508-
this.i18nData = i18n['default'];
1516+
let language = this.language;
1517+
let i18nData = Object.assign({}, i18n.default);
1518+
1519+
if (language !== 'default') {
1520+
i18nData = Object.assign(i18nData, i18n[language]);
1521+
}
1522+
1523+
this.i18nData = i18nData;
15091524
}
15101525

15111526
setColumns(columns = []) {
@@ -1815,6 +1830,20 @@ export class GridCoreComponent {
18151830
DomUtils.toggleClass(this.$wrapper, 'has-left-column', hasLeftColumn);
18161831
DomUtils.toggleClass(this.$wrapper, 'has-right-column', hasRightColumn);
18171832
}
1833+
1834+
setTheme(themeName) {
1835+
if (!themeName) {
1836+
return;
1837+
}
1838+
1839+
themeName = themeName.toLowerCase();
1840+
let oldThemeClass = 'grid-comp-theme-' + this.theme;
1841+
let themeClass = 'grid-comp-theme-' + themeName;
1842+
this.theme = themeName;
1843+
1844+
DomUtils.removeClass(this.$wrapper, oldThemeClass);
1845+
DomUtils.addClass(this.$wrapper, themeClass);
1846+
}
18181847
/** set methods - end */
18191848

18201849
/** get methods - start */
@@ -1865,6 +1894,7 @@ export class GridCoreComponent {
18651894
'data-tooltip-alignment': this.tooltipAlignment,
18661895
'data-tooltip-ellipsis-only': ellipsisOnly,
18671896
'data-tooltip-allow-html': allowHtml,
1897+
'data-tooltip-additional-classes': `grid-comp-tooltip grid-comp-theme-${this.theme}`,
18681898
};
18691899

18701900
return DomUtils.getAttributesText(data);
@@ -2297,9 +2327,27 @@ export class GridCoreComponent {
22972327
return config.GridCoreVersion;
22982328
}
22992329

2300-
static onResizeMethod() {
2330+
static getAllInstances() {
2331+
let instances = [];
2332+
23012333
document.querySelectorAll('.grid-comp-wrapper').forEach(($ele) => {
2302-
$ele.gridComp.onResize();
2334+
if ($ele.gridComp) {
2335+
instances.push($ele.gridComp);
2336+
}
2337+
});
2338+
2339+
return instances;
2340+
}
2341+
2342+
static onResizeMethod() {
2343+
GridCoreComponent.getAllInstances().forEach((gridComp) => {
2344+
gridComp.onResize();
2345+
});
2346+
}
2347+
2348+
static setTheme(themeName) {
2349+
GridCoreComponent.getAllInstances().forEach((gridComp) => {
2350+
gridComp.setTheme(themeName);
23032351
});
23042352
}
23052353
/** static methods - end */

‎src/sass/partials/base.scss‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
.grid-comp-wrapper {
2+
a {
3+
color: $aTagColor;
4+
}
5+
}
6+
7+
.grid-comp-tooltip {
8+
color: $tooltipFontColor;
9+
10+
&,
11+
& .tooltip-comp-arrow::before {
12+
background-color: $tooltipBg;
13+
}
14+
}
15+
116
/* more shadow scroll - start */
217
.grid-comp-more-shadow-container {
318
position: relative;
@@ -63,7 +78,7 @@
6378
height: 20px;
6479
margin-top: -10px;
6580
color: $iconColor;
66-
background-color: $primaryBg;
81+
background-color: $inputBg;
6782
}
6883

6984
.grid-comp-input-clear-comp-container {
@@ -125,7 +140,7 @@
125140
.grid-comp-accordion-container {
126141
&.active {
127142
.grid-comp-accordion-header {
128-
background-color: $primaryColorLight;
143+
background-color: $activeBg;
129144
}
130145

131146
.grid-comp-accordion-header-icon {

‎src/sass/partials/filters.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
.grid-comp-filters-box-wrapper {
22
display: none;
3-
/* TODO - remove below line */
4-
// display: block;
53
position: fixed;
64
top: 0;
75
left: 0;
86
width: 100vw;
97
height: 100vh;
10-
background-color: $transparentBg;
8+
background-color: $popupBg;
119
z-index: $minZIndex + 6;
1210
}
1311

@@ -23,7 +21,7 @@
2321
.grid-comp-filters-box-header {
2422
display: flex;
2523
align-items: center;
26-
background-color: $secondaryBg;
24+
background-color: $popupHeaderBg;
2725
height: $filtersBoxHeaderHeight;
2826
padding: 0 $filtersBoxPadding;
2927
}
@@ -168,7 +166,8 @@
168166
height: 24px;
169167
margin: 3px 5px $filtersTagsContainerPadding 0;
170168
padding: 0 7px 0 10px;
171-
border: 1px solid $borderColorMedium;
169+
border: 1px solid $filterTagBorderColor;
170+
background-color: $filterTagBg;
172171
border-radius: 3px;
173172

174173
&.last-value {

‎src/sass/partials/form.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
font-family: $fontFamily;
33
font-size: $fontSize;
44
color: $fontColor;
5-
background-color: $primaryBg;
5+
background-color: $inputBg;
66

77
&:focus,
88
&:focus-visible {
@@ -36,7 +36,7 @@
3636
right: 1px;
3737
width: $dropdownArrowWidth;
3838
height: calc(100% - 2px);
39-
background-color: $primaryBg;
39+
background-color: $inputBg;
4040
}
4141

4242
&::after {
@@ -93,7 +93,7 @@
9393
left: 2px;
9494
width: #{$switchHeight - 4px};
9595
height: #{$switchHeight - 4px};
96-
background-color: #fff;
96+
background-color: $switchCircle;
9797
border-radius: 50%;
9898
@include prefix(transition-duration, 0.2s);
9999
}
@@ -165,7 +165,7 @@
165165
right: 0;
166166
width: $inputIconWidth;
167167
height: #{$inputHeight - 2px};
168-
background-color: $primaryBg;
168+
background-color: $inputBg;
169169
color: $primaryColor;
170170

171171
.grid-comp-icon {

‎src/sass/partials/grid.scss‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,6 @@
113113
.grid-comp-col-content {
114114
display: flex;
115115
position: relative;
116-
background-color: $primaryBg;
117116
width: 200px;
118117
}
119118

@@ -174,8 +173,7 @@
174173
background-color: $rowHoverBg;
175174
color: $rowHoverColor;
176175

177-
.grid-comp-col,
178-
.grid-comp-col-content {
176+
.grid-comp-col {
179177
background-color: $rowHoverBg;
180178
}
181179
}
@@ -218,7 +216,7 @@
218216
left: 0;
219217
width: 100%;
220218
height: calc(100% - #{$theadHeight + 2px});
221-
background-color: rgba(255, 255, 255, 0.7);
219+
background-color: $rowsLoaderBg;
222220
z-index: $minZIndex + 4;
223221

224222
&::before {
@@ -228,13 +226,19 @@
228226
opacity: 0.7;
229227
border-radius: 50%;
230228
background-color: $primaryBg;
231-
box-shadow: -4px -5px 3px -3px rgba(0, 0, 0, 0.3);
229+
box-shadow: -4px -5px 3px -3px $loaderShadowColor;
232230
@include prefix(animation, grid-comp-animation-spin 0.8s infinite linear);
233231
}
234232
}
235233

236234
.grid-comp-popover {
237235
display: none;
236+
background-color: $popoverBg;
237+
color: $fontColor;
238+
239+
.pop-comp-arrow::before {
240+
background-color: $popoverBg;
241+
}
238242
}
239243

240244
.grid-comp-wrapper {

‎src/sass/partials/header.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
}
4242

4343
&:hover {
44-
background-color: $primaryColorLight;
44+
background-color: $activeBg;
4545
}
4646

4747
&.first-child {

‎src/sass/partials/settings.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
border-bottom: 1px solid $borderColor;
3232

3333
&:hover {
34-
background-color: $primaryColorLight;
34+
background-color: $activeBg;
3535
}
3636

3737
&:last-child {
@@ -52,7 +52,7 @@
5252
width: 100%;
5353
height: $settingsPopoverFooterHeight;
5454
padding: 0 20px;
55-
background-color: $primaryBg;
55+
background-color: $popoverBg;
5656
border-top: 1px solid $borderColor;
5757

5858
.grid-comp-button {

‎src/sass/partials/themes.scss‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
.grid-comp-wrapper {
2+
--grid-comp-color-primary: #ff6400;
3+
--grid-comp-color-primary-font: #fff;
4+
--grid-comp-color-primary-bg: #fff;
5+
6+
--grid-comp-color-font: rgba(0, 0, 0, 0.8);
7+
--grid-comp-color-font-light: rgba(0, 0, 0, 0.6);
8+
--grid-comp-color-font-head: rgba(0, 0, 0, 0.6);
9+
10+
--grid-comp-color-border: #f5f5f5;
11+
--grid-comp-color-border-input: #ecedee;
12+
13+
--grid-comp-color-shadow: 0, 0, 0;
14+
--grid-comp-color-active-bg: #fff7f3;
15+
--grid-comp-color-rows-loader-bg: rgba(255, 255, 255, 0.7);
16+
--grid-comp-color-loader-shadow: rgba(0, 0, 0, 0.3);
17+
--grid-comp-color-input-bg: var(--grid-comp-color-primary-bg);
18+
--grid-comp-color-popup-bg: rgba(0, 0, 0, 0.8);
19+
--grid-comp-color-popup-header-bg: #fafafa;
20+
--grid-comp-color-popover-bg: var(--grid-comp-color-primary-bg);
21+
--grid-comp-color-switch-bg: #dbdbdb;
22+
--grid-comp-color-switch-circle: #fff;
23+
--grid-comp-color-a-tag: var(--grid-comp-color-primary);
24+
--grid-comp-color-icon: var(--grid-comp-color-font-head);
25+
--grid-comp-color-row-hover-bg: var(--grid-comp-color-active-bg);
26+
--grid-comp-color-row-hover-font: var(--grid-comp-color-primary);
27+
--grid-comp-color-resizing-line: var(--grid-comp-color-primary);
28+
--grid-comp-color-filter-tag-bg: transparent;
29+
--grid-comp-color-filter-tag-border: #e6e6e6;
30+
}
31+
32+
.grid-comp-theme-dark {
33+
--grid-comp-color-primary-bg: #202020;
34+
35+
--grid-comp-color-font: rgb(200, 200, 200);
36+
--grid-comp-color-font-light: rgba(110, 110, 110, 0.81);
37+
--grid-comp-color-font-head: rgb(125, 125, 125);
38+
39+
--grid-comp-color-border: #333;
40+
--grid-comp-color-border-input: #3e3e3e;
41+
42+
--grid-comp-color-shadow: 100, 100, 100;
43+
--grid-comp-color-active-bg: #312520;
44+
--grid-comp-color-rows-loader-bg: rgba(0, 0, 0, 0.7);
45+
--grid-comp-color-loader-shadow: rgba(255, 255, 255, 0.3);
46+
--grid-comp-color-input-bg: var(--grid-comp-color-border-input);
47+
--grid-comp-color-popup-header-bg: #232324;
48+
--grid-comp-color-popover-bg: var(--grid-comp-color-input-bg);
49+
--grid-comp-color-switch-bg: #606060;
50+
--grid-comp-color-row-hover-bg: #282828;
51+
--grid-comp-color-filter-tag-bg: var(--grid-comp-color-input-bg);
52+
--grid-comp-color-filter-tag-border: var(--grid-comp-color-input-bg);
53+
}
54+
55+
/* tooltip - start */
56+
.grid-comp-tooltip {
57+
--grid-comp-color-tooltip-bg: #212121;
58+
--grid-comp-color-tooltip-font: #fff;
59+
}
60+
61+
.grid-comp-tooltip.grid-comp-theme-dark {
62+
--grid-comp-color-tooltip-bg: #3e3e3e;
63+
--grid-comp-color-tooltip-font: rgb(200, 200, 200);
64+
}
65+
/* tooltip - end */

0 commit comments

Comments
 (0)