Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

Commit befa555

Browse files
ghiscodingghiscoding
authored
Merge pull request #727 from ghiscoding/feat/bootstrap4
chore: update internals to Bootstrap 4
2 parents 3a2e899 + e2f9482 commit befa555

40 files changed

+569
-390
lines changed

‎README.md‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,16 @@ One of the best javascript datagrid [SlickGrid](https://github.com/mleibman/Slic
2424
You like and use **Angular-Slickgrid**? Be sure to upvote :star: and feel free to contribute. :construction_worker:
2525

2626
### Like my work?
27-
If you like my work, you can also support me with caffeine :coffee:
28-
[Buy Me a Coffee](https://ko-fi.com/N4N679OT)
27+
If you like my work, you can also support me with caffeine
28+
<br/>
29+
<a href='https://ko-fi.com/N4N679OT'
30+
target='_blank'>
31+
<img height='25'
32+
style='border:0px;height:30px;'
33+
src='https://az743702.vo.msecnd.net/cdn/kofi2.png?v=0'
34+
border='0'
35+
alt='Buy Me a Coffee at ko-fi.com' />
36+
</a>
2937

3038
I certainly drank many coffees to build and keep adding features for this great library.
3139

@@ -38,9 +46,6 @@ Check out the [Releases](https://github.com/ghiscoding/Angular-Slickgrid/release
3846
- version `2.x.x` for Angular 7+
3947
- since version `2.11.0`, you can also change your build `target` to `ES2015` for modern browser.
4048

41-
### Note on RxJS
42-
Please note that RxJS is fixed at version `6.3.3` and will certainly not work with version `7.0.0`. Why you might ask? Because they made structurale changes in version `6.4.0` which would impact anyone using Angular-Slickgrid that haven't upgraded and for that reason the version used by the lib is fixed at `6.3.3`. Also note that I will not release a major version of Angular-Slickgrid just to support RxJS 7 (which is still in Beta), a major version of Angular-Slickgrid is many months away.
43-
4449
### ngx-translate Compatibility
4550

4651
If you are facing any issues with `ngx-translate` library while building your Angular Project. You need to make sure that `@ngx-translate/core` is part of your dependencies, that is also true even if you just use a single Locale, because it is a `peerDependency` of Angular-Slickgrid. We use `@Optional() TranslateService` in the lib and for that to work, we still need it to be installed, but don't worry it should be removed by tree shaking process after a running a build. See their version compatibility table below

‎package.json‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -120,29 +120,29 @@
120120
"devDependencies": {
121121
"@angular-builders/jest": "^7.4.4",
122122
"@angular-devkit/build-angular": "~0.1102.5",
123-
"@angular/animations": "^11.2.6",
124-
"@angular/cli": "^11.2.5",
125-
"@angular/common": "^11.2.6",
126-
"@angular/compiler": "^11.2.6",
127-
"@angular/compiler-cli": "^11.2.6",
128-
"@angular/core": "^11.2.6",
129-
"@angular/forms": "^11.2.6",
130-
"@angular/language-service": "^11.2.6",
131-
"@angular/platform-browser": "^11.2.6",
132-
"@angular/platform-browser-dynamic": "^11.2.6",
133-
"@angular/router": "^11.2.6",
123+
"@angular/animations": "^11.2.8",
124+
"@angular/cli": "^11.2.7",
125+
"@angular/common": "^11.2.8",
126+
"@angular/compiler": "^11.2.8",
127+
"@angular/compiler-cli": "^11.2.8",
128+
"@angular/core": "^11.2.8",
129+
"@angular/forms": "^11.2.8",
130+
"@angular/language-service": "^11.2.8",
131+
"@angular/platform-browser": "^11.2.8",
132+
"@angular/platform-browser-dynamic": "^11.2.8",
133+
"@angular/router": "^11.2.8",
134134
"@ng-select/ng-select": "^6.1.0",
135135
"@ngx-translate/core": "^13.0.0",
136136
"@ngx-translate/http-loader": "^6.0.0",
137137
"@types/dompurify": "^2.2.1",
138138
"@types/flatpickr": "^3.1.2",
139139
"@types/jest": "^24.0.25",
140140
"@types/moment": "^2.13.0",
141-
"@types/node": "^14.14.34",
141+
"@types/node": "^14.14.37",
142142
"@types/text-encoding-utf-8": "^1.0.1",
143143
"autoprefixer": "^10.2.5",
144144
"babel-jest": "^24.9.0",
145-
"bootstrap": "3.4.1",
145+
"bootstrap": "^4.6.0",
146146
"codecov": "^3.8.1",
147147
"codelyzer": "^6.0.1",
148148
"conventional-changelog": "^3.1.24",
@@ -165,18 +165,16 @@
165165
"ngx-bootstrap": "^6.2.0",
166166
"node-sass": "5.0.0",
167167
"npm-run-all": "^4.1.5",
168-
"postcss": "^8.2.8",
168+
"postcss": "^8.2.9",
169169
"postcss-cli": "^8.3.1",
170170
"require-dir": "^1.2.0",
171171
"rimraf": "^3.0.2",
172172
"run-sequence": "^2.2.1",
173173
"standard-version": "^9.1.1",
174174
"ts-node": "^9.1.1",
175175
"tslib": "^2.1.0",
176-
"tslint": "~6.1.0",
176+
"tslint": "~6.1.3",
177177
"typescript": "4.0.7",
178-
"uglify-js": "^3.13.2",
179-
"vinyl-paths": "^2.1.0",
180178
"yargs": "^16.2.0",
181179
"zone.js": "~0.10.2"
182180
}

‎src/app/app.component.html‎

Lines changed: 91 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
2-
<div class="navbar-header">
3-
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" menu-collapse>
4-
<span class="icon-bar"></span>
5-
<span class="icon-bar"></span>
6-
<span class="icon-bar"></span>
7-
</button>
8-
<a class="navbar-brand" href="https://github.com/ghiscoding/Angular-Slickgrid">
9-
<i class="fa fa-github"></i>
10-
<span>{{title}}</span>
11-
</a>
12-
<span class="github-button-container">
13-
<a href="https://github.com/ghiscoding/angular-slickgrid">
14-
<img src="https://img.shields.io/github/stars/ghiscoding/angular-slickgrid?style=social">
15-
</a>
16-
</span>
17-
</div>
18-
<div class="navbar-collapse collapse">
19-
<ul class="nav navbar-nav">
1+
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
2+
<a class="navbar-brand" href="https://github.com/ghiscoding/Angular-Slickgrid">
3+
<i class="fa fa-github"></i>
4+
<span>{{title}}</span>
5+
</a>
6+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"
7+
aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
8+
<span class="navbar-toggler-icon"></span>
9+
</button>
10+
11+
<div class="navbar-collapse collapse" id="navbarContent">
12+
<ul class="navbar-nav mr-auto">
2013
<li>
21-
<a [routerLink]="['/home']">
14+
<span class="github-button-container">
15+
<a href="https://github.com/ghiscoding/angular-slickgrid">
16+
<img src="https://img.shields.io/github/stars/ghiscoding/angular-slickgrid?style=social">
17+
</a>
18+
</span>
19+
</li>
20+
<li class="nav-item">
21+
<a class="nav-link" [routerLink]="['/home']">
2222
<i class="fa fa-lg fa-home"></i> Home
2323
</a>
2424
</li>
@@ -29,93 +29,104 @@
2929
<div class="container-fluid">
3030
<div class="panel-wm">
3131
<section id="panel-left" class="panel-wm-left">
32-
<ul class="nav nav-pills nav-stacked">
33-
<li routerLinkActive="active">
34-
<a [routerLink]="['/basic']">1- Basic Grid / 2 Grids</a>
32+
<ul class="well nav nav-pills nav-stacked">
33+
<li class="nav-item">
34+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/basic']">1- Basic Grid / 2 Grids</a>
3535
</li>
36-
<li routerLinkActive="active">
37-
<a [routerLink]="['/formatter']">2- Formatters</a>
36+
<li class="nav-item">
37+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/formatter']">2- Formatters</a>
3838
</li>
39-
<li routerLinkActive="active">
40-
<a [routerLink]="['/editor']">3- Editors</a>
39+
<li class="nav-item">
40+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/editor']">3- Editors</a>
4141
</li>
42-
<li routerLinkActive="active">
43-
<a [routerLink]="['/clientside']">4- Client Side Sort/Filter</a>
42+
<li class="nav-item">
43+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/clientside']">4- Client Side Sort/Filter</a>
4444
</li>
45-
<li routerLinkActive="active">
46-
<a [routerLink]="['/odata']">5- Backend Server with OData</a>
45+
<li class="nav-item">
46+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/odata']">5- Backend Server with OData</a>
4747
</li>
48-
<li routerLinkActive="active">
49-
<a [routerLink]="['/gridgraphql']">6- Backend Server with GraphQL</a>
48+
<li class="nav-item">
49+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/gridgraphql']">6- Backend Server with
50+
GraphQL</a>
5051
</li>
51-
<li routerLinkActive="active">
52-
<a [routerLink]="['/headerbutton']">7- Header Button Plugin</a>
52+
<li class="nav-item">
53+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/headerbutton']">7- Header Button Plugin</a>
5354
</li>
54-
<li routerLinkActive="active">
55-
<a [routerLink]="['/headermenu']">8- Header Menu Plugin</a>
55+
<li class="nav-item">
56+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/headermenu']">8- Header Menu Plugin</a>
5657
</li>
57-
<li routerLinkActive="active">
58-
<a [routerLink]="['/gridmenu']">9- Grid Menu (hamburger menu)</a>
58+
<li class="nav-item">
59+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/gridmenu']">9- Grid Menu (hamburger menu)</a>
5960
</li>
60-
<li routerLinkActive="active">
61-
<a [routerLink]="['/selection']">10- Row Selection / 2 Grids</a>
61+
<li class="nav-item">
62+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/selection']">10- Row Selection / 2 Grids</a>
6263
</li>
63-
<li routerLinkActive="active">
64-
<a [routerLink]="['/additem']">11- Add/Update Grid Item</a>
64+
<li class="nav-item">
65+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/additem']">11- Add/Update/Highlight Datagrid
66+
Item</a>
6567
</li>
66-
<li routerLinkActive="active">
67-
<a [routerLink]="['/localization']">12- Localization (i18n)</a>
68+
<li class="nav-item">
69+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/localization']">12- Localization (i18n)</a>
6870
</li>
69-
<li routerLinkActive="active">
70-
<a [routerLink]="['/swt']">13- Backend Server Custom Paging</a>
71+
<li class="nav-item">
72+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/swt']">13- Backend Server Custom Paging</a>
7173
</li>
72-
<li routerLinkActive="active">
73-
<a [routerLink]="['/grouping']">14- Grouping &amp; Aggregator</a>
74+
<li class="nav-item">
75+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/grouping']">14- Grouping &amp; Aggregator</a>
7476
</li>
75-
<li routerLinkActive="active">
76-
<a [routerLink]="['/colspan']">15- Column Span</a>
77+
<li class="nav-item">
78+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/colspan']">15- Column Span</a>
7779
</li>
78-
<li routerLinkActive="active">
79-
<a [routerLink]="['/gridstate']">16- Grid State &amp; Local Storage</a>
80+
<li class="nav-item">
81+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/gridstate']">16- Grid State &amp; Local
82+
Storage</a>
8083
</li>
81-
<li routerLinkActive="active">
82-
<a [routerLink]="['/rowmove']">17- Row Move</a>
84+
<li class="nav-item">
85+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/rowmove']">17- Row Move</a>
8386
</li>
84-
<li routerLinkActive="active">
85-
<a [routerLink]="['/remote']">18- Remote Model</a>
87+
<li class="nav-item">
88+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/remote']">18- Remote Model</a>
8689
</li>
87-
<li routerLinkActive="active">
88-
<a [routerLink]="['/draggrouping']">19- Draggable Grouping</a>
90+
<li class="nav-item">
91+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/draggrouping']">19- Draggable Grouping</a>
8992
</li>
90-
<li routerLinkActive="active">
91-
<a [routerLink]="['/frozen']">20- Pinned Columns/Rows</a>
93+
<li class="nav-item">
94+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/frozen']">20- Frozen Columns/Rows</a>
9295
</li>
93-
<li routerLinkActive="active">
94-
<a [routerLink]="['/rowdetail']">21- Row Detail View</a>
96+
<li class="nav-item">
97+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/rowdetail']">21- Row Detail View</a>
9598
</li>
96-
<li routerLinkActive="active">
97-
<a [routerLink]="['/angular-components']">22- Use of Angular Components</a>
99+
<li class="nav-item">
100+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/angular-components']">22- Use of Angular
101+
Components</a>
98102
</li>
99-
<li routerLinkActive="active">
100-
<a [routerLink]="['/autoheight']">23- Grid AutoHeight (full height)</a>
103+
<li class="nav-item">
104+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/autoheight']">23- Grid AutoHeight (full
105+
height)</a>
101106
</li>
102-
<li routerLinkActive="active">
103-
<a [routerLink]="['/gridtabs']">24- within Bootstrap Tabs</a>
107+
<li class="nav-item">
108+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/gridtabs']">24- within Bootstrap Tabs</a>
104109
</li>
105-
<li routerLinkActive="active">
106-
<a [routerLink]="['/range']">25- Filter by Range of Values</a>
110+
<li class="nav-item">
111+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/range']">25- Filter by Range of Values</a>
107112
</li>
108-
<li routerLinkActive="active">
109-
<a [routerLink]="['/context']">26- Cell & Context Menu</a>
113+
<li class="nav-item">
114+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/context']">26- Cell & Context Menu</a>
110115
</li>
111-
<li routerLinkActive="active">
112-
<a [routerLink]="['/graphql-nopage']">27- GraphQL without Pagination</a>
116+
<li class="nav-item">
117+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/graphql-nopage']">
118+
27- GraphQL without Pagination
119+
</a>
113120
</li>
114-
<li routerLinkActive="active">
115-
<a [routerLink]="['/tree-data-parent-child']">28- Tree Data (Parent/Child)</a>
121+
<li class="nav-item">
122+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/tree-data-parent-child']">
123+
28- Tree Data (Parent/Child)
124+
</a>
116125
</li>
117-
<li routerLinkActive="active">
118-
<a [routerLink]="['/tree-data-hierarchical']">29- Tree Data (Hierarchical)</a>
126+
<li class="nav-item">
127+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/tree-data-hierarchical']">
128+
29- Tree Data (Hierarchical)
129+
</a>
119130
</li>
120131
</ul>
121132
</section>
@@ -126,4 +137,4 @@
126137
</div>
127138
</section>
128139
</div>
129-
</div>
140+
</div>

‎src/app/app.component.scss‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
$navbar-height: 50px;
1+
$navbar-height: 56px;
22
$side-menu-width: 250px;
33

4+
.body-content {
5+
margin-top: $navbar-height;
6+
}
47
.lightblue {
58
color: lightblue;
69
}
@@ -13,14 +16,15 @@ $side-menu-width: 250px;
1316
.faded:hover {
1417
opacity: 0.5;
1518
}
16-
.btn:focus, .btn:active:focus, .btn.active:focus {
17-
outline: 0 none;
19+
20+
section {
21+
margin: 0;
1822
}
1923

2024
/** Sidebar (left) and Content (right) */
2125
@media (min-width: 1200px) {
2226
.panel-wm-content .container {
23-
width: calc(1170px - #{$side-menu-width});
27+
width: calc(1170px - #{$side-menu-width});
2428
}
2529
}
2630

@@ -29,6 +33,10 @@ $side-menu-width: 250px;
2933

3034
.nav-stacked {
3135
padding-bottom: 30px;
36+
37+
.nav-item {
38+
width: 100%;
39+
}
3240
}
3341

3442
.nav > li > a {

0 commit comments

Comments
 (0)