Edit dialogs to have similar style

This commit is contained in:
apapachristou 2019-11-06 16:30:15 +02:00
parent b0babe906c
commit a95c1ecc94
35 changed files with 185 additions and 162 deletions

View File

@ -9,13 +9,13 @@
</div>
</div>
<div class="row d-flex flex-row">
<div class="col message">{{ data.message }}</div>
<div class="col message pb-4 pl-3">{{ data.message }}</div>
<div *ngIf="!data.icon" class="col-auto close-btn justify-content-end" (click)="close()">
<mat-icon>close</mat-icon>
</div>
</div>
<div *ngIf="data.privacyPolicyNames" class="row d-flex flex-col">
<div class="col privacy-policy-names">{{ data.privacyPolicyNames }}</div>
<div class="col-12 privacy-policy-names">{{ data.privacyPolicyNames }}</div>
<mat-checkbox [(ngModel)]="agreePrivacyPolicyNames" required class="checkbox-privacy">
{{'GENERAL.CONFIRMATION-DIALOG.ACTIONS.POLICY-AGREE' | translate}}
</mat-checkbox>
@ -25,7 +25,7 @@
<div class="col"></div>
<div class="col-auto"><button mat-raised-button type="button" (click)="cancel()">{{ data.cancelButton }}</button></div>
<div *ngIf="data.isDeleteConfirmation" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="delete">{{ data.confirmButton }}</button></div>
<div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" color="accent">{{ data.confirmButton }}</button></div>
<div *ngIf="!data.isDeleteConfirmation && data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" [disabled]="!agreePrivacyPolicyNames" (click)="confirm()" color="accent">{{ data.confirmButton }}</button></div>
<div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" color="primary">{{ data.confirmButton }}</button></div>
<div *ngIf="!data.isDeleteConfirmation && data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" [disabled]="!agreePrivacyPolicyNames" (click)="confirm()" color="primary">{{ data.confirmButton }}</button></div>
</div>
</div>

View File

@ -1,3 +1,4 @@
<form class="form" [formGroup]="data">
<div class="row d-flex flex-row">
<div mat-dialog-title class="col-auto">
{{'CONTACT.SUPPORT.SUBTITLE' | translate}}
@ -6,9 +7,7 @@
<mat-icon>close</mat-icon>
</div>
</div>
<div mat-dialog-content class="row">
<form class="form" [formGroup]="data">
<mat-form-field class="full-width">
<!-- <input matInput placeholder="{{'CONTACT.SUPPORT.SUBJECT' | translate}}" [(ngModel)]="data.subject" name="contactSupportSubject" required> -->
<input matInput placeholder="{{'CONTACT.SUPPORT.SUBJECT' | translate}}" type="text" name="subject" formControlName="subject" required>
@ -25,9 +24,9 @@
<mat-error *ngIf="data.get('description').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</form>
</div>
<div mat-dialog-actions class="row">
<div class="ml-auto col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary" (click)="cancel()">{{'CONTACT.SUPPORT.CANCEL' | translate}}</button></div>
<div class="ml-auto col-auto"><button mat-raised-button type="button" mat-dialog-close (click)="cancel()">{{'CONTACT.SUPPORT.CANCEL' | translate}}</button></div>
<div class="col-auto"><button mat-raised-button color="primary" type="button" [disabled]="!data.valid" (click)="send()"><i class="fa fa-paper-plane pr-2"></i>{{'CONTACT.SUPPORT.SEND' | translate}}</button></div>
</div>
</form>

View File

