84 lines
2.1 KiB
TypeScript
84 lines
2.1 KiB
TypeScript
import { Component, OnInit } from '@angular/core';
|
|
import { NbDialogRef } from '@nebular/theme';
|
|
import { MD2Icon } from '../massive-darkness2.model';
|
|
import { MD2StateService } from '../../../services/MD2/md2-state.service';
|
|
|
|
@Component({
|
|
selector: 'md2-icon-picker-dlg',
|
|
template: `
|
|
<nb-card style="max-width: 800px;">
|
|
<nb-card-header>
|
|
<h5>Insert MD2 Icon</h5>
|
|
</nb-card-header>
|
|
<nb-card-body>
|
|
<div class="md2-icon-grid">
|
|
<div
|
|
*ngFor="let iconData of iconList"
|
|
(click)="selectIcon(iconData)"
|
|
class="icon-item" title="{{iconData.name}}"
|
|
[innerHTML]="iconData.html">
|
|
</div>
|
|
</div>
|
|
</nb-card-body>
|
|
<nb-card-footer>
|
|
<button nbButton status="primary" (click)="cancel()">Cancel</button>
|
|
</nb-card-footer>
|
|
</nb-card>
|
|
`,
|
|
styles: [`
|
|
.md2-icon-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
|
|
gap: 10px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
width:400px;
|
|
}
|
|
.icon-item {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
transition: all 0.2s;
|
|
font-size: 30px;
|
|
}
|
|
.icon-item:hover {
|
|
background-color: #f0f0f0;
|
|
border-color: #007bff;
|
|
//transform: scale(1.1);
|
|
}
|
|
`]
|
|
})
|
|
export class MD2IconPickerDlgComponent implements OnInit {
|
|
|
|
iconList: Array<{ icon: MD2Icon, name: string, html: string }> = [];
|
|
|
|
constructor(
|
|
private dlgRef: NbDialogRef<MD2IconPickerDlgComponent>,
|
|
private md2StateService: MD2StateService
|
|
) { }
|
|
|
|
ngOnInit(): void {
|
|
// Get all icons
|
|
for (let icon of Object.values(MD2Icon).filter(val => typeof val === 'number') as MD2Icon[]) {
|
|
this.iconList.push({
|
|
icon: icon,
|
|
name: MD2Icon[icon],
|
|
html: this.md2StateService.iconHtml(icon)
|
|
});
|
|
}
|
|
}
|
|
|
|
selectIcon(iconData: { icon: MD2Icon, name: string, html: string }) {
|
|
this.dlgRef.close(iconData.html);
|
|
}
|
|
|
|
cancel() {
|
|
this.dlgRef.close(null);
|
|
}
|
|
}
|
|
|