diff options
Diffstat (limited to 'catalog-ui/src/app/ng2')
22 files changed, 298 insertions, 308 deletions
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts index 84ac46c4cf..0c74765944 100644 --- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts +++ b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts @@ -24,6 +24,7 @@ export class DynamicElementComponent { @Input() type: any; @Input() name: string; @Input() readonly:boolean; + @Input() path:string;//optional param. used only for for subnetpoolid type value:any; // Two way binding for value (need to write the "Change" word like this) @@ -58,7 +59,11 @@ export class DynamicElementComponent { this.cmpRef.instance.pattern = this.validation.validationPatterns.integer; break; case 'string': - if (this.name.toUpperCase().indexOf("SUBNETPOOLID") !== -1) { + if (this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1) { + if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name + let pathArray = this.path.split("#"); + this.name = pathArray[pathArray.length - 2]; + } this.createComponent(UiElementPopoverInputComponent); } else { diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less index afed54672c..07f38d3011 100644 --- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less +++ b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less @@ -25,11 +25,10 @@ form{ cursor: pointer; width: 32px; height: 34px; - display: inline-block; + margin-left:5px; + &.open{ z-index: 1061; - position: relative; - top: 2px; background-color: @main_color_p; border: solid 1px @main_color_c; border-bottom: none; diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less index 57d51616a8..a9174fd73d 100644 --- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less +++ b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less @@ -14,10 +14,10 @@ .node-data-wrapper { cursor: default; - height: 30px; - line-height: 2.6em;; + height: 39px; + line-height: 39px; position: relative; - top: -1.1em; + top: -20px; background-color: white; margin-left: 0.7em; } diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html index fb6b04013f..8d3f6d1836 100644 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html +++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html @@ -1,5 +1,5 @@ <div class="properties-table"> - <loader [display]="isLoading" size="large" [relative]="true"></loader> + <loader [display]="isLoading" size="large" [relative]="false"></loader> <div class="table-header"> <div class="table-cell col1">Property Name</div> <div class="table-cell col2">Type</div> diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less index 93f96470bc..96d4d0a4eb 100644 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less +++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less @@ -10,26 +10,26 @@ height:100%; text-align:left; - dynamic-property { - width:100%; - } - - /deep/ .dynamic-property-row { - border-top:solid #d2d2d2 1px; - } - - /deep/ dynamic-property dynamic-property:first-of-type .dynamic-property-row:not(.with-top-border) { - border-top: none; + .inner-cell-div{ + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + height: 20px; } + .table-header { font-weight:bold; border-top: #d2d2d2 solid 1px; background-color: #eaeaea; - + color:#191919; + + .table-cell { + font-size: 14px; + } .valueCol { justify-content: flex-start; - padding: 5px; + padding: 10px; } } .table-header, .table-row { @@ -57,18 +57,6 @@ } } - .table-rows-header { - font-size:16px; - flex:1; - border: #d2d2d2 solid 1px; - border-top:none; - padding: 5px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - background-color: @tlv_color_v; - } - .table-row { &:hover { background-color:#f8f8f8; cursor:pointer; @@ -81,17 +69,14 @@ background-color:#e6f6fb; } } - .cut-inner-long-text{ - text-overflow: ellipsis; - overflow: hidden; - } + .table-cell { font-size:13px; flex:1; border: #d2d2d2 solid 1px; border-right:none; border-top:none; - padding: 5px; + padding: 10px; text-overflow: ellipsis; white-space: nowrap; @@ -132,6 +117,7 @@ display: flex; justify-content: flex-end; padding: 0px; + align-items: center; .value-input { flex: 1; @@ -163,7 +149,7 @@ } &.input-value-col { - padding: 5px; + padding: 8px; } diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts index 4d90b2853d..4af92eca24 100644 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.ts +++ b/catalog-ui/src/app/ng2/components/loader/loader.component.ts @@ -11,72 +11,28 @@ export class LoaderComponent { @Input() display:boolean; @Input() size:string;// small || medium || large - @Input() elementSelector:string; // required if is relative true - @Input() relative:boolean; - - interval; + @Input() relative: boolean; + @Input() elementSelector: string; // optional. If is relative is set to true, option to pass in element that loader should be relative to. Otherwise, will be relative to parent element. + constructor (private el: ElementRef, private renderer: Renderer){ } ngOnInit() { - - if (this.elementSelector) { - let elemParent = angular.element(this.elementSelector); - let positionStyle:string = elemParent.css('position'); - this.setStyle(positionStyle); - } - - if (this.relative === true) { - let positionStyle:string = this.el.nativeElement.parentElement.style.position; - this.setStyle(positionStyle); - } if (!this.size) { this.size = 'large'; } - } - - ngOnDestroy(){ - clearInterval(this.interval); - } - - calculateSizesForFixPosition = (positionStyle:string):void => { - // This is problematic, I do not want to change the parent position. - // set the loader on all the screen - let parentLeft = this.el.nativeElement.parentElement.offsetLeft; - let parentTop = this.el.nativeElement.parentElement.offsetTop; - let parentWidth = this.el.nativeElement.parentElement.offsetWidth; - let parentHeight = this.el.nativeElement.parentElement.offsetHeight; - this.renderer.setElementStyle(this.el.nativeElement, 'position', positionStyle); - this.renderer.setElementStyle(this.el.nativeElement, 'top', parentTop); - this.renderer.setElementStyle(this.el.nativeElement, 'left', parentLeft); - this.renderer.setElementStyle(this.el.nativeElement, 'width', parentWidth); - this.renderer.setElementStyle(this.el.nativeElement, 'height', parentHeight); - }; - - setStyle = (positionStyle:string):void => { - - switch (positionStyle) { - case 'absolute': - case 'fixed': - // The parent size is not set yet, still loading, so need to use interval to update the size. - this.interval = window.setInterval(()=> { - this.calculateSizesForFixPosition(positionStyle); - }, 2000); - break; - default: - // Can change the parent position to relative without causing style issues. - this.renderer.setElementStyle(this.el.nativeElement.parentElement,'position', 'relative'); - break; + if (this.display === true) { + this.changeLoaderDisplay(true); } - }; + } ngOnChanges(changes: SimpleChanges) { if(changes.display){ - this.changeLoaderDisplay(false); - if ( this.display ) { - window.setTimeout(():void => { - this.changeLoaderDisplay(true); + if (this.display) { + this.changeLoaderDisplay(false); //display is set to true, so loader will appear unless we explicitly tell it not to. + window.setTimeout((): void => { + this.display && this.changeLoaderDisplay(true); //only show loader if we still need to display it. }, 500); } else { window.setTimeout(():void => { @@ -86,7 +42,33 @@ export class LoaderComponent { } } - changeLoaderDisplay = (display:boolean):void => { - this.renderer.setElementStyle(this.el.nativeElement, 'display', display ? 'block' : 'none'); + changeLoaderDisplay = (display: boolean): void => { + if (display) { + this.calculateLoaderPosition(); + this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block'); + } else { + this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none'); + } + } + + calculateLoaderPosition = () => { + if (this.relative === true) { // Can change the parent position to relative without causing style issues. + let parent = (this.elementSelector) ? angular.element(this.elementSelector).get(0) : this.el.nativeElement.parentElement; + this.renderer.setElementStyle(parent, 'position', 'relative'); + this.setLoaderPosition(0, 0); //will be relative to parent and appear over specified element + //TODO: DONT force parent to have position relative; set inner div's style instead of outer element + // let parentPos: ClientRect = this.el.nativeElement.parentElement.getBoundingClientRect(); + // this.setLoaderPosition(parentPos.top, parentPos.left, parentPos.width, parentPos.height); + } else { + this.setLoaderPosition(0, 0); //will appear over whole page + } } + + setLoaderPosition = (top:number, left:number, width?:number, height?:number): void => { + this.renderer.setElementStyle(this.el.nativeElement, 'position', 'absolute'); + this.renderer.setElementStyle(this.el.nativeElement, 'top', top? top.toString() : "0"); + this.renderer.setElementStyle(this.el.nativeElement, 'left', left? left.toString() : "0"); + this.renderer.setElementStyle(this.el.nativeElement, 'width', width? width.toString() : "100%"); + this.renderer.setElementStyle(this.el.nativeElement, 'height', height? height.toString() : "100%"); + }; } diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html index d6ee568c0c..2df17971e2 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html +++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html @@ -1,12 +1,12 @@ -<div class="dynamic-property-row" +<div *ngIf="!property.hidden" class="dynamic-property-row nested-level-{{nestedLevel}}" [@fadeIn] [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName }" [class.with-top-border]="property.isChildOfListOrMap" (click)="onClickPropertyRow(property, $event)"> <!-- LEFT CELL --> <ng-container *ngIf="!isPropertyFEModel"> <div class="table-cell" *ngIf="canBeDeclared" [ngClass]="{'filtered':property.name === propertyNameSearchText}"> <!-- simple children of complex type --> - <checkbox [label]="property.name" [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)" - ></checkbox> + <checkbox [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)"></checkbox> + <div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div> </div> <div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list --> <div class="table-cell map-entry" *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP"><!-- map left cell --> @@ -21,24 +21,24 @@ [(value)]="property.valueObj" [type]="property.isDeclared ? 'string' : property.type" [name]="property.name" + [path]="property.propertiesName" (valueChange)="valueChanged.emit();" - [readonly]="readonly||property.isDeclared" - > <!--[disabled]="property.isDisabled || property.isDeclared" --> - </dynamic-element> + [readonly]="readonly||property.isDeclared||property.isDisabled" + ></dynamic-element> </div> </ng-container> <ng-container *ngIf="!isPropertyFEModel && propType != derivedPropertyTypes.SIMPLE && !property.isDeclared"> <!-- right cell for complex elements, or list complex --> <div class="table-cell" *ngIf="propType == derivedPropertyTypes.COMPLEX">{{property.type | contentAfterLastDot }}</div> <div class="table-cell" *ngIf="propType == derivedPropertyTypes.MAP && !property.schema.property.isSimpleType">{{property.schema.property.type | contentAfterLastDot }}</div> </ng-container> - <ng-container *ngIf="isPropertyFEModel && (propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP)"><!-- empty, full-width table cell - for PropertyFEModel of type list or map --> + <ng-container *ngIf="isPropertyFEModel && (propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isDeclared"><!-- empty, full-width table cell - for PropertyFEModel of type list or map --> <div class="table-cell empty"></div> </ng-container> <!-- ICONS: add, delete, and expand --> <ng-container *ngIf="!property.isDeclared"> - <span *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon sprite-new add-item-icon" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly}"></span> + <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly}">Add value to list</a> <span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span> - <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || hasChildren())" (click)="expandChildById(propPath)" class="property-icon expand-icon" [class.expanded]="propPath == expandedChildId">V</span> + <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren()))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="propPath == expandedChildId"></span> </ng-container> </div> diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less index cb7cd39640..4da98ec736 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less +++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less @@ -1,48 +1,67 @@ .flat-children-container { - dynamic-property:first-child .dynamic-property-row:not(.with-top-border) { - border-top:none; - } .dynamic-property-row { - border-top: solid 1px #CCC; + /*create nested left border classes for up to 10 levels of nesting*/ + .nested-border-loop(@i) when (@i > 0) { + @size: (@i - 1) *2; + &.nested-level-@{i} .table-cell:first-child { + border-left: ~"solid @{size}px #009fdb"; + } + .nested-border-loop(@i - 1) + } + .nested-border-loop(10); + } + dynamic-property { + &:first-child .dynamic-property-row.with-top-border { + border-top:solid 1px #d2d2d2; + } + &:not(:last-child) .dynamic-property-row { + border-bottom:solid 1px #d2d2d2; + } } } .dynamic-property-row { display:flex; flex-direction:row; - align-items: center; - + align-items: stretch; + .table-cell { flex: 1; - padding:5px; + padding:9px; + justify-content: center; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - overflow:hidden; - min-height:32px; &:first-child { flex: 0 0 50%; border-right:#d2d2d2 solid 1px; - - &:only-of-type { flex: 1 1 100%; border-right:none; } } - + &.empty { + height:40px; + } } .property-icon { flex: 0 0 auto; + margin-right:10px; + align-self:center; + cursor:pointer; } - span.expand-icon { - transition: 200ms transform ease-in-out; - } - span.expand-icon.expanded { - transform: rotate(-180deg); - } + } + .filtered { /deep/ .checkbox-label-content{ background-color: yellow; } } +.inner-cell-div{ + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + display: inline; + padding-left: 8px; +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts index 1c7fbfac7a..3713676040 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts +++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts @@ -3,12 +3,14 @@ import { PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedPropertyTyp import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils'; import { PropertiesUtils } from "app/ng2/pages/properties-assignment/properties.utils"; import { DataTypeService } from "../../../services/data-type.service"; +import { trigger, state, style, transition, animate } from '@angular/core'; @Component({ selector: 'dynamic-property', templateUrl: './dynamic-property.component.html', - styleUrls: ['./dynamic-property.component.less'] + styleUrls: ['./dynamic-property.component.less'], + animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.7s ease-out', style({ opacity: '1' }))])])] }) export class DynamicPropertyComponent { @@ -16,7 +18,7 @@ export class DynamicPropertyComponent { propType: DerivedPropertyType; propPath: string; isPropertyFEModel: boolean; - childrenCount: number; + nestedLevel: number; @Input() canBeDeclared: boolean; @Input() property: PropertyFEModel | DerivedFEProperty; @@ -41,6 +43,7 @@ export class DynamicPropertyComponent { this.isPropertyFEModel = this.property instanceof PropertyFEModel; this.propType = this.property.derivedDataType; this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName; + this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length; } @@ -66,7 +69,7 @@ export class DynamicPropertyComponent { createNewChildProperty = (): void => { - let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", null); + let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined); if (this.property instanceof PropertyFEModel) { this.addChildProps(newProps, this.property.name); } else { @@ -86,11 +89,8 @@ export class DynamicPropertyComponent { childValueChanged = (property: DerivedFEProperty) => { //value of child property changed if (this.property instanceof PropertyFEModel) { // will always be the case - let parentNames = this.getParentNamesArray(property.propertiesName, []); - if (parentNames.length) { - _.set(this.property.valueObj, parentNames.join('.'), property.valueObj); - } - console.log(parentNames); + this.property.childPropUpdated(property); + this.dataTypeService.checkForCustomBehavior(this.property); this.valueChanged.emit(this.property.name); } } @@ -127,29 +127,4 @@ export class DynamicPropertyComponent { } } - - getParentNamesArray = (parentPropName: string, parentNames?: Array<string>): Array<string> => { - if (this.property instanceof PropertyFEModel) { - - if (parentPropName.indexOf("#") == -1) { return parentNames; } //finished recursing parents. return - - let parentProp: DerivedFEProperty = this.property.flattenedChildren.find(prop => prop.propertiesName === parentPropName); - let nameToInsert: string = parentProp.name; - - if (parentProp.isChildOfListOrMap) { - if (parentProp.derivedDataType == DerivedPropertyType.MAP) { - nameToInsert = parentProp.mapKey; - } else { //LIST - let siblingProps = this.property.flattenedChildren.filter(prop => prop.parentName == parentProp.parentName).map(prop => prop.propertiesName); - nameToInsert = siblingProps.indexOf(parentProp.propertiesName).toString(); - } - } - - parentNames.splice(0, 0, nameToInsert); //add prop name to array - return this.getParentNamesArray(parentProp.parentName, parentNames); //continue recursing - - } - } - - } diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html index 426ae3ab23..dc8fe70244 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html +++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html @@ -1,5 +1,5 @@ <div class="properties-table"> - <loader [display]="isLoading" size="large" [relative]="true"></loader> + <loader [display]="isLoading" size="large" [relative]="false"></loader> <div class="table-header"> <div class="table-cell col1">Property Name</div> <div class="table-cell col2">Type</div> @@ -7,10 +7,10 @@ <div class="table-cell valueCol">Value</div> </div> <div class="table-body"> - <div class="no-data" *ngIf="!feInstancesNames">No data to display</div> + <div class="no-data" *ngIf="!feInstancesNames || !feInstancesNames.length">No data to display</div> - <div *ngFor="let instanceName of feInstancesNames; trackBy:instanceName"> - <div class="table-rows-header">{{instanceName | contentAfterLastDot}}</div> + <ng-container *ngFor="let instanceName of feInstancesNames; trackBy:instanceName"> + <div class="table-rows-header white-sub-header">{{instanceName | contentAfterLastDot}}</div> <div class="table-row" *ngFor="let property of fePropertiesMap[instanceName] | searchFilter:'name':searchTerm; trackBy:property?.name" @@ -26,15 +26,18 @@ <span>{{property.name}}</span> </div> </div> - <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"></span> + <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}" tooltipDelay="0"></span> </div> <div class="table-cell col2"> <div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}"> <span>{{property.type | contentAfterLastDot}}</span> </div> </div> - <div class="table-cell col3">{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type - | contentAfterLastDot) : ''}}</div> + <div class="table-cell col3"> + <div *ngIf="property.schema && property.schema.property && property.schema.property.type" class="inner-cell-div" tooltip="{{property.schema.property.type | contentAfterLastDot}}"> + <span>{{property.schema.property.type | contentAfterLastDot}}</span> + </div> + </div> <div class="table-cell valueCol"> <!-- [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"--> <dynamic-property @@ -54,7 +57,7 @@ </div> </div> - </div> + </ng-container> </div> </div> diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less index bb019a768b..a525021b04 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less +++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less @@ -1,5 +1,5 @@ - @import './../../../../assets/styles/variables.less'; +@smaller-screen: ~"only screen and (max-width: 1580px)"; :host /deep/ input { width:100%;} @@ -10,40 +10,31 @@ height:100%; text-align:left; + .inner-cell-div{ max-width: 100%; text-overflow: ellipsis; overflow: hidden; height: 20px; } - - .table-header, .table-row { + + .table-header { display: flex; flex-direction:row; flex: 0 0 auto; - } - - .table-header { font-weight:bold; border-top: #d2d2d2 solid 1px; - background-color: #eaeaea; + background-color: #f2f2f2; - .valueCol { - justify-content: flex-start; - padding: 5px; + .table-cell { + color:#191919; + font-size:14px; } } .table-rows-header { - font-size:16px; - flex:1; border: #d2d2d2 solid 1px; border-top:none; - padding: 5px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - background-color: @tlv_color_v; } .table-body { @@ -63,35 +54,37 @@ background-color: #e6f6fb; color: #009fdb; } - } + .table-row { + display: flex; + flex-direction:row; + flex: 0 0 auto; + &:hover:not(.selected){ + background-color:#f8f8f8; cursor:pointer; + } - .table-row { - &:hover { - background-color:#f8f8f8; cursor:pointer; - } + .selected-row { + background-color:#e6f6fb; + } - &:last-child { - flex: 1 0 auto; - } - .selected-row { - background-color:#e6f6fb; + .table-cell.valueCol { + padding:0px; + + } } } - .cut-inner-long-text{ - text-overflow: ellipsis; - overflow: hidden; - } - .table-cell { + .table-cell { font-size:13px; flex:1; border: #d2d2d2 solid 1px; border-right:none; border-top:none; - padding: 5px; + padding:10px; text-overflow: ellipsis; white-space: nowrap; + overflow:hidden; display: flex; + min-height:40px; &:last-child { border-right:#d2d2d2 solid 1px; @@ -101,6 +94,7 @@ max-width:300px; display: flex; justify-content: space-between; + @media @smaller-screen { flex: 0 0 25%;} .property-name { flex: 1; @@ -116,25 +110,25 @@ } /deep/ .checkbox-container { - margin-right: 5px; + margin-right: 10px; } } &.col2 { flex: 0 0 150px; max-width:150px; + @media @smaller-screen { flex: 0 0 20%;} } &.col3 { flex:0 0 120px; max-width:120px; + @media @smaller-screen { flex: 0 0 15%;} } &.valueCol { - flex: 1; - min-width: 350px; + flex: 1 0 350px; display: flex; - justify-content: flex-end; - padding: 0px; + @media @smaller-screen { flex: 1 0 40%;} } } @@ -146,6 +140,9 @@ dynamic-property { width:100%; + &:last-child /deep/ .dynamic-property-row { + border-bottom:none; + } } -} +}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts index 58214ca16b..463de4f018 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts +++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts @@ -1,5 +1,4 @@ import { Component, Input, Output, EventEmitter, SimpleChanges, ViewChild, ElementRef } from "@angular/core"; -import { trigger, state, style, transition, animate} from '@angular/core'; import {PropertyFEModel, DerivedFEProperty, DerivedPropertyType, InstanceFePropertiesMap} from "app/models"; import {PropertiesService} from "../../services/properties.service"; import { DynamicElementComponent } from 'app/ng2/components/dynamic-element/dynamic-element.component'; @@ -8,8 +7,7 @@ import { KeysPipe } from 'app/ng2/pipes/keys.pipe'; @Component({ selector: 'properties-table', templateUrl: './properties-table.component.html', - styleUrls: ['./properties-table.component.less'], - animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.3s ease-out', style({ opacity: '1' }))]) ])] + styleUrls: ['./properties-table.component.less'] }) export class PropertiesTableComponent { @@ -65,7 +63,6 @@ export class PropertiesTableComponent { propertyChecked = (prop: PropertyFEModel, childPropName?: string) => { let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected; - console.log(isChecked, childPropName, prop); if (!isChecked) { this.propertiesService.undoDisableRelatedProperties(prop, childPropName); } else { diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts index e98b69003e..891aa60860 100644 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts +++ b/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts @@ -14,6 +14,7 @@ export class TooltipComponent { private tooltip: ComponentRef<TooltipContentComponent>; private visible: boolean; + private delayInProgress: boolean = false; // ------------------------------------------------------------------------- // Constructor @@ -31,6 +32,7 @@ export class TooltipComponent { @Input() tooltipDisabled: boolean; @Input() tooltipAnimation: boolean = true; @Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom"; + @Input() tooltipDelay: number = 1500; // ------------------------------------------------------------------------- // Public Methods @@ -41,6 +43,11 @@ export class TooltipComponent { if(this.tooltipDisabled || this.visible || this.content === "") { return; } + if (this.tooltipDelay && !this.delayInProgress) { + this.delayInProgress = true; + setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay); + return; + } this.visible = true; if (typeof this.content === "string") { @@ -65,6 +72,7 @@ export class TooltipComponent { @HostListener("mouseleave") hide(): void { + this.delayInProgress = false; if (!this.visible) { return; } diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html index 317a1fc827..fa3270ec77 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html @@ -28,7 +28,7 @@ </tab> </tabs> <div class="header"> - <div class="search-filter-container"> + <div class="search-filter-container" [class.without-filter]="isInpusTabSelected"> <input type="text" class="search-box" placeholder="Search" [(ngModel)]="searchQuery" /> <span class="sprite search-icon"></span> <filter-properties-assignment *ngIf="!isInpusTabSelected" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment> @@ -42,7 +42,7 @@ <tab tabTitle="Composition"> <div class="hierarchy-nav-container"> <loader [display]="loadingInstances" size="medium" [relative]="true"></loader> - <div class="hierarchy-header"> + <div class="hierarchy-header white-sub-header"> <span tooltip="{{component.name}}">{{component.name}}</span> </div> <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0 || isInpusTabSelected">No data to display</div> @@ -55,8 +55,8 @@ </tab> <tab tabTitle="Property Structure"> <div class="hierarchy-nav-container"> - <div class="hierarchy-header"> - <span tooltip="{{!isInpusTabSelected ? (propertyStructureHeader || selectedFlatProperty.name) : ''}}">{{!isInpusTabSelected ? (propertyStructureHeader || selectedFlatProperty.name || "No Property Selected") : "No Property Selected"}}</span> + <div class="hierarchy-header white-sub-header" [class.selected]="selectedFlatProperty.path == propertyStructureHeader"> + <span tooltip="{{!isInpusTabSelected ? propertyStructureHeader : ''}}">{{!isInpusTabSelected ? (propertyStructureHeader || "No Property Selected") : "No Property Selected"}}</span> </div> <div *ngIf="!propertiesNavigationData || propertiesNavigationData.length === 0 || isInpusTabSelected">No data to display</div> <hierarchy-navigation class="hierarchy-nav" diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less index e56374a2c2..7f9b4e7d58 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less @@ -1,4 +1,5 @@ @import '../../../../assets/styles/variables'; +//@import url('https://fonts.googleapis.com/css?family=Open+Sans'); @ng2-shadow-gray: #f8f8f8; @ng2-light-gray: #eaeaea; @ng2-medium-gray: #d2d2d2; @@ -15,6 +16,7 @@ .properties-assignment-page { height: 100%; + font-family: 'Open Sans', omnes-regular, sans-serif; .main-content { display:flex; @@ -28,20 +30,21 @@ margin: 0 0 1em 0; /deep/ .tabs { - width:25%; + width:33%; text-align:center; - } /deep/ .tab { - padding: 10px .5em; + padding: 12px; + flex: 1; + font-weight:bold; &.active { color:#009fdb; border-color: #d2d2d2; border-top: solid 4px #009fdb; background-color: white; - padding-top:7px; + padding-top:9px; } } @@ -49,39 +52,47 @@ position:absolute; top:0; right:0; - min-width:200px; } .search-filter-container{ - position: relative; - right: 164px; - } + position: absolute; + right: 100px; + display:flex; + flex-direction:row; + + .search-box { + border: 1px solid @ng2-medium-gray; + border-radius: 3px; + height: 32px; + margin: 0; + padding: 2px 20px 4px 10px; + outline: none; + font-style: italic; + color:@ng2-med-dark-gray; + + &::-moz-placeholder { color:@ng2-med-dark-gray;} + &::-webkit-input-placeholder{ color:@ng2-med-dark-gray;} + } + + .search-icon { + background-position: -48px -3137px; + width: 14px; + height: 14px; + position: absolute; + right:42px; + top: 8px; + } + + &.without-filter { + margin-right:10px; + .search-icon { + right: 4px; + } + } - .search-box { - border: 1px solid @ng2-medium-gray; - border-radius: 4px; - height: 32px; - margin: 0; - padding: 2px 20px 4px 10px; - outline: none; - font-style: italic; - color:@ng2-med-dark-gray; - margin-right:10px; - - &::-moz-placeholder { color:@ng2-med-dark-gray;} - &::-webkit-input-placeholder{ color:@ng2-med-dark-gray;} - } - .search-icon { - background-position: -48px -3137px; - width: 14px; - height: 14px; - position: relative; - right: 34px; - top: 4px; } .advance-search{ - position: relative; - right: 22px; + } .clear-filter{ cursor: pointer; @@ -104,18 +115,19 @@ display:flex; flex:0 0 350px; flex-direction:column; - margin: 3em 0 1em 1em; - padding: 10px; - overflow:auto; + margin: 45px 0 1em 1em; + overflow-x:auto; /deep/ .tabs { - width: 33%; + border-bottom: solid 1px #d0d0d0; } /deep/ .tab { - padding: 0.5em 1em 0 1em; - white-space: nowrap; - font-size: 13px; + flex: none; + padding: 8px 20px 0; + font-size: 14px; + font-weight:bold; + line-height:30px; } } @@ -127,6 +139,28 @@ border: 1px solid #ddd; } + /deep/ .white-sub-header { + background-color: #fffefe; + box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15); + border-bottom: #d2d2d2 solid 1px; + color:#009fdb; + font-weight:bold; + font-size:14px; + text-align:left; + flex:0 0 auto; + padding: 10px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + &.hierarchy-header { + padding-left:20px; + &.selected { + background-color: #e6f6fb; + } + } + + } .hierarchy-nav-container { flex:1; @@ -136,15 +170,7 @@ } .hierarchy-header { - height:30px; - line-height: 2.5em; - display: flex; - width: 100%; - padding-left: 14px; - font-weight: bold; - text-align: left; - background-color: @ng2-light-gray; - font-size: 13px; + span{ text-overflow: ellipsis; overflow: hidden; diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts index 98fdc7391a..22d6f2fe51 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts @@ -242,10 +242,8 @@ export class PropertiesAssignmentComponent { this.propertiesNavigationData = simpleFlatProperty; } - // Updatet the header in the navigation tree with property name. - if(property instanceof DerivedFEProperty) { - this.propertyStructureHeader = (property.propertiesName.split('#'))[0]; - } + // Update the header in the navigation tree with property name. + this.propertyStructureHeader = (property.propertiesName.split('#'))[0]; // Set selected property in table this.selectedFlatProperty = this.hierarchyNavService.createSimpleFlatProperty(property, instanceName); diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts index dfde2a40b2..0eb8534595 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts @@ -43,6 +43,7 @@ export class PropertiesUtils { this.initValueObjectRef(newFEProp); //initialize valueObj. propertyFeArray.push(newFEProp); newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children + this.dataTypeService.checkForCustomBehavior(newFEProp); } }); instanceFePropertiesMap[instanceName] = propertyFeArray; diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts index be2388144f..821c215be5 100644 --- a/catalog-ui/src/app/ng2/services/data-type.service.ts +++ b/catalog-ui/src/app/ng2/services/data-type.service.ts @@ -20,35 +20,7 @@ export class DataTypeService { public getDataTypeByTypeName(typeName: string): DataTypeModel { return this.dataTypes[typeName]; } -/* - //if the dt derived from simple- return the first parent type, else- return null - public getTypeForDataTypeDerivedFromSimple = (dataTypeName:string):string => { - /////////temporary hack for tosca primitives/////////////////////// - if (!this.dataTypes[dataTypeName]) { - return PROPERTY_TYPES.STRING; - } - /////////////////////////////////////////////////////////////////// - if (this.dataTypes[dataTypeName].derivedFromName == PROPERTY_DATA.ROOT_DATA_TYPE || this.dataTypes[dataTypeName].properties) { - return null; - } - if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.dataTypes[dataTypeName].derivedFromName) > -1) { - return this.dataTypes[dataTypeName].derivedFromName - } - return this.getTypeForDataTypeDerivedFromSimple(this.dataTypes[dataTypeName].derivedFromName); - }; - /** - * The function returns all properties for the DataType passed in, and recurses through parent dataTypes (derivedFrom) to retrieve their properties as well - * @param dataTypeObj - * - public getDataTypePropertiesRecursively(dataTypeObj: DataTypeModel): Array<PropertyBEModel> { - let propertiesArray: Array<PropertyBEModel> = dataTypeObj.properties || []; - if (PROPERTY_DATA.ROOT_DATA_TYPE !== dataTypeObj.derivedFromName) { - propertiesArray = propertiesArray.concat(this.getDataTypePropertiesRecursively(dataTypeObj.derivedFrom)); - } - return propertiesArray; - } -*/ public getDerivedDataTypeProperties(dataTypeObj: DataTypeModel, propertiesArray: Array<DerivedFEProperty>, parentName: string) { //push all child properties to array @@ -67,5 +39,24 @@ export class DataTypeService { } } + /** + * Checks for custom behavior for a given data type by checking if a function exists within data-type.service with that name + * Additional custom behavior can be added by adding a function with the given dataType name + */ + public checkForCustomBehavior = (property:PropertyFEModel) => { + let shortTypeName:string = property.type.split('.').pop(); + if (this[shortTypeName]) { + this[shortTypeName](property); //execute function for given type, pass property as param + } + } + + public Naming = (property: PropertyFEModel) => { + let generatedNamingVal: boolean = _.get(property.valueObj, 'ecomp_generated_naming', true); + property.flattenedChildren.forEach((prop) => { + if (prop.name == 'naming_policy') prop.hidden = !generatedNamingVal; + if (prop.name == 'instance_name') prop.hidden = generatedNamingVal; + }); + } + } diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html index efe830d6e0..872bf90329 100644 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html +++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html @@ -1,5 +1,5 @@ <div class="checkbox-container {{checkboxStyle}}"> - <div class="checkbox-animation" [@checkEffect]="checked"></div> + <div class="checkbox-animation"></div><!--[@checkEffect]="checked"--> <label class="checkbox-label" > <input type="checkbox" class="checkbox-hidden" [ngModel]="checked" (ngModelChange)="toggleState($event)" [disabled]="disabled" /> <div class="checkbox-icon"></div> diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less index 7ed8a22194..3a28c5fb42 100644 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less +++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less @@ -1,4 +1,6 @@ @import '../../../../assets/styles/tlv-sprite'; +@import '../../../../assets/styles/sprite'; + .checkbox-container { display:inline-block; @@ -12,7 +14,7 @@ } .checkbox-label { - font-weight: normal; + font-weight: inherit; font-size: inherit; } @@ -37,7 +39,8 @@ height:0; display:none; &:checked ~ .checkbox-icon::before{ - background-position: -10px -120px; + .sprite-new; + .filled-checkbox-icon } &[disabled] ~ .checkbox-icon::before { /* TODO: add disabled styles here */ @@ -52,7 +55,7 @@ background-color: #009fdb; position: absolute; left: 2px; - top: 5px; + top: 4px; width:10px; height:10px; border-radius: 50%; diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts index 5a9954c336..c1bb28b6ff 100644 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts +++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts @@ -1,19 +1,19 @@ import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; -import { trigger, state, style, transition, animate, keyframes } from '@angular/core'; +//import { trigger, state, style, transition, animate, keyframes } from '@angular/core'; @Component({ selector: 'checkbox', templateUrl: './checkbox.component.html', styleUrls: ['./checkbox.component.less'], - encapsulation: ViewEncapsulation.None, - animations: [ - trigger('checkEffect', [ - state('true', style({ position: 'absolute', left: '2px', top: '5px', width: '10px', height: '10px', display: 'none', opacity: '.5' })), - state('false', style({ left: '-18px', top: '-15px', height: '50px', width: '50px', opacity: '0' })), - transition('1 => 0', animate('150ms ease-out')), - transition('0 => 1', animate('150ms ease-in')) - ]) - ] + encapsulation: ViewEncapsulation.None + // animations: [ + // trigger('checkEffect', [ + // state('true', style({ position: 'absolute', left: '2px', top: '5px', width: '10px', height: '10px', display: 'none', opacity: '.5' })), + // state('false', style({ left: '-18px', top: '-15px', height: '50px', width: '50px', opacity: '0' })), + // transition('1 => 0', animate('150ms ease-out')), + // transition('0 => 1', animate('150ms ease-in')) + // ]) + // ] }) export class CheckboxComponent { diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less index fa05249ea4..6f9e57aaf2 100644 --- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less +++ b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less @@ -1,5 +1,9 @@ @import '../../../../assets/styles/variables'; +tab { + height: 100%; +} + .tabs { display:flex; flex: 0 0 auto; @@ -14,8 +18,8 @@ .tab-content-container { flex: 1; - height: 100%; width:100%; + overflow-y:hidden; } .tab-content { @@ -33,12 +37,8 @@ position:relative; &:first-child { - border-top-left-radius: 8px; border-left:solid 1px #d2d2d2; } - &:last-child { - border-top-right-radius: 8px; - } &.active { background-color:#009fdb; @@ -77,7 +77,7 @@ &.active { color: @main_color_a; &:after { - transform: scaleX(1); + transform: scaleX(1.2); } } } |