From c5d2ebe8f841a73d36b129e7d76fe82dad983a14 Mon Sep 17 00:00:00 2001 From: apapachristou Date: Wed, 5 Jun 2019 17:07:36 +0300 Subject: [PATCH] Fixes Layouts on Admin Pages --- .../dataset-profile-editor.component.html | 145 ++++++------- .../dataset-profile-listing.component.html | 110 +++++----- .../dataset-profile-listing.component.scss | 60 ++++-- .../editor/dmp-profile-editor.component.html | 199 +++++++++++------- .../editor/dmp-profile-editor.component.scss | 26 ++- .../editor/dmp-profile-editor.component.ts | 11 +- .../dmp-profile-listing.component.html | 69 +++--- .../dmp-profile-listing.component.scss | 88 +++++--- .../user-role-editor.component.html | 2 +- .../user/listing/user-listing.component.html | 64 +++--- .../user/listing/user-listing.component.scss | 56 ++++- 11 files changed, 502 insertions(+), 328 deletions(-) diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html index 9b1557554..e2b1fb661 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html @@ -1,76 +1,77 @@ -
- - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - - -
-
- -
- - - {{'DATASET-PROFILE-EDITOR.STEPS.PAGES.TITLE' | translate}} -
- -
- -
-
- - - {{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}} -
- - - - {{i + 1}}. {{form.get('sections').get(''+i).get('title').value}} - - - -
- -
- - -
- -
-
- - - -
- -
-
- -
- -
+
+
+ + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + + +
+
+
-
- -
- + + + {{'DATASET-PROFILE-EDITOR.STEPS.PAGES.TITLE' | translate}} +
+ +
+ +
+
+ + + {{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}} +
+ + + + {{i + 1}}. {{form.get('sections').get(''+i).get('title').value}} + + + +
+ + +
+ + +
+ +
+
+ + + +
+ +
+
+ + +
+
+ +
+ +
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html index 75e04772d..44a5c5adf 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.html @@ -1,61 +1,69 @@ -
-

{{titlePrefix}} {{'DATASET-PROFILE-LISTING.TITLE' | translate}}

+
+
+

{{titlePrefix}} {{'DATASET-PROFILE-LISTING.TITLE' | translate}}

