MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add material icons on icon component

This commit is contained in:
Konstantinos Triantafyllou 2022-01-17 19:46:22 +02:00
parent 809589b5f9
commit 5f7acfdd4d
2 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
utils/icons/icons.component.ts
View File

@ -15,10 +15,12 @@ import {IconsService} from "./icons.service";
selector: 'icon',
template: `
<span *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
<span *ngIf="!svg && iconName" class="material-icons" [ngClass]="customClass + (type?(' ' + type):'')" [ngStyle]="style">{{iconName}}</span>
`
})
export class IconsComponent implements OnInit{
export class IconsComponent implements OnInit {
public svg;
public iconName: string;
public style;
/**
* True if this icon should have display flex (Optional, Default: false)
@ -30,7 +32,7 @@ export class IconsComponent implements OnInit{
* Add custom class(es)(Optional)
* */
@Input()
public customClass;
public customClass = '';
/**
* Color of svg (Optional)
* */
@ -42,27 +44,39 @@ export class IconsComponent implements OnInit{
@Input()
public stroke;
/**
* Size of svg (Default: 1)
* Size of icon (Default: 1)
* */
@Input()
public ratio = 1;
/**
* In case of Material icon only. Type of icon (Optional)
* */
@Input()
public type: "outlined" | "round" | "sharp" | "two-tone" | null = null;
/**
* Name of icon in registry (Required)
* */
@Input()
set name(iconName: string) {
this.iconName = iconName;
this.svg = this.iconsService.getIcon(iconName);
}
constructor(private iconsService: IconsService,
private elementRef: ElementRef) {}
constructor(private iconsService: IconsService) {}
ngOnInit() {
this.style = {
transform: 'scale(' + this.ratio + ')',
fill: this.fill,
stroke: this.stroke
};
//this.elementRef.nativeElement.style = 'line-height: ' + this.ratio*20 + 'px; height: 20px';
if(this.svg) {
this.style = {
transform: 'scale(' + this.ratio + ')',
fill: this.fill,
stroke: this.stroke
};
} else {
this.style = {
"font-size.px": this.ratio*20,
fill: this.fill,
stroke: this.stroke
};
}
}
}

16
utils/section-scroll/section-scroll.component.ts
View File

@ -31,16 +31,20 @@ export class SectionScrollComponent implements OnInit {
@HostListener('window:resize', ['$event'])
onResize(event) {
this.fixed = document.querySelector('[fixed]');
this.scroll = document.querySelector('[scroll]');
this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
this.setHeight();
}
ngOnInit() {
this.fixed = document.querySelector('[fixed]');
this.scroll = document.querySelector('[scroll]');
this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
this.setHeight();
}
setHeight() {
if(typeof document !== "undefined") {
this.fixed = document.querySelector('[fixed]');
this.scroll = document.querySelector('[scroll]');
this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
}
}
get height():number {