Skip to content

Adding a sample for Tile Manager #3662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 27, 2025
Merged

Adding a sample for Tile Manager #3662

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9378508
feat(*): Add Tile Manager sample
gedinakova Mar 26, 2025
f70440d
chore(*): Update igniteui-angular _ migrations
gedinakova Mar 26, 2025
2fbaad8
feat(*): Polish tile manager new sample
gedinakova Mar 26, 2025
d74669f
chore(*): Clean unnecessary divs from tile-manager sample
gedinakova Mar 26, 2025
e12b06d
fix(Tile Manager): Fixed lint error
gedinakova Mar 26, 2025
1d35e3f
fix(*): enabling live-editing for sample
ChronosSF Mar 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,14 +71,14 @@
"express": "^4.18.2",
"file-saver": "^2.0.2",
"hammerjs": "^2.0.8",
"igniteui-angular": "19.1.3",
"igniteui-angular": "19.1.4",
"igniteui-angular-charts": "^19.0.1",
"igniteui-angular-core": "^19.0.1",
"igniteui-angular-extras": "^19.1.2",
"igniteui-angular-i18n": "^19.1.0",
"igniteui-angular-i18n": "^19.1.4",
"igniteui-dockmanager": "^1.16.0",
"igniteui-live-editing": "^3.0.0",
"igniteui-webcomponents": "^5.2.4",
"igniteui-webcomponents": "^5.3.0",
"minireset.css": "0.0.6",
"rxjs": "^7.8.2",
"tslib": "^2.6.1",
Expand Down
5 changes: 3 additions & 2 deletions src/app/layouts/layouts-routes-data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,5 +60,6 @@ export const layoutsRoutesData = {
'divider-sample-1': { displayName: 'Default Divider', parentName: 'Divider' },
'divider-sample-2': { displayName: 'Vertical Divider', parentName: 'Divider' },
'divider-sample-3': { displayName: 'Dashed Divider', parentName: 'Divider' },
'divider-sample-4': { displayName: 'Inset Divider', parentName: 'Divider' }
};
'divider-sample-4': { displayName: 'Inset Divider', parentName: 'Divider' },
'tile-manager-sample': { displayName: 'Tile Manager Overview', parentName: 'Tile Manager' }
}
6 changes: 6 additions & 0 deletions src/app/layouts/layouts.routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ import { StepperStepTypesSampleComponent } from './stepper/stepper-steptypes-sam
import { StepperStylingSampleComponent } from './stepper/stepper-styling-sample/stepper-styling-sample.component';
import { StepperOverviewSampleComponent } from './stepper/stepper-overview-sample/stepper-overview-sample.component';
import { StepperSampleReactiveFormsComponent } from './stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component';
import { TileManagerComponent } from './tile-manager/tile-manager-sample/tile-manager.component';