@ -49,6 +49,7 @@ export class DatasetProfileCriteriaComponent extends BaseCriteriaComponent imple
openDialog(): void {
const dialogRef = this.dialog.open(DialodConfirmationUploadDatasetProfiles, {
width: '500px',
restoreFocus: false,
data: {
message: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML-FILE-TITLE'),

View File

@ -15,7 +15,7 @@
<input matInput placeholder="{{'DATASET-WIZARD.UPLOAD.UPLOAD-XML-NAME'| translate}}" name="datasetProfileName" [(ngModel)]="data.name">
</mat-form-field>
<div class="col-auto">
<button mat-raised-button color="primary" type="button" (click)="cancel()">{{ data.cancelButton }}</button>
<button mat-raised-button type="button" (click)="cancel()">{{ data.cancelButton }}</button>
</div>
<div class="col"></div>
<div class="col-auto">

View File

@ -15,7 +15,7 @@
<input matInput placeholder="{{'DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-NAME'| translate}}" name="datasetProfileName" [(ngModel)]="data.name">
</mat-form-field>
<div class="col-auto">
<button mat-raised-button color="primary" type="button" (click)="cancel()">{{ data.cancelButton }}</button>
<button mat-raised-button type="button" (click)="cancel()">{{ data.cancelButton }}</button>
</div>
<div class="col"></div>
<div class="col-auto">

View File

@ -12,7 +12,7 @@
<div class="row">
<div class="col"></div>
<div class="col-auto">
<button mat-raised-button color="primary" type="button" (click)="cancel()">{{ data.cancelButton }}</button>
<button mat-raised-button type="button" (click)="cancel()">{{ data.cancelButton }}</button>
</div>
<div class="col-auto">
<button mat-raised-button color="primary" type="button" (click)="confirm()">{{ data.confirmButton }}</button>

View File

@ -142,6 +142,7 @@ export class DatasetExternalReferencesEditorComponent extends BaseComponent impl
addDataRepository() {
const dialogRef = this.dialog.open(DatasetExternalDataRepositoryDialogEditorComponent, {
width: '500px',
restoreFocus: false,
data: {}
});
@ -156,6 +157,7 @@ export class DatasetExternalReferencesEditorComponent extends BaseComponent impl
addRegistry() {
const dialogRef = this.dialog.open(DatasetExternalRegistryDialogEditorComponent, {
width: '500px',
restoreFocus: false,
data: {}
});
@ -170,6 +172,7 @@ export class DatasetExternalReferencesEditorComponent extends BaseComponent impl
addExternalDataset() {
const dialogRef = this.dialog.open(DatasetExternalDatasetDialogEditorComponent, {
width: '500px',
restoreFocus: false,
data: {}
});
@ -184,6 +187,7 @@ export class DatasetExternalReferencesEditorComponent extends BaseComponent impl
addService() {
const dialogRef = this.dialog.open(DatasetExternalServiceDialogEditorComponent, {
width: '500px',
restoreFocus: false,
data: {}
});

View File

@ -1,5 +1,12 @@
<form *ngIf="formGroup" [formGroup]="formGroup">
<h1 mat-dialog-title>{{'DATASET-REFERENCED-MODELS.DATA-REPOSITORY.TITLE' | translate}}</h1>
<div class="row d-flex flex-row">
<div mat-dialog-title class="col-auto">
{{'DATASET-REFERENCED-MODELS.DATA-REPOSITORY.TITLE' | translate}}
</div>
<div class="col-auto ml-auto close-btn" (click)="close()">
<mat-icon>close</mat-icon>
</div>
</div>
<div mat-dialog-content class="row">
<mat-form-field class="col-auto">
<input matInput formControlName="label" placeholder="{{'DATASET-REFERENCED-MODELS.DATA-REPOSITORY.LABEL' | translate}}" required>
@ -15,8 +22,7 @@
</mat-form-field>
</div>
<div mat-dialog-actions class="row">
<div class="col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary">Cancel</button></div>
<div class="col"></div>
<div class="ml-auto col-auto"><button mat-raised-button type="button" mat-dialog-close>Cancel</button></div>
<div class="col-auto"><button mat-raised-button color="primary" (click)="send()" type="button">Save</button></div>
</div>
</form>

View File

@ -24,7 +24,6 @@ export class DatasetExternalDataRepositoryDialogEditorComponent extends BaseComp
this.formGroup = datarepo.buildForm();
}
send(value: any) {
this.externalDataRepositoryService.create(this.formGroup.value)
.pipe(takeUntil(this._destroyed))
@ -32,4 +31,8 @@ export class DatasetExternalDataRepositoryDialogEditorComponent extends BaseComp
(item) => this.dialogRef.close(item)
);
}
close() {
this.dialogRef.close(false);
}
}

View File

@ -1,5 +1,12 @@
<form *ngIf="formGroup" [formGroup]="formGroup">
<h1 mat-dialog-title>{{'DATASET-REFERENCED-MODELS.EXTERNAL-DATASET.TITLE' | translate}}</h1>
<div class="row d-flex flex-row">
<div mat-dialog-title class="col-auto">
{{'DATASET-REFERENCED-MODELS.EXTERNAL-DATASET.TITLE' | translate}}
</div>
<div class="col-auto ml-auto close-btn" (click)="close()">
<mat-icon>close</mat-icon>
</div>
</div>
<div mat-dialog-content class="row">
<mat-form-field class="col-auto">
<input matInput formControlName="label" placeholder="{{'DATASET-REFERENCED-MODELS.EXTERNAL-DATASET.LABEL' | translate}}" required>
@ -11,8 +18,7 @@
</mat-form-field>
</div>
<div mat-dialog-actions class="row">
<div class="col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary">Cancel</button></div>
<div class="col"></div>
<div class="ml-auto col-auto"><button mat-raised-button mat-dialog-close type="button">Cancel</button></div>
<div class="col-auto"><button mat-raised-button color="primary" (click)="send()" type="button">Save</button></div>
</div>
</form>

View File

@ -24,7 +24,6 @@ export class DatasetExternalDatasetDialogEditorComponent extends BaseComponent i
this.formGroup = externalDatasetModel.buildForm();
}
send(value: any) {
this.externalDatasetService.create(this.formGroup.value)
.pipe(takeUntil(this._destroyed))
@ -32,4 +31,8 @@ export class DatasetExternalDatasetDialogEditorComponent extends BaseComponent i
(item) => this.dialogRef.close(item)
);
}
close() {
this.dialogRef.close(false);
}
}

View File

@ -1,5 +1,12 @@
<form *ngIf="formGroup" [formGroup]="formGroup">
<h1 mat-dialog-title>{{'DATASET-REFERENCED-MODELS.REGISTRY.TITLE' | translate}}</h1>
<div class="row d-flex flex-row">
<div mat-dialog-title class="col-auto">
{{'DATASET-REFERENCED-MODELS.REGISTRY.TITLE' | translate}}
</div>
<div class="col-auto ml-auto close-btn" (click)="close()">
<mat-icon>close</mat-icon>
</div>
</div>
<div mat-dialog-content class="row">
<mat-form-field class="col-auto">
<input matInput formControlName="label" placeholder="{{'DATASET-REFERENCED-MODELS.REGISTRY.LABEL' | translate}}" required>
@ -15,8 +22,7 @@
</mat-form-field>
</div>
<div mat-dialog-actions class="row">
<div class="col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary">Cancel</button></div>
<div class="col"></div>
<div class="ml-auto col-auto"><button mat-raised-button mat-dialog-close type="button">Cancel</button></div>
<div class="col-auto"><button mat-raised-button color="primary" (click)="send()" type="button">Save</button></div>
</div>
</form>

View File

@ -24,7 +24,6 @@ export class DatasetExternalRegistryDialogEditorComponent extends BaseComponent
this.formGroup = registryModel.buildForm();
}
send(value: any) {
this.externalRegistryService.create(this.formGroup.value)
.pipe(takeUntil(this._destroyed))
@ -32,4 +31,8 @@ export class DatasetExternalRegistryDialogEditorComponent extends BaseComponent
(item) => this.dialogRef.close(item)
);
}
close() {
this.dialogRef.close(false);
}
}

