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

Icon component: Add visually hidden parameter. Change inside svg instead of scaling. Search change filters to links with uk-label

This commit is contained in:
Konstantinos Triantafyllou 2022-01-19 14:30:48 +02:00
parent a625e59610
commit e8f9970074
5 changed files with 71 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
contact-us/contact-us.component.html
View File

@ -1,5 +1,5 @@
<h3 *ngIf="formTitle" class="uk-margin-auto">{{formTitle}}</h3>
<ng-content select="[title]"></ng-content>
<h1 *ngIf="formTitle" class="uk-margin-auto">{{formTitle}}</h1>
<ng-content select="[page-title]"></ng-content>
<div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center"
role="alert">{{errorMessage}}</div>
<div class="uk-margin-top" uk-grid [formGroup]="contactForm">

87
searchPages/searchUtils/newSearchPage.component.html
View File

@ -3,29 +3,22 @@
<ng-container *ngIf="customFilter && ((customFilterEnabled &&
refineFields.indexOf(customFilter.queryFieldName) ==
-1) ||customFilter.isHiddenFilter)">
<span class="">
<span class="selectedFilterLabel customFilterLabel">
<span class="">{{' '+customFilter.valueName}}</span>
<span class="uk-width-small">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand uk-text-nowrap uk-text-truncate">{{customFilter.valueName}}</span>
</span>
</span>
</span>
</ng-container>
<ng-container *ngIf=" resultTypes && resultTypes.countSelectedValues > 0">
<ng-container *ngFor="let type of resultTypes.values; let i = index; let end = last; ">
<ng-container *ngIf="type.selected">
<span [title]="'Remove '+ type.name" (click)="removeResultType(type.id) "
[class]="((disableForms || disableRefineForms) ? 'uk-disabled' : 'clickable')">
<span class="selectedFilterLabel ">
<a class="uk-link-text">
<span aria-hidden="true">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close"
ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path
fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
</span>
</span>
<span class="uk-margin-small-left">{{' '+type.name}}</span>
</a>
</span>
<span class="uk-width-small">
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)" [class.uk-disabled]="disableForms || disableRefineForms">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand uk-text-nowrap uk-text-truncate">{{type.name}}</span>
<icon name="close" flex="true"></icon>
</span>
</a>
</span>
</ng-container>
</ng-container>
@ -33,53 +26,29 @@
<ng-container *ngIf="selectedRangeFilters > 0">
<ng-container *ngFor="let filter of rangeFilters ">
<ng-container *ngIf="filter.selectedFromAndToValues">
<span [title]="'Remove '+ filter.selectedFromAndToValues" (click)="removeRangeFilter(filter) "
[class]="((disableForms || disableRefineForms) ? 'uk-disabled' : 'clickable') ">
<span class="selectedFilterLabel ">
<a class="uk-link-text">
<span aria-hidden="true">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6"
d="M16,16 L4,4"></path><path fill="none"
stroke="#000"
stroke-width="1.6"
d="M16,4 L4,16"></path></svg>
</span>
</span>
<span class="uk-margin-small-left">{{' '+filter.selectedFromAndToValues}}</span>
</a>
</span>
</span>
<span class="uk-width-small">
<a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
[class.uk-disabled]="disableForms || disableRefineForms">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand uk-text-nowrap uk-text-truncate">{{filter.selectedFromAndToValues}}</span>
<icon name="close" flex="true"></icon>
</span>
</a>
</span>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngFor="let filter of filters ">
<ng-container *ngIf="filter.countSelectedValues > 0">
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
<span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
[title]="'Remove '+value.name"
(click)="removeFilter(value, filter) "
[class]="((disableForms || disableRefineForms) ? 'uk-disabled' : 'clickable') + ' '">
<!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
<span class="selectedFilterLabel ">
<a class="uk-link-text">
<span aria-hidden="true">
<span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6"
d="M16,16 L4,4"></path><path fill="none"
stroke="#000"
stroke-width="1.6"
d="M16,4 L4,16"></path></svg>
</span>
</span>
<span class="uk-margin-small-left"
[innerHtml]="' ' +
((value.name.length > 34)?value.name.substring(0,34)+'...':value.name)"></span>
</a>
</span>
</span>
<span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)" class="uk-width-small">
<a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)" [class.uk-disabled]="disableForms || disableRefineForms">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand uk-text-nowrap uk-text-truncate">{{value.name}}</span>
<icon name="close" flex="true"></icon>
</span>
</a>
</span>
</ng-container>
</ng-container>
</ng-container>

3
searchPages/searchUtils/newSearchPage.module.ts
View File

