Skip to content

Commit 9378508

Browse files
gedinakovagedinakova
committed
feat(*): Add Tile Manager sample
1 parent 6b51b88 commit 9378508

7 files changed

Lines changed: 205 additions & 8 deletions

File tree

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
"igniteui-angular-i18n": "^19.1.0",
7979
"igniteui-dockmanager": "^1.16.0",
8080
"igniteui-live-editing": "^3.0.0",
81-
"igniteui-webcomponents": "^5.2.4",
81+
"igniteui-webcomponents": "^5.3.0",
8282
"minireset.css": "0.0.6",
8383
"rxjs": "^7.8.2",
8484
"tslib": "^2.6.1",

‎src/app/layouts/layouts-routes-data.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,5 +60,6 @@ export const layoutsRoutesData = {
6060
'divider-sample-1': { displayName: 'Default Divider', parentName: 'Divider' },
6161
'divider-sample-2': { displayName: 'Vertical Divider', parentName: 'Divider' },
6262
'divider-sample-3': { displayName: 'Dashed Divider', parentName: 'Divider' },
63-
'divider-sample-4': { displayName: 'Inset Divider', parentName: 'Divider' }
64-
};
63+
'divider-sample-4': { displayName: 'Inset Divider', parentName: 'Divider' },
64+
'tile-manager-sample': { displayName: 'Tile Manager Overview', parentName: 'Tile Manager' }
65+
}

‎src/app/layouts/layouts.routes.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ import { StepperStepTypesSampleComponent } from './stepper/stepper-steptypes-sam
7676
import { StepperStylingSampleComponent } from './stepper/stepper-styling-sample/stepper-styling-sample.component';
7777
import { StepperOverviewSampleComponent } from './stepper/stepper-overview-sample/stepper-overview-sample.component';
7878
import { StepperSampleReactiveFormsComponent } from './stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component';
79+
import { TileManagerComponent } from './tile-manager/tile-manager-sample/tile-manager.component';
7980

8081
export const LayoutsRoutes: Routes = [
8182
{
@@ -383,5 +384,10 @@ export const LayoutsRoutes: Routes = [
383384
component: CardStylingSampleComponent,
384385
data: layoutsRoutesData['card-styling-sample'],
385386
path: 'card-styling-sample'
386-
}
387+
},
388+
{
389+
component: TileManagerComponent,
390+
data: layoutsRoutesData['tile-manager-sample'],
391+
path: 'tile-manager-sample'
392+
},
387393
];

‎src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.html‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<igc-tile-manager id="tile-manager1" column-count="3" gap="20px" resize-mode="always" drag-mode="'tile-header">
2+
3+
<igc-tile row-span="3">
4+
5+
<h3 slot="title">Order info</h3>
6+
<igc-list class="list">
7+
<igc-list-item>
8+
<igc-avatar slot="start" shape="circle" class="avatar">
9+
<igc-icon name="list" collection="material" class="material-icons"></igc-icon>
10+
</igc-avatar>
11+
<div slot="title" class="content">
12+
<p>OrderID</p>
13+
<p>10293</p>
14+
</div>
15+
</igc-list-item>
16+
<igc-list-item>
17+
<igc-avatar slot="start" shape="circle" class="avatar">
18+
<igc-icon name="list" collection="material" class="material-icons"></igc-icon>
19+
</igc-avatar>
20+
<div slot="title" class="content">
21+
<p>Customer Name</p>
22+
<p>Tortuga Restaurante</p>
23+
</div>
24+
</igc-list-item>
25+
<igc-list-item>
26+
<igc-avatar slot="start" shape="circle" class="avatar">
27+
<igc-icon name="calendar" collection="material" class="material-icons"></igc-icon>
28+
</igc-avatar>
29+
<div slot="title" class="content">
30+
<p>Order Date</p>
31+
<p>August 29, 1996</p>
32+
</div>
33+
</igc-list-item>
34+
<igc-list-item>
35+
<igc-avatar slot="start" shape="circle" class="avatar">
36+
<igc-icon name="calendar" collection="material" class="material-icons"></igc-icon>
37+
</igc-avatar>
38+
<div slot="title" class="content">
39+
<p>Shipped Date</p>
40+
<p>September 11, 1996</p>
41+
</div>
42+
</igc-list-item>
43+
<igc-list-item>
44+
<igc-avatar slot="start" shape="circle" class="avatar">
45+
<igc-icon name="list" collection="material" class="material-icons"></igc-icon>
46+
</igc-avatar>
47+
<div slot="title" class="content">
48+
<p>Product Name</p>
49+
<p>Carnavon Tigers</p>
50+
</div>
51+
</igc-list-item>
52+
<igc-list-item>
53+
<igc-avatar slot="start" shape="circle" class="avatar">
54+
<igc-icon name="list" collection="material" class="material-icons"></igc-icon>
55+
</igc-avatar>
56+
<div slot="title" class="content">
57+
<p>Ship Country</p>
58+
<p>Mexico</p>
59+
</div>
60+
</igc-list-item>
61+
</igc-list>
62+
</igc-tile>
63+
<igc-tile col-span="2" row-span="2">
64+
65+
<h3 slot="title">Order Line Items</h3>
66+
<div class="group">
67+
<igc-card class="card">
68+
<div class="group_1">
69+
<igc-card-header>
70+
<div slot="thumbnail">
71+
<igc-avatar shape="circle">
72+
<igc-icon name="product" collection="material" class="material-icons"></igc-icon>
73+
</igc-avatar>
74+
</div>
75+
<h3 slot="title">Carnavon Tigers</h3>
76+
</igc-card-header>
77+
<igc-card-content class="column">
78+
<div class="body-content">
79+
<span>Quantity</span> <span>12</span>
80+
</div>
81+
<div class="body-content">
82+
<span>Unit Price</span> <span>$50</span>
83+
</div>
84+
</igc-card-content>
85+
</div>
86+
</igc-card>
87+
<igc-card class="card">
88+
<div class="group_1">
89+
<igc-card-header>
90+
<div slot="thumbnail">
91+
<igc-avatar shape="circle">
92+
<igc-icon name="product" collection="material" class="material-icons"></igc-icon>
93+
</igc-avatar>
94+
</div>
95+
<h3 slot="title">Guarana Fantastica</h3>
96+
</igc-card-header>
97+
<igc-card-content class="column">
98+
<div class="body-content">
99+
<span>Quantity</span> <span>10</span>
100+
</div>
101+
<div class="body-content">
102+
<span>Unit Price</span> <span>$4</span>
103+
</div>
104+
</igc-card-content>
105+
</div>
106+
</igc-card>
107+
<igc-card class="card">
108+
<div class="group_1">
109+
<igc-card-header>
110+
<div slot="thumbnail">
111+
<igc-avatar shape="circle">
112+
<igc-icon name="product" collection="material" class="material-icons"></igc-icon>
113+
</igc-avatar>
114+
</div>
115+
<h3 slot="title">Vegie-spread</h3>
116+
</igc-card-header>
117+
<igc-card-content class="column">
118+
<div class="body-content">
119+
<span>Quantity</span> <span>5</span>
120+
</div>
121+
<div class="body-content">
122+
<span>Unit Price</span> <span>$35</span>
123+
</div>
124+
</igc-card-content>
125+
</div>
126+
</igc-card>
127+
<igc-card class="card">
128+
<div class="group_1">
129+
<igc-card-header>
130+
<div slot="thumbnail">
131+
<igc-avatar shape="circle">
132+
<igc-icon name="product" collection="material" class="material-icons"></igc-icon>
133+
</igc-avatar>
134+
</div>
135+
<h3 slot="title">Rhonbrau Klosterbier</h3>
136+
</igc-card-header>
137+
<igc-card-content class="column">
138+
<div class="body-content">
139+
<span>Quantity</span> <span>7</span>
140+
</div>
141+
<div class="body-content">
142+
<span>Unit Price</span> <span>$6</span>
143+
</div>
144+
</igc-card-content>
145+
</div>
146+
</igc-card>
147+
</div>
148+
</igc-tile>
149+
<igc-tile >
150+
<h3 slot="title">Order Value</h3>
151+
<div class="string">
152+
<h1>$8.66K</h1>
153+
</div>
154+
</igc-tile>
155+
<igc-tile >
156+
<h3 slot="title">Item quantity</h3>
157+
<div class="string">
158+
<h1>4</h1>
159+
</div>
160+
</igc-tile>
161+
</igc-tile-manager>

