Add default size usage in icons. Some changes in portal search results. Delete text-as-svg (no need)
This commit is contained in:
parent
4e49e7f489
commit
4e9981f24f
|
|
@ -1,9 +1,8 @@
|
|||
<ul class="uk-list uk-list-large" [class]="'uk-list uk-margin ' + custom_class"
|
||||
<ul class="uk-list uk-list-xlarge" [class]="'uk-list uk-margin ' + custom_class"
|
||||
uk-height-match="target: .uk-card-default; row: false">
|
||||
<errorMessages [status]="[status]" [type]="'results'"></errorMessages>
|
||||
<li *ngFor="let result of results" class="uk-animation-fade">
|
||||
<div
|
||||
class="uk-card uk-card-default uk-card-body uk-card-hover uk-position-relative uk-flex uk-flex-column uk-flex-center"
|
||||
<div class="uk-card uk-card-default uk-card-body uk-card-hover uk-position-relative uk-flex uk-flex-column uk-flex-center"
|
||||
[class.uk-disabled]="!hasPermission(result)">
|
||||
<div>
|
||||
<div *ngIf="type === 'community' && result.isSubscribed"
|
||||
|
|
@ -11,18 +10,18 @@
|
|||
<span>Subscribed</span>
|
||||
</div>
|
||||
<div *ngIf="type === 'community' && result.status === 'manager'"
|
||||
class="uk-position-top-right uk-margin-top uk-margin-right uk-text-center">
|
||||
<icon [name]="visibilityIcon.get('RESTRICTED')" ratio="1.5" class="uk-display-block"></icon>
|
||||
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle">
|
||||
<icon [name]="visibilityIcon.get('RESTRICTED')" ratio="1.5" [flex]="true"></icon>
|
||||
<span class="uk-text-small uk-text-capitalize">restricted</span>
|
||||
</div>
|
||||
<div *ngIf="type === 'community' && result.status === 'hidden'"
|
||||
class="uk-position-top-right uk-margin-top uk-margin-right uk-text-center">
|
||||
<icon [name]="visibilityIcon.get('PRIVATE')" ratio="1.5" class="uk-display-block"></icon>
|
||||
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle">
|
||||
<icon [name]="visibilityIcon.get('PRIVATE')" ratio="1.5" [flex]="true"></icon>
|
||||
<span class="uk-text-small uk-text-capitalize">private</span>
|
||||
</div>
|
||||
<div *ngIf="result.visibility && result.visibility !== 'PUBLIC'"
|
||||
class="uk-position-top-right uk-margin-top uk-margin-right uk-text-center">
|
||||
<icon [name]="visibilityIcon.get(result.visibility)" ratio="1.5" class="uk-display-block"></icon>
|
||||
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle">
|
||||
<icon [name]="visibilityIcon.get(result.visibility)" ratio="1.5" [flex]="true"></icon>
|
||||
<span class="uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,6 @@ import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
|
|||
})
|
||||
export class PortalSearchResultModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([group, lock])
|
||||
this.iconsService.registerIcons([lock])
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,10 @@ export class HelperFunctions {
|
|||
|
||||
public static scrollToId(elementId:string) {
|
||||
if (typeof document !== 'undefined' && document.getElementById(elementId)) {
|
||||
document.getElementById(elementId).scrollIntoView();
|
||||
document.getElementById(elementId).scrollIntoView({behavior: "smooth"});
|
||||
}
|
||||
}
|
||||
public static isTiny(url: string) {
|
||||
return (url.indexOf('tinyurl.com') !== -1);
|
||||
}
|
||||
|
||||
|
||||
public static copy(obj: any): any {
|
||||
let copy;
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,17 @@ export interface StopRule {
|
|||
*
|
||||
* - Custom SVG Icon. Define a variable in your component with an SVG and give it as Input @svg.
|
||||
*
|
||||
* In case of SVGs, there is an opportunity to add gradient color by define at least a start and end stop-color rules
|
||||
* and an id to support them. This option is enabled by giving id as input in @gradient (Optional @degrees for gradient direction)
|
||||
*
|
||||
* e.g #gradient .start {
|
||||
* stop-color: red;
|
||||
* }
|
||||
*
|
||||
* e.g #gradient .end {
|
||||
* stop-color: orange;
|
||||
* }
|
||||
*
|
||||
* */
|
||||
@Component({
|
||||
selector: 'icon',
|
||||
|
|
@ -42,6 +53,8 @@ export class IconsComponent implements AfterViewInit {
|
|||
*/
|
||||
@Input()
|
||||
public svg;
|
||||
@Input()
|
||||
public defaultSize = false;
|
||||
/**
|
||||
* True if this icon should have display flex (Optional, Default: false)
|
||||
*
|
||||
|
|
@ -66,6 +79,8 @@ export class IconsComponent implements AfterViewInit {
|
|||
public stroke;
|
||||
/**
|
||||
* Size of icon (Default: 1)
|
||||
*
|
||||
* Disabled if defaultSize = true
|
||||
* */
|
||||
@Input()
|
||||
public ratio = 1;
|
||||
|
|
@ -91,7 +106,7 @@ export class IconsComponent implements AfterViewInit {
|
|||
* Gradient rules
|
||||
* Available only for SVG!
|
||||
*
|
||||
* Set your css rules for stop-colors
|
||||
* Define your css rules for stop-colors
|
||||
* */
|
||||
@Input()
|
||||
public gradient: string = null;
|
||||
|
|
@ -108,8 +123,10 @@ export class IconsComponent implements AfterViewInit {
|
|||
ngAfterViewInit() {
|
||||
if(this.svg) {
|
||||
let svg: Element = 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());
|
||||
if(!this.defaultSize) {
|
||||
svg.setAttribute("width", (this.ratio * IconsComponent.DEFAULT_ICON_SIZE).toString());
|
||||
svg.setAttribute("height", (this.ratio * IconsComponent.DEFAULT_ICON_SIZE).toString());
|
||||
}
|
||||
if(this.gradient) {
|
||||
this.addGradient(svg);
|
||||
} else {
|
||||
|
|
@ -127,15 +144,15 @@ export class IconsComponent implements AfterViewInit {
|
|||
}
|
||||
|
||||
addGradient(svg: Element) {
|
||||
if(svg.children.length > 0) {
|
||||
if(svg.children.length > 0 && typeof document !== "undefined") {
|
||||
let gradientDefinition = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
|
||||
gradientDefinition.setAttribute('id', this.gradient);
|
||||
if(this.degrees !== 0) {
|
||||
let angle = (this.degrees) * (Math.PI / 180);
|
||||
gradientDefinition.setAttribute('x1', Math.round(50 + Math.sin(angle) * 50) + '%');
|
||||
gradientDefinition.setAttribute('y1', Math.round(50 + Math.cos(angle) * 50) + '%');
|
||||
gradientDefinition.setAttribute('x2', Math.round(50 + Math.sin(angle + Math.PI) * 50) + '%');
|
||||
gradientDefinition.setAttribute('y2', Math.round(50 + Math.cos(angle + Math.PI) * 50) + '%');
|
||||
gradientDefinition.setAttribute('x1', Math.round(50 + Math.sin(angle + Math.PI) * 50) + '%');
|
||||
gradientDefinition.setAttribute('y1', Math.round(50 + Math.cos(angle + Math.PI) * 50) + '%');
|
||||
gradientDefinition.setAttribute('x2', Math.round(50 + Math.sin(angle) * 50) + '%');
|
||||
gradientDefinition.setAttribute('y2', Math.round(50 + Math.cos(angle) * 50) + '%');
|
||||
}
|
||||
for(let rule of this.stopRules) {
|
||||
let item = document.createElementNS('http://www.w3.org/2000/svg','stop');
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
import {NgModule} from "@angular/core";
|
||||
import {TextAsSvgPipe} from "./text-as-svg.pipe";
|
||||
|
||||
@NgModule({
|
||||
declarations: [TextAsSvgPipe],
|
||||
exports: [TextAsSvgPipe]
|
||||
})
|
||||
export class TextAsSvgModule {}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {Pipe, PipeTransform} from "@angular/core";
|
||||
import {DomSanitizer, SafeUrl} from "@angular/platform-browser";
|
||||
import {StringUtils} from "../string-utils.class";
|
||||
|
||||
@Pipe({name: 'textAsSvg'})
|
||||
export class TextAsSvgPipe implements PipeTransform {
|
||||
|
||||
transform(value: string): string {
|
||||
return '<svg height="20" viewBox="0 0 ' + value.length*20 + ' 20" width="80" xmlns="http://www.w3.org/2000/svg"><text x="50%" y="85%" text-anchor="middle" dy=".4m" class="uk-text-bold" font-size="20">' + value + '</text></svg>';
|
||||
}
|
||||
}
|
||||
|
|
@ -13,10 +13,10 @@ import {Component, HostListener, Input, OnInit, ViewEncapsulation} from "@angula
|
|||
@Component({
|
||||
selector: 'section-scroll',
|
||||
template: `
|
||||
<div class="section" [ngClass]="customClass">
|
||||
<div [ngClass]="customClass">
|
||||
<ng-content select="[top]"></ng-content>
|
||||
<div class="content" [ngClass]="childrenCustomClass">
|
||||
<div class="uk-grid">
|
||||
<div [ngClass]="childrenCustomClass">
|
||||
<div class="uk-grid" uk-grid>
|
||||
<ng-content select="[left]"></ng-content>
|
||||
<ng-content select="[scroll]"></ng-content>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue