diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/properties-assignment')
4 files changed, 80 insertions, 55 deletions
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; |