export const LayoutsRoutes: Routes = [
{
Expand Down Expand Up @@ -383,5 +384,10 @@ export const LayoutsRoutes: Routes = [
component: CardStylingSampleComponent,
data: layoutsRoutesData['card-styling-sample'],
path: 'card-styling-sample'
},
{
component: TileManagerComponent,
data: layoutsRoutesData['tile-manager-sample'],
path: 'tile-manager-sample'
}
];
158 changes: 158 additions & 0 deletions src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
<igc-tile-manager id="tile-manager1" column-count="3" gap="20px" resize-mode="hover" drag-mode="tile-header">
<igc-tile row-span="3">
<span slot="title">Order info</span>
<igx-list>
<igx-list-item>
<igx-avatar igxListThumbnail shape="circle" >
<igx-icon igxListThumbnail name="list" collection="material" class="material-icons"></igx-icon>
</igx-avatar>
<div igxListLineTitle class="content">
<p>OrderID</p>
<p>10293</p>
</div>
</igx-list-item>
<igx-list-item>
<igx-avatar igxListThumbnail shape="circle" class="avatar">
<igx-icon name="list" collection="material" class="material-icons"></igx-icon>
</igx-avatar>
<div igxListLineTitle class="content">
<p>Customer Name</p>
<p>Tortuga Restaurante</p>
</div>
</igx-list-item>
<igx-list-item>
<igx-avatar igxListThumbnail shape="circle" class="avatar">
<igx-icon name="calendar" collection="material" class="material-icons"></igx-icon>
</igx-avatar>
<div igxListLineTitle class="content">
<p>Order Date</p>
<p>August 29, 1996</p>
</div>
</igx-list-item>
<igx-list-item>
<igx-avatar igxListThumbnail shape="circle" class="avatar">
<igx-icon name="calendar" collection="material" class="material-icons"></igx-icon>
</igx-avatar>
<div igxListLineTitle class="content">
<p>Shipped Date</p>
<p>September 11, 1996</p>
</div>
</igx-list-item>
<igx-list-item>
<igx-avatar igxListThumbnail shape="circle" class="avatar">
<igx-icon name="list" collection="material" class="material-icons"></igx-icon>
</igx-avatar>
<div igxListLineTitle class="content">
<p>Product Name</p>
<p>Carnavon Tigers</p>
</div>
</igx-list-item>
<igx-list-item>
<igx-avatar igxListThumbnail shape="circle" class="avatar">
<igx-icon name="list" collection="material" class="material-icons"></igx-icon>
</igx-avatar>
<div igxListLineTitle class="content">
<p>Ship Country</p>
<p>Mexico</p>
</div>
</igx-list-item>
</igx-list>
</igc-tile>
<igc-tile col-span="2" row-span="2">
<span slot="title">Order Line Items</span>
<div class="group">
<div class="card">
<igx-card elevated>
<igx-card-header>
<div igxCardThumbnail>
<igx-avatar shape="circle" collection="material">
<igx-icon name="product" collection="material" class="material-icons"></igx-icon>
</igx-avatar>
</div>
<h3 igxCardHeaderTitle>Carnavon Tigers</h3>
</igx-card-header>
<igx-card-content class="column">
<div class="body-content">
<span>Quantity</span><span>12</span>
</div>
<div class="body-content">
<span>Unit Price</span><span>$50</span>
</div>
</igx-card-content>
</igx-card>
</div>
<div class="card">
<igx-card elevated>
<igx-card-header>
<div igxCardThumbnail>
<igx-avatar shape="circle">
<igx-icon name="product" collection="material" class="material-icons"></igx-icon>
</igx-avatar>
</div>
<span slot="title">Guarana Fantastica</span>
</igx-card-header>
<igx-card-content class="column">
<div class="body-content">
<span>Quantity</span> <span>10</span>
</div>
<div class="body-content">
<span>Unit Price</span> <span>$4</span>
</div>
</igx-card-content>
</igx-card>
</div>
<div class="card">
<igx-card elevated>
<igx-card-header>
<div igxCardThumbnail>
<igx-avatar shape="circle">
<igx-icon name="product" collection="material" class="material-icons"></igx-icon>
</igx-avatar>
</div>
<span slot="title">Vegie-spread</span>
</igx-card-header>
<igx-card-content class="column">
<div class="body-content">
<span>Quantity</span> <span>5</span>
</div>
<div class="body-content">
<span>Unit Price</span> <span>$35</span>
</div>
</igx-card-content>
</igx-card>
</div>
<div class="card">
<igx-card elevated>
<igx-card-header>
<div igxCardThumbnail>
<igx-avatar shape="circle">
<igx-icon name="product" collection="material" class="material-icons"></igx-icon>
</igx-avatar>
</div>
<span slot="title">Rhonbrau Klosterbier</span>
</igx-card-header>
<igx-card-content class="column">
<div class="body-content">
<span>Quantity</span> <span>7</span>
</div>
<div class="body-content">
<span>Unit Price</span> <span>$6</span>
</div>
</igx-card-content>
</igx-card>
</div>
</div>
</igc-tile>
<igc-tile >
<span slot="title">Order Value</span>
<div class="string">
<h3>$8.66K</h3>
</div>
</igc-tile>
<igc-tile >
<span slot="title">Item quantity</span>
<div class="string">
<h3>4</h3>
</div>
</igc-tile>
</igc-tile-manager>
43 changes: 43 additions & 0 deletions src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
igc-tile-manager {
margin-bottom: 5px;
}

.group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 15px;
}

.card {
min-height: 30px;
min-width: 250px;
max-width: 320px;
margin: 0 15px 15px 15px
}

igx-card-content {
color: var(--content-text-color);
}

.body-content {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.string {
text-align: center;
margin-top: 50px;
color: var(--ig-gray-800);
}

.sample {
overflow: auto;
}
.content {
display: flex;
justify-content: space-between;
}
31 changes: 31 additions & 0 deletions src/app/layouts/tile-manager/tile-manager-sample/tile-manager.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit} from '@angular/core';
import { IgxAvatarComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardThumbnailDirective, IgxIconComponent, IgxIconService, IgxListComponent, IgxListItemComponent, IgxListLineDirective, IgxListThumbnailDirective} from 'igniteui-angular';
import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents';

defineComponents(IgcTileManagerComponent);

@Component({
selector: 'app-tile-manager',
styleUrls: ['./tile-manager.component.scss'],
templateUrl: './tile-manager.component.html',
imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardThumbnailDirective, IgxCardContentDirective, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, IgxAvatarComponent, IgxIconComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TileManagerComponent implements OnInit {
constructor(protected _iconService: IgxIconService) {}

public ngOnInit() {
const listIcon =
'<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>';

const calendarIcon =
'<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>'

const productIcon =
'<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>'

this._iconService.addSvgIconFromText("list", listIcon, "material");
this._iconService.addSvgIconFromText("calendar", calendarIcon, "material");
this._iconService.addSvgIconFromText("product", productIcon, "material");
}
}
3 changes: 2 additions & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
"es2022",
"dom"
],
"useDefineForClassFields": false
"useDefineForClassFields": false,
"skipLibCheck": true
},
"angularCompilerOptions": {
"strictTemplates": true,
Expand Down
Loading