Merge remote-tracking branch 'origin/ui-redesign' into ui-redesign
This commit is contained in:
commit
f47a3ab2a3
|
|
@ -216,7 +216,7 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
|
|||
}
|
||||
else {
|
||||
const dialogRef = this.dialog.open(StartNewDmpDialogComponent, {
|
||||
disableClose: true,
|
||||
disableClose: false,
|
||||
data: {
|
||||
isDialog: true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
background-color: #129d99;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mat-mini-fab-icon,
|
||||
|
|
@ -306,7 +307,7 @@
|
|||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
::ng-deep mat-select .mat-select-arrow-wrapper {
|
||||
::ng-deep mat-select .mat-select-arrow-wrapper {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,14 +8,22 @@
|
|||
<div class="icon-bar3"></div>
|
||||
</div>
|
||||
<a class="logo"><img src="../../../assets/splash/assets/img/argos-logo.svg"></a>
|
||||
<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu">
|
||||
<mat-icon class="toggle-icon">view_headline</mat-icon>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end" id="navigation">
|
||||
|
||||
<div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())">
|
||||
<button type="button" class="normal-btn ml-auto" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
|
||||
<button type="button" class="normal-btn ml-auto"
|
||||
(click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
|
||||
<!-- <button type="button" class="normal-btn ml-auto" [routerLink]="['/quick-wizard']">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button> -->
|
||||
<a class="ml-4 mr-4 faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
|
||||
<!-- <button mat-icon-button class="lang" [matMenuTriggerFor]="languageMenu"></button> -->
|
||||
<button mat-button [matMenuTriggerFor]="languageMenu" class="p-0 lang"><mat-icon class="mr-2">language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span><mat-icon>arrow_drop_down</mat-icon></button>
|
||||
<button mat-button [matMenuTriggerFor]="languageMenu" class="p-0 lang">
|
||||
<mat-icon class="mr-2">language</mat-icon><span
|
||||
class="text-uppercase">{{selectedLanguage}}</span>
|
||||
<mat-icon>arrow_drop_down</mat-icon>
|
||||
</button>
|
||||
<mat-menu #languageMenu="matMenu" class="lang-parent">
|
||||
<app-language (languageChange)="getLanguage($event)"></app-language>
|
||||
</mat-menu>
|
||||
|
|
@ -26,8 +34,10 @@
|
|||
<ul class="navbar-nav">
|
||||
<!-- Login -->
|
||||
<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
|
||||
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()">
|
||||
<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
|
||||
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()"
|
||||
(error)="this.applyFallbackAvatar($event)" (click)="openProfile()"
|
||||
[matTooltip]="this.getPrincipalName()">
|
||||
<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
|
||||
</li>
|
||||
<ng-template #loginoption>
|
||||
<button mat-button [routerLink]=" ['/login'] ">
|
||||
|
|
@ -36,6 +46,46 @@
|
|||
</ng-template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<mat-menu #toggleMenu="matMenu">
|
||||
<div *ngIf="!(isAuthenticated() && onInvalidUrl())">
|
||||
<ul class="list m-2">
|
||||
<li *ngIf="isAuthenticated();else loginoption" class="d-flex justify-content-center avatar">
|
||||
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()"
|
||||
(error)="this.applyFallbackAvatar($event)" (click)="openProfile()"
|
||||
[matTooltip]="this.getPrincipalName()">
|
||||
<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
|
||||
</li>
|
||||
<ng-template #loginoption>
|
||||
<li class="d-flex justify-content-center avatar">
|
||||
<button mat-button [routerLink]=" ['/login'] " class="d-flex justify-content-center">
|
||||
<span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ng-template>
|
||||
<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()">
|
||||
<a class="faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
|
||||
<button mat-button [matMenuTriggerFor]="languageMenu" class="ml-3 p-0 lang">
|
||||
<mat-icon class="mr-2">language</mat-icon><span
|
||||
class="text-uppercase">{{selectedLanguage}}</span>
|
||||
<mat-icon>arrow_drop_down</mat-icon>
|
||||
</button>
|
||||
<mat-menu #languageMenu="matMenu" class="lang-parent">
|
||||
<app-language (languageChange)="getLanguage($event)"></app-language>
|
||||
</mat-menu>
|
||||
</li>
|
||||
<li class="d-flex justify-content-center">
|
||||
<button type="button" class="normal-btn" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</mat-menu>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
<div *ngIf="progressIndication" class="progress-bar">
|
||||
|
|
@ -50,4 +100,4 @@
|
|||
<a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dmp-profiles">{{'NAV-BAR.DMP-PROFILES' |
|
||||
translate}}</a>
|
||||
<a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dataset-profiles">{{'NAV-BAR.DATASETS-ADMIN'
|
||||
| translate}}</a> -->
|
||||
| translate}}</a> -->
|
||||
|
|
@ -100,3 +100,20 @@ $mat-card-header-size: 40px !default;
|
|||
min-height: inherit;
|
||||
max-height: inherit;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style-type:none;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.list >li {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -251,7 +251,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
|
|||
}
|
||||
else {
|
||||
const dialogRef = this.dialog.open(StartNewDmpDialogComponent, {
|
||||
disableClose: true,
|
||||
disableClose: false,
|
||||
data: {
|
||||
isDialog: true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,141 @@
|
|||
@import "app/ui/misc/navigation/navigation.component.scss";
|
||||
@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: #129d99,
|
||||
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: #f7dd72,
|
||||
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-palette($app-green-theme-primary-palette);
|
||||
$app-green-theme-accent: mat-palette($app-green-theme-accent-palette, A200, A100, A400);
|
||||
$app-green-theme-warn: mat-palette($mat-red);
|
||||
|
||||
$app-green-theme-background: (
|
||||
status-bar: map_get($mat-grey, 300),
|
||||
app-bar: map_get($mat-grey, 100),
|
||||
background: map_get($mat-grey, 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, 300),
|
||||
selected-disabled-button: map_get($mat-grey, 400),
|
||||
disabled-button-toggle: map_get($mat-grey, 200),
|
||||
unselected-chip: map_get($mat-grey, 300),
|
||||
disabled-list-option: map_get($mat-grey, 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-typography-config(
|
||||
$font-family: "Lato, regular",
|
||||
$headline: mat-typography-level(32px, 48px, 700),
|
||||
$body-1: mat-typography-level(16px, 24px, 500)
|
||||
);
|
||||
|
||||
.green-theme {
|
||||
@include mat-core();
|
||||
|
||||
@include angular-material-theme($custom-theme);
|
||||
@include navigation-component-theme($custom-theme);
|
||||
|
||||
// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
|
||||
@include mat-base-typography($custom-typography);
|
||||
|
||||
// Override typography for a specific Angular Material components.
|
||||
@include mat-checkbox-typography($custom-typography);
|
||||
|
||||
// Override typography for all Angular Material, including mat-base-typography and all components.
|
||||
@include angular-material-typography($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.
|
||||
@include mat-core($custom-typography);
|
||||
}
|
||||
|
|
@ -17,12 +17,18 @@
|
|||
@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";
|
||||
|
||||
@include mat-core();
|
||||
|
||||
// Define a theme.
|
||||
// // Define a blue theme.
|
||||
$custom-theme-primary: mat-palette($app-blue-theme-primary-palette, 900);
|
||||
$custom-theme-accent: mat-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-palette($mat-red);
|
||||
$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
|
||||
|
|
|
|||
Loading…
Reference in New Issue