‎src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.scss‎

Whitespace-only changes.

‎src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit} from '@angular/core';
2+
import { IgxIconService} from 'igniteui-angular';
3+
import { IgcTileManagerComponent, IgcTileComponent } from 'igniteui-webcomponents';
4+
5+
@Component({
6+
selector: 'app-tile-manager',
7+
styleUrls: ['./tile-manager.component.scss'],
8+
templateUrl: './tile-manager.component.html',
9+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
10+
imports: [IgcTileManagerComponent, IgcTileComponent]
11+
})
12+
export class TileManagerComponent implements OnInit {
13+
constructor(protected _iconService: IgxIconService) {}
14+
15+
public ngOnInit() {
16+
const listIcon =
17+
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e3e3e3"><path d="M11 7h6v2h-6zm0 4h6v2h-6zm0 4h6v2h-6zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20.1 3H3.9c-.5 0-.9.4-.9.9v16.2c0 .4.4.9.9.9h16.2c.4 0 .9-.5.9-.9V3.9c0-.5-.5-.9-.9-.9zM19 19H5V5h14v14z"/></svg>';
18+
19+
const calendarIcon =
20+
'<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e3e3e3"><path d="M19,4h-1V2h-2v2H8V2H6v2H5C3.89,4,3.01,4.9,3.01,6L3,20c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V6C21,4.9,20.1,4,19,4z M19,20 H5V10h14V20z M9,14H7v-2h2V14z M13,14h-2v-2h2V14z M17,14h-2v-2h2V14z M9,18H7v-2h2V18z M13,18h-2v-2h2V18z M17,18h-2v-2h2V18z"/></svg>'
21+
22+
const productIcon =
23+
'<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e3e3e3"><path d="M13,10h-2V8h2V10z M13,6h-2V1h2V6z M7,18c-1.1,0-1.99,0.9-1.99,2S5.9,22,7,22s2-0.9,2-2S8.1,18,7,18z M17,18 c-1.1,0-1.99,0.9-1.99,2s0.89,2,1.99,2s2-0.9,2-2S18.1,18,17,18z M8.1,13h7.45c0.75,0,1.41-0.41,1.75-1.03L21,4.96L19.25,4l-3.7,7 H8.53L4.27,2H1v2h2l3.6,7.59l-1.35,2.44C4.52,15.37,5.48,17,7,17h12v-2H7L8.1,13z"/></svg>'
24+
25+
this._iconService.addSvgIconFromText("list", listIcon, "material");
26+
this._iconService.addSvgIconFromText("calendar", calendarIcon, "material");
27+
this._iconService.addSvgIconFromText("product", productIcon, "material");
28+
}
29+
}

0 commit comments

Comments
 (0)