SHIBUI-1332 Fixed layout

TIER · Jul 25, 2019 · 9393832 · 9393832
1 parent e72c6c3
commit 9393832
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 46 deletions.
diff --git a/ui/src/app/metadata/configuration/component/array-property.component.html b/ui/src/app/metadata/configuration/component/array-property.component.html
@@ -1,7 +1,7 @@
 <div>
     <ng-container *ngIf="property.items.type === 'object'">
-        <div class="p-2" role="term" [translate]="property.name">{{ property.name }}</div>
-        <div *ngFor="let item of range; let i = index;" class="p-2 bg-lighter border-top">
+        <div class="py-2" role="term" [translate]="property.name">{{ property.name }}</div>
+        <div *ngFor="let item of range; let i = index;" class="py-2 bg-lighter border-top">
             <div *ngFor="let prop of getKeys(property.items); let n = index;" class="d-flex py-2">
                 <div [ngStyle]="{'width': width}">
                     <span [translate]="property.items.properties[prop].title">{{ property.items.properties[prop].title }}</span>
@@ -11,12 +11,13 @@
                         [ngbPopover]="version[i][prop]"
                         triggers="mouseenter:mouseleave"
                         container="body"
-                        placement="left"
-                        [ngStyle]="{'width': width}">
+                        [ngStyle]="{'width': width}"
+                        class="text-truncate"
+                        popoverClass="popover-lg">
                         {{ version[i][prop] }}
                     </div>
                     <div *ngIf="!version[i]" [ngStyle]="{'width': width}">
-                        &mdash;
+                        -
                     </div>
                 </ng-container>
             </div>
@@ -34,9 +35,9 @@
                 <ng-template [ngTemplateOutlet]="listref"></ng-template>
             </div>
             <div *ngIf="property.widget && property.widget.dataUrl">
-                <div *ngFor="let attr of attributeList$ | async" class="d-flex justify-content-between border-bottom border-light">
-                    <span class="p-2" role="term" [translate]="attr.label" [ngStyle]="{'width': width}">{{ attr.label }}</span>
-                    <div *ngFor="let v of property.value" class="p-2" [ngStyle]="{'width': width}">
+                <div *ngFor="let attr of attributeList$ | async" class="d-flex justify-content-start border-bottom border-light">
+                    <span class="py-2" role="term" [translate]="attr.label" [ngStyle]="{'width': width}">{{ attr.label }}</span>
+                    <div *ngFor="let v of property.value" class="py-2" [ngStyle]="{'width': width}">
                         <span *ngIf="v && v.indexOf(attr.key) > -1" translate="value.true">
                             true
                         </span>
@@ -51,17 +52,16 @@
 </div>
 <ng-template #listref>
     <div class="d-flex align-items-center border-bottom border-light">
-        <span class="p-2" role="term" [translate]="property.name" [ngStyle]="{'width': width}">{{ property.name }}</span>
+        <span class="py-2" role="term" [translate]="property.name" [ngStyle]="{'width': width}">{{ property.name }}</span>
         <ng-container *ngFor="let v of property.value">
-            <p [ngStyle]="{'width': width}" class="text-secondary" *ngIf="!v || !v.length">&mdash;</p>
-            <span class="text-secondary" *ngIf="v && v.length && v.length === 1">{{ v }}</span>
+            <p [ngStyle]="{'width': width}" class="text-secondary" *ngIf="!v || !v.length">-</p>
             <ul [ngStyle]="{'width': width}"
-                class="list-unstyled py-2"
-                *ngIf="v && v.length > 1"
+                class="list-unstyled py-2 m-0"
                 [ngbPopover]="popContent"
                 triggers="mouseenter:mouseleave"
-                popoverClass="popover-lg">
-                <li *ngFor="let item of v; odd as isOdd" class="text-truncate" [ngClass]="{'bg-light': isOdd, 'p-2': v.length > 1}">
+                popoverClass="popover-lg"
+                *ngIf="v && v.length > 0">
+                <li *ngFor="let item of v; odd as isOdd" class="text-truncate" [ngClass]="{'bg-light': isOdd, 'py-2': v.length > 1}">
                     <ng-container *ngIf="preview.observers.length > 0 && isUrl(item)">
                         <button class="btn btn-link" (click)="preview.emit(item)">
                             <i class="fa fa-eye fa-lg text-success"></i>