@ -28,6 +28,7 @@ import {BreadcrumbsModule} from "../../utils/breadcrumbs/breadcrumbs.module";
import {AlertModalModule} from "../../utils/modal/alertModal.module";
import {ClickModule} from "../../utils/click/click.module";
import {SearchResultsForOrcidModule} from "../../orcid/recommend-orcid-links/searchResultsForOrcid.module";
import {IconsModule} from "../../utils/icons/icons.module";
@NgModule({
imports: [
@ -37,7 +38,7 @@ import {SearchResultsForOrcidModule} from "../../orcid/recommend-orcid-links/sea
SearchFilterModule, RangeFilterModule,
PiwikServiceModule, HelperModule, Schema2jsonldModule, SEOServiceModule, SearchResultsModule,
SearchResultsInDepositModule, SearchResultsForOrcidModule,
AdvancedSearchFormModule, QuickSelectionsModule, BreadcrumbsModule, AlertModalModule, ClickModule
AdvancedSearchFormModule, QuickSelectionsModule, BreadcrumbsModule, AlertModalModule, ClickModule, IconsModule
],
declarations: [
NewSearchPageComponent

2
utils/breadcrumbs/breadcrumbs.component.ts
View File

@ -8,7 +8,7 @@ export interface Breadcrumb {
@Component({
selector: 'breadcrumbs',
template: `
<ul [class]="'uk-breadcrumb '+addClass" [class.uk-light]="light">
<ul class="uk-breadcrumb" [ngClass]="addClass" [class.uk-light]="light">
<li *ngFor="let breadcrumb of breadcrumbs">
<a class="uk-text-capitalize" *ngIf="breadcrumb.route" [routerLink]="breadcrumb.route">{{breadcrumb.name}}</a>
<span class="uk-text-capitalize" *ngIf="!breadcrumb.route">{{breadcrumb.name}}</span>

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

@ -1,33 +1,45 @@
import {Component, ElementRef, Input, OnInit} from "@angular/core";
import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild} from "@angular/core";
import {IconsService} from "./icons.service";
/**
* First add your icon to Icon registry, by adding this to your component Module.
* By default this component uses Material Icons Library to render an icon with
* a specific @name. For custom icons you should:
*
* e.g export class ExampleModule {
* constructor(private iconsService: IconsService) {
* this.iconsService.registerIcons([arrow_right])
* }
* }
* - Add your icon in icons.ts and register it to Icon registry, by adding this to your component Module.
*
* e.g export class ExampleModule {
* constructor(private iconsService: IconsService) {
* this.iconsService.registerIcons([arrow_right])
* }
* }
*
* If the name of your icon is the same with a Material Icon name, yours will be used instead of the default.
*
* - Custom SVG Icon. Define a variable in your component with an SVG and give it as Input @svg.
*
* */
@Component({
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>
<span #icon *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
<span [class.uk-flex]="flex" [ngClass]="customClass">
<span *ngIf="!svg && iconName" class="material-icons" [ngClass]="type" [ngStyle]="style">{{iconName}}</span>
</span>
<span *ngIf="visuallyHidden" class="visually-hidden">{{visuallyHidden}}</span>
`
})
export class IconsComponent implements OnInit {
export class IconsComponent implements AfterViewInit {
private static DEFAULT_ICON_SIZE = 20;
public iconName: string;
public style;
/**
* Custom svg
* Custom icon as SVG
*/
@Input()
public svg;
/**
* True if this icon should have display flex (Optional, Default: false)
*
* */
@Input()
public flex = false;
@ -65,20 +77,31 @@ export class IconsComponent implements OnInit {
this.iconName = iconName;
this.svg = this.iconsService.getIcon(iconName);
}
/**
*
* */
@Input()
public visuallyHidden: string = null;
@ViewChild("icon")
public icon: ElementRef;
constructor(private iconsService: IconsService) {}
constructor(private iconsService: IconsService,
private cdr: ChangeDetectorRef) {}
ngOnInit() {
ngAfterViewInit() {
if(this.svg) {
let svg = this.icon.nativeElement.getElementsByTagName('svg').item(0);
svg.setAttribute("width", (this.ratio*IconsComponent.DEFAULT_ICON_SIZE).toString());
svg.setAttribute("height", (this.ratio*IconsComponent.DEFAULT_ICON_SIZE).toString());
this.style = {
transform: 'scale(' + this.ratio + ')',
fill: this.fill,
stroke: this.stroke
};
} else {
this.style = {
"font-size.px": this.ratio*20
"font-size.px": this.ratio*IconsComponent.DEFAULT_ICON_SIZE
};
}
this.cdr.detectChanges();
}
}