Skip to content

Commit 2fbaad8

Browse files
gedinakovagedinakova
committed
feat(*): Polish tile manager new sample
1 parent f70440d commit 2fbaad8

4 files changed

Lines changed: 212 additions & 164 deletions

File tree

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

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

‎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+
}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit} from '@angular/core';
2-
import { IgxIconService} from 'igniteui-angular';
3-
// import { IgcTileManagerComponent, IgcTileComponent } from 'igniteui-webcomponents';
2+
import { IgxAvatarComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardThumbnailDirective, IgxIconComponent, IgxIconService, IgxListComponent, IgxListItemComponent, IgxListLineDirective, IgxListThumbnailDirective} from 'igniteui-angular';
3+
import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents';
4+
5+
defineComponents(IgcTileManagerComponent);
46

57
@Component({
68
selector: 'app-tile-manager',
79
styleUrls: ['./tile-manager.component.scss'],
810
templateUrl: './tile-manager.component.html',
11+
imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardThumbnailDirective, IgxCardContentDirective, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, IgxAvatarComponent, IgxIconComponent],
912
schemas: [CUSTOM_ELEMENTS_SCHEMA]
1013
})
1114
export class TileManagerComponent implements OnInit {

‎tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
"es2022",
1919
"dom"
2020
],
21-
"useDefineForClassFields": false
21+
"useDefineForClassFields": false,
22+
"skipLibCheck": true
2223
},
2324
"angularCompilerOptions": {
2425
"strictTemplates": true,

0 commit comments

Comments
 (0)