Skip to content

Commit f7bda65

Browse files
ChronosSFChronosSF
authored
Merge pull request #3662 from IgniteUI/gedinakova/tile-manager-sample
Adding a sample for Tile Manager
2 parents 6b51b88 + 1d35e3f commit f7bda65

10 files changed

Lines changed: 287 additions & 27 deletions

File tree

‎live-editing/configs/TileManagerConfigGenerator.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Config, IConfigGenerator} from 'igniteui-live-editing'
2+
import { BaseAppConfig } from './BaseConfig';
3+
export class TileManagerConfigGenerator implements IConfigGenerator {
4+
5+
6+
public generateConfigs(): Config[] {
7+
const configs = new Array<Config>();
8+
9+
configs.push(new Config({
10+
component: 'TileManagerComponent',
11+
additionalDependencies: ["igniteui-webcomponents"],
12+
appConfig: BaseAppConfig,
13+
shortenComponentPathBy: "/layouts/tile-manager/"
14+
}));
15+
16+
return configs;
17+
}
18+
}

‎live-editing/generators/ConfigGenerators.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ import { StepperConfigGenerator } from '../configs/StepperConfigGenerator';
6363
import { PaginationConfigGenerator } from '../configs/PaginationConfigGenerator';
6464
import { PivotGridConfigGenerator } from '../configs/PivotGridConfigGenerator';
6565
import { QueryBuilderConfigGenerator } from '../configs/QueryBuilderConfigGenerator';
66+
import { TileManagerConfigGenerator } from '../configs/TileManagerConfigGenerator';
6667

6768
export const CONFIG_GENERATORS =
6869
[
@@ -136,6 +137,7 @@ export const CONFIG_GENERATORS =
136137
TransactionsConfigGenerator,
137138
SplitterConfigGenerator,
138139
DockManagerConfigGenerator,
140+
TileManagerConfigGenerator,
139141
PaginationConfigGenerator,
140142
QueryBuilderConfigGenerator
141143
];

‎package-lock.json‎

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

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,14 +71,14 @@
7171
"express": "^4.18.2",
7272
"file-saver": "^2.0.2",
7373
"hammerjs": "^2.0.8",
74-
"igniteui-angular": "19.1.3",
74+
"igniteui-angular": "19.1.4",
7575
"igniteui-angular-charts": "^19.0.1",
7676
"igniteui-angular-core": "^19.0.1",
7777
"igniteui-angular-extras": "^19.1.2",
78-
"igniteui-angular-i18n": "^19.1.0",
78+
"igniteui-angular-i18n": "^19.1.4",
7979
"igniteui-dockmanager": "^1.16.0",
80-
"igniteui-live-editing": "^3.0.0",
81-
"igniteui-webcomponents": "^5.2.4",
80+
"igniteui-live-editing": "^3.0.2",
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: 6 additions & 0 deletions
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'
387+
},
388+
{
389+
component: TileManagerComponent,
390+
data: layoutsRoutesData['tile-manager-sample'],
391+
path: 'tile-manager-sample'
386392
}
387393
];

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

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

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
igc-tile-manager {
2+
margin-bottom: 5px;
3+
}
4+
5+
.group {
6+
display: flex;
7+
flex-direction: row;
8+
flex-wrap: wrap;
9+
margin-top: 15px;
10+
}
11+
12+
.card {
13+
min-height: 30px;
14+
min-width: 250px;
15+
max-width: 320px;
16+
margin: 0 15px 15px 15px
17+
}
18+
19+
igx-card-content {
20+
color: var(--content-text-color);
21+
}
22+
23+
.body-content {
24+
width: 100%;
25+
display: flex;
26+
flex-direction: row;
27+
justify-content: space-between;
28+
align-items: center;
29+
}
30+
31+
.string {
32+
text-align: center;
33+
margin-top: 50px;
34+
color: var(--ig-gray-800);
35+
}
36+
37+
.sample {
38+
overflow: auto;
39+
}
40+
.content {
41+
display: flex;
42+
justify-content: space-between;
43+
}

0 commit comments

Comments
 (0)