diff --git a/ui/src/app/metadata/configuration/component/filter-configuration-list-item.component.html b/ui/src/app/metadata/configuration/component/filter-configuration-list-item.component.html
@@ -19,7 +19,7 @@
 </div>
 <div *ngIf="open">
     <hr class="my-2" />
-    <div class="d-flex justify-content-between mb-2">
+    <div class="d-flex justify-content-end mb-2">
         <div class="d-flex justify-content-between">
             <a class="btn btn-link"
                 [routerLink]="['../../', 'filter', filter.resourceId, 'edit']">

diff --git a/ui/src/app/metadata/configuration/component/metadata-configuration.component.html b/ui/src/app/metadata/configuration/component/metadata-configuration.component.html
@@ -18,20 +18,22 @@ <h2 class="title h4 m-0 flex-grow-1">
                     </button>
                 </div>
             </div>
-            <div class="d-flex border-bottom border-light border-2 p-2">
-                <strong [ngStyle]="{'width': width}" translate="label.option">Option</strong>
-                <strong *ngFor="let date of configuration.dates" [ngStyle]="{'width': width}">
-                    <translate-i18n key="label.value" *ngIf="configuration.dates.length <= 1">Value</translate-i18n>
-                    <span *ngIf="configuration.dates.length > 1">{{ date | date:'medium' }}</span>
-                </strong>
+            <div class="p-2">
+                <div class="d-flex border-bottom border-light border-2 py-2">
+                    <strong [ngStyle]="{'width': width}" translate="label.option">Option</strong>
+                    <strong *ngFor="let date of configuration.dates" [ngStyle]="{'width': width}">
+                        <translate-i18n key="label.value" *ngIf="configuration.dates.length <= 1">Value</translate-i18n>
+                        <span *ngIf="configuration.dates.length > 1">{{ date | date:'medium' }}</span>
+                    </strong>
+                </div>
+                <object-property
+                    class="d-block"
+                    *ngIf="section"
+                    [property]="section"
+                    [columns]="configuration.dates.length"
+                    (preview)="onPreview($event)">
+                </object-property>
             </div>
-            <object-property
-                class="d-block"
-                *ngIf="section"
-                [property]="section"
-                [columns]="configuration.dates.length"
-                (preview)="onPreview($event)">
-            </object-property>
         </div>
     </section>
 </div>
diff --git a/ui/src/app/metadata/configuration/component/primitive-property.component.html b/ui/src/app/metadata/configuration/component/primitive-property.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="property.name" class="d-flex border-bottom border-light p-2">
+<div *ngIf="property.name" class="d-flex border-bottom border-light py-2">
     <span class="d-block"
         role="term"
         [translate]="property.name"

diff --git a/ui/src/app/metadata/configuration/container/configuration.component.spec.ts b/ui/src/app/metadata/configuration/container/configuration.component.spec.ts
@@ -7,6 +7,8 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { MetadataConfiguration } from '../model/metadata-configuration';
 import { ConfigurationComponent } from './configuration.component';
 import * as fromConfiguration from '../reducer';