View File

@ -1,5 +1,12 @@
<form *ngIf="formGroup" [formGroup]="formGroup">
<h1 mat-dialog-title>{{'DATASET-REFERENCED-MODELS.SERVICES.TITLE' | translate}}</h1>
<div class="row d-flex flex-row">
<div mat-dialog-title class="col-auto">
{{'DATASET-REFERENCED-MODELS.SERVICES.TITLE' | translate}}
</div>
<div class="col-auto ml-auto close-btn" (click)="close()">
<mat-icon>close</mat-icon>
</div>
</div>
<div mat-dialog-content class="row">
<mat-form-field class="col-auto">
<input matInput formControlName="label" placeholder="{{'DATASET-REFERENCED-MODELS.SERVICES.LABEL' | translate}}" required>
@ -15,8 +22,7 @@
</mat-form-field>
</div>
<div mat-dialog-actions class="row">
<div class="col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary">Cancel</button></div>
<div class="col"></div>
<div class="ml-auto col-auto"><button mat-raised-button mat-dialog-close type="button">Cancel</button></div>
<div class="col-auto"><button mat-raised-button color="primary" (click)="send()" type="button">Save</button></div>
</div>
</form>

View File

@ -31,4 +31,8 @@ export class DatasetExternalServiceDialogEditorComponent extends BaseComponent i
(item) => this.dialogRef.close(item)
);
}
close() {
this.dialogRef.close(false);
}
}

