Skip to content

Commit 4620d0c

Browse files
ghiscodingghiscoding
committed
demo: update to latest version 3.3.0
1 parent c0f0633 commit 4620d0c

34 files changed

+1762
-27
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ Again the following dependencies are totally **OPTIONAL**
1818
| Package Name | Version | Description |
1919
| ------------ | ------- | ----------- |
2020
| [@slickgrid-universal/composite-editor-component](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/composite-editor-component) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/composite-editor-component.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/composite-editor-component) | Composite Editor Modal Component |
21+
| [@slickgrid-universal/custom-tooltip-plugin](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/custom-tooltip-plugin) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/custom-tooltip-plugin.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/custom-tooltip-plugin) | Composite Editor Modal Component |
2122
| [@slickgrid-universal/excel-export](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/excel-export) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/excel-export.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/excel-export) | Export to Excel Service (xls/xlsx) |
2223
| [@slickgrid-universal/text-export](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/text-export) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/text-export.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/text-export) | Export to Text File Service (csv/txt) |
2324
| [@slickgrid-universal/graphql](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/graphql) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/graphql.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/graphql) | GraphQL Query Service (support Filter/Sort/Pagination) |

‎bootstrap4-demo-with-locales/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ Again the following dependencies are totally **OPTIONAL**
99
| Package Name | Version | Description |
1010
| ------------ | ------- | ----------- |
1111
| [@slickgrid-universal/composite-editor-component](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/composite-editor-component) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/composite-editor-component.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/composite-editor-component) | Composite Editor Modal Component |
12+
| [@slickgrid-universal/custom-tooltip-plugin](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/custom-tooltip-plugin) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/custom-tooltip-plugin.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/custom-tooltip-plugin) | Composite Editor Modal Component |
1213
| [@slickgrid-universal/excel-export](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/excel-export) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/excel-export.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/excel-export) | Export to Excel Service (xls/xlsx) |
1314
| [@slickgrid-universal/text-export](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/text-export) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/text-export.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/text-export) | Export to Text File Service (csv/txt) |
1415
| [@slickgrid-universal/graphql](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/graphql) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/graphql.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/graphql) | GraphQL Query Service (support Filter/Sort/Pagination) |

‎bootstrap4-demo-with-locales/package.json

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,13 @@
2222
"@angular/platform-browser-dynamic": "^12.2.7",
2323
"@angular/router": "^12.2.7",
2424
"@ng-select/ng-select": "^7.3.0",
25-
"@slickgrid-universal/composite-editor-component": "^0.18.0",
26-
"@slickgrid-universal/excel-export": "^0.18.0",
27-
"@slickgrid-universal/graphql": "^0.18.0",
28-
"@slickgrid-universal/odata": "^0.18.0",
29-
"@slickgrid-universal/text-export": "^0.18.0",
30-
"angular-slickgrid": "^3.2.0",
25+
"@slickgrid-universal/composite-editor-component": "^0.19.0",
26+
"@slickgrid-universal/custom-tooltip-plugin": "^0.19.0",
27+
"@slickgrid-universal/excel-export": "^0.19.0",
28+
"@slickgrid-universal/graphql": "^0.19.0",
29+
"@slickgrid-universal/odata": "^0.19.0",
30+
"@slickgrid-universal/text-export": "^0.19.0",
31+
"angular-slickgrid": "^3.3.0",
3132
"bootstrap": "^4.6.0",
3233
"custom-event-polyfill": "^1.0.7",
3334
"font-awesome": "^4.7.0",

