-
- clear - -

{{'DASHBOARD.DMP-QUESTION' | translate}}

-

{{'DASHBOARD.INFO-DMP-TEXT' | translate}}

- -

- {{'DASHBOARD.NEW-QUESTION' | translate}} {{'DASHBOARD.OPEN-AIR-GUIDE' | translate}} {{'DASHBOARD.LEARN-MORE' | translate}} -

-

{{'DASHBOARD.DMP-ABOUT-BEG' | translate}} - {{'DASHBOARD.DATASET-DESCRIPTIONS-DASHBOARD-TEXT' | translate}} - {{'DASHBOARD.DMP-ABOUT-END' | translate}} -

- -
-
- +
+
+ clear +
+

{{'NEW-RELEASE-NOTIFICATION.HINT' | translate}}

-
- +

{{'NEW-RELEASE-NOTIFICATION.TITLE' | translate}}

+

{{'NEW-RELEASE-NOTIFICATION.BODY' | translate}}

+ +
+
+ + + +
+ +
+
+
+ clear + +

{{'DASHBOARD.DMP-QUESTION' | translate}}

+

{{'DASHBOARD.INFO-DMP-TEXT' | translate}}

+ +

+ {{'DASHBOARD.NEW-QUESTION' | translate}} {{'DASHBOARD.OPEN-AIR-GUIDE' | translate}} {{'DASHBOARD.LEARN-MORE' | translate}} +

+

{{'DASHBOARD.DMP-ABOUT-BEG' | translate}} + {{'DASHBOARD.DATASET-DESCRIPTIONS-DASHBOARD-TEXT' | translate}} + {{'DASHBOARD.DMP-ABOUT-END' | translate}} +

+ +
+
+ +
+
+ +
+ + +
- - -
{{'DASHBOARD.LATEST-ACTIVITY' | translate}}
- +
{{'DASHBOARD.EMPTY-LIST' | translate}}
@@ -104,8 +125,8 @@
-
- clear +
+ clear

{{'DASHBOARD.TITLE' | translate}}

{{'DASHBOARD.INFO-TEXT' | translate}}

diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss b/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss index 9c0cfa9e1..de6698e62 100644 --- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss +++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss @@ -396,7 +396,11 @@ input[type="text"] { .add-dataset-btn { height: 40px; - margin-left: 40px; + margin-left: 40px; +} + +mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab-list .mat-mdc-tab-labels .mdc-tab__text-label { + color: white; } :host ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar, @@ -423,4 +427,85 @@ input[type="text"] { ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix { padding: 0.3rem 0rem 0.6rem 0rem !important; -} \ No newline at end of file +} + +.new-releases-hint-container { + padding-left: 40px; + /* padding-top: 40px; */ + padding-right: 55px; +} + +.new-releases-card { + box-shadow: 0px 3px 6px #00000029; + max-width: 712px; + min-width: 17.5rem; + margin-top: 0rem; + margin-bottom: 3.75rem; + + background: transparent linear-gradient(127deg, #EDAEB3 0%, #E1368A 100%) 0% 0% no-repeat padding-box; + border-radius: 6px; + opacity: 1; + padding-bottom: 2em; +} + +.new-releases-btn { + height: 40px; + margin-left: 40px; + + background: var(--primary-color) 0% 0% no-repeat padding-box; + border-radius: 30px; + opacity: 1; + color: #FFFFFF; + padding-right: 2em; + padding-left: 2em; +} + +.new-releases-chip { + // margin-bottom: 1em; + // margin-left: 2.5em; + // margin-right: 2.5em; + color: #fff; + /* text-transform: uppercase; */ + text-align: center; + font-weight: 500; + /* max-width: 160px; */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + background: #EAEAEA 0% 0% no-repeat padding-box; + border-radius: 30px; + opacity: 0.7; + /* font: normal normal bold 12px/21px Aileron; */ + letter-spacing: 0.12px; + color: #6E6E6E; +} + +.new-releases-title { + text-align: left; + font: Bold 30px/34px Roboto; + letter-spacing: 0px; + color: #212121; + padding-left: 40px; + /* padding-top: 40px; */ + padding-right: 55px; + opacity: 1; +} + +.new-releases-content { + text-align: left; + font-weight: 300; + font-size: 1rem; + letter-spacing: 0px; + color: #212121; + padding-left: 40px; + font: normal normal normal 16px/24px Roboto; + padding-top: 36px; + padding-right: 55px; + opacity: 1; +} + +.new-releases-logo { + position: absolute; + right: 0; + bottom: 0; +} diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts b/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts index da9b6f641..023bd54a2 100644 --- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts +++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts @@ -1,26 +1,29 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { UntypedFormBuilder, Validators } from '@angular/forms'; import { MatDialog } from '@angular/material/dialog'; import { ActivatedRoute, Router } from '@angular/router'; import { DashboardStatistics } from '@app/core/model/dashboard/dashboard-statistics'; import { AuthService } from '@app/core/services/auth/auth.service'; +import { ConfigurationService } from '@app/core/services/configuration/configuration.service'; import { DashboardService } from '@app/core/services/dashboard/dashboard.service'; import { MatomoService } from '@app/core/services/matomo/matomo-service'; +import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service'; import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants'; import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service'; import { BaseComponent } from '@common/base/base.component'; import { TranslateService } from '@ngx-translate/core'; +import * as moment from 'moment'; +import { CookieService } from 'ngx-cookie-service'; import { takeUntil } from 'rxjs/operators'; -import { StartNewDmpDialogComponent } from '../dmp/new/start-new-dmp-dialogue/start-new-dmp-dialog.component'; -import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service'; import { StartNewDescriptionDialogComponent } from '../description/start-new-description-dialog/start-new-description-dialog.component'; -import { UntypedFormBuilder, Validators } from '@angular/forms'; +import { StartNewDmpDialogComponent } from '../dmp/new/start-new-dmp-dialogue/start-new-dmp-dialog.component'; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', - styleUrls: ['./dashboard.component.scss'], + styleUrls: ['./dashboard.component.scss'] }) export class DashboardComponent extends BaseComponent implements OnInit { @@ -28,6 +31,8 @@ export class DashboardComponent extends BaseComponent implements OnInit { public grantCount = 0; public organizationCount = 0; currentType: string = "recent"; + newReleaseNotificationVisible = false; + isIntroCardVisible = true; constructor( private router: Router, @@ -40,6 +45,8 @@ export class DashboardComponent extends BaseComponent implements OnInit { private matomoService: MatomoService, public referenceTypeService: ReferenceTypeService, private fb: UntypedFormBuilder, + private cookieService: CookieService, + public configurationService: ConfigurationService ) { super(); } @@ -78,6 +85,8 @@ export class DashboardComponent extends BaseComponent implements OnInit { } }); } + + this.newReleaseNotificationVisible = this.isNewReleaseNotificationVisible(); } public get indexFromCurrentType() { @@ -216,4 +225,30 @@ export class DashboardComponent extends BaseComponent implements OnInit { this.setDescriptionText(); this.guidedTourService.startTour(this.dashboardTour); } + + dismissIntroCard() { + this.isIntroCardVisible = false; + } + + dismissNewReleaseNotification() { + this.cookieService.set('new-release-dismiss-' + this.configurationService.newReleaseNotificationVersionCode, 'true', 5000, null, null, false, 'Lax'); + this.newReleaseNotificationVisible = false; + } + + isNewReleaseNotificationVisible() { + if (this.configurationService.newReleaseNotificationVersionCode == null) { + return false; + } + if (this.configurationService.newReleaseNotificationExpires == null && this.configurationService.newReleaseNotificationLink == null) { + return false; + } + if (this.configurationService.newReleaseNotificationExpires != null && moment(this.configurationService.newReleaseNotificationExpires).tz('UTC') < moment.utc()) { + return false; + } + if (this.cookieService.get('new-release-dismiss-' + this.configurationService.newReleaseNotificationVersionCode) === 'true') { + return false; + } + + return true; + } } 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 f1a42138e..e8b219fb6 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 @@ -26,7 +26,7 @@ lock_outline {{'DMP-OVERVIEW.LOCKED' | translate}}
- + {{'DMP-OVERVIEW.VERSION' | translate}} {{version.version}} 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 a8cb2e2ff..42b921790 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,3 +1,5 @@ +@use '@angular/material'as mat; + .container-fluid { margin: 2em 4em; padding: 2em; @@ -33,7 +35,7 @@ font-size: 2.5em; height: auto; width: auto; - } +} // ********BUTTONS******** @@ -63,6 +65,7 @@ color: #212121; // opacity: 0.8; } + .show-more-btn { width: 31.6em; padding: 0 1em; @@ -321,282 +324,10 @@ color: #848484 !important; } -::ng-deep .versions-select .mat-form-field-wrapper { - 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; -} - -::ng-deep .versions-select mat-select .mat-select-arrow-wrapper { - vertical-align: bottom; -} - -::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix { - padding: 0rem 0rem 0.4rem 0rem !important; +.versions-select { + width: 8em; } .select-repo { border-bottom: 1px solid #212121; } - -// .card-content { -// display: flex; -// justify-content: center; -// align-items: center; -// } - -// .actions { -// margin-left: auto; -// } - -// .more-horiz { -// font-size: 28px; -// color: #aaaaaa; -// } - -// .more-icon :hover { -// color: var(--primary-color-3); -// } - -// .export-btn { -// padding-right: 6px; -// } - -// .menu-item { -// width: 248px; -// } - -// .dmp-info { -// display: flex; -// flex-direction: column; -// // margin: 2em 2em; -// padding: 1em 1em; -// } - -// .card-subtitle { -// font-size: 14px; -// font-weight: 700; -// color: black; -// text-transform: uppercase; -// margin-top: 0; -// margin-bottom: 1rem; -// } - -// .gray-container { -// letter-spacing: 5px; -// color: #aaaaaa; -// } - -// .grant-item, -// .researchers { -// display: flex; -// flex-direction: column; -// border: 2px solid #f2f2f2; -// margin-right: 2em; -// margin-top: 2em; -// padding: 0.5em; -// } - -// .researchers-title { -// width: 120px; -// color: #089dbb; -// background-color: white; -// padding: 0px 10px; -// margin-top: -16px; -// cursor: default; -// text-transform: uppercase; -// } - -// .grant-title { -// width: 68px; -// color: #089dbb; -// background-color: white; -// padding: 0px 10px; -// margin-top: -16px; -// cursor: default; -// text-transform: uppercase; -// } - -// .collaborators { -// display: flex; -// flex-direction: column; -// border: 2px solid #f2f2f2; -// margin-right: 2em; -// margin-top: 2em; -// padding: 0.5em; -// } - -// .collaborators-title { -// width: 138px; -// color: #089dbb; -// background-color: white; -// padding: 0px 10px; -// margin-top: -16px; -// cursor: default; -// text-transform: uppercase; -// } - -// .container-header { -// display: flex; -// align-items: baseline; -// margin-top: 0px; -// text-transform: uppercase; -// cursor: pointer; -// } - -// .container-header p { -// letter-spacing: 5px; -// color: #aaaaaa; -// padding-top: 10px; -// margin-bottom: 0px; -// } - -// .container-header :hover { -// color: var(--primary-color-3); -// } - -// .description-card { -// display: flex; -// flex-direction: column; -// min-width: 0; -// word-wrap: break-word; -// border-radius: 6px; -// color: #333333; -// background: #fff; -// width: 100%; -// min-height: 90%; -// max-height: 90%; -// margin-top: 1em; -// margin-bottom: 1em; -// cursor: pointer; -// box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); -// } - -// .description-card h4 { -// padding-left: 1em; -// margin: 1em 1.5em; -// } - -// .show-more { -// background-color: #ffffff00; -// color: var(--primary-color-3); -// font-weight: 700; -// justify-self: center; -// } - -// .visit-website { -// background-color: var(--primary-color-3); -// color: #ffffff; -// } - -// .draft-bookmark { -// color: #e7e6e6; -// display: inline; -// position: absolute; -// margin-top: 0.5em; -// margin-left: 0.5em; -// } - -// .finalized-bookmark { -// color: #08bd63; -// // color: #92d050; -// display: inline; -// position: absolute; -// margin-top: 0.5em; -// margin-left: 0.5em; -// } - -// h4 span { -// color: #089dbb; -// font-weight: 600; -// text-transform: uppercase; -// } - -// .chip { -// padding: 0.1em 1em; -// margin-top: auto; -// margin-bottom: 1em; -// margin-left: 2.5em; -// margin-right: 2.5em; -// border-radius: 10em; -// background-color: #0d7489; -// // background-color: rgba(0, 112, 192, 1); -// // background-color: rgb(70, 135, 230); -// color: #fff; -// text-transform: uppercase; -// font-weight: 500; -// max-width: 160px; -// white-space: nowrap; -// overflow: hidden; -// text-overflow: ellipsis; -// } - -// .avatar { -// padding: 0.1em 1em; -// margin: 0.5em; -// border-radius: 10em; -// background-color: #eeeeee; -// color: black; -// max-width: 160px; -// white-space: nowrap; -// overflow: hidden; -// text-overflow: ellipsis; -// } - -// .descriptions-counter { -// display: flex; -// cursor: pointer; -// } - -// .descriptions-counter :hover { -// color: var(--primary-color-3) !important; -// } - -// .total-info { -// text-transform: uppercase; -// } - -// .desc-container { -// margin: 0px; -// } - -// .desc { -// position: relative; -// overflow: hidden; -// height: 80px; -// font-size: 14px; -// padding-top: 15px; -// margin-bottom: 30px; -// cursor: default; -// } - -// .desc-expanded { -// overflow: visible !important; -// height: auto !important; -// position: inherit; -// } - -// .desc:after { -// content: ""; -// text-align: right; -// position: absolute; -// bottom: 0; -// right: 0; -// width: 70%; -// height: 1.4em; -// background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); -// } - -// .interact-icon { -// cursor: pointer; -// margin-left: 32px; -// } - -// .interact-icon :hover { -// color: var(--primary-color-3) !important; -// } diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index 422f06e87..167f4802f 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -3049,5 +3049,13 @@ "DRAFT": "Draft", "FINALIZED": "Finalized", "DELETED": "Deleted" + }, + "NEW-RELEASE-NOTIFICATION": { + "TITLE": "New ARGOS Release!", + "HINT": "Discover the all-new Argos version", + "BODY": "Discover the latest enhancements and improvements with our brand-new Argos release! Use the Default Blueprint to create plans that include funders information. Contact us to create Blueprints for institutional plans that connect to local services or for training activities. Adopt the output management plan as an overarching plan that combines different templates, e.g. data and software. Don’t miss out – explore now!", + "ACTIONS": { + "LEARN-MORE": "Learn more" + } } } \ No newline at end of file diff --git a/dmp-frontend/src/assets/images/new-releases-logo.png b/dmp-frontend/src/assets/images/new-releases-logo.png new file mode 100644 index 000000000..7c5e9da2e Binary files /dev/null and b/dmp-frontend/src/assets/images/new-releases-logo.png differ diff --git a/dmp-frontend/src/assets/scss/blue-theme.scss b/dmp-frontend/src/assets/scss/blue-theme.scss deleted file mode 100644 index f7fd23ce1..000000000 --- a/dmp-frontend/src/assets/scss/blue-theme.scss +++ /dev/null @@ -1,158 +0,0 @@ -@use '@angular/material' as mat; -@import "@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming'; - -$app-blue-theme-primary-palette: ( - 50: #e2eef1, - 100: #b6d5dc, - 200: #86bac4, - 300: #559eac, - 400: #30899b, - 500: #0c7489, - 600: #0a6c81, - 700: #086176, - 800: #06576c, - 900: #034459, - A100: #8bddff, - A200: #58cfff, - A400: #25c0ff, - A700: #0bb9ff, - contrast: ( - 50: #000000, - 100: #000000, - 200: #000000, - 300: #000000, - 400: #ffffff, - 500: #ffffff, - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: #000000, - A200: #000000, - A400: #ffffff, - A700: #ffffff - ) -); - -$app-blue-theme-accent-palette: ( - 50: #e0f6f3, - 100: #b3e8e2, - 200: #80d9cf, - 300: #4dc9bc, - 400: #26bead, - 500: var(--primary-color-3), - 600: #00ab97, - 700: #00a28d, - 800: #009983, - 900: #008a72, - A100: #b6fff0, - A200: #83ffe6, - A400: #50ffdc, - A700: #36ffd7, - contrast: ( - 50: #000000, - 100: #000000, - 200: #000000, - 300: #000000, - 400: #000000, - 500: #ffffff, - 600: #ffffff, - 700: #000000, - 800: #000000, - 900: #000000, - A100: #000000, - A200: #ffffff, - A400: #ffffff, - A700: #ffffff - ) -); - -$app-blue-theme-primary: mat.define-palette($app-blue-theme-primary-palette); -$app-blue-theme-accent: mat.define-palette($app-blue-theme-accent-palette, A200, A100, A400); -$app-blue-theme-warn: mat.define-palette(mat.$red-palette); - -$app-blue-theme-background: ( - status-bar: map_get(mat.$grey-palette, 300), - app-bar: map_get(mat.$grey-palette, 100), - background: map_get(mat.$grey-palette, 50), - hover: rgba(black, 0.04), - card: white, - dialog: white, - disabled-button: rgba(black, 0.12), - raised-button: white, - focused-button: $dark-focused, - selected-button: map_get(mat.$grey-palette, 300), - selected-disabled-button: map_get(mat.$grey-palette, 400), - disabled-button-toggle: map_get(mat.$grey-palette, 200), - unselected-chip: map_get(mat.$grey-palette, 300), - disabled-list-option: map_get(mat.$grey-palette, 200) -); - -$app-blue-theme-foreground: ( - base: black, - divider: $dark-dividers, - dividers: $dark-dividers, - disabled: $dark-disabled-text, - disabled-button: rgba(black, 0.26), - disabled-text: $dark-disabled-text, - hint-text: $dark-disabled-text, - secondary-text: $dark-secondary-text, - icon: rgba(black, 0.54), - icons: rgba(black, 0.54), - text: rgba(black, 0.87), - slider-min: rgba(black, 0.87), - slider-off: rgba(black, 0.26), - slider-off-active: rgba(black, 0.38) -); - -$custom-theme: ( - primary: $app-blue-theme-primary, - accent: $app-blue-theme-accent, - warn: $app-blue-theme-warn, - is-dark: false, - foreground: $app-blue-theme-foreground, - background: $app-blue-theme-background -); - -$custom-typography: mat.define-legacy-typography-config( - $font-family: "Lato, regular", - $headline: mat.define-typography-level(32px, 48px, 700), - $body-1: mat.define-typography-level(16px, 24px, 500) -); - -.blue-theme { - // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles. -// The following line adds: -// 1. Default typography styles for all components -// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1) -// If you specify typography styles for the components you use elsewhere, you should delete this line. -// If you don't need the default component typographies but still want the hierarchy styles, -// you can delete this line and instead use: -// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());` -@include mat.all-legacy-component-typographies(); -@include mat.legacy-core(); - - @include mat.all-legacy-component-themes($custom-theme); - - // Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.). - @include mat.legacy-typography-hierarchy($custom-typography); - - // Override typography for a specific Angular Material components. - @include mat.legacy-checkbox-typography($custom-typography); - - // Override typography for all Angular Material, including mat-base-typography and all components. - @include mat.all-legacy-component-typographies($custom-typography); - //If you're using Material's theming, you can also pass in your typography config to the mat-core mixin: - - // Override the typography in the core CSS. - // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles. -// The following line adds: -// 1. Default typography styles for all components -// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1) -// If you specify typography styles for the components you use elsewhere, you should delete this line. -// If you don't need the default component typographies but still want the hierarchy styles, -// you can delete this line and instead use: -// `@include mat.legacy-typography-hierarchy($custom-typography);` -@include mat.all-legacy-component-typographies($custom-typography); -@include mat.legacy-core(); -} diff --git a/dmp-frontend/src/assets/scss/green-theme.scss b/dmp-frontend/src/assets/scss/green-theme.scss deleted file mode 100644 index 84da95ce6..000000000 --- a/dmp-frontend/src/assets/scss/green-theme.scss +++ /dev/null @@ -1,158 +0,0 @@ -@use '@angular/material' as mat; -@import "@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming'; - -$app-green-theme-primary-palette: ( - 50: #e3f3f3, - 100: #b8e2e0, - 200: #89cecc, - 300: #59bab8, - 400: #36aca8, - 500: var(--primary-color), - 600: #109591, - 700: #0d8b86, - 800: #0a817c, - 900: #056f6b, - A100: #9ffffa, - A200: #6cfff7, - A400: #39fff5, - A700: #20fff3, - contrast: ( - 50: #000000, - 100: #000000, - 200: #000000, - 300: #000000, - 400: #000000, - 500: #ffffff, - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: #000000, - A200: #000000, - A400: #000000, - A700: #000000 - ) -); - -$app-green-theme-accent-palette: ( - 50: #fefbee, - 100: #fdf5d5, - 200: #fbeeb9, - 300: #f9e79c, - 400: #f8e287, - 500: var(--secondary-color), - 600: #f6d96a, - 700: #f5d45f, - 800: #f3cf55, - 900: #f1c742, - A100: #ffffff, - A200: #ffffff, - A400: #fff6dc, - A700: #fff0c3, - contrast: ( - 50: #000000, - 100: #000000, - 200: #000000, - 300: #000000, - 400: #000000, - 500: #000000, - 600: #000000, - 700: #000000, - 800: #000000, - 900: #000000, - A100: #000000, - A200: #000000, - A400: #000000, - A700: #000000 - ) -); - -$app-green-theme-primary: mat.define-palette($app-green-theme-primary-palette); -$app-green-theme-accent: mat.define-palette($app-green-theme-accent-palette, A200, A100, A400); -$app-green-theme-warn: mat.define-palette(mat.$red-palette); - -$app-green-theme-background: ( - status-bar: map_get(mat.$grey-palette, 300), - app-bar: map_get(mat.$grey-palette, 100), - background: map_get(mat.$grey-palette, 50), - hover: rgba(black, 0.04), - card: white, - dialog: white, - disabled-button: rgba(black, 0.12), - raised-button: white, - focused-button: $dark-focused, - selected-button: map_get(mat.$grey-palette, 300), - selected-disabled-button: map_get(mat.$grey-palette, 400), - disabled-button-toggle: map_get(mat.$grey-palette, 200), - unselected-chip: map_get(mat.$grey-palette, 300), - disabled-list-option: map_get(mat.$grey-palette, 200) -); - -$app-green-theme-foreground: ( - base: white, - divider: $dark-dividers, - dividers: $dark-dividers, - disabled: $dark-disabled-text, - disabled-button: rgba(black, 0.26), - disabled-text: $dark-disabled-text, - hint-text: $dark-disabled-text, - secondary-text: $dark-secondary-text, - icon: rgba(white, 0.54), - icons: rgba(white, 0.54), - text: rgba(white, 0.87), - slider-min: rgba(black, 0.87), - slider-off: rgba(black, 0.26), - slider-off-active: rgba(black, 0.38) -); - -$custom-theme: ( - primary: $app-green-theme-primary, - accent: $app-green-theme-accent, - warn: $app-green-theme-warn, - is-dark: false, - foreground: $app-green-theme-foreground, - background: $app-green-theme-background -); - -$custom-typography: mat.define-legacy-typography-config( - $font-family: "Lato, regular", - $headline: mat.define-typography-level(32px, 48px, 700), - $body-1: mat.define-typography-level(16px, 24px, 500) -); - -.green-theme { - // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles. -// The following line adds: -// 1. Default typography styles for all components -// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1) -// If you specify typography styles for the components you use elsewhere, you should delete this line. -// If you don't need the default component typographies but still want the hierarchy styles, -// you can delete this line and instead use: -// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());` -@include mat.all-legacy-component-typographies(); -@include mat.legacy-core(); - - @include mat.all-legacy-component-themes($custom-theme); - - // Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.). - @include mat.legacy-typography-hierarchy($custom-typography); - - // Override typography for a specific Angular Material components. - @include mat.legacy-checkbox-typography($custom-typography); - - // Override typography for all Angular Material, including mat-base-typography and all components. - @include mat.all-legacy-component-typographies($custom-typography); - //If you're using Material's theming, you can also pass in your typography config to the mat-core mixin: - - // Override the typography in the core CSS. - // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles. -// The following line adds: -// 1. Default typography styles for all components -// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1) -// If you specify typography styles for the components you use elsewhere, you should delete this line. -// If you don't need the default component typographies but still want the hierarchy styles, -// you can delete this line and instead use: -// `@include mat.legacy-typography-hierarchy($custom-typography);` -@include mat.all-legacy-component-typographies($custom-typography); -@include mat.legacy-core(); -} diff --git a/dmp-frontend/src/assets/scss/material-dashboard.scss b/dmp-frontend/src/assets/scss/material-dashboard.scss index 8194c858b..8d5bc5791 100644 --- a/dmp-frontend/src/assets/scss/material-dashboard.scss +++ b/dmp-frontend/src/assets/scss/material-dashboard.scss @@ -1,52 +1,8 @@ -/*! - - ========================================================= - * Material Dashboard Angular - v2.2.0 - ========================================================= - - * Product Page: https://www.creative-tim.com/product/material-dashboard-angular2 - * Copyright 2018 Creative Tim (http://www.creative-tim.com) - - * Designed by www.invisionapp.com Coded by www.creative-tim.com - - ========================================================= - - * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - - */ -@use '@angular/material' as mat; @use 'sass:math'; -@import "@angular/material/prebuilt-themes/indigo-pink.css"; -@import "@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming'; -@import "./blue-theme.scss"; -// @import "./green-theme.scss"; - -// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles. -// The following line adds: -// 1. Default typography styles for all components -// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1) -// If you specify typography styles for the components you use elsewhere, you should delete this line. -// If you don't need the default component typographies but still want the hierarchy styles, -// you can delete this line and instead use: -// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());` -@include mat.all-legacy-component-typographies(); -@include mat.legacy-core(); - -// // Define a blue theme. -$custom-theme-primary: mat.define-palette($app-blue-theme-primary-palette, 900); -$custom-theme-accent: mat.define-palette($app-blue-theme-accent-palette); - -// Define a green theme. -// $custom-theme-primary: mat-palette($app-green-theme-primary-palette, 500); -// $custom-theme-accent: mat-palette($app-green-theme-accent-palette); - -// $custom-theme-accent: mat-palette($mat-pink, A200, A100, A400); -$custom-theme-warn: mat.define-palette(mat.$red-palette); -$custom-theme: mat.define-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn); -@include mat.all-legacy-component-themes($custom-theme); @import "core/variables"; @import "core/mixins"; + //Material-Bootstrap configuration @import "assets/scss/bootstrap-material"; @import "/node_modules/bootstrap/scss/bootstrap"; diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss index 4d26bb881..4b293d44c 100644 --- a/dmp-frontend/src/styles.scss +++ b/dmp-frontend/src/styles.scss @@ -1,6 +1,104 @@ +@use '@angular/material'as mat; + +// Be sure that you only ever include this mixin once! +@include mat.core(); + +:root { + --primary-color: #129d99; + --primary-color-2: #23bcba; + --primary-color-3: #00b29f; + --secondary-color: #f7dd72; +} + +// Define your theme with color palettes, typography and density + +$mat-theme-primary-palette: map-merge(mat.$cyan-palette, (501: var(--primary-color), contrast: (100: black, ))); +$mat-theme-primary: mat.define-palette($mat-theme-primary-palette, + $default: 501, + $lighter: 100, + $darker: 700, + $text: 500); + +$mat-theme-accent-palette: map-merge(mat.$teal-palette, (501: var(--secondary-color), contrast: (A100: white, A200: white, ))); +$mat-theme-accent: mat.define-palette($mat-theme-accent-palette, + $default: 501, + $lighter: A100, + $darker: A200, + $text: 600); + +$mat-theme-warn-palette: map-merge(mat.$pink-palette, ()); +$mat-theme-warn: mat.define-palette($mat-theme-warn-palette, + $default: A200, + $lighter: 500, + $darker: 500, + $text: A700); + +$mat-dark-theme-primary-palette: map-merge(mat.$lime-palette, (contrast: (200: #030844, A100: rgba(0, 0, 0, 0.87), A700: rgba(0, 0, 0, 0.87), ))); +$mat-dark-theme-primary: mat.define-palette($mat-dark-theme-primary-palette, + $default: 200, + $lighter: A100, + $darker: A700, + $text: 700); + +$mat-dark-theme-accent-palette: map-merge(mat.$green-palette, (contrast: (A200: black, 50: black, A400: black, ))); +$mat-dark-theme-accent: mat.define-palette($mat-dark-theme-accent-palette, + $default: A200, + $lighter: 50, + $darker: A400, + $text: A100); + +$mat-dark-theme-warn-palette: map-merge(mat.$pink-palette, (contrast: (A100: black, 100: white, ))); +$mat-dark-theme-warn: mat.define-palette($mat-dark-theme-warn-palette, + $default: A100, + $lighter: 100, + $darker: A700, + $text: 100); + +$mat-typography: mat.define-typography-config($font-family: 'Roboto, sans-serif;', + // $display-4: mat.define-typography-level($font-size: 96px, $font-weight: 300, $font-family: 'Roboto, sans-serif;'), + // $display-3: mat.define-typography-level($font-size: 60px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), + // $display-2: mat.define-typography-level($font-size: 48px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), + // $display-1: mat.define-typography-level($font-size: 34px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), + // $headline: mat.define-typography-level($font-size: 24px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), + // $title: mat.define-typography-level($font-size: 20px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), + // $subheading-2: mat.define-typography-level($font-size: 18px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), + // $subheading-1: mat.define-typography-level($font-size: 20px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), + $body-2: mat.define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'), + $body-1: mat.define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'), + $caption: mat.define-typography-level($font-size: 16px, $font-weight: Medium, $font-family: 'Roboto, sans-serif;'), + $button: mat.define-typography-level($font-size: 16px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), + // Line-height must be unit-less fraction of the font-size. + // $input: mat.define-typography-level($font-size: inherit, $line-height: 1.125, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), +); + +$mat-density: 0; +// @include mat.elevation( +// $zValue: 12, +// $color: #000, +// $opacity: 0.5 +// ); + +$mat-core-theme: mat.define-light-theme((color: (primary: $mat-theme-primary, + accent: $mat-theme-accent, + warn: $mat-theme-warn), + typography: $mat-typography, + density: $mat-density)); + +$mat-dark-theme: mat.define-dark-theme((color: (primary: $mat-dark-theme-primary, + accent: $mat-dark-theme-accent, + warn: $mat-dark-theme-warn, + ))); + +@include mat.all-component-themes($mat-core-theme); + +.dark-theme { + @include mat.all-component-colors($mat-dark-theme); +} + + + // @import "~@covalent/core/theming/all-theme"; -@import "@angular/material/theming"; // @import '../node_modules/@angular/material/theming'; -@import "@angular/material/prebuilt-themes/indigo-pink.css"; +// @import "@angular/material/theming"; // @import '../node_modules/@angular/material/theming'; @import '../node_modules/@swimlane/ngx-datatable/index.css'; @import '../node_modules/@swimlane/ngx-datatable/themes/material.scss'; @import '../node_modules/@swimlane/ngx-datatable/assets/icons.css'; @@ -21,25 +119,28 @@ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); pointer-events: none; - } - /* high-performance display:none; helper */ - .gu-hide { +} + +/* high-performance display:none; helper */ +.gu-hide { left: -9999px !important; - } - /* added to mirrorContainer (default = body) while dragging */ - .gu-unselectable { +} + +/* added to mirrorContainer (default = body) while dragging */ +.gu-unselectable { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; - } - /* added to the source element while its mirror is dragged */ - .gu-transit { +} + +/* added to the source element while its mirror is dragged */ +.gu-transit { opacity: 0; border: 1px dashed red; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); - } +} // Custom Theme // @import "./assets/scss/blue-theme.scss"; @@ -54,17 +155,12 @@ // @include covalent-theme($theme); - :root { - --primary-color: #129d99; - --primary-color-2: #23bcba; - --primary-color-3: #00b29f; - --secondary-color: #f7dd72; - } - .cc-btn { + +.cc-btn { background-color: var(--primary-color-3) !important; - } - +} + .snackbar-warning { background-color: #f39010; color: #f3efef; @@ -228,7 +324,17 @@ padding: 0.3rem 0rem 0.6rem 0rem !important; } -.custom-userbox > mat-dialog-container { +.mdc-text-field--outlined .mdc-notched-outline { + z-index: 0 !important; +} + +.mdc-notched-outline__notch, +.mdc-notched-outline__leading, +.mdc-notched-outline__trailing { + background-color: white; +} + +.custom-userbox>mat-dialog-container { background-color: transparent; padding: 0rem; overflow: initial; @@ -257,13 +363,13 @@ } -.text-primary-blue{ +.text-primary-blue { color: var(--primary-color); } -.translateY-3{ - transform:translateY(3px); +.translateY-3 { + transform: translateY(3px); } // CSS for (@kolkov/angular-editor) @@ -316,28 +422,48 @@ transition: transform 1s; } -.colums-gapped{ - display: flex; - flex-direction: column; - gap: 1rem; +.colums-gapped { + display: flex; + flex-direction: column; + gap: 1rem; } -.info-grid{ - display: grid; - grid-template-columns: auto 1fr; - gap: 1rem; - .info-grid-label{ - padding-top: 1rem; - min-width: 14rem; - padding-left: 1rem; - font-weight: bold; - } - .info-grid-value{ - display: flex; - &>*{ - flex-grow: 1; - } - } +.info-grid { + display: grid; + grid-template-columns: auto 1fr; + gap: 1rem; + + .info-grid-label { + padding-top: 1rem; + min-width: 14rem; + padding-left: 1rem; + font-weight: bold; + } + + .info-grid-value { + display: flex; + + &>* { + flex-grow: 1; + } + } } -.datatable-body-cell { display: flex; margin: auto; } \ No newline at end of file +.datatable-body-cell { + display: flex; + margin: auto; +} + + + +.dense-1 { + @include mat.all-component-densities(-1); +} + +.dense-2 { + @include mat.all-component-densities(-2); +} + +.dense-3 { + @include mat.all-component-densities(-3); +}