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', selector: 'icon',
template: ` template: `
<span *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span> <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 svg;
public iconName: string;
public style; public style;
/** /**
* True if this icon should have display flex (Optional, Default: false) * 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) * Add custom class(es)(Optional)
* */ * */
@Input() @Input()
public customClass; public customClass = '';
/** /**
* Color of svg (Optional) * Color of svg (Optional)
* */ * */
@ -42,27 +44,39 @@ export class IconsComponent implements OnInit{
@Input() @Input()
public stroke; public stroke;
/** /**
* Size of svg (Default: 1) * Size of icon (Default: 1)
* */ * */
@Input() @Input()
public ratio = 1; 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) * Name of icon in registry (Required)
* */ * */
@Input() @Input()
set name(iconName: string) { set name(iconName: string) {
this.iconName = iconName;
this.svg = this.iconsService.getIcon(iconName); this.svg = this.iconsService.getIcon(iconName);
} }
constructor(private iconsService: IconsService, constructor(private iconsService: IconsService) {}
private elementRef: ElementRef) {}
ngOnInit() { ngOnInit() {
this.style = { if(this.svg) {
transform: 'scale(' + this.ratio + ')', this.style = {
fill: this.fill, transform: 'scale(' + this.ratio + ')',
stroke: this.stroke fill: this.fill,
}; stroke: this.stroke
//this.elementRef.nativeElement.style = 'line-height: ' + this.ratio*20 + 'px; height: 20px'; };
} 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']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
this.fixed = document.querySelector('[fixed]'); this.setHeight();
this.scroll = document.querySelector('[scroll]');
this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
} }
ngOnInit() { ngOnInit() {
this.fixed = document.querySelector('[fixed]'); this.setHeight();
this.scroll = document.querySelector('[scroll]'); }
this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
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 { get height():number {