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 all 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
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions live-editing/configs/TileManagerConfigGenerator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Config, IConfigGenerator} from 'igniteui-live-editing'
import { BaseAppConfig } from './BaseConfig';
export class TileManagerConfigGenerator implements IConfigGenerator {


public generateConfigs(): Config[] {
const configs = new Array<Config>();

configs.push(new Config({
component: 'TileManagerComponent',
additionalDependencies: ["igniteui-webcomponents"],
appConfig: BaseAppConfig,
shortenComponentPathBy: "/layouts/tile-manager/"
}));

return configs;
}
}
2 changes: 2 additions & 0 deletions live-editing/generators/ConfigGenerators.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ import { StepperConfigGenerator } from '../configs/StepperConfigGenerator';
import { PaginationConfigGenerator } from '../configs/PaginationConfigGenerator';
import { PivotGridConfigGenerator } from '../configs/PivotGridConfigGenerator';
import { QueryBuilderConfigGenerator } from '../configs/QueryBuilderConfigGenerator';
import { TileManagerConfigGenerator } from '../configs/TileManagerConfigGenerator';

export const CONFIG_GENERATORS =
[
Expand Down Expand Up @@ -136,6 +137,7 @@ export const CONFIG_GENERATORS =
TransactionsConfigGenerator,
SplitterConfigGenerator,
DockManagerConfigGenerator,
TileManagerConfigGenerator,
PaginationConfigGenerator,
QueryBuilderConfigGenerator
];
40 changes: 20 additions & 20 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.

8 changes: 4 additions & 4 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-live-editing": "^3.0.2",
"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;
}
Loading
Loading