From 4c825d80b4fbf9e72fc7abe65b5ad15af208e79e Mon Sep 17 00:00:00 2001 From: apapachristou Date: Thu, 24 Sep 2020 12:02:51 +0300 Subject: [PATCH] Retyles button add dataset on overview and removes pop up on click --- .../dmp/overview/dmp-overview.component.html | 6 +- .../dmp/overview/dmp-overview.component.scss | 308 +++++++++--------- .../ui/dmp/overview/dmp-overview.component.ts | 18 +- 3 files changed, 160 insertions(+), 172 deletions(-) diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html index 9758c6331..289a23a20 100644 --- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html +++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html @@ -97,11 +97,11 @@ horizontal_rule -
- +
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss index c08278435..ab8af8a19 100644 --- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss +++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss @@ -1,267 +1,267 @@ .container-fluid { - margin: 2em 4em; - padding: 2em; + margin: 2em 4em; + padding: 2em; } // ********ICONS******** .back-icon { - opacity: 0.4; + opacity: 0.4; } .mat-mini-fab { - width: 2.5em; - height: 2.5em; - background-color: #129d99; - color: white; + width: 2.5em; + height: 2.5em; + background-color: #129d99; + color: white; } .mat-mini-fab-icon, .status-icon { - font-size: 1.2em; + font-size: 1.2em; } .status-icon { - color: #a7a7a7; + color: #a7a7a7; } .account-icon { - font-size: 2.5em; + font-size: 2.5em; } // ********BUTTONS******** .id-btn { - background: url("../../../../assets/images/NoPath.png") no-repeat center; - width: 1em; - margin-right: 0.3em; - align-self: center; + background: url("../../../../assets/images/NoPath.png") no-repeat center; + width: 1em; + margin-right: 0.3em; + align-self: center; } .dataset-btn { - width: 36.1em; - padding: 0 1.1em; - background-color: #f7dd72; - border-radius: 4px; - justify-content: space-between; - color: #212121; - // opacity: 0.8; + width: 36.1em; + padding: 0 1.1em; + background-color: #f7dd72; + border-radius: 4px; + justify-content: space-between; + color: #212121; + // opacity: 0.8; } .show-more-btn { - width: 31.6em; - padding: 0 1em; - background-color: #ffffff00; - color: #129d99; - font-weight: 700; + width: 31.6em; + padding: 0 1em; + background-color: #ffffff00; + color: #129d99; + font-weight: 700; } .frame-btn { - border: 1px solid #212121; - color: black; + border: 1px solid #212121; + color: black; } .finalize-btn { - border: 1px solid #129d99; - color: #129d99; + border: 1px solid #129d99; + color: #129d99; } .grant-title { - width: 130px; - color: #089dbb; - background-color: white; - padding: 0px 10px; - margin-top: -16px; - cursor: default; - text-transform: uppercase; + width: 130px; + color: #089dbb; + background-color: white; + padding: 0px 10px; + margin-top: -16px; + cursor: default; + text-transform: uppercase; } .frame-btn, .finalize-btn { - background: #ffffff; - box-shadow: 0px 2px 6px #00000029; + background: #ffffff; + box-shadow: 0px 2px 6px #00000029; } .remove-btn { - border: none; - background-color: transparent; - font-size: 0.875em; - font-weight: bold; - margin-left: auto; + border: none; + background-color: transparent; + font-size: 0.875em; + font-weight: bold; + margin-left: auto; } .invite-btn { - width: 9.4em; - height: 2.9em; - background: #ffffff; - box-shadow: 0px 3px 6px #1e202029; - border: 2px solid #212121; - border-radius: 30px; + width: 9.4em; + height: 2.9em; + background: #ffffff; + box-shadow: 0px 3px 6px #1e202029; + border: 2px solid #212121; + border-radius: 30px; } .account_btn { - background: white; - color: #d5d5d5; - border: none; - height: 2.9em; + background: white; + color: #d5d5d5; + border: none; + height: 2.9em; } // ********TEXT******** .dmp-logo { - width: 4.8em; - height: 2.6em; - background: #129d99; - border-radius: 4px; - font-size: 0.875em; - color: #ffffff; + width: 4.8em; + height: 2.6em; + background: #129d99; + border-radius: 4px; + font-size: 0.875em; + color: #ffffff; } .label-txt { - font-size: 0.875em; + font-size: 0.875em; } .label2-txt { - font-size: 1em; + font-size: 1em; } .label-txt, .label2-txt { - color: #848484; - font-weight: 400; + color: #848484; + font-weight: 400; } .dmp-label { - font-weight: bold; + font-weight: bold; } .uppercase { - text-transform: uppercase; + text-transform: uppercase; } .researcher { - font-size: 0.875em; - color: #008887; - padding-right: 0.5em; - align-self: center; + font-size: 0.875em; + color: #008887; + padding-right: 0.5em; + align-self: center; } .header { - opacity: 0.6; - margin-top: 1em; - margin-bottom: 0.5em; + opacity: 0.6; + margin-top: 1em; + margin-bottom: 0.5em; } .dmp-label, .header { - font-size: 1.25em; - color: #212121; + font-size: 1.25em; + color: #212121; } .desc-txt { - width: 48.25em; - font-size: 1em; - color: #212121; - margin-bottom: 1.875em; + width: 48.25em; + font-size: 1em; + color: #212121; + margin-bottom: 1.875em; } .dataset { - width: fit-content; + width: fit-content; } .dataset-btn-label { - margin-right: 1em; - overflow: hidden; - text-overflow: ellipsis; - letter-spacing: 0px; - color: #212121; - opacity: 0.8; - font-style: normal; + margin-right: 1em; + overflow: hidden; + text-overflow: ellipsis; + letter-spacing: 0px; + color: #212121; + opacity: 0.8; + font-style: normal; } .doi-label { - font-size: 1em; - color: #212121; - opacity: 0.6; - margin-bottom: 0.3em; + font-size: 1em; + color: #212121; + opacity: 0.6; + margin-bottom: 0.3em; } .doi-txt { - font-size: 1em; - letter-spacing: 0.009em; - color: #7d7d7d; - width: 12em; - height: 1.2em; - overflow: hidden; - border: none; - padding: 0px; - background-color: transparent; + font-size: 1em; + letter-spacing: 0.009em; + color: #7d7d7d; + width: 12em; + height: 1.2em; + overflow: hidden; + border: none; + padding: 0px; + background-color: transparent; } .doi-panel { - height: 3.5em; - background: #fafafa; - border: 1px solid #d1d1d1; - border-radius: 4px; - flex-direction: row; - justify-content: space-between; + height: 3.5em; + background: #fafafa; + border: 1px solid #d1d1d1; + border-radius: 4px; + flex-direction: row; + justify-content: space-between; } .doi-link { - color: white; + color: white; } .frame { - background: #ffffff; - box-shadow: 0px 1px 5px #00000026; - border-radius: 4px; - overflow: hidden; - min-width: 18.5em; + background: #ffffff; + box-shadow: 0px 1px 5px #00000026; + border-radius: 4px; + overflow: hidden; + min-width: 18.5em; } .frame-txt { - color: #000000; + color: #000000; } .finalize-txt { - color: #129d99; + color: #129d99; } .frame-txt, .finalize-txt { - font-size: 0.75em; - font-weight: bold; - letter-spacing: 0px; - text-transform: uppercase; - cursor: pointer; + font-size: 0.75em; + font-weight: bold; + letter-spacing: 0px; + text-transform: uppercase; + cursor: pointer; } .hr-line { - border: 1px solid #dbdbdb; - // width: 274px; - // width: 17em; - width: 100%; + border: 1px solid #dbdbdb; + // width: 274px; + // width: 17em; + width: 100%; } .authors { - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; } .authors-label { - font-size: 0.875em; - color: #212121; - height: 1.4em; - margin-bottom: 0px; + font-size: 0.875em; + color: #212121; + height: 1.4em; + margin-bottom: 0px; } .authors-role { - font-size: 0.875em; - color: #a8a8a8; - height: 1.4em; - margin-bottom: 0px; + font-size: 0.875em; + color: #a8a8a8; + height: 1.4em; + margin-bottom: 0px; } // ********CENTER ELEMENTS******** @@ -272,50 +272,54 @@ .dmp-logo, .frame-btn, .finalize-btn { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } .dmp-label, .dataset-btn, +.add-dataset-btn, .doi-panel, .researcher { - display: flex; - align-items: center; + display: flex; + align-items: center; } .add-dataset-btn { - border: 2px solid #212121; - border-radius: 30px; + color: #212121 !important; +} + +.add-dataset-btn:hover { + color: #129d99 !important; } .show-more-btn { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } ::ng-deep .mat-select-value { - color: #848484 !important; + color: #848484 !important; } ::ng-deep .versions-select .mat-form-field-wrapper { - background-color: transparent !important; - padding-bottom: 0 !important; - width: 6.5rem; + background-color: transparent !important; + padding-bottom: 0 !important; + width: 6.5rem; } ::ng-deep .versions-select .mat-form-field-wrapper .mat-form-field-flex { - padding: 0 0.5rem 0 0.625rem; - margin-bottom: 0.2rem; + padding: 0 0.5rem 0 0.625rem; + margin-bottom: 0.2rem; } ::ng-deep mat-select .mat-select-arrow-wrapper { - vertical-align: bottom; + vertical-align: bottom; } ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix { - padding: 0rem 0rem 0.4rem 0rem !important; + padding: 0rem 0rem 0.4rem 0rem !important; } // .card-content { diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts index d0997cb6a..dab199830 100644 --- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts +++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts @@ -656,23 +656,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit { // } addNewDataset() { - const dialogRef = this.dialog.open(StartNewDatasetDialogComponent, { - disableClose: false, - restoreFocus: false, - data: { - startNewDmp: false, - formGroup: new DatasetWizardEditorModel().buildForm() - } - }); - dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { - if (result) { - if (result.startNewDmp) { - this.openNewDmpDialog(); - } else { - this.router.navigate(['/datasets', 'new', result.formGroup.get('dmp').value.id]); - } - } - }); + this.router.navigate(['/datasets', 'new', this.dmp.id]); } createDoiLink(doi: string): string {