View File

@ -32,7 +32,7 @@
</mat-form-field>
<div class="col-auto">
<button mat-raised-button color="primary" type="button" (click)="cancel()">{{'DATASET-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
<button mat-raised-button type="button" (click)="cancel()">{{'DATASET-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col"></div>
<div class="col-auto">

View File

@ -62,53 +62,12 @@
}
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
color: #00b29f;
background-color: #00b29f;
// color: #777777;
// background-color: #777777;
// color: #00b29f;
// background-color: #00b29f;
color: #777777;
background-color: #777777;
}
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: #2e74b649;
}
// .mat-table {
// margin: 24px;
// }
// .mat-fab-bottom-right {
// float: right;
// z-index: 5;
// }
// .full-width {
// width: 100%;
// }
// .mat-card {
// margin: 16px 0;
// }
// .mat-row {
// cursor: pointer;
// }
// mat-row:hover {
// background-color: lightgray;
// }
// mat-row:nth-child(even){
// background-color:red;
// }
// mat-row:nth-child(odd) {
// background-color: #eef0fb;
// }
// h3 {
// margin-top: 0px;
// }
// ::ng-deep .mat-paginator {
// margin-top: auto;
// }

View File

@ -11,8 +11,7 @@
</mat-form-field>
<div class="col-12">
<div class="row">
<div class="col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary">Cancel</button></div>
<div class="col"></div>
<div class="ml-auto col-auto"><button mat-raised-button mat-dialog-close type="button">Cancel</button></div>
<div class="col-auto"><button mat-raised-button color="primary" (click)="addResearcher()" type="button">Save</button></div>
</div>
</div>

View File

@ -8,5 +8,5 @@
<p>
{{ 'DMP-EDITOR.DATASET-TEMPLATE-LIST.TEXT' | translate }} {{datasetsprofiles.selectedOptions.selected.length}}
</p>
<button mat-raised-button color="primary" (click)="addProfiles(datasetsprofiles)">OK</button>
<button mat-raised-button color="primary" (click)="addProfiles(datasetsprofiles)">{{ 'DMP-EDITOR.DATASET-TEMPLATE-LIST.OK' | translate }}</button>
</div>

View File

@ -32,10 +32,8 @@
</mat-error>
</mat-form-field> -->
<div class="col-12">
<button mat-raised-button color="primary" (click)="send()"
type="button">{{'INVITATION-EDITOR.ACTIONS.SEND-INVITATION' | translate}}</button>
<div class="col-12 d-flex">
<button mat-raised-button color="primary" (click)="send()" type="button" class="ml-auto">{{'INVITATION-EDITOR.ACTIONS.SEND-INVITATION' | translate}}</button>
</div>
</div>
</form>

View File

@ -15,7 +15,7 @@
<input class="uploadInput" [(ngModel)]="dmpTitle" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}" name="uploadFileInput">
</mat-form-field>
<div class="col-auto">
<button mat-raised-button color="primary" type="button" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
<button mat-raised-button type="button" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col"></div>
<div class="col-auto">

View File