‎bootstrap4-demo-with-locales/src/app/app-routing.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { GridClientSideComponent } from './examples/grid-clientside.component';
88
import { GridColspanComponent } from './examples/grid-colspan.component';
99
import { GridCompositeEditorComponent } from './examples/grid-composite-editor.component';
1010
import { GridContextMenuComponent } from './examples/grid-contextmenu.component';
11+
import { GridCustomTooltipComponent } from './examples/grid-custom-tooltip.component';
1112
import { GridDraggableGroupingComponent } from './examples/grid-draggrouping.component';
1213
import { GridEditorComponent } from './examples/grid-editor.component';
1314
import { GridFormatterComponent } from './examples/grid-formatter.component';
@@ -42,6 +43,7 @@ const routes: Routes = [
4243
{ path: 'colspan', component: GridColspanComponent },
4344
{ path: 'composite-editor', component: GridCompositeEditorComponent },
4445
{ path: 'context', component: GridContextMenuComponent },
46+
{ path: 'custom-tooltip', component: GridCustomTooltipComponent },
4547
{ path: 'editor', component: GridEditorComponent },
4648
{ path: 'formatter', component: GridFormatterComponent },
4749
{ path: 'frozen', component: GridFrozenComponent },

‎bootstrap4-demo-with-locales/src/app/app.component.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,11 @@
135135
31- Resize by Cell Content
136136
</a>
137137
</li>
138+
<li class="nav-item">
139+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/custom-tooltip']">
140+
32- Regular & Custom Tooltip
141+
</a>
142+
</li>
138143
</ul>
139144
</section>
140145

‎bootstrap4-demo-with-locales/src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { GridClientSideComponent } from './examples/grid-clientside.component';
1818
import { GridColspanComponent } from './examples/grid-colspan.component';
1919
import { GridCompositeEditorComponent } from './examples/grid-composite-editor.component';
2020
import { GridContextMenuComponent } from './examples/grid-contextmenu.component';
21+
import { GridCustomTooltipComponent } from './examples/grid-custom-tooltip.component';
2122
import { GridDraggableGroupingComponent } from './examples/grid-draggrouping.component';
2223
import { GridEditorComponent } from './examples/grid-editor.component';
2324
import { GridFormatterComponent } from './examples/grid-formatter.component';
@@ -71,6 +72,7 @@ import 'flatpickr/dist/l10n/fr';
7172
GridColspanComponent,
7273
GridCompositeEditorComponent,
7374
GridContextMenuComponent,
75+
GridCustomTooltipComponent,
7476
GridEditorComponent,
7577
GridDraggableGroupingComponent,
7678
GridFormatterComponent,

‎bootstrap4-demo-with-locales/src/app/examples/grid-composite-editor.component.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import {
2323
SlickNamespace,
2424
SortComparers,
2525
} from 'angular-slickgrid';
26-
import './grid-composite-editor.component.scss';
2726

2827
const NB_ITEMS = 500;
2928
const URL_COUNTRIES_COLLECTION = 'assets/data/countries.json';

‎bootstrap4-demo-with-locales/src/app/examples/grid-custom-tooltip.component.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<div id="demo-container" class="container-fluid">
2+
<h2>
3+
{{title}}
4+
<span class="float-end">
5+
<a style="font-size: 18px"
6+
target="_blank"
7+
href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-custom-tooltip.component.ts">
8+
<span class="fa fa-link"></span> code
9+
</a>
10+
</span>
11+
</h2>
12+
<div class="subtitle" [innerHTML]="subTitle"></div>
13+
14+
<div style="margin-bottom: 20px;">
15+
<label for="pinned-rows">Simulated Server Delay (ms): </label>
16+
<input type="number" id="server-delay" data-test="server-delay" style="width: 60px" [(ngModel)]="serverApiDelay">
17+
</div>
18+
19+
<angular-slickgrid gridId="grid32"
20+
[columnDefinitions]="columnDefinitions"
21+
[gridOptions]="gridOptions"
22+
[dataset]="dataset"
23+
(onAngularGridCreated)="angularGridReady($event.detail)">
24+
</angular-slickgrid>
25+
</div>

‎bootstrap4-demo-with-locales/src/app/examples/grid-custom-tooltip.component.scss

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
2+
3+
// --
4+
// Custom Tooltips CSS Variables (or SASS equivalent)
5+
// ----------------------------------------------------
6+
// :root {
7+
// --slick-tooltip-background-color: #363636;
8+
// --slick-tooltip-border-color: #252525;
9+
// --slick-tooltip-border: 2px solid #252525;
10+
// --slick-tooltip-color: #ffffff;
11+
12+
// --slick-tooltip-arrow-color: var(--slick-tooltip-border-color);
13+
// --slick-tooltip-arrow-size: 10px;
14+
// --slick-tooltip-arrow-side-margin: 15px;
15+
// }
16+
17+
.header-tooltip-title {
18+
font-weight: bold;
19+
font-size: 14px;
20+
}
21+
.headerrow-tooltip-title {
22+
color: #AD0041;
23+
font-style: italic;
24+
font-size: 13px;
25+
font-weight: bold;
26+
}
27+
28+
// it's preferable to use CSS Variables (or SASS) but if you want to change colors of your tooltip for 1 column in particular you can do it this way
29+
// e.g. change css of 5th column 4 (zero index: l4)
30+
.l4 .header-tooltip-title,
31+
.l4 .headerrow-tooltip-title {
32+
color: #ffffff;
33+
}
34+
.l4.slick-custom-tooltip {
35+
color: #ffffff;
36+
background-color: #363636;
37+
border: 2px solid #252525;
38+
}
39+
.l4.slick-custom-tooltip.arrow-down::after,
40+
.l4.slick-custom-tooltip.arrow-up::after {
41+
border-width: 10px; // arrow size
42+
}
43+
.l4.slick-custom-tooltip.arrow-down::after {
44+
border-top-color: #252525; // arrow down color
45+
}
46+
.l4.slick-custom-tooltip.arrow-up::after {
47+
top: -20px; // arrow size * 2
48+
border-bottom-color: #252525; // arrow up color
49+
}
50+
.l4.slick-custom-tooltip.arrow-left-align::after {
51+
margin-left: 15px;
52+
}
53+
.l4.slick-custom-tooltip.arrow-right-align::after {
54+
margin-left: calc(100% - 20px - 15px); // 20px is (arrow size * 2), 15px is your extra side margin
55+
}
56+
.l6.slick-custom-tooltip.arrow-left-align::after {
57+
margin-left: 4px;
58+
}

0 commit comments

Comments
 (0)