diff options
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/customIcon')
6 files changed, 410 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.html b/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.html new file mode 100644 index 000000000..0ac56d2d2 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.html @@ -0,0 +1,2 @@ +<div [ngClass]="classes" [attr.disabled]="disabled || undefined" [innerHtml]="svgIconContentSafeHtml" + [attr.data-tests-id]="testId"></div> diff --git a/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.scss b/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.scss new file mode 100644 index 000000000..54b375702 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.scss @@ -0,0 +1,297 @@ +@import 'node_modules/onap-ui-common/lib/scss/variables.scss'; + +:host { + display: inline-flex; +} + +@mixin color-icon($primary-color) { + color: $primary-color; + fill: $primary-color; +} + +@mixin color-icon-hover($secondary-color) { + &.clickable { + cursor: pointer; + &:not([disabled]):hover, &:active, &:focus { + @include color-icon($secondary-color); + } + } +} + +@mixin color-icon-label($primary-color) { + @include color-icon($primary-color); + + .custom-icon { + @include color-icon($primary-color); + } +} + +@mixin color-icon-label-hover($secondary-color) { + &.clickable { + &:not([disabled]):hover, &:active, &:focus { + @include color-icon-label($secondary-color); + } + } +} + +/deep/ .custom-icon { + display: inline-flex; + width: 24px; + height: 24px; + box-sizing: content-box; + + & > svg { + width: 100%; + height: 100%; + } + + &[disabled] { + opacity: 0.7; + } + + &.mode-primary { + @include color-icon($blue); + @include color-icon-hover($light-blue); + } + + &.mode-primary2 { + @include color-icon($dark-gray); + @include color-icon-hover($light-blue); + } + + &.mode-secondary { + @include color-icon($gray); + @include color-icon-hover($dark-gray); + } + + &.mode-success { + @include color-icon($green); + } + + &.mode-error { + @include color-icon($red); + } + + &.mode-warning { + @include color-icon($yellow); + } + + &.mode-info { + @include color-icon($text-black); + @include color-icon-hover($dark-blue); + } + + &.mode-white { + @include color-icon($white); + @include color-icon-hover($light-gray); + } + + &.size-x_small { + width: 8px; + height: 8px; + } + + &.size-small { + width: 12px; + height: 12px; + } + + &.size-medium { + width: 16px; + height: 16px; + } + + &.size-large { + width: 24px; + height: 24px; + } + + &.size-x_large { + width: 36px; + height: 36px; + } + + &.size-x_x_large { + width: 48px; + height: 48px; + } + + &.bg-type-circle { + border-radius: 50%; + padding: 6px; + } + + &.bg-type-rectangle { + padding: 6px; + } + + &.bg-color-purple { + background-color: $purple; + } + + &.bg-color-light-blue { + background-color: $light-blue; + } + + &.bg-color-green { + background-color: $green; + } + + &.bg-color-red { + background-color: $red; + } + + &.bg-color-yellow { + background-color: $yellow; + } + + &.bg-color-blue { + background-color: $blue; + } + + &.bg-color-lightBlue { + background-color: $light-blue; + } + + &.bg-color-darkBlue { + background-color: $dark-blue; + } + + &.bg-color-darkBlue2 { + background-color: $dark-blue2; + } + + &.bg-color-disabledBlue { + background-color: $disabled-blue; + } + + &.bg-color-gray { + background-color: $gray; + } + + &.bg-color-white { + background-color: $white; + } + + &.bg-color-transparent { + background-color:transparent; + } + &.bg-color-silver { + background-color: $light-silver; + } +} + +.custom-icon-wrapper { + display: inline-flex; + justify-content: center; + align-items: center; + + &.custom-icon-label { + } + + &.custom-icon { + } + + &[disabled] { + opacity: 0.7; + } + + &.label-placement-bottom { + flex-direction: column; + .custom-icon-label { + margin-top: 0.25em; + } + } + + &.label-placement-right { + .custom-icon-label { + margin-left: 0.25em; + } + } + + &.label-placement-top { + flex-direction: column-reverse; + .custom-icon-label { + margin-bottom: 0.25em; + } + } + + &.label-placement-left { + flex-direction: row-reverse; + .custom-icon-label { + margin-right: 0.25em; + } + } + + &.mode-primary { + @include color-icon-label($blue); + @include color-icon-label-hover($light-blue); + } + + &.mode-secondary { + @include color-icon-label($gray); + @include color-icon-label-hover($light-blue); + } + + &.mode-success { + @include color-icon-label($green); + } + + &.mode-error { + @include color-icon-label($red); + } + + &.mode-warning { + @include color-icon-label($yellow); + } + + &.mode-info { + @include color-icon-label($text-black); + @include color-icon-label-hover($light-blue); + } + + &.size-x_small { + font-size: 8px; + line-height: 10px; + + .custom-icon { + @extend .custom-icon.size-x_small; + } + } + + &.size-small { + font-size: 12px; + line-height: 14px; + + .custom-icon { + @extend .custom-icon.size-small; + } + } + + &.size-medium { + font-size: 16px; + line-height: 20px; + + .custom-icon { + @extend .custom-icon.size-medium; + } + } + + &.size-large { + font-size: 24px; + line-height: 28px; + + .custom-icon { + @extend .custom-icon.size-large; + } + } + + &.size-x_large { + font-size: 34px; + line-height: 40px; + + .custom-icon { + @extend .custom-icon.size-x_large; + } + } +} diff --git a/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.ts b/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.ts new file mode 100644 index 000000000..c59bc5945 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.ts @@ -0,0 +1,85 @@ +import {Component, Input, OnChanges, SimpleChanges} from "@angular/core"; +import {Mode} from "../customButton/models/mode.model"; +import {Size} from "./models/icon-size.model"; +import {BackgroundShape} from "./models/background-shape.model"; +import {BackgroundColor} from "./models/background-color.model"; +import {DomSanitizer, SafeHtml} from "@angular/platform-browser"; +import {iconsMap} from 'onap-ui-common'; + +@Component({ + selector: 'custom-icon', + templateUrl: './custom-icon.component.html', + styleUrls: ['./custom-icon.component.scss'], +}) +export class SvgIconComponent implements OnChanges { + + @Input() public name: string; + @Input() public type: string; + @Input() public mode: Mode; + @Input() public size: Size; + @Input() public backgroundShape: BackgroundShape; + @Input() public backgroundColor: BackgroundColor; + @Input() public disabled: boolean; + @Input() public clickable: boolean; + @Input() public className: any; + @Input() public testId: string; + + public svgIconContent: string; + public svgIconContentSafeHtml: SafeHtml; + public svgIconCustomClassName: string; + public classes: string; + + constructor(protected domSanitizer: DomSanitizer) { + this.size = Size.medium; + this.disabled = false; + this.type = this.type || "common"; + } + + static Icons(): { [key: string]: string } { + return iconsMap; + } + + public ngOnChanges(changes: SimpleChanges) { + this.updateSvgIconByName(); + this.buildClasses(); + } + + protected updateSvgIconByName() { + this.svgIconContent = iconsMap[this.type][this.name] || null; + if (this.svgIconContent) { + this.svgIconContentSafeHtml = this.domSanitizer.bypassSecurityTrustHtml(this.svgIconContent); + this.svgIconCustomClassName = '__' + this.name.replace(/\s+/g, '_'); + } else { + this.svgIconContentSafeHtml = null; + this.svgIconCustomClassName = 'missing'; + } + } + + private buildClasses = (): void => { + const _classes = ['svg-icon']; + if (this.mode) { + _classes.push('mode-' + this.mode); + } + if (this.size) { + _classes.push('size-' + this.size); + } + if (this.clickable) { + !this.disabled && _classes.push('clickable'); + } + if (this.svgIconCustomClassName) { + _classes.push(this.svgIconCustomClassName); + } + if (this.className) { + _classes.push(this.className); + } + if (this.backgroundShape) { + _classes.push('bg-type-' + this.backgroundShape); + } + if (this.backgroundShape && this.backgroundColor) { + _classes.push('bg-color-' + this.backgroundColor); + } else if (this.backgroundShape && !this.backgroundColor) { + _classes.push('bg-color-primary'); + } + this.classes = _classes.join(" "); + } +} diff --git a/vid-webpack-master/src/app/shared/components/customIcon/models/background-color.model.ts b/vid-webpack-master/src/app/shared/components/customIcon/models/background-color.model.ts new file mode 100644 index 000000000..324f51ba4 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customIcon/models/background-color.model.ts @@ -0,0 +1,15 @@ +export enum BackgroundColor { + gray = 'gray', + purple = 'purple', + blue = 'blue', + lightBlue = 'light-blue', + darkBlue = 'dark-blue', + darkBlue2 = 'dark-blue2', + disabledBlue = 'disabled-blue', + white = 'white', + transparent = 'transparent', + green = 'green', + red = 'red', + yellow = 'yellow', + silver ='silver' +} diff --git a/vid-webpack-master/src/app/shared/components/customIcon/models/background-shape.model.ts b/vid-webpack-master/src/app/shared/components/customIcon/models/background-shape.model.ts new file mode 100644 index 000000000..924ce3da1 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customIcon/models/background-shape.model.ts @@ -0,0 +1,4 @@ +export enum BackgroundShape { + circle = 'circle', + rectangle = 'rectangle' +} diff --git a/vid-webpack-master/src/app/shared/components/customIcon/models/icon-size.model.ts b/vid-webpack-master/src/app/shared/components/customIcon/models/icon-size.model.ts new file mode 100644 index 000000000..a6cd9f537 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customIcon/models/icon-size.model.ts @@ -0,0 +1,7 @@ +export enum Size { + x_large = 'x_large', + large = 'large', + medium = 'medium', + small = 'small', + x_small = 'x_small' +} |