@ -289,7 +289,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
publish(dmpId: String) {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
maxWidth: '300px',
maxWidth: '500px',
restoreFocus: false,
data: {
message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.PUBLISH-ITEM'),

View File

@ -16,7 +16,6 @@ import { GrantListingModel } from '../../../core/model/grant/grant-listing';
import { GrantFileUploadService } from '../../../core/services/grant/grant-file-upload.service';
import { GrantService } from '../../../core/services/grant/grant.service';
import { ConfirmationDialogComponent } from '../../../library/confirmation-dialog/confirmation-dialog.component';
import { SnackBarNotificationComponent } from '../../../library/notification/snack-bar/snack-bar-notification.component';
import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
import { GrantEditorModel } from './grant-editor.model';

View File

@ -11,12 +11,12 @@
<div mat-dialog-content class="row">
<mat-divider class="col-12"></mat-divider>
<a mat-button (click)="navigateToProfile()" class="col-12">
{{'USER-DIALOG.USER-PROFILE' | translate}} <mat-icon>person</mat-icon>
</a>
<div class="col-12">
<a mat-button class="profile" (click)="navigateToProfile()"><mat-icon class="mr-1">person</mat-icon>{{'USER-DIALOG.USER-PROFILE' | translate}}</a>
</div>
<mat-divider class="col-12"></mat-divider>
<a mat-button (click)="logout()" class="col-12">
{{ 'USER-DIALOG.LOG-OUT' | translate }} <mat-icon>exit_to_app</mat-icon>
</a>
<div class="col-12">
<a mat-button class="logout" (click)="logout()"><mat-icon class="mr-1">exit_to_app</mat-icon>{{ 'USER-DIALOG.LOG-OUT' | translate }}</a>
</div>
</div>
</form>

View File

@ -5,3 +5,7 @@ $mat-card-header-size: 40px !default;
border-radius: 50%;
flex-shrink: 0;
}
.profile, .logout {
margin-left: 3em;
}

View File

@ -9,7 +9,6 @@ import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { takeUntil } from 'rxjs/operators';
import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
import { BaseComponent } from "../../../core/common/base/base.component";
import { DatasetStatus } from '../../../core/common/enum/dataset-status';
import { DmpStatus } from '../../../core/common/enum/dmp-status';
import { DatasetService } from '../../../core/services/dataset/dataset.service';
@ -25,7 +24,6 @@ import { QuickWizardEditorWizardModel } from './quick-wizard-editor.model';
import { FunderFormModel } from '../../dmp/editor/grant-tab/funder-form-model';
import { ProjectFormModel } from '../../dmp/editor/grant-tab/project-form-model';
import { CheckDeactivateBaseComponent } from '../../../library/deactivate/deactivate.component';
import { PopupNotificationDialogComponent } from '../../../library/notification/popup/popup-notification.component';
@Component({
selector: 'app-quick-wizard-editor-component',

View File

@ -1,3 +1,4 @@
<div class="faq">
<div class="row d-flex flex-row">
<div mat-dialog-title class="col-auto">
{{'FAQ.TITLE' | translate}}
@ -37,3 +38,4 @@
<div mat-dialog-actions class="row">
<div class="ml-auto col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary" (click)="cancel()">{{'FAQ.CLOSE' | translate}}</button></div>
</div>
</div>

View File

@ -11,3 +11,7 @@
.close-btn {
cursor: pointer;
}
.faq {
margin-bottom: 1.125rem;
}

View File

@ -1,3 +1,4 @@
<div class="glossary">
<div class="row d-flex flex-row">
<div mat-dialog-title class="col-auto">
{{'GLOSSARY.TITLE' | translate}}
@ -24,3 +25,4 @@
<div mat-dialog-actions class="row">
<div class="ml-auto col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary" (click)="cancel()">{{'GLOSSARY.CLOSE' | translate}}</button></div>
</div>
</div>

View File

@ -11,3 +11,7 @@
.close-btn {
cursor: pointer;
}
.glossary {
margin-bottom: 1.125rem;
}

View File

@ -658,7 +658,8 @@
},
"DATASET-TEMPLATE-LIST": {
"TITLE": "Available Dataset Templates",
"TEXT": "Dataset Profiles selected: "
"TEXT": "Dataset Profiles selected: ",
"OK": "OK"
}
},
"DMP-PROFILE-LISTING": {