- - - + + + - - - {{'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate}} - {{row.label}} - + + + + {{'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate}} + {{row.label}} + - - - {{'DATASET-PROFILE-LISTING.COLUMNS.DESCRIPTION' | translate}} - {{row.description}} - + + + {{'DATASET-PROFILE-LISTING.COLUMNS.DESCRIPTION' | translate}} + + {{row.description}} + - - - {{'DATASET-PROFILE-LISTING.COLUMNS.CREATED' | - translate}} - {{row.created | date:'shortDate'}} - + + + {{'DATASET-PROFILE-LISTING.COLUMNS.CREATED' | + translate}} + {{row.created | date:'shortDate'}} + - - - {{'DATASET-PROFILE-LISTING.COLUMNS.ACTIONS' | translate}} - - - + + + + + - - - - - - - + + - - - + + + - - - - + + + + - +
+ +
+
diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss index 5b8961b21..6bf311012 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss @@ -1,38 +1,68 @@ .mat-table { - margin: 24px; + margin: 24px; } .mat-fab-bottom-right { - // top: auto !important; - // right: 20px !important; - // bottom: 10px !important; - // left: auto !important; - // position: fixed !important; - float: right; - z-index: 5; + // top: auto !important; + // right: 20px !important; + // bottom: 10px !important; + // left: auto !important; + // position: fixed !important; + float: right; + z-index: 5; } .full-width { - width: 100%; + width: 100%; } .mat-card { - margin: 16px 0; + margin: 16px 0; } .mat-row { - cursor: pointer; + cursor: pointer; } mat-row:hover { - background-color: lightgray; + background-color: lightgray; } // mat-row:nth-child(even){ // background-color:red; // } -mat-row:nth-child(odd){ - background-color:#eef0fb; - } +mat-row:nth-child(odd) { + background-color: #eef0fb; +} +::ng-deep .mat-paginator-container { + flex-direction: row-reverse !important; + justify-content: space-between !important; + background-color: #f6f6f6; + height: 30px; + min-height: 30px !important; +} + +::ng-deep .mat-paginator-page-size { + height: 43px; +} + +::ng-deep .mat-paginator-range-label { + margin: 15px 32px 0 24px !important; +} + +::ng-deep .mat-paginator-range-actions { + width: 55% !important; + min-height: 43px !important; + justify-content: space-between; +} + +::ng-deep .mat-paginator-navigation-previous { + margin-left: auto !important; +} + +::ng-deep .mat-icon-button { + height: 30px !important; + font-size: 12px !important; +} diff --git a/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.html b/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.html index 749f68b95..11e4dd144 100644 --- a/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.html +++ b/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.html @@ -1,95 +1,134 @@ -
-
- - - -

{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}

- - -

{{formGroup.get('label').value}}

- - - -
- - - - {{formGroup.get('label').getError('backendError').message}} - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - +
+
+ +

{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}

+

{{formGroup.get('label').value}}

+ + + +
+ + + + {{formGroup.get('label').getError('backendError').message}} + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +

{{'DMP-PROFILE-EDITOR.FIELDS.TITLE' | translate}}

-

{{'DMP-PROFILE-EDITOR.FIELDS.TITLE' | translate}}

-
-
- - - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - - {{fieldFormGroup.get('label').getError('backendError').message}} - - - - {{ - getDMPProfileFieldTypeWithLanguage(fieldType) | translate}} - - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - - {{fieldFormGroup.get('type').getError('backendError').message}} - - - - {{ - getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}} - - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - - {{fieldFormGroup.get('dataType').getError('backendError').message}} - -
- - {{'DMP-PROFILE-EDITOR.FIELDS.REQUIRED' | translate}} -
-
+
+
+
+
+ + + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + + {{fieldFormGroup.get('label').getError('backendError').message}} + + + + + {{ + getDMPProfileFieldTypeWithLanguage(fieldType) | translate}} + + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + + {{fieldFormGroup.get('type').getError('backendError').message}} + + + + + {{ + getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}} + + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + + {{fieldFormGroup.get('dataType').getError('backendError').message}} + + +
+ + {{'DMP-PROFILE-EDITOR.FIELDS.REQUIRED' | translate}} +
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
-
-
-
-
+
+ (click)="delete()">{{'DMP-PROFILE-EDITOR.ACTIONS.DELETE' | translate}} +
-
+
+ +
-
- - - -
\ No newline at end of file + + + +
+
diff --git a/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.scss b/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.scss index 90bce5b9e..25d42604c 100644 --- a/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.scss +++ b/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.scss @@ -1,6 +1,24 @@ .dmp-profile-editor { - .centered-row-item { - align-items: center; - display: flex; - } + .centered-row-item { + align-items: center; + display: flex; + } + + .remove { + background-color: white; + color: black; + } + + .add { + background-color: white; + color: #009700; + } +} + +::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { + background-color: #0070c0; +} + +::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { + background-color: #b0b0b0; } diff --git a/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.ts b/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.ts index 05b129b0b..8d4ef64bd 100644 --- a/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.ts +++ b/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component } from '@angular/core'; +import { AfterViewInit, Component, OnInit } from '@angular/core'; import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms'; import { ActivatedRoute, Params, Router } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; @@ -71,6 +71,7 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie this.dmpProfileModel = new DmpProfileEditorModel(); setTimeout(() => { this.formGroup = this.dmpProfileModel.buildForm(); + this.addField(); }); this.breadCrumbs = Observable.of([{ parentComponentName: 'DmpProfileListingComponent', @@ -95,8 +96,8 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie this.dmpProfileService.createDmp(this.formGroup.value) .pipe(takeUntil(this._destroyed)) .subscribe( - complete => this.onCallbackSuccess(), - error => this.onCallbackError(error) + complete => this.onCallbackSuccess(), + error => this.onCallbackError(error) ); } @@ -198,8 +199,8 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie this.dmpProfileService.createDmp(this.formGroup.value) .pipe(takeUntil(this._destroyed)) .subscribe( - complete => this.onCallbackSuccess(), - error => this.onCallbackError(error) + complete => this.onCallbackSuccess(), + error => this.onCallbackError(error) ); } diff --git a/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.html b/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.html index ba556a6a8..515549df8 100644 --- a/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.html +++ b/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.html @@ -1,40 +1,47 @@ -
-

{{titlePrefix}} {{'DMP-PROFILE-LISTING.TITLE' | translate}}

+
+
+

{{titlePrefix}} {{'DMP-PROFILE-LISTING.TITLE' | translate}}

- - - + + + - - - {{'DMP-PROFILE-LISTING.COLUMNS.NAME' | translate}} - {{row.label}} - + + + + {{'DMP-PROFILE-LISTING.COLUMNS.NAME' | translate}} + {{row.label}} + - - - {{'DMP-PROFILE-LISTING.COLUMNS.STATUS' | translate}} - {{row.status}} - + + + + {{'DMP-PROFILE-LISTING.COLUMNS.STATUS' | translate}} + {{row.status}} + - - - {{'DMP-PROFILE-LISTING.COLUMNS.CREATED' | translate}} - {{row.created | date:'shortDate'}} - + + + + {{'DMP-PROFILE-LISTING.COLUMNS.CREATED' | translate}} + {{row.created | date:'shortDate'}} + - + - - - + + + - - - - + + + + - +
+ +
+
diff --git a/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss b/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss index 9523bc62a..772182938 100644 --- a/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss +++ b/dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss @@ -1,28 +1,62 @@ -.dmp-profile-listing { - - .mat-row { - cursor: pointer; - } - - .mat-card { - margin: 1em 0; - } - - mat-row:hover { - background-color: lightgray; - } - - mat-row:nth-child(odd) { - background-color: #eef0fb; - } - - .mat-fab-bottom-right { - // top: auto !important; - // right: 20px !important; - // bottom: 10px !important; - // left: auto !important; - // position: fixed !important; - float: right; - z-index: 5; - } +.mat-table { + margin: 24px; +} + +.dmp-profile-listing { + .mat-row { + cursor: pointer; + } + + .mat-card { + margin: 1em 0; + } + + mat-row:hover { + background-color: lightgray; + } + + mat-row:nth-child(odd) { + background-color: #eef0fb; + } + + .mat-fab-bottom-right { + // top: auto !important; + // right: 20px !important; + // bottom: 10px !important; + // left: auto !important; + // position: fixed !important; + float: right; + z-index: 5; + } +} + +::ng-deep .mat-paginator-container { + flex-direction: row-reverse !important; + justify-content: space-between !important; + background-color: #f6f6f6; + height: 30px; + min-height: 30px !important; +} + +::ng-deep .mat-paginator-page-size { + height: 43px; +} + +::ng-deep .mat-paginator-range-label { + margin: 15px 32px 0 24px !important; +} + +::ng-deep .mat-paginator-range-actions { + width: 55% !important; + min-height: 43px !important; + justify-content: space-between; +} + +::ng-deep .mat-paginator-navigation-previous { + margin-left: auto !important; +} + +::ng-deep .mat-icon-button { + height: 30px !important; + font-size: 12px !important; } diff --git a/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html b/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html index 63e8817e0..01994092d 100644 --- a/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html +++ b/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html @@ -1,4 +1,4 @@ -
+ {{getPrincipalAppRoleWithLanguage(role)}} diff --git a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html index 93c57fe64..b136f7f07 100644 --- a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html +++ b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html @@ -1,39 +1,41 @@ -
-

{{'USERS.LISTING.TITLE' | translate}}

+
+
+

{{'USERS.LISTING.TITLE' | translate}}

- - - + + + - - - {{'USERS.LISTING.LABEL' | translate}} - {{row.name}} - + + + {{'USERS.LISTING.LABEL' | translate}} + {{row.name}} + - - {{'USERS.LISTING.EMAIL' | translate}} - {{row.email}} - + + {{'USERS.LISTING.EMAIL' | translate}} + {{row.email}} + - - {{'USERS.LISTING.LAST-LOGGED-IN' | translate}} - {{row.lastloggedin | date:'shortDate'}} - + + {{'USERS.LISTING.LAST-LOGGED-IN' | translate}} + {{row.lastloggedin | date:'shortDate'}} + - - - {{'USERS.LISTING.ROLES' | translate}} - - - - + + + {{'USERS.LISTING.ROLES' | translate}} + + + + - - + + - - - - + + + + +
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss index 69f12238e..ed359a1d6 100644 --- a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss +++ b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss @@ -1,14 +1,48 @@ -.user-listing { +.mat-table { + margin: 24px; +} - .mat-card { - margin: 1em 0; - } +.user-listing { + .mat-card { + margin: 1em 0; + } - mat-row:hover { - background-color: lightgray; - } + mat-row:hover { + background-color: lightgray; + } - mat-row:nth-child(odd) { - background-color: #eef0fb; - } -} \ No newline at end of file + mat-row:nth-child(odd) { + background-color: #eef0fb; + } +} + +::ng-deep .mat-paginator-container { + flex-direction: row-reverse !important; + justify-content: space-between !important; + background-color: #f6f6f6; + height: 30px; + min-height: 30px !important; +} + +::ng-deep .mat-paginator-page-size { + height: 43px; +} + +::ng-deep .mat-paginator-range-label { + margin: 15px 32px 0 24px !important; +} + +::ng-deep .mat-paginator-range-actions { + width: 55% !important; + min-height: 43px !important; + justify-content: space-between; +} + +::ng-deep .mat-paginator-navigation-previous { + margin-left: auto !important; +} + +::ng-deep .mat-icon-button { + height: 30px !important; + font-size: 12px !important; +}