+import * as fromProviders from '../../provider/reducer';
+import * as fromResolvers from '../../resolver/reducer';
 import { MockI18nModule } from '../../../../testing/i18n.stub';
 
 @Component({
@@ -36,6 +38,8 @@ describe('Metadata Configuration Page Component', () => {
                 NgbDropdownModule,
                 StoreModule.forRoot({
                     'metadata-configuration': combineReducers(fromConfiguration.reducers),
+                    'provider': combineReducers(fromProviders.reducers),
+                    'resolver': combineReducers(fromResolvers.reducers)
                 }),
                 MockI18nModule,
                 RouterTestingModule

diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.html b/ui/src/app/metadata/configuration/container/metadata-comparison.component.html
@@ -1,10 +1,7 @@
-<div class="container">
-    <!--<metadata-header
-        [isEnabled]="isEnabled$ | async"
-        [version]="version$ | async"
-        [versionNumber]="versionNumber$ | async"
-        [isCurrent]="isCurrent$ | async"></metadata-header>
-    -->
+<div class="" [ngClass]="{
+    'container-fluid': (numVersions$ | async) > 2,
+    'container': (numVersions$ | async) <= 2
+}">
     <div class="px-3 my-3 d-flex justify-content-start">
         <a class="btn btn-link" routerLink="../history">
             <i class="fa fa-history sr-hidden"></i>&nbsp;

diff --git a/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts b/ui/src/app/metadata/configuration/container/metadata-comparison.component.ts
@@ -3,7 +3,7 @@ import { Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { ActivatedRoute } from '@angular/router';
 import { map } from 'rxjs/operators';
-import { ConfigurationState, getVersionConfigurations } from '../reducer';
+import { ConfigurationState, getVersionConfigurations, getVersionConfigurationCount } from '../reducer';
 import { Metadata } from '../../domain/domain.type';
 import { CompareVersionRequest } from '../action/compare.action';
 import { MetadataConfiguration } from '../model/metadata-configuration';
@@ -17,6 +17,7 @@ import { MetadataConfiguration } from '../model/metadata-configuration';
 export class MetadataComparisonComponent {
 
     versions$: Observable<MetadataConfiguration>;
+    numVersions$: Observable<number>;
 
     constructor(
         private store: Store<ConfigurationState>,
@@ -28,5 +29,6 @@ export class MetadataComparisonComponent {
         ).subscribe(this.store);
 
         this.versions$ = this.store.select(getVersionConfigurations);
+        this.numVersions$ = this.store.select(getVersionConfigurationCount);
     }
 }
diff --git a/ui/src/app/metadata/configuration/container/metadata-options.component.html b/ui/src/app/metadata/configuration/container/metadata-options.component.html
@@ -7,11 +7,11 @@
         ></metadata-header>
     <div class="px-3 my-3 d-flex justify-content-between" id="navigation">
         <div>
-            <!--<a class="btn btn-link" routerLink="../history">
+            <a class="btn btn-link" routerLink="../history">
                 <i class="fa fa-history sr-hidden"></i>&nbsp;
                 <translate-i18n key="action.version-history">Version History</translate-i18n>
-            </a>-->
-            <button class="btn btn-link" (click)="onScrollTo('filters')">
+            </a>
+            <button class="btn btn-link" (click)="onScrollTo('filters')" *ngIf="kind === 'provider'">
                 <i class="fa fa-arrow-down sr-hidden"></i>&nbsp;
                 <translate-i18n key="label.filters">Filters</translate-i18n>
             </button>

diff --git a/ui/src/app/metadata/configuration/reducer/configuration.reducer.spec.ts b/ui/src/app/metadata/configuration/reducer/configuration.reducer.spec.ts
@@ -45,10 +45,10 @@ describe('Configuration Reducer', () => {
 
     describe('SET_METADATA action', () => {
         it('should set the state metadata model', () => {
-            const action = new actions.SetMetadata(model as MetadataResolver);
+            const action = new actions.SetMetadata({ id: model.id, type: 'resolver' });
             const result = reducer(initialState, action);
 
-            expect(result).toEqual({ ...initialState, model });
+            expect(result).toEqual({ ...initialState, modelId: model.id, modelType: 'resolver' });
         });
     });
 
@@ -66,7 +66,8 @@ describe('Configuration Reducer', () => {
             const action = new actions.ClearConfiguration();
             const result = reducer({
                 ...initialState,
-                model,
+                modelType: 'resolver',
+                modelId: model.id,
                 definition,
                 schema
             }, action);
@@ -84,7 +85,7 @@ describe('Configuration Reducer', () => {
         */
         describe('getModel', () => {
             it('should retrieve the model from state', () => {
-                expect(fromConfig.getModel({...initialState, model})).toBe(model);
+                expect(fromConfig.getModelKind({...initialState, modelType: 'resolver'})).toBe('resolver');
             });
         });
         describe('getDefinition', () => {

diff --git a/ui/src/app/metadata/configuration/reducer/index.ts b/ui/src/app/metadata/configuration/reducer/index.ts
@@ -160,4 +160,4 @@ export const getVersionConfigurations = createSelector(
     getConfigurationSectionsFn
 );
 
-
+export const getVersionConfigurationCount = createSelector(getVersionConfigurations, (config) => config ? config.dates.length : 0);
diff --git a/ui/src/theme/modal.scss b/ui/src/theme/modal.scss
@@ -3,6 +3,7 @@
 }
 
 .modal.modal-xl {
+    max-width: 100% !important;
     .modal-dialog {
         width: 1200px;
         max-width: 98%;