MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

dashboard redesign

This commit is contained in:
apapachristou 2019-04-24 12:26:53 +03:00
parent 5557111e93
commit 8a9e0c2d1f
145 changed files with 12037 additions and 912 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dmp-frontend/angular.json
View File

@ -21,7 +21,9 @@
"src/favicon.ico"
],
"styles": [
"src/styles.scss"
"src/styles.scss",
"src/assets/scss/material-dashboard.scss",
"src/assets/css/demo.css"
],
"scripts": []
},
@ -88,7 +90,9 @@
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/styles.scss"
"src/styles.scss",
"src/assets/scss/material-dashboard.scss",
"src/assets/css/demo.css"
],
"assets": [
"src/assets",

16
dmp-frontend/src/app/app.component.html
View File

@ -1,4 +1,16 @@
<app-navigation class="fixed"></app-navigation>
<div class="wrapper">
<div class="sidebar" data-color="danger" data-background-color="white">
<app-sidebar></app-sidebar>
<div class="sidebar-background"></div>
</div>
<div class="main-panel">
<app-navbar></app-navbar>
<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
</div>
</div>
<!-- <app-navigation class="fixed"></app-navigation>
<div class="container-fluid main-container">
<div class="row" *ngIf="helpContentEnabled">
@ -20,4 +32,4 @@
<app-help-content position="bottom"></app-help-content>
</div>
</div>
<app-notification></app-notification>
<app-notification></app-notification> -->

7
dmp-frontend/src/app/app.module.ts
View File

@ -21,6 +21,9 @@ import { NavigationModule } from './ui/misc/navigation/navigation.module';
import { LoginModule } from './ui/auth/login/login.module';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { DatasetCreateWizardModule } from './ui/dataset-create-wizard/dataset-create-wizard.module';
import { NavbarModule } from './ui/navbar/navbar.module';
import { SidebarModule } from './ui/sidebar/sidebar.module';
import { SearchComponent } from './ui/misc/search/search.component';
// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
@ -54,9 +57,11 @@ export function HttpLoaderFactory(http: HttpClient) {
ReactiveFormsModule,
FormsModule,
DatasetCreateWizardModule,
NavbarModule,
SidebarModule
],
declarations: [
AppComponent,
AppComponent
],
providers: [
{

14
dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss
View File

@ -3,12 +3,13 @@
}
.mat-fab-bottom-right {
top: auto !important;
right: 20px !important;
bottom: 10px !important;
left: auto !important;
position: fixed !important;
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 {
@ -35,4 +36,3 @@ mat-row:nth-child(odd){
background-color:#eef0fb;
}

11
dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss
View File

@ -17,11 +17,12 @@
}
.mat-fab-bottom-right {
top: auto !important;
right: 20px !important;
bottom: 10px !important;
left: auto !important;
position: fixed !important;
// top: auto !important;
// right: 20px !important;
// bottom: 10px !important;
// left: auto !important;
// position: fixed !important;
float: right;
z-index: 5;
}
}

84
dmp-frontend/src/app/ui/dashboard/dashboard.component.html
View File

@ -1,4 +1,84 @@
<div class="dashboard" id="main-panel">
<div class="main-content">
<div class="container-fluid">
<div class="row" *ngIf="this.isAuthenticated()">
<div class="col-sm-6 col-md-6 col-lg-6">
<app-wizard
title="{{'QUICKWIZARD.CREATE-ADD.CREATE.TITLE' | translate}}"
subtitle="Follow the steps of the wizard"
routerLink="/quick-wizard"
icon="play_circle_outline"
></app-wizard>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<app-wizard
title="{{'QUICKWIZARD.CREATE-ADD.ADD.TITLE' | translate}}"
subtitle="Follow the steps of the wizard"
routerLink="/datasetcreatewizard"
icon="play_circle_outline"
></app-wizard>
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter
[title]="this.isAuthenticated() ? 'DASHBOARD.MY-DMPS' : 'DASHBOARD.DMPS'"
[subtitle]="dashboardStatisticsData?.totalDataManagementPlanCount"
routerLink='/plans' buttonRedirectLink="/plans/new"
icon="view_agenda"
></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter
[title]="this.isAuthenticated() ? 'DASHBOARD.MY-DATASETS' : 'DASHBOARD.DATASETS'"
[subtitle]="dashboardStatisticsData?.totalDataSetCount"
routerLink='/datasets' buttonRedirectLink="/datasets/new"
icon="library_books"
></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter
[title]="this.isAuthenticated() ? 'DASHBOARD.MY-PROJECTS' : 'DASHBOARD.PROJECTS'"
[subtitle]="dashboardStatisticsData?.totalProjectCount"
routerLink='/projects' buttonRedirectLink="/projects/new"
icon="work_outline"
></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter
title="Related Organizations"
[subtitle]="dashboardStatisticsData?.totalOrganisationCount"
icon="scatter_plot"
></app-info-counter>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<app-recent-visited-activity></app-recent-visited-activity>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<app-recent-edited-activity></app-recent-edited-activity>
</div>
</div>
</div>
<div class="col-md-3">
<app-drafts></app-drafts>
</div>
</div>
</div>
</div>
<!-- <div class="dashboard" id="main-panel">
<div>
<div class="row" style="margin-top: 30px">
<div class="col"></div>
@ -92,4 +172,4 @@
</div>
<div class="col"></div>
</div>
</div>
</div> -->

3
dmp-frontend/src/app/ui/dashboard/dashboard.component.ts
View File

@ -3,7 +3,6 @@ import { FormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/internal/Observable';
import { takeUntil } from 'rxjs/operators';
import { JsonSerializer } from '../../common/types/json/json-serializer';
import { BaseComponent } from '../../core/common/base/base.component';
import { RecentActivityType } from '../../core/common/enum/recent-activity-type';
import { DashboardStatisticsModel } from '../../core/model/dashboard/dashboard-statistics-model';
@ -28,6 +27,7 @@ export class DashboardComponent extends BaseComponent implements OnInit {
datasetActivities: any[];
projectActivities: any[];
dmpActivities: any[];
organisationActivities: any[];
public dashboardStatisticsData: DashboardStatisticsModel;
public formControl = new FormControl();
projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
@ -61,6 +61,7 @@ export class DashboardComponent extends BaseComponent implements OnInit {
this.datasetActivities = response['recentDatasetActivities'];
this.dmpActivities = response['recentDmpActivities'];
this.projectActivities = response['recentProjectActivities'];
this.organisationActivities = response['totalOrganisationCount'];
});
}

13
dmp-frontend/src/app/ui/dashboard/dashboard.module.ts
View File

@ -5,6 +5,12 @@ import { DashboardComponent } from './dashboard.component';
import { DashboardRoutingModule } from './dashboard.routing';
import { QuickWizardCreateAdd } from './quick-wizard-create-add/quick-wizard-create-add.component';
import { RecentActivityComponent } from './recent-activity/recent-activity.component';
import { WizardComponent } from './wizard/wizard.component';
import { InfoCounterComponent } from './info-counter/info-counter.component';
import { RecentVisitedActivityComponent } from './recent-visited-activity/recent-visited-activity.component';
import { RecentEditedActivityComponent } from './recent-edited-activity/recent-edited-activity.component';
import { DraftsComponent } from './drafts/drafts.component';
@NgModule({
imports: [
@ -15,7 +21,12 @@ import { RecentActivityComponent } from './recent-activity/recent-activity.compo
DashboardComponent,
RecentActivityComponent,
CardComponent,
QuickWizardCreateAdd
QuickWizardCreateAdd,
WizardComponent,
InfoCounterComponent,
RecentVisitedActivityComponent,
RecentEditedActivityComponent,
DraftsComponent
],
entryComponents: [
QuickWizardCreateAdd

26
dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.css Normal file
View File

@ -0,0 +1,26 @@
.grey {
color: rgb(162, 162, 162);
}
.card-draft {
height: calc(100% - 60px);
}
.draft-desc {
padding-top: 15px;
padding-bottom: 15px;
}
.draft-subtitle {
font-weight: 400;
color: rgb(162, 162, 162);
}
.draft-title {
font-weight: 500;
color: black;
}
.drafts-more-btn {
text-align: right;
}

89
dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.html Normal file
View File

@ -0,0 +1,89 @@
<div class="card card-draft">
<div class="card-header card-header-plain">
<div class="card-desc">
<h4 class="card-title">DRAFTS</h4>
<p class="card-category">Draft Registrations</p>
</div>
<a href="#" class="view-all">VIEW ALL</a>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<tbody>
<tr>
<td>
<div class="row">
<div class="col-md-2" style="padding-top: 36px">
<i class="material-icons-outlined grey">view_agenda</i>
</div>
<div class="col-md-10">
<div class="drafts-more-btn">
<i class="material-icons more-icon">more_horiz</i>
</div>
<div class="draft-title">
Dataset: Clarin-D For Dmp: Dmp for Project: Real time
application
</div>
<div class="draft-subtitle">03.08.2019</div>
<div class="draft-desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</div>
<ul
class="nav md-pills max-width-80 nav-justified pills-rounded pills-outline-default"
>
<li class="nav-item">
<a
class="nav-link active"
data-toggle="tab"
href="#panel81"
role="tab"
>Clarin-D</a
>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="col-md-2" style="padding-top: 36px">
<i class="material-icons-outlined grey">library_books</i>
</div>
<div class="col-md-10">
<div class="drafts-more-btn">
<i class="material-icons more-icon">more_horiz</i>
</div>
<div class="draft-title">Title unavailable</div>
<div class="draft-subtitle">03.08.2019</div>
<div class="draft-desc">
Description unavailable
</div>
<ul
class="nav md-pills max-width-80 nav-justified pills-rounded pills-outline-default"
>
<li class="nav-item">
<a
class="nav-link active"
data-toggle="tab"
href="#panel81"
role="tab"
>Clarin-D</a
>
</li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

25
dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DraftsComponent } from './drafts.component';
describe('DraftsComponent', () => {
let component: DraftsComponent;
let fixture: ComponentFixture<DraftsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DraftsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DraftsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-drafts',
templateUrl: './drafts.component.html',
styleUrls: ['./drafts.component.css']
})
export class DraftsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

9
dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.css Normal file
View File

@ -0,0 +1,9 @@
.view-all {
cursor: pointer;
color: rgb(106, 164, 217);
font-weight: 500;
}
.view-all:hover {
color: rgb(46, 117, 182);
}

16
dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.html Normal file
View File

@ -0,0 +1,16 @@
<div class="card card-stats">
<div class="card-header card-header-default card-header-icon" [class.clickable]="isAuthenticated()" (click)="navigateToUrl()">
<div class="card-icon">
<i class="material-icons-outlined">{{ icon }}</i>
</div>
<p class="card-category">{{ title | translate }}</p>
<h3 class="card-title">
<b>{{ subtitle }}</b>
</h3>
</div>
<div class="card-footer">
<div class="stats">
<div class="view-all" [class.clickable]="isAuthenticated()" (click)="navigateToUrl()">VIEW ALL</div>
</div>
</div>
</div>

25
dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { InfoCounterComponent } from './info-counter.component';
describe('InfoCounterComponent', () => {
let component: InfoCounterComponent;
let fixture: ComponentFixture<InfoCounterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ InfoCounterComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(InfoCounterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

55
dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.ts Normal file
View File

@ -0,0 +1,55 @@
import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
import { Router } from "@angular/router";
import { AuthService } from "../../../core/services/auth/auth.service";
// declare interface RouteInfo {
// path: string;
// title: string;
// subtitle: string;
// icon: string;
// }
// export const INFO_COUNTER_ROUTES: RouteInfo[] = [
// { path: '', title: 'DATA MANAGEMENT PLANS', subtitle: '4', icon: 'view_agenda' },
// { path: '', title: 'RELATED DATA DESCRIPTIONS', subtitle: '20', icon: 'library_books' },
// { path: '', title: 'RELATED PROJECTS', subtitle: '4', icon: 'work_outline' },
// { path: '', title: 'ORGANIZATIONS', subtitle: '20', icon: 'scatter_plot' }
// ];
@Component({
selector: "app-info-counter",
templateUrl: "./info-counter.component.html",
styleUrls: ["./info-counter.component.css"]
})
export class InfoCounterComponent implements OnInit {
@Input() title: string;
@Input() subtitle: string;
@Input() icon: string;
@Input() routerLink: string;
@Input() buttonRedirectLink: string;
@Output() onClick: EventEmitter<void> = new EventEmitter<void>();
infoCounterItems: any[];
constructor(private router: Router, private authService: AuthService) {}
ngOnInit() {
// this.infoCounterItems = INFO_COUNTER_ROUTES.filter(infoCounterItem => infoCounterItem);
}
navigateToUrl() {
if (!this.isAuthenticated()) { return; }
this.router.navigate([this.routerLink]);
}
createNew() {
this.router.navigate([this.buttonRedirectLink]);
}
isAuthenticated() {
return this.authService.current() != null;
}
viewAllClicked() {
this.onClick.emit();
}
}

2
dmp-frontend/src/app/ui/dashboard/recent-activity/recent-activity.component.html
View File

@ -8,7 +8,7 @@
</mat-card-header>
<mat-card-content>
<mat-nav-list *ngIf="dmpActivities != null">
<mat-list-item (click)="redirect(activity.id, recentActivityTypeEnum.DMP)" *ngFor="let activity of dmpActivities">
<mat-list-item (click)="redirect(activity.id, recentActivityTypeEnum.Dmp)" *ngFor="let activity of dmpActivities">
<p mat-line>
{{activity.label}}
</p>

0
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css Normal file
View File

115
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html Normal file
View File

@ -0,0 +1,115 @@
<div class="card">
<div class="card-header card-header-plain">
<div class="card-desc">
<h4 class="card-title">
LAST EDITED DATA MANAGEMENT PLAN
</h4>
<p class="card-category">
The DMPs below are public under the ## license of
</p>
</div>
<a href="#" class="view-all">VIEW ALL</a>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-default">
<th>NAME</th>
<th>TEMPLATE</th>
<th>PROJECT</th>
<th>ROLE</th>
<th>ORGANIZATION</th>
<th>STATUS</th>
<th>VISITED</th>
<th></th>
</thead>
<tbody>
<tr>
<td>DMP Name</td>
<td>
<ul
class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue"
>
<li class="nav-item">
<a
class="nav-link active"
data-toggle="tab"
href="#"
role="tab"
>Template name</a
>
</li>
</ul>
</td>
<td>Project Name</td>
<td>Role Name</td>
<td>Organization Name</td>
<td>PRIVATE</td>
<td>01.01.2019</td>
<td><i class="material-icons more-icon">more_horiz</i></td>
</tr>
<tr>
<td>DMP Name</td>
<td>
<ul
class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue"
>
<li class="nav-item">
<a
class="nav-link active"
data-toggle="tab"
href="#"
role="tab"
>Template name</a
>
</li>
</ul>
</td>
<td>Project Name</td>
<td>Role Name</td>
<td>Organization Name</td>
<td style="padding-left: 0px;">
<ul
class="nav max-width-80 md-pills nav-justified pills-rounded pills-outline-green"
>
<li class="nav-item">
<a
class="nav-link active"
data-toggle="tab"
href="#"
role="tab"
>PUBLIC</a
>
</li>
</ul>
</td>
<td>01.01.2019</td>
<td><i class="material-icons more-icon">more_horiz</i></td>
</tr>
<tr>
<td>DMP Name</td>
<td>
<ul
class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue"
>
<li class="nav-item">
<a
class="nav-link active"
data-toggle="tab"
href="#"
role="tab"
>Template name</a
>
</li>
</ul>
</td>
<td>Project Name</td>
<td>Role Name</td>
<td>Organization Name</td>
<td>PRIVATE</td>
<td>01.01.2019</td>
<td><i class="material-icons more-icon">more_horiz</i></td>
</tr>
</tbody>
</table>
</div>
</div>

25
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RecentEditedActivityComponent } from './recent-edited-activity.component';
describe('RecentEditedActivityComponent', () => {
let component: RecentEditedActivityComponent;
let fixture: ComponentFixture<RecentEditedActivityComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ RecentEditedActivityComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RecentEditedActivityComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-recent-edited-activity',
templateUrl: './recent-edited-activity.component.html',
styleUrls: ['./recent-edited-activity.component.css']
})
export class RecentEditedActivityComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

0
dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.css Normal file
View File

86
dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.html Normal file
View File

@ -0,0 +1,86 @@
<div class="card">
<div class="card-header card-header-plain">
<div class="card-desc">
<h4 class="card-title">
LAST VISITED DATA MANAGEMENT PLAN
</h4>
<p class="card-category">
The DMPs below are public under the ## license of
</p>
</div>
<a href="#" class="view-all">VIEW ALL</a>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-default">
<th>NAME</th>
<th>TEMPLATE</th>
<th>PROJECT</th>
<th>ROLE</th>
<th>ORGANIZATION</th>
<th>STATUS</th>
<th>VISITED</th>
<th></th>
</thead>
<tbody *ngIf="dmpActivities!=null">
<tr (click)="redirect(activity.id, recentActivityTypeEnum.Dmp)" *ngFor="let activity of dmpActivities" style="cursor: pointer;">
<td>{{activity.label}}</td>
<td>
<ul
class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue"
>
<li class="nav-item">
<a
class="nav-link active"
data-toggle="tab"
href="#"
role="tab"
>Template name</a
>
</li>
</ul>
</td>
<td>Project Name</td>
<td>Role Name</td>
<td>Organization Name</td>
<td style="padding-left: 0px;" *ngIf="public">
<ul class="nav max-width-80 md-pills nav-justified pills-rounded pills-outline-green">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#" role="tab">PUBLIC</a>
</li>
</ul>
</td>
<td style="padding-left: 0px;" *ngIf="!public">PRIVATE</td>
<td>{{activity.timestamp | date:'shortDate'}}</td>
<td><i class="material-icons more-icon">more_horiz</i></td>
</tr>
</tbody>
<tbody *ngIf="dmpActivities==null">
<tr>
<td>--</td>
<td>
<ul
class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue"
>
<li class="nav-item">
<a
class="nav-link active"
data-toggle="tab"
href="#"
role="tab"
>--</a
>
</li>
</ul>
</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td><i class="material-icons more-icon">more_horiz</i></td>
</tr>
</tbody>
</table>
</div>
</div>

25
dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RecentVisitedActivityComponent } from './recent-visited-activity.component';
describe('RecentActivityComponent', () => {
let component: RecentVisitedActivityComponent;
let fixture: ComponentFixture<RecentVisitedActivityComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ RecentVisitedActivityComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RecentVisitedActivityComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

62
dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.ts Normal file
View File

@ -0,0 +1,62 @@
import { Component, OnInit } from "@angular/core";
import { RecentActivityType } from "../../../core/common/enum/recent-activity-type";
import { BaseComponent } from '../../../core/common/base/base.component';
import { Router } from "@angular/router";
import { AuthService } from "../../../core/services/auth/auth.service";
import { UserService } from "../../../core/services/user/user.service";
import { takeUntil } from "rxjs/operators";
@Component({
selector: "app-recent-visited-activity",
templateUrl: "./recent-visited-activity.component.html",
styleUrls: ["./recent-visited-activity.component.css"]
})
export class RecentVisitedActivityComponent extends BaseComponent implements OnInit {
dmpActivities: any[];
recentActivityItems: any[];
datasetActivities: any[];
projectActivities: any[];
organisationActivities: any[];
recentActivityTypeEnum = RecentActivityType;
public: boolean = false;
constructor(private router: Router, private authentication: AuthService, private userService: UserService) {
super();
}
ngOnInit() {
if (this.isAuthenticated()) {
this.userService.getRecentActivity()
.pipe(takeUntil(this._destroyed))
.subscribe(response => {
this.datasetActivities = response['recentDatasetActivities'];
this.dmpActivities = response['recentDmpActivities'];
this.projectActivities = response['recentProjectActivities'];
this.organisationActivities = response['totalOrganisationCount'];
});
}
}
redirect(id: string, type: RecentActivityType) {
switch (type) {
case RecentActivityType.Project: {
this.router.navigate(["projects/edit/" + id]);
return;
}
case RecentActivityType.Dataset: {
this.router.navigate(["datasets/edit/" + id]);
return;
}
case RecentActivityType.Dmp: {
this.router.navigate(["plans/edit/" + id]);
return;
}
default:
throw new Error("Unsupported Activity Type ");
}
}
public isAuthenticated(): boolean {
return !(!this.authentication.current());
}
}

10
dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.css Normal file
View File

@ -0,0 +1,10 @@
.clickable {
cursor: pointer;
}
.play_circle {
display: inline-block;
float: right;
margin: 0px 10px 0px 0px;
font-size: 40px;
}

10
dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.html Normal file
View File

@ -0,0 +1,10 @@
<div class="card clickable">
<div class="card-header card-header-blue">
<div class="card-desc">
<h4 class="card-title">{{ title }}</h4>
<p class="card-category">{{ subtitle }}</p>
</div>
<i class="material-icons play_circle">{{ icon }}</i>
</div>
<div class="card-body table-responsive"></div>
</div>

25
dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { WizardComponent } from './wizard.component';
describe('WizardComponent', () => {
let component: WizardComponent;
let fixture: ComponentFixture<WizardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ WizardComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(WizardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

30
dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.ts Normal file
View File

@ -0,0 +1,30 @@
import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
import { Router } from "@angular/router";
@Component({
selector: "app-wizard",
templateUrl: "./wizard.component.html",
styleUrls: ["./wizard.component.css"]
})
export class WizardComponent {
@Input() title: string;
@Input() subtitle: string;
@Input() icon: string;
@Input() routerLink: string;
@Output() onClick: EventEmitter<void> = new EventEmitter<void>();
wizardItems: any[];
constructor(private router: Router) {}
cardClicked() {
this.onClick.emit();
}
navigateToCreate() {
this.router.navigate(["/quick-wizard"]);
}
navigateToAdd() {
this.router.navigate(["/datasetcreatewizard"]);
}
}

78
dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.component.html
View File

@ -1,39 +1,43 @@
<div class="dataset-create-wizard">
<mat-horizontal-stepper linear #stepper>
<mat-step class="step-container" [stepControl]="formGroup.get('dmpMeta')">
<ng-template matStepLabel>{{'DATASET-CREATE-WIZARD.FIRST-STEP.TITLE'| translate}}</ng-template>
<form [formGroup]="formGroup.get('dmpMeta')">
<dataset-dmp-selector-component class="col-12" [formGroup]="formGroup.get('dmpMeta')" [datasetFormGroup]="formGroup.get('datasets')" [stepper]="stepper">
</dataset-dmp-selector-component>
</form>
<div class="col-12">
<div class="row">
<div class="col"></div>
<div>
<button matStepperNext mat-raised-button
color="primary">{{'DATASET-CREATE-WIZARD.ACTIONS.NEXT'| translate}}</button>
<div class="main-content">
<div class="container-fluid">
<div class="dataset-create-wizard">
<mat-horizontal-stepper linear #stepper>
<mat-step class="step-container" [stepControl]="formGroup.get('dmpMeta')">
<ng-template matStepLabel>{{'DATASET-CREATE-WIZARD.FIRST-STEP.TITLE'| translate}}</ng-template>
<form [formGroup]="formGroup.get('dmpMeta')">
<dataset-dmp-selector-component class="col-12" [formGroup]="formGroup.get('dmpMeta')" [datasetFormGroup]="formGroup.get('datasets')" [stepper]="stepper">
</dataset-dmp-selector-component>
</form>
<div class="col-12">
<div class="row">
<div class="col"></div>
<div>
<button matStepperNext mat-raised-button
color="primary">{{'DATASET-CREATE-WIZARD.ACTIONS.NEXT'| translate}}</button>
</div>
</div>
</div>
</div>
</div>
</mat-step>
<mat-step [stepControl]="formGroup">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.TITLE' | translate}}
</ng-template>
<div *ngIf="formGroup.get('dmpMeta').valid && isActive('step2')">
<app-dataset-editor-wizard-component class="col-12" [formGroup]="formGroup"
[datasetProfile]="formGroup.get('dmpMeta').get('datasetProfile')"
[datasetLabel]="formGroup.get('dmpMeta').get('dmp').value['label']">
</app-dataset-editor-wizard-component>
</div>
<div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button>
<button class="saveAndFinalizeButton" matStepperNext mat-raised-button (click)='saveFinalize()' [disabled]="!isFormValid() || !hasDatasets()"
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE-AND-FINALIZE' | translate}}</button>
<button class="saveButton" matStepperNext mat-raised-button (click)='save()' [disabled]="!hasDatasets()"
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE' | translate}}</button>
</div>
</mat-step>
</mat-horizontal-stepper>
</mat-step>
<mat-step [stepControl]="formGroup">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.TITLE' | translate}}
</ng-template>
<div *ngIf="formGroup.get('dmpMeta').valid && isActive('step2')">
<app-dataset-editor-wizard-component class="col-12" [formGroup]="formGroup"
[datasetProfile]="formGroup.get('dmpMeta').get('datasetProfile')"
[datasetLabel]="formGroup.get('dmpMeta').get('dmp').value['label']">
</app-dataset-editor-wizard-component>
</div>
<div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button>
<button class="saveAndFinalizeButton" matStepperNext mat-raised-button (click)='saveFinalize()' [disabled]="!isFormValid() || !hasDatasets()"
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE-AND-FINALIZE' | translate}}</button>
<button class="saveButton" matStepperNext mat-raised-button (click)='save()' [disabled]="!hasDatasets()"
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE' | translate}}</button>
</div>
</mat-step>
</mat-horizontal-stepper>
</div>
</div>
</div>

244
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
View File

@ -1,123 +1,127 @@
<div class="dataset-wizard">
<h3 *ngIf="isNew">{{ 'DATASET-WIZARD.TITLE.NEW' | translate }}</h3>
<div class="row">
<div class="col-auto">
<h3 *ngIf="!isNew">{{datasetWizardModel?.label}} {{ 'GENERAL.NAMES.DATASET' | translate }}
<span *ngIf="this.formGroup && this.formGroup.dirty">
- {{ 'GENERAL.STATUSES.EDIT' | translate }}</span>
</h3>
<h3 *ngIf="this.formGroup && this.formGroup.get('status').value == DatasetStatus.Finalized && viewOnly">{{'GENERAL.STATUSES.FINALISED' | translate }}</h3>
<div class="main-content">
<div class="container-fluid">
<div class="dataset-wizard">
<h3 *ngIf="isNew">{{ 'DATASET-WIZARD.TITLE.NEW' | translate }}</h3>
<div class="row">
<div class="col-auto">
<h3 *ngIf="!isNew">{{datasetWizardModel?.label}} {{ 'GENERAL.NAMES.DATASET' | translate }}
<span *ngIf="this.formGroup && this.formGroup.dirty">
- {{ 'GENERAL.STATUSES.EDIT' | translate }}</span>
</h3>
<h3 *ngIf="this.formGroup && this.formGroup.get('status').value == DatasetStatus.Finalized && viewOnly">{{'GENERAL.STATUSES.FINALISED' | translate }}</h3>
</div>
<div class="col"></div>
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="openDmpSearchDialogue()">
<mat-icon>file_copy</mat-icon>{{'DATASET-WIZARD.ACTIONS.COPY-DATASET' | translate}}
</button>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" *ngIf="!publicMode">
<mat-icon>more_vert</mat-icon>
</button>
<!-- <div class="col"></div>
<div class="col-auto" *ngIf=" !viewOnly">
<button *ngIf="!editMode" class="col-auto" mat-icon-button (click)="enableForm()">
<mat-icon class="mat-24">edit</mat-icon>
</button>
<button *ngIf="editMode" class="col-auto" mat-icon-button (click)="disableForm()">
<mat-icon class="mat-24">lock</mat-icon>
</button>
</div> -->
</div>
<div *ngIf="this.datasetProfileDefinitionModel || this.datasetWizardModel?.datasetProfileDefinition">
<button mat-raised-button color="primary" *ngIf="!isNew && !viewOnly && !isCopy" class="deleteButton" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)"
type="button">{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status != 1 && !viewOnly" class="saveButton"
(click)="save();" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status != 1 && !viewOnly" [disabled]="!formGroup.valid"
class="saveAndFinalizeButton" (click)="saveFinalize();" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-FINALISE' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" class="downloadPDF"
(click)="downloadPDF();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-PDF' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" class="downloadDOCX"
(click)="downloadDOCX();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-DOCX' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" class="downloadXML"
(click)="downloadXML();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="needsUpdate()" class="updateDatasetProfile" (click)="openUpdateDatasetProfileDialogue();"
type="button">{{ 'DATASET-WIZARD.ACTIONS.UPDATE-DATASET-PROFILE' | translate }}</button>
<div class="fill-space"></div>
</div>
<div class="row">
<mat-horizontal-stepper [linear]="isLinear" class="col-12" #stepper>
<mat-step class="step-container" [stepControl]="formGroup">
<ng-template matStepLabel>{{'DATASET-WIZARD.FIRST-STEP.TITLE' | translate}}</ng-template>
<form *ngIf="formGroup" [formGroup]="formGroup">
<div *ngIf="this.isActiveStep(0)" class="row">
<mat-form-field class="col-md-6">
<app-single-auto-complete [required]="true" [formControl]="formGroup.get('dmp')" placeholder="{{'DATASET-EDITOR.FIELDS.DMP' | translate}}"
[configuration]="dmpAutoCompleteConfiguration">
</app-single-auto-complete>
</mat-form-field>
<mat-form-field class="col-md-6">
<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="profile">
<mat-option *ngFor="let profile of availableProfiles" [value]="profile.id">
{{profile.label}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('profile').hasError('backendError')">{{formGroup.get('profile').getError('backendError').message}}</mat-error>
</mat-form-field>
<app-dataset-editor-component class="col-12" [formGroup]="formGroup"></app-dataset-editor-component>
<div class="col-12">
<div class="row">
<div class="col"></div>
<div class="col-auto">
<button matStepperNext mat-raised-button color="primary" (click)="getDefinition()">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button>
</div>
</div>
</div>
</div>
</form>
</mat-step>
<mat-step class="step-container" [stepControl]="formGroup">
<ng-template matStepLabel>{{'DATASET-WIZARD.SECOND-STEP.TITLE' | translate}}</ng-template>
<form *ngIf="formGroup" [formGroup]="formGroup">
<div *ngIf="this.isActiveStep(1)" class="row">
<app-dataset-external-references-editor-component class="col-12" [formGroup]="formGroup" [viewOnly]="viewOnly"></app-dataset-external-references-editor-component>
<div class="col-12">
<div class="row">
<div class="col"></div>
<div class="col-auto">
<button matStepperNext mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button>
</div>
</div>
</div>
</div>
</form>
</mat-step>
<mat-step class="step-container">
<ng-template matStepLabel>{{'DATASET-WIZARD.THIRD-STEP.TITLE' | translate}}</ng-template>
<div *ngIf="this.isActiveStep(2)" class="row">
<app-dataset-description-form class="col-12" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition"
[form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="datasetWizardModel.datasetProfileDefinition.rules"
[datasetProfileId]="formGroup.get('profile').value"></app-dataset-description-form>
<div class="col-12 description-action-row">
<div class="row">
<div class="col-auto">
<button matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button>
</div>
</div>
</div>
</div>
</mat-step>
<!-- <mat-step class="step-container">
<ng-template matStepLabel>{{'DATASET-WIZARD.FOURTH-STEP.TITLE' | translate}}</ng-template>
<div *ngIf="this.isActiveStep(3)">
<app-dynamic-form-pending-questions-display class="full-width" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition" [form]="this.formGroup.get('datasetProfileDefinition')" [dataModel]="datasetWizardModel"></app-dynamic-form-pending-questions-display>
<div class="navigation-buttons-container">
<button style="margin-top:10px;" matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK'
| translate}}</button>
</div>
</div>
</mat-step> -->
</mat-horizontal-stepper>
</div>
</div>
<div class="col"></div>
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="openDmpSearchDialogue()">
<mat-icon>file_copy</mat-icon>{{'DATASET-WIZARD.ACTIONS.COPY-DATASET' | translate}}
</button>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" *ngIf="!publicMode">
<mat-icon>more_vert</mat-icon>
</button>
<!-- <div class="col"></div>
<div class="col-auto" *ngIf=" !viewOnly">
<button *ngIf="!editMode" class="col-auto" mat-icon-button (click)="enableForm()">
<mat-icon class="mat-24">edit</mat-icon>
</button>
<button *ngIf="editMode" class="col-auto" mat-icon-button (click)="disableForm()">
<mat-icon class="mat-24">lock</mat-icon>
</button>
</div> -->
</div>
<div *ngIf="this.datasetProfileDefinitionModel || this.datasetWizardModel?.datasetProfileDefinition">
<button mat-raised-button color="primary" *ngIf="!isNew && !viewOnly && !isCopy" class="deleteButton" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)"
type="button">{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status != 1 && !viewOnly" class="saveButton"
(click)="save();" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status != 1 && !viewOnly" [disabled]="!formGroup.valid"
class="saveAndFinalizeButton" (click)="saveFinalize();" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-FINALISE' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" class="downloadPDF"
(click)="downloadPDF();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-PDF' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" class="downloadDOCX"
(click)="downloadDOCX();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-DOCX' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" class="downloadXML"
(click)="downloadXML();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="needsUpdate()" class="updateDatasetProfile" (click)="openUpdateDatasetProfileDialogue();"
type="button">{{ 'DATASET-WIZARD.ACTIONS.UPDATE-DATASET-PROFILE' | translate }}</button>
<div class="fill-space"></div>
</div>
<div class="row">
<mat-horizontal-stepper [linear]="isLinear" class="col-12" #stepper>
<mat-step class="step-container" [stepControl]="formGroup">
<ng-template matStepLabel>{{'DATASET-WIZARD.FIRST-STEP.TITLE' | translate}}</ng-template>
<form *ngIf="formGroup" [formGroup]="formGroup">
<div *ngIf="this.isActiveStep(0)" class="row">
<mat-form-field class="col-md-6">
<app-single-auto-complete [required]="true" [formControl]="formGroup.get('dmp')" placeholder="{{'DATASET-EDITOR.FIELDS.DMP' | translate}}"
[configuration]="dmpAutoCompleteConfiguration">
</app-single-auto-complete>
</mat-form-field>
<mat-form-field class="col-md-6">
<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="profile">
<mat-option *ngFor="let profile of availableProfiles" [value]="profile.id">
{{profile.label}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('profile').hasError('backendError')">{{formGroup.get('profile').getError('backendError').message}}</mat-error>
</mat-form-field>
<app-dataset-editor-component class="col-12" [formGroup]="formGroup"></app-dataset-editor-component>
<div class="col-12">
<div class="row">
<div class="col"></div>
<div class="col-auto">
<button matStepperNext mat-raised-button color="primary" (click)="getDefinition()">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button>
</div>
</div>
</div>
</div>
</form>
</mat-step>
<mat-step class="step-container" [stepControl]="formGroup">
<ng-template matStepLabel>{{'DATASET-WIZARD.SECOND-STEP.TITLE' | translate}}</ng-template>
<form *ngIf="formGroup" [formGroup]="formGroup">
<div *ngIf="this.isActiveStep(1)" class="row">
<app-dataset-external-references-editor-component class="col-12" [formGroup]="formGroup" [viewOnly]="viewOnly"></app-dataset-external-references-editor-component>
<div class="col-12">
<div class="row">
<div class="col"></div>
<div class="col-auto">
<button matStepperNext mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button>
</div>
</div>
</div>
</div>
</form>
</mat-step>
<mat-step class="step-container">
<ng-template matStepLabel>{{'DATASET-WIZARD.THIRD-STEP.TITLE' | translate}}</ng-template>
<div *ngIf="this.isActiveStep(2)" class="row">
<app-dataset-description-form class="col-12" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition"
[form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="datasetWizardModel.datasetProfileDefinition.rules"
[datasetProfileId]="formGroup.get('profile').value"></app-dataset-description-form>
<div class="col-12 description-action-row">
<div class="row">
<div class="col-auto">
<button matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button>
</div>
</div>
</div>
</div>
</mat-step>
<!-- <mat-step class="step-container">
<ng-template matStepLabel>{{'DATASET-WIZARD.FOURTH-STEP.TITLE' | translate}}</ng-template>
<div *ngIf="this.isActiveStep(3)">
<app-dynamic-form-pending-questions-display class="full-width" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition" [form]="this.formGroup.get('datasetProfileDefinition')" [dataModel]="datasetWizardModel"></app-dynamic-form-pending-questions-display>
<div class="navigation-buttons-container">
<button style="margin-top:10px;" matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK'
| translate}}</button>
</div>
</div>
</mat-step> -->
</mat-horizontal-stepper>
</div>
</div>

162
dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
View File

@ -1,93 +1,97 @@
<div>
<h3>{{'DATASET-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
<div class="main-content">
<div class="container-fluid">
<div>
<h3>{{'DATASET-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
<app-dataset-criteria-component [dmpSearchEnabled]="dmpSearchEnabled"></app-dataset-criteria-component>
<mat-card class="mat-card">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<app-dataset-criteria-component [dmpSearchEnabled]="dmpSearchEnabled"></app-dataset-criteria-component>
<mat-card class="mat-card">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DATASET-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DATASET-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: Dmp -->
<ng-container cdkColumnDef="project">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.PROJECT' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.project}} </mat-cell>
</ng-container>
<!-- Column Definition: Dmp -->
<ng-container cdkColumnDef="project">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.PROJECT' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.project}} </mat-cell>
</ng-container>
<!-- Column Definition: Dmp -->
<ng-container cdkColumnDef="dmp">
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|dmp:label">{{'DATASET-LISTING.COLUMNS.DMP' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.dmp}} </mat-cell>
</ng-container>
<!-- Column Definition: Dmp -->
<ng-container cdkColumnDef="dmp">
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|dmp:label">{{'DATASET-LISTING.COLUMNS.DMP' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.dmp}} </mat-cell>
</ng-container>
<!-- Column Definition: Profile -->
<ng-container cdkColumnDef="profile">
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|profile:label">{{'DATASET-LISTING.COLUMNS.PROFILE' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.profile}} </mat-cell>
</ng-container>
<!-- Column Definition: Profile -->
<ng-container cdkColumnDef="profile">
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|profile:label">{{'DATASET-LISTING.COLUMNS.PROFILE' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.profile}} </mat-cell>
</ng-container>
<!-- Column Definition: Status -->
<ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{enumUtils.toDatasetStatusString(row.status)}} </mat-cell>
</ng-container>
<!-- Column Definition: Status -->
<ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{enumUtils.toDatasetStatusString(row.status)}} </mat-cell>
</ng-container>
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="dataRepositories">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DATAREPOSITORIES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.dataRepositories}} </mat-cell>
</ng-container> -->
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="registries">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.REGISTRIES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.registries}} </mat-cell>
</ng-container> -->
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="services">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.SERVICES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.services}} </mat-cell>
</ng-container> -->
<!-- Column Definition: Status -->
<!-- <ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.status}}
</mat-cell>
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="dataRepositories">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DATAREPOSITORIES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.dataRepositories}} </mat-cell>
</ng-container> -->
<!-- Column Definition: Description -->
<ng-container cdkColumnDef="description">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
</ng-container>
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="registries">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.REGISTRIES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.registries}} </mat-cell>
</ng-container> -->
<!-- Column Definition: Created -->
<ng-container cdkColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-LISTING.COLUMNS.CREATED' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
</ng-container>
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="services">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.SERVICES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.services}} </mat-cell>
</ng-container> -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
<!-- (click)="rowClick(row.id)" -->
<!-- Column Definition: Status -->
<!-- <ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.status}}
</mat-cell>
</ng-container> -->
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
<!-- Column Definition: Description -->
<ng-container cdkColumnDef="description">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
</ng-container>
<button *ngIf="dmpId" mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/datasets/new/'+dmpId] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
<button *ngIf="!dmpId" mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/datasets/new'] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
<!-- Column Definition: Created -->
<ng-container cdkColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-LISTING.COLUMNS.CREATED' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
<!-- (click)="rowClick(row.id)" -->
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
<button *ngIf="dmpId" mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/datasets/new/'+dmpId] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
<button *ngIf="!dmpId" mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/datasets/new'] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
</div>
</div>
</div>

11
dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
View File

@ -3,11 +3,12 @@
}
.mat-fab-bottom-right {
top: auto !important;
right: 20px !important;
bottom: 10px !important;
left: auto !important;
position: fixed !important;
// top: auto !important;
// right: 20px !important;
// bottom: 10px !important;
// left: auto !important;
// position: fixed !important;
float: right;
z-index: 5;
}

362
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
View File

@ -1,183 +1,187 @@
<div class="dmp-editor">
<div>
<mat-card-title *ngIf="isNew">{{'DMP-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
<mat-card-title *ngIf="!isNew">
<h3>{{formGroup?.get('label')?.value}} </h3>
</mat-card-title>
</div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<mat-card>
<mat-card-header>
<div class="col-12 row">
<div class="col"></div>
<div *ngIf="!isNew" class="col-auto">
<div class="row actions-row">
<div class="col-auto" *ngIf="!editMode && formGroup.get('status').value !== 1">
<button mat-icon-button (click)="enableForm()">
<mat-icon class="mat-24">edit</mat-icon>
</button>
</div>
<div class="col-auto" *ngIf="editMode && formGroup.get('status').value !== 1">
<button mat-icon-button (click)="disableForm()">
<mat-icon class="mat-24">lock</mat-icon>
</button>
</div>
<div class="col-auto">
<button mat-button type="button" (click)="redirectToDatasets()">
<mat-icon>arrow_right_alt</mat-icon>
<span>{{'DMP-EDITOR.ACTIONS.GO-TO-DATASETS' | translate}}</span>
</button>
</div>
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="newVersion(dmp.id, dmp.label)">
<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
</button>
<button mat-menu-item (click)="clone(dmp.id)">
<mat-icon>filter_none</mat-icon>{{'DMP-LISTING.ACTIONS.CLONE' | translate}}
</button>
<button mat-menu-item (click)="viewVersions(dmp.groupId, dmp.label)">
<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
</button>
<button mat-menu-item (click)="downloadXml(dmp.id)">
<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-XML' | translate}}
</button>
<button mat-menu-item (click)="downloadDocx(dmp.id)">
<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-DOCX' | translate}}
</button>
<button mat-menu-item (click)="downloadPDF(dmp.id)">
<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-PDF' | translate}}
</button>
</mat-menu>
<button mat-icon-button class="col-auto" type="button" [matMenuTriggerFor]="actionsMenu">
<mat-icon>more_vert</mat-icon>
</button>
</div>
</div>
</div>
</mat-card-header>
<mat-card-content>
<div class="row">
<mat-form-field class="col-md-12">
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label"
formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-12">
<textarea matInput class="description-area"
placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
</textarea>
<!-- <mat-error *ngIf="formGroup.get('description').hasError('backendError')">
{{formGroup.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
translate}}</mat-error> -->
</mat-form-field>
<mat-form-field class="col-md-6">
<app-single-auto-complete required='true' [formControl]="formGroup.get('project')"
placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
[configuration]="projectAutoCompleteConfiguration">
</app-single-auto-complete>
<mat-error *ngIf="formGroup.get('project').hasError('backendError')">
{{formGroup.get('project').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('project').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<!-- <app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project> -->
<mat-form-field class="col-md-6">
<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')"
placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
[configuration]="profilesAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('profiles').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<button matSuffix mat-icon-button type="button" [disabled]="formGroup.get('profiles').disabled"
(click)="availableProfiles()">
<mat-icon>view_list</mat-icon>
</button>
</mat-form-field>
<!-- <button mat-button (click)="availableProfiles()">View All</button> -->
<mat-form-field class="col-md-6">
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
[configuration]="organisationsAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
{{formGroup.get('organisations').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('organisations').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6">
<app-multiple-auto-complete [formControl]="formGroup.get('researchers')"
placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
[configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
{{formGroup.get('researchers').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('researchers').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
translate}}</mat-error>
<button matSuffix mat-icon-button [disabled]="formGroup.get('researchers').disabled"
type="button" (click)="addResearcher()">
<mat-icon>add_circle</mat-icon>
</button>
</mat-form-field>
<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
<mat-form-field class="col-md-6">
<app-single-auto-complete [required]='false' [formControl]="formGroup.get('profile')"
placeholder="{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}"
[configuration]="dmpProfileAutoCompleteConfiguration">
</app-single-auto-complete>
</mat-form-field>
<mat-form-field class="col-md-6">
<input matInput placeholder="Version" disabled
[value]="formGroup.get('version').value== undefined ?0 :formGroup.get('version').value">
</mat-form-field>
<!-- <app-dynamic-dmp-field-resolver *ngIf="dmp.definition" class="col-md-12"
[formGroup]="formGroup" [dmpProfileDefinition]=dmp.definition></app-dynamic-dmp-field-resolver> -->
<app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" class="col-md-12"
[formGroup]="formGroup" [dmpProfileDefinition]="selectedDmpProfileDefinition">
</app-dynamic-dmp-field-resolver>
<div class="col-md-12">
<mat-list *ngIf="associatedUsers?.length" role="list" class="col-md-12">
<h3 mat-subheader>Associated Users</h3>
<mat-list-item role="listitem" *ngFor="let user of associatedUsers">
<mat-icon mat-list-icon>person</mat-icon>
<div>{{user.name}}</div>
</mat-list-item>
</mat-list>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-auto"><button mat-raised-button color="primary" (click)="cancel()"
type="button">{{'DMP-EDITOR.ACTIONS.CANCEL'
| translate}}</button></div>
<div class="main-content">
<div class="container-fluid">
<div class="dmp-editor">
<div>
<mat-card-title *ngIf="isNew">{{'DMP-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
<mat-card-title *ngIf="!isNew">
<h3>{{formGroup?.get('label')?.value}} </h3>
</mat-card-title>
</div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<mat-card>
<mat-card-header>
<div class="col-12 row">
<div class="col"></div>
<div class="col-auto" *ngIf="!isNew && this.formGroup.enabled"><button mat-raised-button
color="primary" type="button"
(click)="delete()">{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}</button></div>
<div class="col-auto" *ngIf="this.formGroup.enabled"><button mat-raised-button
color="primary" type="submit">{{'DMP-EDITOR.ACTIONS.SAVE'
| translate}}</button></div>
<div class="col-auto" *ngIf="dmp.lockable && this.formGroup.enabled"><button type="button"
mat-raised-button color="primary"
(click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE' | translate}}</button>
<div *ngIf="!isNew" class="col-auto">
<div class="row actions-row">
<div class="col-auto" *ngIf="!editMode && formGroup.get('status').value !== 1">
<button mat-icon-button (click)="enableForm()">
<mat-icon class="mat-24">edit</mat-icon>
</button>
</div>
<div class="col-auto" *ngIf="editMode && formGroup.get('status').value !== 1">
<button mat-icon-button (click)="disableForm()">
<mat-icon class="mat-24">lock</mat-icon>
</button>
</div>
<div class="col-auto">
<button mat-button type="button" (click)="redirectToDatasets()">
<mat-icon>arrow_right_alt</mat-icon>
<span>{{'DMP-EDITOR.ACTIONS.GO-TO-DATASETS' | translate}}</span>
</button>
</div>
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="newVersion(dmp.id, dmp.label)">
<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
</button>
<button mat-menu-item (click)="clone(dmp.id)">
<mat-icon>filter_none</mat-icon>{{'DMP-LISTING.ACTIONS.CLONE' | translate}}
</button>
<button mat-menu-item (click)="viewVersions(dmp.groupId, dmp.label)">
<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
</button>
<button mat-menu-item (click)="downloadXml(dmp.id)">
<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-XML' | translate}}
</button>
<button mat-menu-item (click)="downloadDocx(dmp.id)">
<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-DOCX' | translate}}
</button>
<button mat-menu-item (click)="downloadPDF(dmp.id)">
<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-PDF' | translate}}
</button>
</mat-menu>
<button mat-icon-button class="col-auto" type="button" [matMenuTriggerFor]="actionsMenu">
<mat-icon>more_vert</mat-icon>
</button>
</div>
</div>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
<!-- <div *ngIf="formGroup"> {{ formGroup.value | json }}</div> -->
</mat-card-header>
<mat-card-content>
<div class="row">
<mat-form-field class="col-md-12">
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label"
formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-12">
<textarea matInput class="description-area"
placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
</textarea>
<!-- <mat-error *ngIf="formGroup.get('description').hasError('backendError')">
{{formGroup.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
translate}}</mat-error> -->
</mat-form-field>
<mat-form-field class="col-md-6">
<app-single-auto-complete required='true' [formControl]="formGroup.get('project')"
placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
[configuration]="projectAutoCompleteConfiguration">
</app-single-auto-complete>
<mat-error *ngIf="formGroup.get('project').hasError('backendError')">
{{formGroup.get('project').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('project').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<!-- <app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project> -->
<mat-form-field class="col-md-6">
<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')"
placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
[configuration]="profilesAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('profiles').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<button matSuffix mat-icon-button type="button" [disabled]="formGroup.get('profiles').disabled"
(click)="availableProfiles()">
<mat-icon>view_list</mat-icon>
</button>
</mat-form-field>
<!-- <button mat-button (click)="availableProfiles()">View All</button> -->
<mat-form-field class="col-md-6">
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
[configuration]="organisationsAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
{{formGroup.get('organisations').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('organisations').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6">
<app-multiple-auto-complete [formControl]="formGroup.get('researchers')"
placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
[configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
{{formGroup.get('researchers').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('researchers').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
translate}}</mat-error>
<button matSuffix mat-icon-button [disabled]="formGroup.get('researchers').disabled"
type="button" (click)="addResearcher()">
<mat-icon>add_circle</mat-icon>
</button>
</mat-form-field>
<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
<mat-form-field class="col-md-6">
<app-single-auto-complete [required]='false' [formControl]="formGroup.get('profile')"
placeholder="{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}"
[configuration]="dmpProfileAutoCompleteConfiguration">
</app-single-auto-complete>
</mat-form-field>
<mat-form-field class="col-md-6">
<input matInput placeholder="Version" disabled
[value]="formGroup.get('version').value== undefined ?0 :formGroup.get('version').value">
</mat-form-field>
<!-- <app-dynamic-dmp-field-resolver *ngIf="dmp.definition" class="col-md-12"
[formGroup]="formGroup" [dmpProfileDefinition]=dmp.definition></app-dynamic-dmp-field-resolver> -->
<app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" class="col-md-12"
[formGroup]="formGroup" [dmpProfileDefinition]="selectedDmpProfileDefinition">
</app-dynamic-dmp-field-resolver>
<div class="col-md-12">
<mat-list *ngIf="associatedUsers?.length" role="list" class="col-md-12">
<h3 mat-subheader>Associated Users</h3>
<mat-list-item role="listitem" *ngFor="let user of associatedUsers">
<mat-icon mat-list-icon>person</mat-icon>
<div>{{user.name}}</div>
</mat-list-item>
</mat-list>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-auto"><button mat-raised-button color="primary" (click)="cancel()"
type="button">{{'DMP-EDITOR.ACTIONS.CANCEL'
| translate}}</button></div>
<div class="col"></div>
<div class="col-auto" *ngIf="!isNew && this.formGroup.enabled"><button mat-raised-button
color="primary" type="button"
(click)="delete()">{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}</button></div>
<div class="col-auto" *ngIf="this.formGroup.enabled"><button mat-raised-button
color="primary" type="submit">{{'DMP-EDITOR.ACTIONS.SAVE'
| translate}}</button></div>
<div class="col-auto" *ngIf="dmp.lockable && this.formGroup.enabled"><button type="button"
mat-raised-button color="primary"
(click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE' | translate}}</button>
</div>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
<!-- <div *ngIf="formGroup"> {{ formGroup.value | json }}</div> -->
</div>
</div>
</div>

2
dmp-frontend/src/app/ui/dmp/editor/dynamic-fields-project/dynamic-fields-project.component.html
View File

@ -1,6 +1,6 @@
<div *ngIf="formGroup" [formGroup]="formGroup">
<div formArrayName="dynamicFields">
<div *ngFor="let control of formGroup.get('dynamicFields').controls;let i = index;">
<div *ngFor="let control of formGroup.get('dynamicFields');let i = index;">
<app-dynamic-field-project [formGroup]="control" [dependencies]="findDependencies(i)"></app-dynamic-field-project>
</div>
</div>

184
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
View File

@ -1,107 +1,111 @@
<div class="dmp-listing">
<h3>{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
<div class="main-content">
<div class="container-fluid">
<div class="dmp-listing">
<h3>{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
<app-dmp-criteria-component [showProject]="showProject"></app-dmp-criteria-component>
<mat-card class="mat-card">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<app-dmp-criteria-component [showProject]="showProject"></app-dmp-criteria-component>
<mat-card class="mat-card">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DMP-LISTING.COLUMNS.NAME' | translate}}
</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DMP-LISTING.COLUMNS.NAME' | translate}}
</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: Project -->
<ng-container cdkColumnDef="project">
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|project:label">{{'DMP-LISTING.COLUMNS.PROJECT' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.project}} </mat-cell>
</ng-container>
<!-- Column Definition: Project -->
<ng-container cdkColumnDef="project">
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|project:label">{{'DMP-LISTING.COLUMNS.PROJECT' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.project}} </mat-cell>
</ng-container>
<!-- Column Definition: Profile -->
<ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{enumUtils.toDmpStatusString(row.status)}} </mat-cell>
</ng-container>
<!-- Column Definition: Profile -->
<ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{enumUtils.toDmpStatusString(row.status)}} </mat-cell>
</ng-container>
<!-- Column Definition: Researchers -->
<ng-container cdkColumnDef="creationTime">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">
{{'DMP-LISTING.COLUMNS.CREATION-TIME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.creationTime | date:'shortDate'}} </mat-cell>
</ng-container>
<!-- Column Definition: Researchers -->
<ng-container cdkColumnDef="creationTime">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">
{{'DMP-LISTING.COLUMNS.CREATION-TIME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.creationTime | date:'shortDate'}} </mat-cell>
</ng-container>
<!-- Column Definition: Organisations -->
<ng-container cdkColumnDef="organisations">
<mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.ORGANISATIONS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.organisations}} </mat-cell>
</ng-container>
<!-- Column Definition: Organisations -->
<ng-container cdkColumnDef="organisations">
<mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.ORGANISATIONS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.organisations}} </mat-cell>
</ng-container>
<!-- Column Definition: Version -->
<ng-container cdkColumnDef="version">
<mat-header-cell *matHeaderCellDef mat-sort-header="version">
{{'DMP-LISTING.COLUMNS.LATEST_VERSION' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">
<!-- Column Definition: Version -->
<ng-container cdkColumnDef="version">
<mat-header-cell *matHeaderCellDef mat-sort-header="version">
{{'DMP-LISTING.COLUMNS.LATEST_VERSION' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">
{{row.version}}
{{row.version}}
<!-- <div class="row">
<div class="col"></div>
<div class="col-auto">{{row.version}}</div>
<div class="col"></div>
</div> -->
</mat-cell>
</ng-container>
<!-- <div class="row">
<div class="col"></div>
<div class="col-auto">{{row.version}}</div>
<div class="col"></div>
</div> -->
</mat-cell>
</ng-container>
<!-- Column Definition: Datasets -->
<ng-container cdkColumnDef="datasets">
<mat-header-cell *matHeaderCellDef mat-sort-header="|count|dataset">
{{'DMP-LISTING.COLUMNS.DATASETS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
<app-url-listing [items]="row.datasets" [urlLimit]="5" [parameters]="{ datasetLabel: row.label }">
</app-url-listing>
</mat-cell>
</ng-container>
<!-- Column Definition: Datasets -->
<ng-container cdkColumnDef="datasets">
<mat-header-cell *matHeaderCellDef mat-sort-header="|count|dataset">
{{'DMP-LISTING.COLUMNS.DATASETS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
<app-url-listing [items]="row.datasets" [urlLimit]="5" [parameters]="{ datasetLabel: row.label }">
</app-url-listing>
</mat-cell>
</ng-container>
<ng-container cdkColumnDef="actions">
<mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="openShareDialog(row.id,row.label)">
<mat-icon>share</mat-icon>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}
</button>
<button mat-menu-item (click)="addDataset(row.id)">
<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET' | translate}}
</button>
<button mat-menu-item (click)="showDatasets(row.id, row.label)">
<mat-icon>list</mat-icon>{{'DMP-LISTING.ACTIONS.DATASETS' | translate}}
</button>
<button mat-menu-item (click)="viewVersions(row.groupId, row.label)">
<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
</button>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<mat-icon>more_vert</mat-icon>
</button>
</mat-cell>
</ng-container>
<ng-container cdkColumnDef="actions">
<mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="openShareDialog(row.id,row.label)">
<mat-icon>share</mat-icon>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}
</button>
<button mat-menu-item (click)="addDataset(row.id)">
<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET' | translate}}
</button>
<button mat-menu-item (click)="showDatasets(row.id, row.label)">
<mat-icon>list</mat-icon>{{'DMP-LISTING.ACTIONS.DATASETS' | translate}}
</button>
<button mat-menu-item (click)="viewVersions(row.groupId, row.label)">
<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
</button>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<mat-icon>more_vert</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id);"></mat-row>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id);"></mat-row>
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
<button *ngIf="!projectId" mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]=" ['./new'] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
<button *ngIf="projectId" mat-fab class="mat-fab-bottom-right" color="primary"
[routerLink]=" ['/plans/new/project/', projectId] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
<button *ngIf="!projectId" mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]=" ['./new'] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
<button *ngIf="projectId" mat-fab class="mat-fab-bottom-right" color="primary"
[routerLink]=" ['/plans/new/project/', projectId] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
</div>
</div>
</div>

11
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
View File

@ -17,11 +17,12 @@
}
.mat-fab-bottom-right {
top: auto !important;
right: 20px !important;
bottom: 10px !important;
left: auto !important;
position: fixed !important;
// top: auto !important;
// right: 20px !important;
// bottom: 10px !important;
// left: auto !important;
// position: fixed !important;
float: right;
z-index: 5;
}
}

11
dmp-frontend/src/app/ui/dmp/wizard/listing/dmp-wizard-dataset-listing.component.scss
View File

@ -3,11 +3,12 @@
}
.mat-fab-bottom-right {
top: auto !important;
right: 20px !important;
bottom: 10px !important;
left: auto !important;
position: fixed !important;
// top: auto !important;
// right: 20px !important;
// bottom: 10px !important;
// left: auto !important;
// position: fixed !important;
float: right;
}
.full-width {

138
dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html
View File

@ -1,85 +1,89 @@
<div class="explore-dataset">
<h3 class="text-center">{{'DATASET-PUBLIC-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
<div class="row">
<div class="col-md-3">
<app-explore-dataset-filters-component (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dataset-filters-component>
</div>
<div class="col-md-9">
<div>
<mat-card class="mat-card">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<div class="main-content">
<div class="container-fluid">
<div class="explore-dataset">
<h3 class="text-center">{{'DATASET-PUBLIC-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
<div class="row">
<div class="col-md-3">
<app-explore-dataset-filters-component (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dataset-filters-component>
</div>
<div class="col-md-9">
<div>
<mat-card class="mat-card">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DATASET-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DATASET-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: Dmp -->
<ng-container cdkColumnDef="project">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.PROJECT' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.project}} </mat-cell>
</ng-container>
<!-- Column Definition: Dmp -->
<ng-container cdkColumnDef="project">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.PROJECT' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.project}} </mat-cell>
</ng-container>
<!-- Column Definition: Profile -->
<ng-container cdkColumnDef="profile">
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|profile:label">{{'DATASET-LISTING.COLUMNS.PROFILE'
| translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.profile}} </mat-cell>
</ng-container>
<!-- Column Definition: Profile -->
<ng-container cdkColumnDef="profile">
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|profile:label">{{'DATASET-LISTING.COLUMNS.PROFILE'
| translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.profile}} </mat-cell>
</ng-container>
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="dataRepositories">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DATAREPOSITORIES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.dataRepositories}} </mat-cell>
</ng-container> -->
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="dataRepositories">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DATAREPOSITORIES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.dataRepositories}} </mat-cell>
</ng-container> -->
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="registries">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.REGISTRIES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.registries}} </mat-cell>
</ng-container> -->
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="registries">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.REGISTRIES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.registries}} </mat-cell>
</ng-container> -->
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="services">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.SERVICES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.services}} </mat-cell>
</ng-container> -->
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="services">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.SERVICES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.services}} </mat-cell>
</ng-container> -->
<!-- Column Definition: Status -->
<!-- <ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.status}}
</mat-cell>
</ng-container> -->
<!-- Column Definition: Status -->
<!-- <ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.status}}
</mat-cell>
</ng-container> -->
<!-- Column Definition: Description -->
<ng-container cdkColumnDef="description">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
</ng-container>
<!-- Column Definition: Description -->
<ng-container cdkColumnDef="description">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
</ng-container>
<!-- Column Definition: Created -->
<ng-container cdkColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-LISTING.COLUMNS.CREATED' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
</ng-container>
<!-- Column Definition: Created -->
<ng-container cdkColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-LISTING.COLUMNS.CREATED' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
<!-- (click)="rowClick(row.id)" -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
<!-- (click)="rowClick(row.id)" -->
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
</div>
</div>
</div>
</div>
</div>
</div>

26
dmp-frontend/src/app/ui/misc/navigation/navigation.component.html
View File

@ -18,31 +18,8 @@
</div>
<!--<button mat-button class="navbar-button" routerLink="/about">{{'NAV-BAR.ABOUT' | translate}}</button>-->
<div class="col"></div>
<div *ngIf="search && this.isAuthenticated()" class="col-auto">
<mat-form-field floatLabel="never">
<input type="text" placeholder="{{'DASHBOARD.SEARCH' | translate}}" matInput [formControl]="searchControl"
[matAutocomplete]="auto">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option" class="transformation-value-mat-option two-line-mat-option">
<span>{{option.label}}</span>
<br>
<small>{{transformType(option.type)}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div *ngIf="!search && this.isAuthenticated()" class="col-auto">
<button mat-button (click)="this.search = true">
<mat-icon>search</mat-icon>
</button>
</div>
<!-- <app-search></app-search> -->
<div *ngIf="search && this.isAuthenticated()" class="col-auto">
<button mat-button (click)="this.search = false">
<mat-icon>close</mat-icon>
</button>
</div>
<div *ngIf="isAuthenticated();else loginoption" class="col-auto">
<img mat-card-avatar *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (click)="openProfile()">
</div>
@ -51,7 +28,6 @@
<button mat-button [routerLink]=" ['/login'] ">
<span class="login-label">Log in</span>
</button>
</ng-template>
</mat-toolbar>
<div *ngIf="progressIndication" class="progress-bar">

3
dmp-frontend/src/app/ui/misc/navigation/navigation.module.ts
View File

@ -4,12 +4,13 @@ import { CommonFormsModule } from '../../../common/forms/common-forms.module';
import { CommonUiModule } from '../../../common/ui/common-ui.module';
import { NavigationComponent } from './navigation.component';
import { UserDialogComponent } from './user-dialog/user-dialog.component';
import { SearchComponent } from '../search/search.component';
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule,
RouterModule
RouterModule,
],
declarations: [
NavigationComponent,

10
dmp-frontend/src/app/ui/misc/search/search.component.css Normal file
View File

@ -0,0 +1,10 @@
.input-search {
width: 300px;
border: 1px solid rgb(218, 218, 218);
border-radius: 6px;
padding-left: 10px;
}
.input-search input {
padding-top: 15px;
}

60
dmp-frontend/src/app/ui/misc/search/search.component.html Normal file
View File

@ -0,0 +1,60 @@
<form class="navbar-form">
<div class="input-group input-search">
<input type="text" value="" class="form-control" placeholder="{{ 'DASHBOARD.SEARCH' | translate }}" [formControl]="searchControl" [matAutocomplete]="auto">
<button type="submit" class="btn btn-link"><i class="material-icons">search</i></button>
</div>
<mat-autocomplete
autoActiveFirstOption
#auto="matAutocomplete"
(optionSelected)="onOptionSelected($event)"
>
<mat-option
*ngFor="let option of (filteredOptions | async)"
[value]="option"
class="transformation-value-mat-option two-line-mat-option"
>
<span>{{ option.label }}</span>
<br />
<small>{{ transformType(option.type) }}</small>
</mat-option>
</mat-autocomplete>
</form>
<!-- <div class="col"></div>
<div *ngIf="search && this.isAuthenticated()" class="col-auto">
<mat-form-field floatLabel="never">
<input
type="text"
placeholder="{{ 'DASHBOARD.SEARCH' | translate }}"
matInput
[formControl]="searchControl"
[matAutocomplete]="auto"
/>
<mat-autocomplete
autoActiveFirstOption
#auto="matAutocomplete"
(optionSelected)="onOptionSelected($event)"
>
<mat-option
*ngFor="let option of (filteredOptions | async)"
[value]="option"
class="transformation-value-mat-option two-line-mat-option"
>
<span>{{ option.label }}</span>
<br />
<small>{{ transformType(option.type) }}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div *ngIf="!search && this.isAuthenticated()" class="col-auto">
<button mat-button (click)="this.search = true">
<mat-icon>search</mat-icon>
</button>
</div>
<div *ngIf="search && this.isAuthenticated()" class="col-auto">
<button mat-button (click)="this.search = false">
<mat-icon>close</mat-icon>
</button>
</div> -->

25
dmp-frontend/src/app/ui/misc/search/search.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SearchComponent } from './search.component';
describe('SearchComponent', () => {
let component: SearchComponent;
let fixture: ComponentFixture<SearchComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SearchComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SearchComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

53
dmp-frontend/src/app/ui/misc/search/search.component.ts Normal file
View File

@ -0,0 +1,53 @@
import { Component, OnInit } from "@angular/core";
import { AuthService } from '../../../core/services/auth/auth.service';
import { FormControl } from "@angular/forms";
import { SearchBarService } from '../../../core/services/search-bar/search-bar.service';
import { Router } from '@angular/router';
import { Observable } from "rxjs";
import { SearchBarItem } from "../../../core/model/dashboard/search-bar-item";
export enum SearchBarType {
Dataset = 0,
Dmp = 1,
Project = 2
}
@Component({
selector: "app-search",
templateUrl: "./search.component.html",
styleUrls: ["./search.component.css"]
})
export class SearchComponent implements OnInit {
public search = false;
public searchControl = new FormControl();
filteredOptions: Observable<SearchBarItem[]>;
constructor(private authentication: AuthService, private router: Router, private searchBarService: SearchBarService) {}
ngOnInit() {
this.filteredOptions = this.searchControl.valueChanges.debounceTime(500).distinctUntilChanged().flatMap(x => {
return this.searchBarService.search(x);
});
}
public isAuthenticated(): boolean {
return !!this.authentication.current();
}
onOptionSelected(event: any) {
this.search = false;
this.searchControl.patchValue(null);
const selectedSearchBarItem = event.option.value;
if (selectedSearchBarItem.type === SearchBarType.Dataset) { this.router.navigate(['datasets/edit/' + selectedSearchBarItem.id]); }
if (selectedSearchBarItem.type === SearchBarType.Project) { this.router.navigate(['projects/edit/' + selectedSearchBarItem.id]); }
if (selectedSearchBarItem.type === SearchBarType.Dmp) { this.router.navigate(['plans/edit/' + selectedSearchBarItem.id]); }
}
transformType(type) {
switch (type) {
case SearchBarType.Dataset: return 'Dataset';
case SearchBarType.Dmp: return 'DMP';
case SearchBarType.Project: return 'Project';
}
}
}

28
dmp-frontend/src/app/ui/navbar/navbar.component.css Normal file
View File

@ -0,0 +1,28 @@
.navbar.navbar-transparent {
background-color: white !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar .navbar-brand {
position: relative;
color: inherit;
height: 50px;
font-size: 1rem;
line-height: 30px;
padding: 0.625rem 0;
font-weight: 600;
margin-left: 1rem;
color: rgb(117, 117, 117);
}
.navbar-wrapper i {
padding-bottom: 5px;
cursor: pointer;
color: rgb(117, 117, 117);
}
.material-icons.md-32 {
font-size: 32px !important;
color: rgb(117, 117, 117);
}

66
dmp-frontend/src/app/ui/navbar/navbar.component.html Normal file
View File

@ -0,0 +1,66 @@
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top">
<div class="container-fluid">
<div class="navbar-wrapper">
<a href="#">
<i class="material-icons">dashboard</i>
</a>
<a class="navbar-brand" href="/home">Dashboard</a>
</div>
<button mat-raised-button class="navbar-toggler" type="button" (click)="sidebarToggle()">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<!-- <form class="navbar-form">
<div class="input-group input-search">
<input type="text" value="" class="form-control" placeholder="SEARCH...">
<button type="submit" class="btn btn-link"><i class="material-icons">search</i></button>
</div>
</form> -->
<app-search></app-search>
<ul class="navbar-nav">
<!-- Notifications -->
<!-- <li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons md-32">notifications</i>
<span class="notification">3</span>
<p>
<span class="d-lg-none d-md-block">Some Actions</span>
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mike John responded to your email</a>
<a class="dropdown-item" href="#">You have 5 new tasks</a>
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>
</div>
</li> -->
<!-- Login -->
<!-- <div *ngIf="isAuthenticated();else loginoption" class="col-auto">
<img mat-card-avatar *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (click)="openProfile()">
</div> -->
<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
<a class="nav-link" (click)="openProfile()">
<i class="material-icons md-32">person</i>
<p>
<span class="d-lg-none d-md-block">Account</span>
</p>
</a>
</li>
<ng-template #loginoption>
<button mat-button [routerLink]=" ['/login'] ">
<span class="login-label">Log in</span>
</button>
</ng-template>
</ul>
</div>
</div>
</nav>

25
dmp-frontend/src/app/ui/navbar/navbar.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NavbarComponent } from './navbar.component';
describe('NavbarComponent', () => {
let component: NavbarComponent;
let fixture: ComponentFixture<NavbarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NavbarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NavbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

155
dmp-frontend/src/app/ui/navbar/navbar.component.ts Normal file
View File

@ -0,0 +1,155 @@
import { Component, OnInit, ElementRef } from '@angular/core';
import { GENERAL_ROUTES, DMP_ROUTES, PUBLIC_ROUTES } from '../sidebar/sidebar.component';
// import { HISTORY_ROUTES } from '../sidebar/sidebar.component';
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
import { Router } from '@angular/router';
import { AuthService } from '../../core/services/auth/auth.service';
import { MatDialog } from '@angular/material';
import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
private listTitles: any[];
location: Location;
mobile_menu_visible: any = 0;
private toggleButton: any;
private sidebarVisible: boolean;
constructor(location: Location, private element: ElementRef, private router: Router, private authentication: AuthService, private dialog: MatDialog) {
this.location = location;
this.sidebarVisible = false;
}
ngOnInit(){
this.listTitles = GENERAL_ROUTES.filter(listTitle => listTitle);
this.listTitles.push(DMP_ROUTES.filter(listTitle => listTitle));
// this.listTitles.push(HISTORY_ROUTES.filter(listTitle => listTitle));
this.listTitles.push(PUBLIC_ROUTES.filter(listTitle => listTitle));
const navbar: HTMLElement = this.element.nativeElement;
this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0];
this.router.events.subscribe((event) => {
this.sidebarClose();
var $layer: any = document.getElementsByClassName('close-layer')[0];
if ($layer) {
$layer.remove();
this.mobile_menu_visible = 0;
}
});
}
public isAuthenticated(): boolean {
return !(!this.authentication.current());
}
sidebarOpen() {
const toggleButton = this.toggleButton;
const body = document.getElementsByTagName('body')[0];
setTimeout(function(){
toggleButton.classList.add('toggled');
}, 500);
body.classList.add('nav-open');
this.sidebarVisible = true;
};
sidebarClose() {
const body = document.getElementsByTagName('body')[0];
this.toggleButton.classList.remove('toggled');
this.sidebarVisible = false;
body.classList.remove('nav-open');
};
sidebarToggle() {
// const toggleButton = this.toggleButton;
// const body = document.getElementsByTagName('body')[0];
var $toggle = document.getElementsByClassName('navbar-toggler')[0];
if (this.sidebarVisible === false) {
this.sidebarOpen();
} else {
this.sidebarClose();
}
const body = document.getElementsByTagName('body')[0];
if (this.mobile_menu_visible == 1) {
// $('html').removeClass('nav-open');
body.classList.remove('nav-open');
if ($layer) {
$layer.remove();
}
setTimeout(function() {
$toggle.classList.remove('toggled');
}, 400);
this.mobile_menu_visible = 0;
} else {
setTimeout(function() {
$toggle.classList.add('toggled');
}, 430);
var $layer = document.createElement('div');
$layer.setAttribute('class', 'close-layer');
if (body.querySelectorAll('.main-panel')) {
document.getElementsByClassName('main-panel')[0].appendChild($layer);
}else if (body.classList.contains('off-canvas-sidebar')) {
document.getElementsByClassName('wrapper-full-page')[0].appendChild($layer);
}
setTimeout(function() {
$layer.classList.add('visible');
}, 100);
$layer.onclick = function() { //asign a function
body.classList.remove('nav-open');
this.mobile_menu_visible = 0;
$layer.classList.remove('visible');
setTimeout(function() {
$layer.remove();
$toggle.classList.remove('toggled');
}, 400);
}.bind(this);
body.classList.add('nav-open');
this.mobile_menu_visible = 1;
}
};
getTitle(){
var titlee = this.location.prepareExternalUrl(this.location.path());
if(titlee.charAt(0) === '#'){
titlee = titlee.slice( 2 );
}
titlee = titlee.split('/').pop();
for(var item = 0; item < this.listTitles.length; item++){
if(this.listTitles[item].path === titlee){
return this.listTitles[item].title;
}
}
return 'Dashboard';
}
public principalHasAvatar(): boolean {
return this.authentication.current().avatarUrl != null;
}
public getPrincipalAvatar(): string {
return this.authentication.current().avatarUrl;
}
openProfile() {
const dialogRef = this.dialog.open(UserDialogComponent, {
hasBackdrop: true,
autoFocus: false,
closeOnNavigation: true,
disableClose: false,
position: { top: '64px', right: '1em' }
});
}
}

21
dmp-frontend/src/app/ui/navbar/navbar.module.ts Normal file
View File

@ -0,0 +1,21 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonFormsModule } from '../../common/forms/common-forms.module';
import { CommonUiModule } from '../../common/ui/common-ui.module';
import { NavbarComponent } from './navbar.component';
import { SearchComponent } from '../misc/search/search.component';
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule,
RouterModule
],
declarations: [
NavbarComponent,
SearchComponent
],
entryComponents: [],
exports: [NavbarComponent]
})
export class NavbarModule { }

192
dmp-frontend/src/app/ui/project/editor/project-editor.component.html
View File

@ -1,108 +1,112 @@
<div class="project-editor">
<mat-card-title *ngIf="isNew">{{'PROJECT-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
<mat-card-title *ngIf="!isNew">{{formGroup?.get('label')?.value}}</mat-card-title>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<mat-card>
<mat-card-header>
<div class="col-12 row">
<table class="logo-table col-auto">
<tr>
<td>
<img mat-card-avatar (click)='imgEnable() && imgFileInput.click()' *ngIf="!formGroup.get('files') || !formGroup.get('files').value" [src]="host+'files/any?type=jpg'">
<img mat-card-avatar (click)='editMode && imgFileInput.click()' *ngIf="formGroup.get('files') && formGroup.get('files').value" [src]="host+'files/'+formGroup.get('files').value[0].id+'?location='+formGroup.get('files').value[0].location+'&type='+formGroup.get('files').value[0].type">
</td>
<td>
<input class="hidden" type="file" #imgFileInput (change)="previewImage($event)" accept="image/*"/>
<div>
<mat-error *ngIf="sizeError">File is too big!</mat-error>
<div class="main-content">
<div class="container-fluid">
<div class="project-editor">
<mat-card-title *ngIf="isNew">{{'PROJECT-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
<mat-card-title *ngIf="!isNew">{{formGroup?.get('label')?.value}}</mat-card-title>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<mat-card>
<mat-card-header>
<div class="col-12 row">
<table class="logo-table col-auto">
<tr>
<td>
<img mat-card-avatar (click)='imgEnable() && imgFileInput.click()' *ngIf="!formGroup.get('files') || !formGroup.get('files').value" [src]="host+'files/any?type=jpg'">
<img mat-card-avatar (click)='editMode && imgFileInput.click()' *ngIf="formGroup.get('files') && formGroup.get('files').value" [src]="host+'files/'+formGroup.get('files').value[0].id+'?location='+formGroup.get('files').value[0].location+'&type='+formGroup.get('files').value[0].type">
</td>
<td>
<input class="hidden" type="file" #imgFileInput (change)="previewImage($event)" accept="image/*"/>
<div>
<mat-error *ngIf="sizeError">File is too big!</mat-error>
</div>
</td>
</tr>
</table>
<div class="col"></div>
<div *ngIf="!isNew" class="project-editor-header-actions col-auto">
<div class="row actions-row">
<div class="col-auto" *ngIf="!editMode && !isExternalProject()">
<button mat-icon-button (click)="enableForm()">
<mat-icon class="mat-24">edit</mat-icon>
</button>
</div>
<div class="col-auto" *ngIf="editMode && !isExternalProject()">
<button mat-icon-button (click)="disableForm()">
<mat-icon class="mat-24">lock</mat-icon>
</button>
</div>
<div class="col-auto">
<button mat-button (click)="goToProjectDmps()">
<mat-icon class="mat-24">arrow_right_alt</mat-icon>
<span>{{'PROJECT-EDITOR.ACTIONS.GO-TO-DMPS' | translate}}</span>
</button>
</div>
</td>
</tr>
</table>
<div class="col"></div>
<div *ngIf="!isNew" class="project-editor-header-actions col-auto">
<div class="row actions-row">
<div class="col-auto" *ngIf="!editMode && !isExternalProject()">
<button mat-icon-button (click)="enableForm()">
<mat-icon class="mat-24">edit</mat-icon>
</button>
</div>
<div class="col-auto" *ngIf="editMode && !isExternalProject()">
<button mat-icon-button (click)="disableForm()">
<mat-icon class="mat-24">lock</mat-icon>
</button>
</div>
<div class="col-auto">
<button mat-button (click)="goToProjectDmps()">
<mat-icon class="mat-24">arrow_right_alt</mat-icon>
<span>{{'PROJECT-EDITOR.ACTIONS.GO-TO-DMPS' | translate}}</span>
</button>
</div>
</div>
</div>
</div>
</mat-card-header>
<mat-card-content>
<div class="row">
<mat-form-field class="col-md-12">
<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label" formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</mat-card-header>
<mat-card-content>
<div class="row">
<mat-form-field class="col-md-12">
<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label" formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6">
<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.ABBREVIATION' | translate}}" type="text" name="abbreviation" formControlName="abbreviation">
<mat-error *ngIf="formGroup.get('abbreviation').hasError('backendError')">{{formGroup.get('abbreviation').getError('backendError').message}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6">
<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.ABBREVIATION' | translate}}" type="text" name="abbreviation" formControlName="abbreviation">
<mat-error *ngIf="formGroup.get('abbreviation').hasError('backendError')">{{formGroup.get('abbreviation').getError('backendError').message}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6">
<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri">
<mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{formGroup.get('uri').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6">
<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri">
<mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{formGroup.get('uri').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6">
<input matInput (focus)="startDate.open()" (click)="startDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.START' | translate}}" class="table-input" [matDatepicker]="startDate" formControlName="startDate">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate></mat-datepicker>
<mat-error *ngIf="formGroup.get('startDate').hasError('backendError')">{{formGroup.get('startDate').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('startDate').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6">
<input matInput (focus)="startDate.open()" (click)="startDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.START' | translate}}" class="table-input" [matDatepicker]="startDate" formControlName="startDate">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate></mat-datepicker>
<mat-error *ngIf="formGroup.get('startDate').hasError('backendError')">{{formGroup.get('startDate').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('startDate').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6">
<input matInput (focus)="endDate.open()" (click)="endDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.END' | translate}}" class="table-input" [matDatepicker]="endDate" formControlName="endDate">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate></mat-datepicker>
<mat-error *ngIf="formGroup.get('endDate').hasError('backendError')">{{formGroup.get('endDate').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('endDate').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-error *ngIf="formGroup.hasError('startAfterEndError')"class="col-md-12">{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
<mat-form-field class="col-md-6">
<input matInput (focus)="endDate.open()" (click)="endDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.END' | translate}}" class="table-input" [matDatepicker]="endDate" formControlName="endDate">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate></mat-datepicker>
<mat-error *ngIf="formGroup.get('endDate').hasError('backendError')">{{formGroup.get('endDate').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('endDate').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-error *ngIf="formGroup.hasError('startAfterEndError')"class="col-md-12">{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
<mat-form-field class="col-md-12">
<textarea matInput class="description-area" placeholder="{{'PROJECT-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description" required></textarea>
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-12">
<textarea matInput class="description-area" placeholder="{{'PROJECT-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description" required></textarea>
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<div class="col-md-12">
<div class="row">
<div class="col-auto right-button">
<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'PROJECT-EDITOR.ACTIONS.CANCEL' |
translate}}</button>
</div>
<div class="col"></div>
<div class="col-auto right-button" *ngIf="!isNew && editMode">
<button mat-raised-button color="primary" type="button" (click)="delete()">{{'PROJECT-EDITOR.ACTIONS.DELETE'
| translate}}</button>
</div>
<div class="col-auto right-button" *ngIf="isNew || editMode">
<button mat-raised-button color="primary" type="submit">{{'PROJECT-EDITOR.ACTIONS.SAVE'
| translate}}</button>
<div class="col-md-12">
<div class="row">
<div class="col-auto right-button">
<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'PROJECT-EDITOR.ACTIONS.CANCEL' |
translate}}</button>
</div>
<div class="col"></div>
<div class="col-auto right-button" *ngIf="!isNew && editMode">
<button mat-raised-button color="primary" type="button" (click)="delete()">{{'PROJECT-EDITOR.ACTIONS.DELETE'
| translate}}</button>
</div>
<div class="col-auto right-button" *ngIf="isNew || editMode">
<button mat-raised-button color="primary" type="submit">{{'PROJECT-EDITOR.ACTIONS.SAVE'
| translate}}</button>
</div>
</div>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
</mat-card-content>
</mat-card>
</form>
</div>
</div>
</div>

116
dmp-frontend/src/app/ui/project/listing/project-listing.component.html
View File

@ -1,68 +1,70 @@
<div class="project-listing">
<h3>{{languageResolverService.getBy('listingTitle') | translate}}</h3>
<app-project-criteria-component></app-project-criteria-component>
<mat-card class="mat-card">
<mat-card-content>
<div class="row">
<mat-table class="col-md-12" [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<div class="main-content">
<div class="container-fluid">
<h3>{{languageResolverService.getBy('listingTitle') | translate}}</h3>
<app-project-criteria-component></app-project-criteria-component>
<mat-card class="mat-card">
<mat-card-content>
<div class="row">
<mat-table class="col-md-12" [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<ng-container cdkColumnDef="avatar">
<mat-header-cell *matHeaderCellDef mat-sort-header="avatar">{{'PROJECT-LISTING.COLUMNS.AVATAR' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">
<img mat-card-avatar [src]="host+'files/'+row.files[0].id+'?location='+row.files[0].location+'&type='+row.files[0].type">
</mat-cell>
</ng-container>
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'PROJECT-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<ng-container cdkColumnDef="avatar">
<mat-header-cell *matHeaderCellDef mat-sort-header="avatar">{{'PROJECT-LISTING.COLUMNS.AVATAR' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">
<img mat-card-avatar [src]="host+'files/'+row.files[0].id+'?location='+row.files[0].location+'&type='+row.files[0].type">
</mat-cell>
</ng-container>
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'PROJECT-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: Αbbreviation -->
<ng-container cdkColumnDef="abbreviation">
<mat-header-cell *matHeaderCellDef mat-sort-header="abbreviation">{{'PROJECT-LISTING.COLUMNS.ABBREVIATION' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.abbreviation}} </mat-cell>
</ng-container>
<!-- Column Definition: Αbbreviation -->
<ng-container cdkColumnDef="abbreviation">
<mat-header-cell *matHeaderCellDef mat-sort-header="abbreviation">{{'PROJECT-LISTING.COLUMNS.ABBREVIATION' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.abbreviation}} </mat-cell>
</ng-container>
<!-- Column Definition: Start -->
<ng-container cdkColumnDef="start">
<mat-header-cell *matHeaderCellDef mat-sort-header="startdate">{{'PROJECT-LISTING.COLUMNS.START' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.startDate | date:'shortDate'}} </mat-cell>
</ng-container>
<!-- Column Definition: Start -->
<ng-container cdkColumnDef="start">
<mat-header-cell *matHeaderCellDef mat-sort-header="startdate">{{'PROJECT-LISTING.COLUMNS.START' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.startDate | date:'shortDate'}} </mat-cell>
</ng-container>
<!-- Column Definition: End -->
<ng-container cdkColumnDef="end">
<mat-header-cell *matHeaderCellDef mat-sort-header="enddate">{{'PROJECT-LISTING.COLUMNS.END' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.endDate | date:'shortDate'}} </mat-cell>
</ng-container>
<!-- Column Definition: End -->
<ng-container cdkColumnDef="end">
<mat-header-cell *matHeaderCellDef mat-sort-header="enddate">{{'PROJECT-LISTING.COLUMNS.END' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.endDate | date:'shortDate'}} </mat-cell>
</ng-container>
<!-- Column Definition: End -->
<ng-container cdkColumnDef="dmps">
<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.DMPS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
<app-url-listing [items]="row.dmps" [urlLimit]="5" [parameters]="{ projectLabel: row.label }"></app-url-listing>
</mat-cell>
</ng-container>
<!-- Column Definition: End -->
<ng-container cdkColumnDef="dmps">
<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.DMPS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
<app-url-listing [items]="row.dmps" [urlLimit]="5" [parameters]="{ projectLabel: row.label }"></app-url-listing>
</mat-cell>
</ng-container>
<!-- Column Definition: Submission Time -->
<!-- <ng-container cdkColumnDef="actions">
<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"></mat-cell>
</ng-container> -->
<!-- Column Definition: Submission Time -->
<!-- <ng-container cdkColumnDef="actions">
<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"></mat-cell>
</ng-container> -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</div>
</mat-card-content>
</mat-card>
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</div>
</mat-card-content>
</mat-card>
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]=" ['./new'] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
<button mat-fab class="mat-fab-bottom" style="float: right;" color="primary" [routerLink]=" ['./new'] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
</div>
</div>

44
dmp-frontend/src/app/ui/project/listing/project-listing.component.scss
View File

@ -1,26 +1,30 @@
.project-listing {
.mat-card {
margin: 1em 0;
}
.mat-card {
margin: 1em 0;
}
.mat-row {
cursor: pointer;
}
.project-listing {
.mat-card {
margin: 1em 0;
}
mat-row:hover {
background-color: lightgray;
}
.mat-row {
cursor: pointer;
}
mat-row:nth-child(odd) {
background-color: #eef0fb;
}
mat-row:hover {
background-color: lightgray;
}
.mat-fab-bottom-right {
top: auto !important;
right: 20px !important;
bottom: 10px !important;
left: auto !important;
mat-row:nth-child(odd) {
background-color: #eef0fb;
}
.mat-fab-bottom {
top: auto !important;
right: 20px !important;
bottom: 10px !important;
left: auto !important;
position: fixed !important;
z-index: 5;
}
}
}
}

3
dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard-model.ts
View File

@ -10,7 +10,8 @@ import { QuickWizardDatasetDescriptionModel } from "./quick-wizard-dataset-descr
export class DatasetEditorWizardModel extends BaseFormModel {
public datasetsList: Array<QuickWizardDatasetDescriptionModel> = [];
public validationErrorModel: ValidationErrorModel = new ValidationErrorModel();
public validationErrorModel: ValidationErrorModel = new ValidationErrorModel();
public viewOnly: boolean;
fromModel(item: DatasetWizardEditorModel[]): DatasetEditorWizardModel {

4
dmp-frontend/src/app/ui/quick-wizard/dataset-editor/dataset-editor-wizard.component.html
View File

@ -22,12 +22,12 @@
<h4>{{dataset.get('datasetLabel').value}}</h4>
</div>
<div class="col-auto">
<button mat-icon-button type="button" (click)="editDataset(i);" [disabled]="viewOnly">
<button mat-icon-button type="button" (click)="editDataset(i);">
<mat-icon>edit</mat-icon>
</button>
</div>
<div class="col-auto">
<button mat-icon-button type="button" (click)="deleteDataset(i);" [disabled]="viewOnly">
<button mat-icon-button type="button" (click)="deleteDataset(i);">
<mat-icon>delete</mat-icon>
</button>
</div>

144
dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.html
View File

@ -1,72 +1,76 @@
<div class="quick-wizard-editor">
<form [formGroup]="formGroup">
<h3 *ngIf="isNew">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.TITLE' | translate }}</h3>
<div class="row">
<mat-horizontal-stepper linear class="col-12" #stepper>
<mat-step [stepControl]="formGroup.get('project')">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.TITLE' | translate}}
</ng-template>
<div *ngIf="formGroup.get('project')">
<app-quick-wizard-project-editor-component class="col-12"
[formGroup]="formGroup.get('project')">
</app-quick-wizard-project-editor-component>
</div>
<div class="navigation-buttons-container">
<button style="float:right;" matStepperNext mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.NEXT' | translate}}</button>
</div>
</mat-step>
<mat-step [stepControl]="formGroup.get('dmp')">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.SECOND-STEP.TITLE' | translate}}
</ng-template>
<ng-container *ngIf="formGroup.get('project').valid">
<div>
<app-quick-wizard-dmp-editor-component class="col-12" [formGroup]="formGroup.get('dmp')"
[datasetFormGroup]="formGroup.get('datasets')"
[dmpLabel]=" getProjectLabel()">
</app-quick-wizard-dmp-editor-component>
</div>
<div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button>
<button style="float:right;" matStepperNext mat-raised-button color="primary">
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.NEXT' | translate}}</button>
</div>
</ng-container>
</mat-step>
<mat-step [stepControl]="formGroup.get('datasets')">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.TITLE' | translate}}
</ng-template>
<!-- <ng-container *ngIf="isAvtive('step3')"> -->
<ng-container *ngIf="formGroup.get('dmp').valid && isActive('step3')">
<div *ngIf="formGroup.get('datasets')" class="row">
<!-- <div *ngIf="this.isActiveStep(3)" class="row"> -->
<app-dataset-editor-wizard-component class="col-12" [formGroup]="formGroup"
[datasetProfile]="formGroup.get('dmp').get('datasetProfile')"
[datasetLabel]="formGroup.get('dmp').get('label').value">
</app-dataset-editor-wizard-component>
<!-- <app-dataset-description-form class="col-12" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition"
[form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="datasetWizardModel.datasetProfileDefinition.rules"
[datasetProfileId]="formGroup.get('profile').value"></app-dataset-description-form>
<div class="col-12 description-action-row">
</app-dataset-description-form> -->
<div class="main-content">
<div class="container-fluid">
<div class="quick-wizard-editor">
<form [formGroup]="formGroup">
<h3 *ngIf="isNew">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.TITLE' | translate }}</h3>
<div class="row">
<mat-horizontal-stepper linear class="col-12" #stepper>
<mat-step [stepControl]="formGroup.get('project')">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.TITLE' | translate}}
</ng-template>
<div *ngIf="formGroup.get('project')">
<app-quick-wizard-project-editor-component class="col-12"
[formGroup]="formGroup.get('project')">
</app-quick-wizard-project-editor-component>
</div>
<div class="navigation-buttons-container">
<button style="float:right;" matStepperNext mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.NEXT' | translate}}</button>
</div>
</mat-step>
<mat-step [stepControl]="formGroup.get('dmp')">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.SECOND-STEP.TITLE' | translate}}
</ng-template>
<ng-container *ngIf="formGroup.get('project').valid">
<div>
<app-quick-wizard-dmp-editor-component class="col-12" [formGroup]="formGroup.get('dmp')"
[datasetFormGroup]="formGroup.get('datasets')"
[dmpLabel]=" getProjectLabel()">
</app-quick-wizard-dmp-editor-component>
</div>
<div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button>
<button style="float:right;" matStepperNext mat-raised-button color="primary">
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.NEXT' | translate}}</button>
</div>
</ng-container>
</mat-step>
<mat-step [stepControl]="formGroup.get('datasets')">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.TITLE' | translate}}
</ng-template>
<!-- <ng-container *ngIf="isAvtive('step3')"> -->
<ng-container *ngIf="formGroup.get('dmp').valid && isActive('step3')">
<div *ngIf="formGroup.get('datasets')" class="row">
<!-- <div *ngIf="this.isActiveStep(3)" class="row"> -->
<app-dataset-editor-wizard-component class="col-12" [formGroup]="formGroup"
[datasetProfile]="formGroup.get('dmp').get('datasetProfile')"
[datasetLabel]="formGroup.get('dmp').get('label').value">
</app-dataset-editor-wizard-component>
<!-- <app-dataset-description-form class="col-12" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition"
[form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="datasetWizardModel.datasetProfileDefinition.rules"
[datasetProfileId]="formGroup.get('profile').value"></app-dataset-description-form>
<div class="col-12 description-action-row">
</app-dataset-description-form> -->
<!-- </div> -->
</div>
<div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button>
<button class="saveAndFinalizeButton" matStepperNext mat-raised-button (click)='saveFinalize()' [disabled]="!isFormValid() || !hasDatasets()"
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE-AND-FINALIZE' | translate}}</button>
<button class="saveButton" matStepperNext mat-raised-button (click)='formSubmit()' [disabled]="!hasDatasets()"
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE' | translate}}</button>
</div>
</ng-container>
</mat-step>
</mat-horizontal-stepper>
</div>
</form>
<!-- </div> -->
</div>
<div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button>
<button class="saveAndFinalizeButton" matStepperNext mat-raised-button (click)='saveFinalize()' [disabled]="!isFormValid() || !hasDatasets()"
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE-AND-FINALIZE' | translate}}</button>
<button class="saveButton" matStepperNext mat-raised-button (click)='formSubmit()' [disabled]="!hasDatasets()"
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE' | translate}}</button>
</div>
</ng-container>
</mat-step>
</mat-horizontal-stepper>
</div>
</form>
</div>
</div>
</div>

23
dmp-frontend/src/app/ui/sidebar/sidebar.component.css Normal file
View File

@ -0,0 +1,23 @@
.logo-img {
width: 60px;
display: block;
max-height: none;
margin-left: 100px;
}
.logo-img img {
width: 60px;
top: 0px;
position: inherit;
}
.sidebarSubtitle p {
margin-left: 20px;
color: rgb(166, 166, 166);
}
.nav hr {
width: 230px;
border-top: 2px solid #fff;
border-bottom: 2px solid #e0e2e3;
}

73
dmp-frontend/src/app/ui/sidebar/sidebar.component.html Normal file
View File

@ -0,0 +1,73 @@
<div class="logo">
<a href="/home">
<div class="logo-img">
<img src="/assets/images/OpenDMP.png"/>
</div>
</a>
</div>
<div class="sidebar-wrapper">
<!-- MOBILE MENU -->
<!-- <div *ngIf="isMobileMenu()">
<form class="navbar-form">
<span class="bmd-form-group">
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<button mat-raised-button type="submit" class="btn btn-white btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</span>
</form>
<ul class="nav navbar-nav nav-mobile-menu">
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="material-icons">dashboard</i>
<p>
<span class="d-lg-none d-md-block">Stats</span>
</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#pablo" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">notifications</i>
<span class="notification">5</span>
<p>
<span class="d-lg-none d-md-block">Some Actions</span>
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mike John responded to your email</a>
<a class="dropdown-item" href="#">You have 5 new tasks</a>
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="material-icons">person</i>
<p>
<span class="d-lg-none d-md-block">Account</span>
</p>
</a>
</li>
</ul>
</div> -->
<!-- END OF MOBILE MENU -->
<ul class="nav" *ngFor="let groupMenuItem of groupMenuItems; last as isLast; first as isFirst">
<div class="sidebarSubtitle"><p>{{ groupMenuItem.title }}</p></div>
<li routerLinkActive="active" *ngFor="let groupMenuRoute of groupMenuItem.routes" class="{{groupMenuRoute.class}} nav-item">
<a class="nav-link" [routerLink]="[groupMenuRoute.path]">
<i *ngIf="isFirst" class="material-icons">{{ groupMenuRoute.icon }}</i>
<i *ngIf="!isFirst" class="material-icons-outlined">{{ groupMenuRoute.icon }}</i>
<p>{{ groupMenuRoute.title }}</p>
</a>
</li>
<hr *ngIf="!isLast">
</ul>
</div>

25
dmp-frontend/src/app/ui/sidebar/sidebar.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SidebarComponent } from './sidebar.component';
describe('SidebarComponent', () => {
let component: SidebarComponent;
let fixture: ComponentFixture<SidebarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SidebarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SidebarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

89
dmp-frontend/src/app/ui/sidebar/sidebar.component.ts Normal file
View File

@ -0,0 +1,89 @@
import { Component, Input, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { MatGridTileHeaderCssMatStyler } from '@angular/material';
declare interface RouteInfo {
path: string;
title: string;
icon: string;
}
declare interface GroupMenuItem {
title: string;
routes: RouteInfo[];
}
export const GENERAL_ROUTES: RouteInfo[] = [
{ path: '/home', title: '', icon: 'dashboard'}
];
export const DMP_ROUTES: RouteInfo[] = [
{ path: '/plans', title: '', icon: 'view_agenda'},
{ path: '/datasets', title: '', icon: 'library_books'},
{ path: '/projects', title: '', icon: 'work_outline'}
];
// export const HISTORY_ROUTES: RouteInfo[] = [
// { path: '/typography', title: 'LAST VISITED', icon: 'visibility'},
// { path: '/icons', title: 'LAST EDITED', icon: 'edit'}
// ];
export const PUBLIC_ROUTES: RouteInfo[] = [
// { path: '/maps', title: 'PUBLIC DMPs', icon: 'public'},
{ path: '/explore', title: 'PUBLIC DATASET DESCRIPTIONS', icon: 'public'}
];
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
generalItems: GroupMenuItem;
dmpItems: GroupMenuItem;
// historyItems: GroupMenuItem;
publicItems: GroupMenuItem;
groupMenuItems: GroupMenuItem[] = [];
constructor(public translate: TranslateService) { }
ngOnInit() {
this.translate.get('SIDE-BAR.DASHBOARD').subscribe((res: string) => {GENERAL_ROUTES[0].title = res});
this.translate.get('SIDE-BAR.MY-DMPS').subscribe((res: string) => {DMP_ROUTES[0].title = res});
this.translate.get('SIDE-BAR.MY-DATASET-DESC').subscribe((res: string) => {DMP_ROUTES[1].title = res});
this.translate.get('SIDE-BAR.MY-PROJECTS').subscribe((res: string) => {DMP_ROUTES[2].title = res});
// this.translate.get('SIDE-BAR.HISTORY-VISITED').subscribe((res: string) => {HISTORY_ROUTES[0].title = res});
// this.translate.get('SIDE-BAR.HISTORY-EDITED').subscribe((res: string) => {HISTORY_ROUTES[1].title = res});
this.translate.get('SIDE-BAR.PUBLIC-DESC').subscribe((res: string) => {PUBLIC_ROUTES[0].title = res});
this.generalItems = {
title: '',
routes: GENERAL_ROUTES.filter(menuItem => menuItem)
}
this.translate.get('SIDE-BAR.GENERAL').subscribe((res: string) => {this.generalItems.title = res});
this.groupMenuItems.push(this.generalItems);
this.dmpItems = {
title: '',
routes: DMP_ROUTES.filter(menuItem => menuItem)
}
this.translate.get('SIDE-BAR.DMP').subscribe((res: string) => {this.dmpItems.title = res});
this.groupMenuItems.push(this.dmpItems);
// this.historyItems = {
// title: '',
// routes: HISTORY_ROUTES.filter(menuItem => menuItem)
// }
// this.translate.get('SIDE-BAR.HISTORY').subscribe((res: string) => {this.historyItems.title = res});
// this.groupMenuItems.push(this.historyItems);
this.publicItems = {
title: '',
routes: PUBLIC_ROUTES.filter(menuItem => menuItem)
}
this.translate.get('SIDE-BAR.PUBLIC').subscribe((res: string) => {this.publicItems.title = res});
this.groupMenuItems.push(this.publicItems);
}
// isMobileMenu() {
// if ($(window).width() > 991) {
// return false;
// }
// return true;
// };
}

19
dmp-frontend/src/app/ui/sidebar/sidebar.module.ts Normal file
View File

@ -0,0 +1,19 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonFormsModule } from '../../common/forms/common-forms.module';
import { CommonUiModule } from '../../common/ui/common-ui.module';
import { SidebarComponent } from './sidebar.component';
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule,
RouterModule
],
declarations: [
SidebarComponent
],
entryComponents: [],
exports: [SidebarComponent]
})
export class SidebarModule { }

347
dmp-frontend/src/assets/css/demo.css Normal file
View File

@ -0,0 +1,347 @@
*:focus {
outline: none !important;
}
a {
color: rgb(106, 164, 217);
}
a:hover {
color: rgb(46, 117, 182);
}
h4 {
font-size: 1rem;
line-height: 1em;
font-weight: 500;
}
.max-width-136 {
max-width: 136px;
}
.max-width-80 {
max-width: 80px;
}
.more-icon {
color: rgb(209, 209, 209);
font-size: 28px;
cursor: pointer;
/* float: right; */
}
.sidebar .sidebar-background {
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
display: block;
top: 0;
left: 0;
background-size: cover;
background-position: center center;
background-color: rgb(157, 157, 158);
}
.sidebar .nav p {
margin: 0;
line-height: 20px;
font-size: 12px;
font-weight: 500;
position: relative;
display: block;
height: auto;
white-space: nowrap;
color: rgb(89, 89, 89);
}
.sidebar .nav i {
font-size: 24px;
float: left;
margin-right: 7px;
line-height: 20px;
width: 30px;
text-align: center;
color: #a1a1a1;
}
.sidebar[data-color="danger"] li.active > a {
background-color: #ffffff;
-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
0 7px 10px -5px rgba(255, 255, 255, 0.4);
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
0 7px 10px -5px rgba(255, 255, 255, 0.4);
}
.sidebar .nav li.active > a i {
color: rgb(89, 89, 89);
}
.sidebar .nav li a,
.sidebar .nav li .dropdown-menu a {
margin: 5px 15px 5px;
border-radius: 3px;
color: #3c4858;
padding-left: 10px;
padding-right: 10px;
text-transform: capitalize;
font-size: 13px;
padding: 10px 5px;
}
.sidebar .logo:after {
content: none;
position: absolute;
bottom: 0;
right: 15px;
height: 1px;
width: calc(100% - 30px);
background-color: rgba(180, 180, 180, 0.3);
}
.form-control,
.is-focused .form-control {
background-image: none;
}
.navbar form .btn {
margin-bottom: 0;
padding-left: 5px;
}
.navbar .notification {
position: absolute;
top: 5px;
border: 1px solid #fff;
right: 5px;
font-size: 9px;
background: rgb(192, 0, 0);
color: #ffffff;
min-width: 20px;
padding: 0px 5px;
height: 20px;
border-radius: 10px;
text-align: center;
line-height: 19px;
vertical-align: middle;
display: block;
}
.card-icon {
cursor: pointer;
}
.card .card-header-default .card-icon,
.card .card-header-default .card-text,
.card .card-header-default:not(.card-header-icon):not(.card-header-text),
.card.bg-warning,
.card.card-rotate.bg-warning .front,
.card.card-rotate.bg-warning .back {
background: linear-gradient(60deg, #fff, #fff);
}
.card .card-header-default .card-icon,
.card .card-header-default:not(.card-header-icon):not(.card-header-text),
.card .card-header-default .card-text {
-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
0 7px 10px -5px rgba(0, 0, 0, 0.14);
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
0 7px 10px -5px rgba(0, 0, 0, 0.14);
}
.card .card-header-plain .card-icon,
.card .card-header-plain .card-text,
.card .card-header-plain:not(.card-header-icon):not(.card-header-text),
.card.bg-warning,
.card.card-rotate.bg-warning .front,
.card.card-rotate.bg-warning .back {
background: linear-gradient(60deg, #fff, #fff);
}
.card .card-header-plain .card-icon,
.card .card-header-plain:not(.card-header-icon):not(.card-header-text),
.card .card-header-plain .card-text {
-webkit-box-shadow: none;
box-shadow: none;
}
.card .card-header-blue .card-icon,
.card .card-header-blue .card-text,
.card .card-header-blue:not(.card-header-icon):not(.card-header-text),
.card.bg-warning,
.card.card-rotate.bg-warning .front,
.card.card-rotate.bg-warning .back {
background: linear-gradient(60deg, rgb(46, 117, 182), rgb(46, 117, 182));
}
.card .card-header-blue .card-icon,
.card .card-header-blue:not(.card-header-icon):not(.card-header-text),
.card .card-header-blue .card-text {
-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
0 7px 10px -5px rgba(0, 0, 0, 0.14);
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
0 7px 10px -5px rgba(0, 0, 0, 0.14);
}
.card-stats .card-header.card-header-icon i {
font-size: 36px;
line-height: 56px;
width: 56px;
height: 56px;
text-align: center;
color: rgb(138, 170, 195);
}
.card [class*="card-header-"] .card-icon,
.card [class*="card-header-"] .card-text {
border-radius: 5px;
/* background-color: #999999; */
padding: 15px;
margin-top: -20px;
margin-right: 15px;
float: left;
}
.card [class*="card-header-"] .card-title + .card-category {
color: #fff;
font-size: 12px;
}
.card .card-header .card-title {
margin-bottom: 0px;
margin-top: 5px;
}
.card-footer .stats {
font-size: 12px;
line-height: 22px;
font-weight: 500;
margin-left: 10px;
}
.card-stats .card-header .card-category:not([class*="text-"]) {
display: block;
color: #999999;
font-size: 13px;
/* font-size: 9px; */
/* font-weight: 500; */
}
.card
[class*="card-header-"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {
border-radius: 5px;
margin-top: -20px;
padding: 15px;
/* border: 1px solid rgb(231, 230, 230); */
}
.card
[class*="card-header-plain"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {
border-radius: 5px;
margin-top: -20px;
padding: 15px;
border: 1px solid rgb(231, 230, 230);
}
.card-desc {
display: inline-block;
}
.view-all {
display: inline-block;
float: right;
margin-top: 10px;
margin-right: 10px;
font-weight: 400;
}
.card-header-plain h4 {
color: black !important;
}
.card-header-plain p {
color: #999999 !important;
}
.text-default {
color: rgb(120, 173, 220) !important;
}
.table thead th {
font-size: 0.95rem;
font-weight: 400;
border-top-width: 0;
border-bottom-width: 1px;
}
.card .card-body {
padding: 0.8rem 20px;
position: relative;
}
table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 8px 8px;
vertical-align: middle;
}
.nav-link {
display: block;
padding: 0;
font-weight: 400;
}
.nav-item {
cursor: pointer;
}
.pills-rounded .nav-item .nav-link {
border-radius: 10em;
}
.pills-outline-green .nav-item .nav-link {
border: 1px solid rgb(197, 224, 180);
color: rgb(131, 184, 95);
}
.pills-outline-green .nav-item .nav-link.active {
border: 1px solid rgb(197, 224, 180);
color: #4caf50;
background-color: rgb(240, 247, 236);
}
.pills-outline-green .nav-item .nav-link.active:hover {
border: 1px solid rgb(197, 224, 180);
color: #4caf50;
}
.pills-outline-blue .nav-item .nav-link {
border: 1px solid rgb(218, 227, 243);
color: rgb(43, 104, 209);
}
.pills-outline-blue .nav-item .nav-link.active {
border: 1px solid rgb(218, 227, 243);
color: rgb(43, 104, 209);
background-color: rgb(236, 241, 249);
}
.pills-outline-blue .nav-item .nav-link.active:hover {
border: 1px solid rgb(218, 227, 243);
color: rgb(43, 104, 209);
}
.pills-outline-blue .nav-item .nav-link {
border: 1px solid rgb(231, 230, 230);
color: rgb(145, 145, 145);
}
.pills-outline-default .nav-item .nav-link.active {
border: 1px solid rgb(231, 230, 230);
color: rgb(145, 145, 145);
background-color: rgb(242, 242, 242);
}
.pills-outline-default .nav-item .nav-link.active:hover {
border: 1px solid rgb(231, 230, 230);
color: rgb(145, 145, 145);
}

18
dmp-frontend/src/assets/i18n/en.json
View File

@ -51,6 +51,20 @@
"DMP-PROFILES": "DMP Profiles",
"ABOUT": "About"
},
"SIDE-BAR": {
"GENERAL": "GENERAL",
"DASHBOARD": "DASHBOARD",
"DMP": "DATA MANAGEMENT PLANS",
"MY-DMPS": "MY DMPs",
"MY-DATASET-DESC": "MY DATASET DESCRIPTIONS",
"MY-PROJECTS": "MY PROJECTS",
"HISTORY": "HISTORY",
"HISTORY-VISITED": "LAST VISITED",
"HISTORY-EDITED": "LAST EDITED",
"PUBLIC": "PUBLIC",
"PUBLIC-DMPS": "PUBLIC DMPs",
"PUBLIC-DESC": "PUBLIC DATASET DESCRIPTIONS"
},
"DATASET-PROFILE-EDITOR": {
"TITLE": {
"NEW": "New API Client"
@ -630,9 +644,9 @@
"PROJECTS": "Projects",
"MY-DMPS": "My DMPs",
"DMPS": "DMPs",
"MY-DATASETS": "My Datasets",
"MY-DATASETS": "My Dataset Descriptions",
"DATASETS": "Datasets",
"SEARCH": "Search"
"SEARCH": "SEARCH..."
},
"USER-DIALOG": {
"USER-PROFILE": "My Profile",

0
dmp-frontend/src/blue-theme.scss → dmp-frontend/src/assets/scss/blue-theme.scss
View File

161
dmp-frontend/src/assets/scss/core/_alerts.scss Normal file
View File

@ -0,0 +1,161 @@
.alert {
border: 0;
border-radius: 3px;
position: relative;
padding: 20px 15px;
line-height: 20px;
b{
font-weight: $font-weight-bold;
text-transform: uppercase;
font-size: $font-size-small;
}
// SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
@include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light);
&-info, &-danger, &-warning, &-success, &-rose {
color: $mdb-text-color-light;
}
&-default {
a, .alert-link {
color: $mdb-text-color-primary;
}
}
span{
display: block;
max-width: 89%;
}
&.alert-danger{
@include shadow-alert-color($brand-danger);
@include alert-icon-color($brand-danger);
}
&.alert-warning{
@include shadow-alert-color($brand-warning);
@include alert-icon-color($brand-warning);
}
&.alert-success{
@include shadow-alert-color($brand-success);
@include alert-icon-color($brand-success);
}
&.alert-info{
@include shadow-alert-color($brand-info);
@include alert-icon-color($brand-info);
}
&.alert-primary{
@include shadow-alert-color($brand-primary);
@include alert-icon-color($brand-primary);
}
&.alert-rose{
@include shadow-alert-color($brand-rose);
@include alert-icon-color($brand-rose);
}
&.alert-with-icon{
padding-left: 66px;
i[data-notify="icon"] {
font-size: 30px;
display: block;
left: 15px;
position: absolute;
top: 50%;
margin-top: -15px;
color: #fff;
}
}
.mat-button.close{
min-width: auto;
line-height: .5;
i{
color: $white-color;
font-size: 11px;
}
}
i[data-notify="icon"]{
display: none;
}
.alert-icon{
display: block;
float: left;
margin-right: $margin-base;
i{
margin-top: -7px;
top: 5px;
position: relative;
}
}
[data-notify="dismiss"]{
margin-right: 5px;
}
}
.places-buttons .btn {
margin-bottom: 30px;
}
//
// .alert {
// border: 0;
// border-radius: 3px;
//
// padding: 20px 15px;
// line-height: 20px;
//
// //@include shadow-z-2();
//
// b{
// font-weight: $font-weight-bold;
// text-transform: uppercase;
// font-size: $font-size-small;
// }
// // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
// @include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light);
//
// &-info, &-danger, &-warning, &-success {
// color: $mdb-text-color-light;
// }
//
// &-default {
// a, .alert-link {
// color: $mdb-text-color-primary;
// }
// }
//
// .alert-icon{
// display: block;
// float: left;
// margin-right: $margin-base;
//
// i{
// margin-top: -7px;
// top: 5px;
// position: relative;
// }
// }
// .mat-button.close,
// .close{
// min-width: auto;
// color: $white-color;
// text-shadow: none;
// opacity: .9;
//
// i{
// font-size: 11px;
// }
//
// &:hover,
// &:focus{
// opacity: 1;
// }
// }
// }
// .alert .close {
// line-height: .5;
// }

257
dmp-frontend/src/assets/scss/core/_buttons.scss Normal file
View File

@ -0,0 +1,257 @@
.mat-button.btn,.mat-raised-button.btn,.mat-raised-button.btn:not([class*=mat-elevation-z]),
.btn{
position: relative;
padding: 12px 30px;
margin: $bmd-btn-margin-bottom 1px;
min-width: auto;
font-size: .75rem; // 12px
font-weight: 400;
line-height: $bmd-line-height;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
letter-spacing: 0;
cursor: pointer;
background-color: transparent;
border: 0;
border-radius: $border-radius-sm;
outline: 0;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: box-shadow, transform;
@include undo-bs-tab-focus();
//--
// Colors
@include bmd-raised-button-color();
&.btn-white {
&,
&:focus,
&:hover {
background-color: $white-color;
color: $gray-color;
}
&.btn-link {
color: $white-color;
background: transparent;
box-shadow: none;
}
}
&.btn-link:hover,
&.btn-link:focus,
&.btn-link:active {
text-decoration: none !important;
}
@include hover-focus();
//---
// btn-raised
&.btn-raised,
.btn-group-raised & {
// baseline shadow
// @include box-shadow($bmd-shadow-2dp);
// reverse any of the above for links
&.btn-link {
box-shadow: none;
@include bmd-hover-focus-active() {
box-shadow: none;
}
}
@include bmd-disabled() {
box-shadow: none;
}
}
//---
// btn-outline
@include bmd-outline-button-color();
// Size variations
&.btn-lg,
.btn-group-lg & {
@include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $bmd-btn-font-size, $btn-lg-line-height, $border-radius-sm);
}
&.btn-sm,
.btn-group-sm & {
@include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $bmd-btn-font-size-sm, $line-height-sm, $border-radius-sm);
}
&.btn-round {
border-radius: $border-radius-extreme;
> .mat-button-focus-overlay, .mat-button-ripple{
border-radius: $border-radius-extreme;
}
}
&.btn-fab,
&.btn-just-icon {
// see above for color variations
font-size: $mdb-btn-fab-font-size;
height: $mdb-btn-fab-size;
min-width: $mdb-btn-fab-size;
width: $mdb-btn-fab-size;
// margin: auto;
padding: 0;
overflow: hidden;
position: relative;
line-height: $mdb-btn-fab-size;
&.btn-round{
border-radius: 50%;
}
.btn-group-sm &,
&.btn-sm,
&.btn-fab-mini{
height: $mdb-btn-fab-size-mini + 1;
min-width: $mdb-btn-fab-size-mini + 1;
width: $mdb-btn-fab-size-mini + 1;
.material-icons,
.fa{
font-size: $mdb-btn-icon-size-mini;
line-height: $mdb-btn-fab-size-mini;
}
}
.btn-group-lg &,
&.btn-lg{
height: $mdb-btn-fab-size-lg + 1;
min-width: $mdb-btn-fab-size-lg + 1;
width: $mdb-btn-fab-size-lg + 1;
line-height: $mdb-btn-fab-size-lg;
.material-icons,
.fa{
font-size: $mdb-btn-icon-size;
line-height: $mdb-btn-fab-size-lg;
}
}
.material-icons,
.fa {
margin-top: 0;
position: absolute;
width: 100%;
transform: none;
left: 0;
top: 0;
height: 100%;
line-height: $mdb-btn-fab-size;
font-size: $mdb-btn-just-icon-font-size;
}
}
}
.btn-just-icon{
&.btn-lg{
font-size: $mdb-btn-fab-font-size;
height: $mdb-btn-fab-size;
min-width: $mdb-btn-fab-size;
width: $mdb-btn-fab-size;
}
}
.input-group-btn > .btn{
border: 0;
}
// Align icons inside buttons with text
.btn .material-icons,
.btn:not(.btn-just-icon):not(.btn-fab) .fa{
position: relative;
display: inline-block;
top: 0;
margin-top: -1em;
margin-bottom: -1em;
font-size: 1.1rem;
vertical-align: middle;
}
// Disabled buttons and button groups
.mat-raised-button.btn,
.input-group-btn .mat-raised-button.btn,
.btn-group,
.btn-group-vertical {
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons
@include bmd-disabled() {
.bg-inverse & {
color: $bmd-inverse-btn-disabled;
}
// flat buttons shouldn't lose transparency on disabled hover/focus
}
}
// btn-group variations
.btn-group,
.btn-group-vertical {
position: relative;
margin: 10px 1px;
// spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
//&.open {
// .dropdown-toggle {
// }
//
// > .dropdown-toggle.btn {
// @include bmd-raised-button-color-bg();
// }
//}
.dropdown-menu {
border-radius: 0 0 $border-radius $border-radius;
}
&.btn-group-raised {
@include box-shadow($bmd-shadow-2dp);
}
.mat-raised-button.btn + .mat-raised-button.btn,
.mat-raised-button.btn,
.mat-raised-button.btn:active,
.btn-group {
margin: 0;
}
// remove margin from nested btn-group(s) to properly align them with the outer buttons
> .btn-group {
margin: 0;
}
}
.btn-group > .mat-raised-button.btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .mat-raised-button.btn,
.btn-group > .mat-raised-button.btn:not(:first-child) .mat-button-ripple, .btn-group > .btn-group:not(:first-child) > .mat-raised-button.btn .mat-button-ripple,
.btn-group > .mat-raised-button.btn:not(:first-child) .mat-button-focus-overlay, .btn-group > .btn-group:not(:first-child) > .mat-raised-button.btn .mat-button-focus-overlay{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group > .mat-raised-button.btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .mat-raised-button.btn,
.btn-group > .mat-raised-button.btn:not(:last-child):not(.dropdown-toggle) .mat-button-ripple, .btn-group > .btn-group:not(:last-child) > .mat-raised-button.btn .mat-button-ripple,
.btn-group > .mat-raised-button.btn:not(:last-child):not(.dropdown-toggle) .mat-button-focus-overlay, .btn-group > .btn-group:not(:last-child) > .mat-raised-button.btn .mat-button-focus-overlay {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-no-ripple .mat-button-ripple{
display: none;
}
.mat-button, .mat-icon-button {
background: transparent;
}
.mat-button:hover .mat-button-focus-overlay, .mat-stroked-button:hover .mat-button-focus-overlay{
opacity: 0;
background-color: transparent!important;
}
button:focus {
outline: none;
}
.mat-button .mat-button-ripple{
border-radius: inherit;
}

658
dmp-frontend/src/assets/scss/core/_cards.scss Normal file
View File

@ -0,0 +1,658 @@
//https://www.google.com/design/spec/components/cards.html#cards-content-blocks
// Card resting elevation: 2dp
.card {
border: 0;
margin-bottom: 30px;
margin-top: 30px;
border-radius: $border-radius-large;
color: $gray-dark;
background: $white-color;
width: 100%;
.card-category:not([class*="text-"]) {
color: $gray-color;
}
.card-category{
margin-top: 10px;
.material-icons{
position: relative;
top: 8px;
line-height: 0;
}
}
.form-check {
margin-top: 15px;
}
.card-title{
margin-top: 0.625rem;
&:last-child{
margin-bottom: 0;
}
}
// Cards have a default elevation of 2dp.
@include box-shadow($bmd-shadow-2dp);
@extend %std-font;
&.no-shadow {
.card-header-image,
.card-header-image img {
box-shadow: none !important;
}
}
.card-body,
.card-footer {
padding: $padding-card-body-y $padding-card-body-x;
}
.card-body {
& + .card-footer{
padding-top: 0rem;
border: 0;
border-radius: $border-radius-large;
}
}
.card-footer {
display: flex;
align-items: center;
background-color: transparent;
border: 0;
.author,
.stats {
display: inline-flex;
}
.stats {
color: $gray-color;
.material-icons {
position: relative;
top: -10px;
margin-right: 3px;
margin-left: 3px;
font-size: 18px;
}
}
}
&.bmd-card-raised {
// Card raised elevation: 8dp
@include box-shadow($bmd-shadow-8dp);
}
@include media-breakpoint-up(lg) {
// On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover.
&.bmd-card-flat {
box-shadow: none;
}
}
.card-header {
border-bottom: none;
background: transparent;
.title{
color: $white-color;
}
&:not([class*="card-header-"]){
// @include shadow-big();
}
.nav-tabs {
padding: 0;
}
&.card-header-image {
position: relative;
padding: 0;
z-index: 1;
margin-left: 15px;
margin-right: 15px;
margin-top: -30px;
border-radius: $border-radius-large;
img {
width: 100%;
border-radius: $border-radius-large;
pointer-events: none;
@include shadow-big-image();
}
.card-title {
position: absolute;
bottom: 15px;
left: 15px;
color: $white-color;
font-size: $font-size-h4;
text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
}
.colored-shadow{
transform: scale(0.94);
top: 12px;
filter: blur(12px);
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
transition: opacity .45s;
opacity: 0;
}
&.no-shadow{
box-shadow: none;
&.shadow-normal{
@include shadow-big();
}
.colored-shadow{
display: none !important;
}
}
}
}
.card-header-primary .card-icon,
.card-header-primary .card-text,
.card-header-primary:not(.card-header-icon):not(.card-header-text),
&.bg-primary,
&.card-rotate.bg-primary .front,
&.card-rotate.bg-primary .back{
background: linear-gradient(60deg, $purple-400, $purple-600);
}
.card-header-info .card-icon,
.card-header-info .card-text,
.card-header-info:not(.card-header-icon):not(.card-header-text),
&.bg-info,
&.card-rotate.bg-info .front,
&.card-rotate.bg-info .back{
background: linear-gradient(60deg, $cyan-400, $cyan-600);
}
.card-header-success .card-icon,
.card-header-success .card-text,
.card-header-success:not(.card-header-icon):not(.card-header-text),
&.bg-success,
&.card-rotate.bg-success .front,
&.card-rotate.bg-success .back{
background: linear-gradient(60deg, $green-400, $green-600);
}
.card-header-warning .card-icon,
.card-header-warning .card-text,
.card-header-warning:not(.card-header-icon):not(.card-header-text),
&.bg-warning,
&.card-rotate.bg-warning .front,
&.card-rotate.bg-warning .back{
background: linear-gradient(60deg, $orange-400, $orange-600);
}
.card-header-danger .card-icon,
.card-header-danger .card-text,
.card-header-danger:not(.card-header-icon):not(.card-header-text),
&.bg-danger,
&.card-rotate.bg-danger .front,
&.card-rotate.bg-danger .back{
background: linear-gradient(60deg, $red-400, $red-600);
}
.card-header-rose .card-icon,
.card-header-rose .card-text,
.card-header-rose:not(.card-header-icon):not(.card-header-text),
&.bg-rose,
&.card-rotate.bg-rose .front,
&.card-rotate.bg-rose .back{
background: linear-gradient(60deg, $pink-400, $pink-600);
}
.card-header-primary .card-icon,
.card-header-primary:not(.card-header-icon):not(.card-header-text),
.card-header-primary .card-text{
@include shadow-big-color($brand-primary);
//@include shadow-8dp-color($brand-primary);
//@include shadow-16dp-color($brand-primary);
}
.card-header-danger .card-icon,
.card-header-danger:not(.card-header-icon):not(.card-header-text),
.card-header-danger .card-text{
@include shadow-big-color($brand-danger);
}
.card-header-rose .card-icon,
.card-header-rose:not(.card-header-icon):not(.card-header-text),
.card-header-rose .card-text{
@include shadow-big-color($brand-rose);
}
.card-header-warning .card-icon,
.card-header-warning:not(.card-header-icon):not(.card-header-text),
.card-header-warning .card-text{
@include shadow-big-color($brand-warning);
}
.card-header-info .card-icon,
.card-header-info:not(.card-header-icon):not(.card-header-text),
.card-header-info .card-text{
@include shadow-big-color($brand-info);
}
.card-header-success .card-icon,
.card-header-success:not(.card-header-icon):not(.card-header-text),
.card-header-success .card-text{
@include shadow-big-color($brand-success);
}
[class*="card-header-"],
&[class*="bg-"]{
color: $white-color;
.card-title a,
.card-title,
.icon i{
color: $white-color;
}
.icon i{
border-color: rgba(255, 255, 255, 0.25);
}
.author a,
.stats,
.card-category,
.card-description{
color: $white-transparent;
}
.author a{
&:hover,
&:focus,
&:active{
color: $white-color;
}
}
}
.author{
.avatar{
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 50%;
margin-right: 5px;
}
a{
color: $black-color;
text-decoration: none;
.ripple-container{
display: none;
}
}
}
.card-category-social{
.fa{
font-size: 24px;
position: relative;
margin-top: -4px;
top: 2px;
margin-right: 5px;
}
.material-icons{
position: relative;
top: 5px;
}
}
&[class*="bg-"],
&[class*="bg-"] .card-body{
border-radius: $border-radius-large;
h1,
h2,
h3{
small{
color: $white-transparent;
}
}
}
.card-stats{
background: transparent;
display: flex;
.author,
.stats{
display: inline-flex;
}
}
}
.card {
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
.table tr:first-child td{
border-top: none;
}
.card-title{
margin-top: 0;
margin-bottom: 15px;
}
.card-body{
padding: $padding-card-body-y 20px;
position: relative;
}
.card-header {
z-index: 3 !important;
.card-title{
margin-bottom: 3px;
}
.card-category{
margin: 0;
}
&.card-header-text {
display: inline-block;
&:after {
content: "";
display: table;
}
}
&.card-header-icon,
&.card-header-text {
i {
width: 33px;
height: 33px;
text-align: center;
line-height: 33px;
}
.card-title{
margin-top: 15px;
color: $black-color;
}
h4{
font-weight: 300;
}
}
&.card-header-tabs {
.nav-tabs {
background: transparent;
padding: 0;
}
.nav-tabs-title {
float: left;
padding: 10px 10px 10px 0;
line-height: 24px;
}
}
}
&.card-plain {
.card-header {
&.card-header-icon + .card-body .card-title,
&.card-header-icon + .card-body .card-category {
margin-top: -20px;
}
}
}
.card-actions {
position: absolute;
z-index: 1;
top: -50px;
width: calc(100% - 30px);
left: 17px;
right: 17px;
text-align: center;
.card-header{
padding: 0;
min-height: 160px;
}
.btn {
padding-left: 12px;
padding-right: 12px;
}
.fix-broken-card {
position: absolute;
top: -65px;
}
}
&.card-chart {
.card-footer i:nth-child(1n+2){
width: 18px;
text-align: center;
}
.card-category{
margin: 0;
}
}
.card-body + .card-footer,
.card-footer{
padding: 0;
padding-top: 10px;
margin: 0 15px 10px;
border-radius: 0;
justify-content: space-between;
align-items: center;
h6 {
width: 100%;
}
.stats{
color: #999999;
font-size: 12px;
line-height: 22px;
.card-category{
padding-top: 7px;
padding-bottom: 7px;
margin: 0;
}
.material-icons{
position: relative;
top: 4px;
font-size: 16px;
}
}
}
[class*="card-header-"] {
margin: 0px 15px 0;
padding: 0;
.card-title + .card-category{
color: rgba(255, 255, 255, 0.62);
a {
color: $white-color;
}
}
&:not(.card-header-icon):not(.card-header-text):not(.card-header-image){
border-radius: $border-radius-base;
margin-top: -20px;
padding: 15px;
}
.card-icon,
.card-text{
border-radius: $border-radius-base;
background-color: $gray-color;
padding: 15px;
margin-top: -20px;
margin-right: 15px;
float: left;
}
.card-text{
float: none;
display: inline-block;
margin-right: 0;
.card-title{
color: $white-color;
margin-top: 0;
}
}
position: relative;
.ct-chart{
.card-title{
color: $white-color;
}
.card-category{
margin-bottom: 0;
color: rgba($white-color, .62);
}
.ct-label{
color: rgba($white-color, .7);
}
.ct-grid{
stroke: rgba(255, 255, 255, 0.2);
}
.ct-series-a .ct-point,
.ct-series-a .ct-line,
.ct-series-a .ct-bar,
.ct-series-a .ct-slice-donut{
stroke: rgba(255,255,255,.8);
}
.ct-series-a .ct-slice-pie,
.ct-series-a .ct-area{
fill: rgba(255,255,255,.4);
}
.ct-series-a .ct-bar{
stroke-width: 10px;
}
.ct-point{
stroke-width: 10px;
stroke-linecap: round;
}
.ct-line{
fill: none;
stroke-width: 4px;
}
}
}
[data-header-animation="true"] {
@include transform-translate-y(0);
-webkit-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-moz-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-o-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-ms-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
}
&:hover {
[data-header-animation="true"]{
@include transform-translate-y(-50px);
}
}
.map {
height: 280px;
border-radius: $border-radius-large;
margin-top: 15px;
&.map-big{
height: 420px;
}
}
.card-body.table-full-width{
padding: 0;
}
.card-plain .card-header-icon {
margin-right: 15px !important;
}
}
.table-sales{
margin-top: 40px;
}
.iframe-container {
width: 100%;
iframe {
width: 100%;
height: 500px;
border: 0;
@include shadow-big();
}
}
.card-wizard {
.nav.nav-pills {
.nav-item {
margin: 0;
.nav-link {
padding: 6px 15px !important;
}
}
}
.nav-pills:not(.flex-column) .nav-item + .nav-item:not(:first-child) {
margin-left: 0;
}
.nav-item .nav-link.active,
.nav-item .nav-link:hover,
.nav-item .nav-link:focus {
background-color: inherit !important;
box-shadow: none !important;
}
.input-group-text {
padding: 6px 15px 0px !important;
}
.card-footer {
border-top: none !important;
}
}
.card-chart,
.card-product {
.card-body + .card-footer {
border-top: 1px solid #eee;
}
}
.card-product{
.price{
color: inherit;
}
}
.card-collapse {
margin-bottom: 15px;
.card .card-header a[aria-expanded="true"]{
color: #e91e63;
}
}

210
dmp-frontend/src/assets/scss/core/_checkboxes.scss Normal file
View File

@ -0,0 +1,210 @@
.form-check {
margin-bottom: .5rem;
padding-left: 0;
.form-check-label {
cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule
// color: $mdb-checkbox-label-color;
@include mdb-label-color-toggle-focus();
}
// Hide native checkbox
.form-check-input {
opacity: 0;
position: absolute;
margin: 0;
z-index: -1;
width: 0;
height: 0;
overflow: hidden;
left: 0;
pointer-events: none;
}
.form-check-sign {
vertical-align: middle;
position: relative;
top: -2px;
float: left;
padding-right: 10px;
display: inline-block;
&:before {
display: block;
position: absolute;
left: 0;
content: "";
background-color: rgba(0,0,0,.84);
height: $mdb-checkbox-size;
width: $mdb-checkbox-size;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
top: 0;
@include transform-scale3d(unquote('2.3,2.3,1'));
}
.check {
position: relative;
display: inline-block;
width: $mdb-checkbox-size;
height: $mdb-checkbox-size;
border: 1px solid $mdb-checkbox-border-color;
overflow: hidden;
z-index: 1;
border-radius: $border-radius-base;
&:before {
position: absolute;
content: "";
transform: rotate(45deg);
display: block;
margin-top: -3px;
margin-left: 7px;
width: 0;
color: $white-color;
height: 0;
box-shadow:
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0 inset;
@include animation(checkbox-off $mdb-checkbox-animation-check forwards);
}
}
}
.form-check-input{
&:focus + .form-check-sign .check:after {
opacity: 0.2;
}
&:checked {
& + .form-check-sign .check {
background: $mdb-checkbox-checked-color;
}
& + .form-check-sign .check:before {
color: #FFFFFF;
box-shadow: 0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
@include animation(checkbox-on $mdb-checkbox-animation-check forwards);
}
& + .form-check-sign:before {
@include animation(rippleOn $mdb-checkbox-animation-ripple);
}
& + .form-check-sign .check:after {
//background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
@include animation(rippleOn $mdb-checkbox-animation-ripple forwards);
}
}
&:not(:checked) {
& + .form-check-sign:before {
@include animation(rippleOff $mdb-checkbox-animation-ripple);
}
& + .form-check-sign .check:after {
@include animation(rippleOff $mdb-checkbox-animation-ripple); // Ripple effect on uncheck
}
}
}
.rtl {
.form-check {
.form-check-sign {
.check::before{
margin-right: 10px;
}
}
}
}
// Style for disabled inputs
fieldset[disabled] &,
fieldset[disabled] & .form-check-input,
.form-check-input[disabled] ~ .form-check-sign .check,
.form-check-input[disabled] + .circle {
opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-sign .check{
border-color: #000000;
opacity: .26;
}
.form-check-input[disabled] + .form-check-sign .check:after {
background-color: $mdb-text-color-primary;
transform: rotate(-45deg);
}
.form-check-input[disabled][checked] + .form-check-sign .check{
background-color: $black;
}
}
@keyframes checkbox-on {
0% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
15px 2px 0 11px;
}
50% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px 2px 0 11px;
}
100% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}

205
dmp-frontend/src/assets/scss/core/_dropdown.scss Normal file
View File

@ -0,0 +1,205 @@
// Menus https://www.google.com/design/spec/components/menus.html#menus-specs
// Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons
.dropdown-menu {
display: none;
padding: $bmd-dropdown-margin-y 0;
border: 0;
opacity: 0;
transform: scale(0);
transform-origin: 0 0;
will-change: transform, opacity;
transition: transform $bmd-menu-expand-duration $bmd-animation-curve-default,
opacity $bmd-menu-fade-duration $bmd-animation-curve-default;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
&.showing {
animation-name: bmd-dropdown-animation;
animation-duration: $bmd-menu-expand-duration;
animation-fill-mode: forwards;
animation-timing-function: $bmd-animation-curve-default;
}
.open > &,
&.show {
display: block;
opacity: 1;
transform: scale(1);
}
&.hiding {
display: block;
opacity: 0;
transform: scale(0);
}
&[x-placement="bottom-start"] {
transform-origin: 0 0;
}
&[x-placement="bottom-end"] {
transform-origin: 100% 0;
}
&[x-placement="top-start"] {
transform-origin: 0 100%;
}
&[x-placement="top-end"] {
transform-origin: 100% 100%;
}
.disabled > a{
color: $bmd-dropdown-header-color;
&:focus,
&:hover{
text-decoration: none;
background-color: transparent;
background-image: none;
color: $bmd-dropdown-header-color;
}
}
&.dropdown-with-icons .dropdown-item{
padding: $dropdown-item-padding-y + 0.125 $dropdown-item-padding-x $dropdown-item-padding-y + 0.125 $dropdown-item-padding-y + 0.125;
& .material-icons{
vertical-align: middle;
font-size: 24px;
position: relative;
margin-top: -4px;
top: 1px;
margin-right: 12px;
opacity: .5;
}
}
// https://www.google.com/design/spec/components/menus.html#menus-specs
.dropdown-item,
li > a{ // used to properly size the ripple container
position: relative;
width: auto;
display: flex;
flex-flow: nowrap;
align-items: center;
color: $bmd-dropdown-link-color;
font-weight: normal;
text-decoration: none;
font-size: .8125rem;
border-radius: $border-radius / 2;
margin: 0 $bmd-dropdown-margin-y;
@include transitions($fast-transition-time, $transition-linear);
min-width: $bmd-menu-item-min-width;
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
overflow: hidden;
line-height: $bmd-line-height;
text-overflow: ellipsis;
word-wrap: break-word;
@include media-breakpoint-up(md) {
padding-right: $bmd-menu-item-padding-right-md;
padding-left: $bmd-menu-item-padding-left-md;
}
}
.dropdown-item:hover,
.dropdown-item:focus,
a:hover,
a:focus,
a:active {
@include shadow-small-color($brand-primary);
background-color: $brand-primary;
color: #FFFFFF;
}
}
// this could be in a .btn-group or .dropdown
.dropdown-toggle {
&.bmd-btn-icon,
&.bmd-btn-fab {
// remove the dropdown icon
&::after {
display: none;
}
~ .dropdown-menu {
&.dropdown-menu-top-left,
&.dropdown-menu-top-right {
bottom: $bmd-btn-icon-size; // push up the bottom of the menu the height of the button
}
}
}
&:after{
will-change: transform;
transition: transform $bmd-animation-dropdown-caret linear;
}
.show &:after{
@include rotate-180();
}
&.bmd-btn-fab-sm {
~ .dropdown-menu {
&.dropdown-menu-top-left,
&.dropdown-menu-top-right {
bottom: $bmd-btn-fab-size-sm; // push up the bottom of the menu the height of the button
}
}
}
&.bmd-btn-icon {
~ .dropdown-menu {
// collapse some spacing
margin: 0;
}
}
}
.dropdown-header{
font-size: 0.75rem;
padding-top: $dropdown-header-padding-y;
padding-bottom: $dropdown-header-padding-y;
text-transform: none;
color: $bmd-dropdown-header-color;
line-height: $bmd-line-height;
font-weight: inherit;
}
@keyframes bmd-dropdown-animation {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
.dropdown-menu.bootstrap-datetimepicker-widget{
opacity: 0;
transform: scale(0);
transition-duration: $bmd-menu-expand-duration;
transition-timing-function: $bmd-animation-curve-default;
transform-origin: 0 0;
will-change: transform, opacity;
top: 0;
}
.dropdown-menu.bootstrap-datetimepicker-widget.top{
transform-origin: 0 100%;
}
.dropdown-menu.bootstrap-datetimepicker-widget.open{
opacity: 1;
transform: scale(1);
top: 0;
}

55
dmp-frontend/src/assets/scss/core/_example-pages.scss Normal file
View File

@ -0,0 +1,55 @@
.card-signup {
.card-header {
.social-line {
.btn {
color: $white-color;
}
}
}
.text-divider {
margin-top: 30px;
margin-bottom: 0px;
text-align: center;
}
}
.signup-page {
.page-header {
min-height: 100vh;
height: auto;
display: inherit;
.container{
padding-top: 20vh;
}
}
.card-signup {
border-radius: $border-radius-base * 2;
@include shadow-16dp();
margin-bottom: 100px;
padding: 40px 0px;
}
.info-horizontal {
padding: 0px 0px 20px;
}
.social {
.btn {
margin: 5px;
}
h4 {
margin-top: 20px;
}
}
.footer {
.container {
padding: 0;
}
.copyright,
a{
color: $white-color;
}
}
}

302
dmp-frontend/src/assets/scss/core/_fixed-plugin.scss Normal file
View File

@ -0,0 +1,302 @@
.fixed-plugin{
position: fixed;
top: 180px;
right: 0;
width: 64px;
background: rgba(0,0,0,.3);
z-index: 1031;
border-radius: 8px 0 0 8px;
text-align: center;
top: 120px;
li > a,
.badge{
transition: all .34s;
-webkit-transition: all .34s;
-moz-transition: all .34s;
}
.fa-cog{
color: #FFFFFF;
padding: 10px;
border-radius: 0 0 6px 6px;
width: auto;
}
.dropdown-menu{
right: 80px;
left: auto;
width: 290px;
border-radius: 0.1875rem;
padding: 0 10px;
}
.dropdown-menu:after,
.dropdown-menu:before{
right: 10px;
margin-left: auto;
left: auto;
}
.fa-circle-thin{
color: #FFFFFF;
}
.active .fa-circle-thin{
color: #00bbff;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus{
color: #777777;
text-align: center;
}
img{
border-radius: 0;
width: 100%;
height: 100px;
margin: 0 auto;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus{
box-shadow: none;
}
.badge{
border: 3px solid #FFFFFF;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 23px;
margin-right: 5px;
position: relative;
width: 23px;
}
.badge.active,
.badge:hover{
border-color: #00bbff;
}
.badge-blue{
background-color: $brand-info;
}
.badge-green{
background-color: $brand-success;
}
.badge-orange{
background-color: $brand-primary;
}
.badge-yellow{
background-color: $brand-warning;
}
.badge-red{
background-color: $brand-danger;
}
h5{
font-size: 14px;
margin: 10px;
}
.dropdown-menu li{
display: block;
padding: 18px 2px;
width: 25%;
float: left;
}
li.adjustments-line,
li.header-title,
li.button-container{
width: 100%;
height: 50px;
min-height: inherit;
}
li.button-container{
height: auto;
div{
margin-bottom: 5px;
}
}
#sharrreTitle{
text-align: center;
padding: 10px 0;
height: 50px;
}
li.header-title{
height: 30px;
line-height: 25px;
font-size: 12px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
}
.adjustments-line{
p{
float: left;
display: inline-block;
margin-bottom: 0;
font-size: 1em;
color: #3C4858;
}
a{
color: transparent;
.badge-colors{
position: relative;
top: -2px;
}
a:hover,
a:focus{
color: transparent;
}
}
.togglebutton{
float: right;
.toggle{
margin-right: 0;
}
}
.dropdown-menu > li.adjustments-line > a{
padding-right: 0;
padding-left: 0;
border-bottom: 1px solid #ddd;
border-radius: 0;
margin: 0;
}
}
.dropdown-menu{
> li{
& > a.img-holder{
font-size: 16px;
text-align: center;
border-radius: 10px;
background-color: #FFF;
border: 3px solid #FFF;
padding-left: 0;
padding-right: 0;
opacity: 1;
cursor: pointer;
display: block;
max-height: 100px;
overflow: hidden;
padding: 0;
img{
margin-top: auto;
}
}
a.switch-trigger:hover,
& > a.switch-trigger:focus{
background-color: transparent;
}
&:hover,
&:focus{
> a.img-holder{
border-color: rgba(0, 187, 255, 0.53);;
}
}
}
> .active > a.img-holder,
> .active > a.img-holder{
border-color: #00bbff;
background-color: #FFFFFF;
}
}
.btn-social{
width: 50%;
display: block;
width: 48%;
float: left;
font-weight: 600;
}
.btn-social{
i{
margin-right: 5px;
}
&:first-child{
margin-right: 2%;
}
}
.dropdown{
.dropdown-menu{
-webkit-transform: translateY(-15%);
-moz-transform: translateY(-15%);
-o-transform: translateY(-15%);
-ms-transform: translateY(-15%);
transform: translateY(-15%);
top: 27px;
opacity: 0;
transform-origin: 0 0;
&:before{
border-bottom: .4em solid rgba(0, 0, 0, 0);
border-left: .4em solid rgba(0,0,0,0.2);
border-top: .4em solid rgba(0,0,0,0);
right: -16px;
top: 46px;
}
&:after{
border-bottom: .4em solid rgba(0, 0, 0, 0);
border-left: .4em solid #FFFFFF;
border-top: .4em solid rgba(0,0,0,0);
right: -16px;
}
&:before,
&:after{
content: "";
display: inline-block;
position: absolute;
top: 46px;
width: 16px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
}
&.show .dropdown-menu{
opacity: 1;
-webkit-transform: translateY(-13%);
-moz-transform: translateY(-13%);
-o-transform: translateY(-13%);
-ms-transform: translateY(-13%);
transform: translateY(-13%);
transform-origin: 0 0;
}
}
.bootstrap-switch{
margin:0;
}
}

102
dmp-frontend/src/assets/scss/core/_footers.scss Normal file
View File

@ -0,0 +1,102 @@
.footer{
padding: $padding-general-x 0;
text-align: center;
display: -webkit-flex; /* Safari */ /* Safari 6.1+ */
display: flex;
ul{
margin-bottom: 0;
padding: 0;
list-style: none;
li{
display: inline-block;
a{
color: inherit;
padding: $padding-general-x;
font-weight: $font-weight-bold;
font-size: $mdb-btn-font-size-base;
text-transform: uppercase;
border-radius: $border-radius-base;
text-decoration: none;
position: relative;
display: block;
&:hover{
text-decoration: none;
}
}
.btn{
margin: 0;
}
}
&.links-horizontal{
&:first-child a{
padding-left: 0;
}
&:last-child a{
padding-right: 0;
}
}
&.links-vertical{
li{
display: block;
margin-left: -5px;
margin-right: -5px;
a{
padding: 5px;
}
}
}
}
.social-buttons{
a,
.btn{
margin-top: 5px;
margin-bottom: 5px;
}
}
.footer-brand{
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
margin-left: -15px;
&:hover,
&:focus{
color: $black-color;
}
}
.copyright{
padding: 15px 0;
.material-icons{
font-size: 18px;
position: relative;
top: 3px;
}
}
.pull-center{
display: inline-block;
float: none;
}
}
.off-canvas-sidebar {
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
}

437
dmp-frontend/src/assets/scss/core/_forms.scss Normal file
View File

@ -0,0 +1,437 @@
form {
// ensure enough room at the bottom of any form to display a one-line bmd-help
margin-bottom: ($bmd-help-size-ratio * $font-size-base) * $line-height-base;
.card &{
margin: 0;
}
// reverse the above for navbars (no help expected in a navbar form)
.navbar & {
margin-bottom: 0; // only adjust bottom so that pull-xs-right flexed margin-left: auto works
.bmd-form-group {
display: inline-block;
padding-top: 0;
}
.btn {
margin-bottom: 0;
}
}
}
// -----
// Inputs
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control{
background: $bmd-form-control-bg-repeat-y $bmd-form-control-bg-position;
background-size: $bmd-form-control-bg-size;
border: 0;
height: 36px;
transition: background 0s ease-out;
padding-left: 0;
padding-right: 0;
border-radius: 0;
font-size: $mdb-input-font-size-base;
// The border bottom should be static in all states, the decorator will be animated over this.
&:focus,
.bmd-form-group.mat-focused & {
background-size: $bmd-form-control-bg-size-active;
//border-bottom: $input-btn-border-width solid $input-border-color;
transition-duration: 0.3s;
}
@include material-placeholder() {
color: $mdb-input-placeholder-color;
font-weight: 400;
font-size: $mdb-input-font-size-base;
}
.has-white &{
@include material-placeholder(){
color: $white-color;
}
}
}
// Help blocks (not in v4)
// position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good.
// FIXME: width/wrapping isn't automatic and overflows occur. What are some solutions?
//
.bmd-help {
position: absolute;
display: none;
font-size: .8rem;
font-weight: normal;
@extend .text-muted;
.bmd-form-group.mat-focused & {
display: block;
}
//--------------------------------------
// Multiple help blocks
// - absolute positioning is used above to prevent bouncing
// - when there is more than one, this will bounce but will at least show
&:nth-of-type(2) {
padding-top: 1rem; // the first one requires top padding to push it below the first one which is absolute positioned
}
+ .bmd-help {
position: relative;
margin-bottom: 0;
}
}
// -----
// State coloring: default, success, info, warning, danger
//
@include bmd-selection-color();
@include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color, $input-border-color);
.has-success {
@include bmd-form-color($brand-success, $brand-success, $brand-success, $input-border-color);
}
.has-info {
@include bmd-form-color($brand-info, $brand-info, $brand-info, $input-border-color);
}
.has-white{
@include bmd-form-color($white-color, $white-color, $white-color, $input-border-color-white);
.form-control{
&:focus{
color: $white-color;
}
}
}
.has-warning {
@include bmd-form-color($brand-warning, $brand-warning, $brand-warning, $input-border-color);
}
.has-danger {
@include bmd-form-color($brand-danger, $brand-danger, $brand-danger, $input-border-color);
}
.has-rose {
@include bmd-form-color($brand-rose, $brand-rose, $brand-rose, $input-border-color);
}
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
//.variations(unquote(" label"), color, $bmd-input-placeholder-color); // default label color variations
// Whereas .form-group adds structure, bmd-form-group just needs to make sure we have enough padding for our labels to work. That's the only purpose.
.bmd-form-group {
position: relative;
// -----
// Labels
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
&:not(.has-success):not(.has-danger){
[class^='bmd-label'],
[class*=' bmd-label']{
&.bmd-label-floating{
color: $mdb-input-placeholder-color;
}
}
}
[class^='bmd-label'],
[class*=' bmd-label'] {
position: absolute;
pointer-events: none;
transition: 0.3s ease all;
// hint to browser for optimization
&.bmd-label-floating {
will-change: left, top, contents;
margin: 0;
line-height: 1.4;
font-weight: 400;
}
}
// hide label-placeholders when the field is filled
&.is-filled .bmd-label-placeholder {
display: none;
}
// Optional class to make the text field inline collapsible/expandable (collapsed by default)
// This uses the BS collapse js to make the width expand.
// `width` class must also be on the element FIXME: do this with JS, it is a marker class and should be implicit because after all, we are an bmd-collapse-inline
// FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events
&.bmd-collapse-inline {
display: flex;
align-items: center;
padding: 0; // get rid of any padding as this is a width transition
min-height: 2.1em;
// Expandable Holder.
.collapse {
flex: 1;
display: none;
&.show {
// This is an unfortunate hack. Animating between widths in percent (%)
// in many browsers (Chrome, Firefox) only animates the inner visual style
// of the input - the outer bounding box still 'jumps'.
// Thus assume a sensible maximum, and animate to/from that value.
max-width: 1200px;
}
}
.collapsing,
.width:not(.collapse),
// collapsing is removed and momentarily only width is present
.collapse.show {
display: block;
}
.collapsing {
@include material-animation-default();
}
}
// default floating size/location with an bmd-form-group
@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height, "bmd-form-group default");
// sm floating size/location
&.bmd-form-group-sm {
@include bmd-form-size-variant($font-size-sm, $bmd-label-top-margin-sm, $input-padding-y-sm, $bmd-form-line-height-sm, "bmd-form-group sm");
}
// lg floating size/location
&.bmd-form-group-lg {
@include bmd-form-size-variant($font-size-lg, $bmd-label-top-margin-lg, $input-padding-y-lg, $bmd-form-line-height-sm, "bmd-form-group lg");
}
}
// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch
@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height);
select {
&,
&.form-control{
// Use vendor prefixes as `appearance` isn't part of the CSS spec. OSX doesn't obey the border-radius: 0 without this.
-moz-appearance: none;
-webkit-appearance: none;
}
}
// Input files - hide actual input - requires specific markup in the sample.
//.bmd-form-group input[type=file] {
// opacity: 0;
// position: absolute;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
// width: 100%;
// height: 100%;
// z-index: 100;
//}
//
//
//.form-horizontal {
//
// // Consistent vertical alignment of radios and checkboxes
// .radio,
// .checkbox,
// .radio-inline,
// .checkbox-inline {
// padding-top: 0;
// }
//
// .radio {
// margin-bottom: 10px;
// }
//
// label {
// text-align: right;
// }
//
// label {
// margin: 0;
// }
//}
.form-inline {
@include media-breakpoint-up(sm) {
.input-group {
display: inline-flex;
align-items: center;
}
}
}
.form-control-feedback{
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
pointer-events: none;
opacity: 0;
.has-success &{
color: $green;
opacity: 1;
}
.has-danger &{
color: $red;
opacity: 1;
}
}
.form-group{
padding-bottom: 10px;
position: relative;
margin: 8px 0 0;
}
textarea{
height: auto !important;
resize: none;
line-height: $bmd-line-height !important;
}
.form-group input[type=file] {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.form-newsletter{
.input-group,
.form-group{
float: left;
width: 78%;
margin-right: 2%;
margin-top: 9px;
padding-top: 5px;
}
.btn{
float: left;
width: 20%;
margin: 9px 0 0;
}
}
.form-file-upload{
.input-group-btn:last-child>.btn-round{
border-radius: 30px;
}
.input-group-btn .btn{
margin: 0;
}
.input-group{
width: 100%;
}
}
.input-group .input-group-btn{
padding: 0 12px;
}
.form-control[disabled],
fieldset[disabled] .form-control,
.form-group .form-control[disabled],
fieldset[disabled] .form-group .form-control{
background-color: transparent;
cursor: not-allowed;
border-bottom: 1px dotted $input-border-color;
background-repeat: no-repeat;
}
.mat-form-field{
display: block !important;
}
.has-success{
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-empty.mat-form-field-label{
color: #4caf50;
}
&.mat-focused{
.mat-input-underline{
.mat-input-ripple{
background-color: #4caf50;
}
}
}
}
.has-danger{
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-empty.mat-form-field-label{
color: #f44336;
}
&.mat-focused{
.mat-input-underline{
.mat-input-ripple{
background-color: #f44336;
}
}
}
}
.ng-invalid{
&.mat-focused .mat-form-field-label{
color: #f44336;
}
}
form .ng-valid{
&.mat-focused .mat-form-field-label,
.mat-focused .mat-form-field-label,
.mat-form-field-label{
// color: #4caf50;
}
.mat-input-underline{
// background-color: #4caf50;
height: 2px;
.mat-input-ripple{
// background-color: #4caf50;
}
}
}
.mat-input-placeholder {
color: rgba(0, 0, 0, 0.38);
}
.mat-input-underline {
background-color: rgba(0, 0, 0, 0.12);
}
.mat-focused .mat-input-placeholder {
color: $brand-primary;
}
.mat-input-ripple {
background-color: $brand-primary;
}

10
dmp-frontend/src/assets/scss/core/_images.scss Normal file
View File

@ -0,0 +1,10 @@
.img-thumbnail{
border-radius: 16px;
}
.img-raised{
@include shadow-big-image();
}
.rounded{
border-radius: $border-radius-large !important;
}

36
dmp-frontend/src/assets/scss/core/_input-group.scss Normal file
View File

@ -0,0 +1,36 @@
// -----------------------------------------
// input-group and input-group-addon styles
// note: form-groups are not required
//
@mixin input-group-button-variation($vertical-padding) {
.input-group-btn {
.btn {
//margin: 0 0 $vertical-padding 0;
}
}
}
// default margin - no form-group required
@include input-group-button-variation(input-padding-y);
.bmd-form-group-sm {
@include input-group-button-variation($input-padding-y-sm);
}
.bmd-form-group-lg {
@include input-group-button-variation($input-padding-y-lg);
}
.input-group {
// may be in or outside of form-group
.input-group-text {
display: flex;
justify-content: center;
align-items: center;
padding: 0 15px 0 15px;
background-color: transparent;
border-color: transparent;
}
}

74
dmp-frontend/src/assets/scss/core/_misc.scss Normal file
View File

@ -0,0 +1,74 @@
body{
background-color: #eee;
color: $black-color;
font-weight: 300;
}
legend {
border-bottom: 0;
}
.serif-font{
font-family: $font-family-serif;
}
// Prevent highlight on mobile
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
&:focus {
outline: 0;
}
}
a{
color: $link-color;
&:hover,
&:focus{
color: darken($link-color, 5%);
text-decoration: none;
}
&.text-info{
&:hover, &:focus{
color: darken($brand-info, 5%);
}
}
& .material-icons {
vertical-align: middle;
}
}
.form-check,
label{
font-size: 14px;
line-height: 1.42857;
color: $checkboxes-text-color;
font-weight: 400;
}
/* Animations */
.animation-transition-general{
@include transition-all($general-transition-time, $transition-linear);
}
.animation-transition-slow{
@include transition-all($slow-transition-time, $transition-linear);
}
.animation-transition-fast{
@include transition-all($fast-transition-time, $transition-ease);
}
.caret,
.sidebar a{
@include transition-all($fast-transition-time, $transition-ease-in);
}
#map {
position: relative;
z-index: 2;
width: 100%;
height: calc(100vh - 70px);
margin-top: 70px;
}

16
dmp-frontend/src/assets/scss/core/_mixins.scss Normal file
View File

@ -0,0 +1,16 @@
@import "mixins/utilities";
@import "mixins/breakpoints";
@import "mixins/animations";
@import "mixins/type";
@import "mixins/layout";
@import "mixins/drawer";
@import "mixins/forms";
@import "mixins/buttons";
@import "mixins/hover";
@import "mixins/navs";
@import "mixins/colored-shadows";
@import "mixins/navbar-colors";
@import "mixins/alert";
@import "mixins/sidebar-color";
@import "mixins/variables";
@import "mixins/vendor-prefixes";

252
dmp-frontend/src/assets/scss/core/_navbar.scss Normal file
View File

@ -0,0 +1,252 @@
.navbar {
border: 0;
border-radius: $border-radius-base;
padding: 0.625rem 0;
margin-bottom: 20px;
@include navbar-colors($white-color, $navbar-color);
&.fixed-top{
border-radius: 0;
}
.navbar-nav{
.nav-item .nav-link{
position: relative;
color: inherit;
padding: $padding-general-x;
font-weight: $font-weight-default;
font-size: $mdb-btn-font-size-base;
text-transform: uppercase;
border-radius: $border-radius-base;
line-height: 20px;
&:not(.btn-just-icon) .fa{
position: relative;
top: 2px;
margin-top: -4px;
margin-right: 4px;
}
& .material-icons,
& .fa{
font-size: $font-size-lg;
max-width: 24px;
margin-top: -1.1em;
}
&:not(.btn) .material-icons{
margin-top: -7px;
top: 3px;
position: relative;
margin-right: 3px;
}
&.profile-photo{
padding: 0;
margin: 0 3px;
&:after{
display: none;
}
& .profile-photo-small{
height: 40px;
width: 40px;
}
.ripple-container{
border-radius: 50%;
}
}
}
.dropdown-menu-right{
transform-origin: 100% 0;
}
.nav-item.active .nav-link{
&,
&:hover,
&:focus {
color: inherit;
background-color: rgba(255, 255, 255, 0.1);
}
}
}
.btn,
.navbar-nav .nav-item .btn{
margin-top: 0;
margin-bottom: 0;
}
.navbar-toggler{
cursor: pointer;
outline: 0;
.navbar-toggler-icon{
width: 22px;
height: 2px;
vertical-align: middle;
outline: 0;
display: block;
border-radius: 1px;
& + .navbar-toggler-icon{
margin-top: 4px;
}
}
}
&.navbar-absolute{
position: absolute;
width: 100%;
padding-top: 10px;
z-index: 1029;
}
.navbar-wrapper{
display: inline-flex;
align-items: center;
}
// give correct size to ripple container
.navbar-brand {
position: relative;
color: inherit;
height: 50px;
font-size: $navbar-brand-font-size - 0.125;
line-height: 30px;
padding: $padding-general-y 0;
font-weight: 300;
margin-left: 1rem;
}
> .container {
flex: 1;
}
&.bg-primary{
@include navbar-colors($bg-primary, $white-color);
}
&.bg-info{
@include navbar-colors($bg-info, $white-color);
}
&.bg-warning{
@include navbar-colors($bg-warning, $white-color);
}
&.bg-rose{
@include navbar-colors($bg-rose, $white-color);
}
&.bg-danger{
@include navbar-colors($bg-danger, $white-color);
}
&.bg-success{
@include navbar-colors($bg-success, $white-color);
}
&.bg-dark{
@include navbar-colors($grey-900, $white-color);
}
&.navbar-transparent{
background-color: transparent !important;
box-shadow: none;
padding-top: 25px;
}
.notification{
position: absolute;
top: 5px;
border: 1px solid #FFF;
right: 10px;
font-size: 9px;
background: #f44336;
color: #FFFFFF;
min-width: 20px;
padding: 0px 5px;
height: 20px;
border-radius: 10px;
text-align: center;
line-height: 19px;
vertical-align: middle;
display: block;
}
}
.navbar{
.navbar-minimize{
padding: 3px 0 0 15px;
}
&.navbar-transparent{
padding-top: 10px;
}
.collapse{
.navbar-nav{
.nav-item .nav-link{
position: relative;
padding: 10px 15px;
font-weight: $font-weight-default;
font-size: $mdb-btn-font-size-base;
text-transform: uppercase;
border-radius: $border-radius-base;
line-height: 20px;
margin-left: 5px;
color: inherit;
&:not(.btn-just-icon) .fa{
position: relative;
top: 2px;
margin-top: -4px;
margin-right: 4px;
}
& .material-icons,
& .fa{
font-size: $font-size-lg;
max-width: 24px;
margin-top: -1.1em;
}
&:not(.btn) .material-icons{
margin-top: -3px;
top: 0px;
position: relative;
margin-right: 3px;
}
.notification{
top: 0px;
}
}
}
}
}
.off-canvas-sidebar{
.navbar{
.navbar-collapse{
.navbar-nav .nav-item{
.nav-link{
padding-top: 15px;
padding-bottom: 15px;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
border-radius: 3px;
color: $white-color;
margin: 0 15px;
&:hover{
background: rgba(200, 200, 200, 0.2);
}
}
}
}
}
}

53
dmp-frontend/src/assets/scss/core/_popover.scss Normal file
View File

@ -0,0 +1,53 @@
.popover, .tooltip-inner {
line-height: 1.5em;
background: $white-color;
border: none;
border-radius: $border-radius-base;
@include shadow-8dp();
color: $popover-color;
}
.popover{
padding: 0;
@include shadow-16dp();
&.left,
&.right,
&.top,
&.bottom{
> .arrow{
border: none;
}
}
&.bs-popover-top,
&.bs-popover-auto[x-placement^="top"],
&.bs-popover-bottom,
&.bs-popover-auto[x-placement^="bottom"],
&.bs-popover-right,
&.bs-popover-auto[x-placement^="right"],
&.bs-popover-left,
&.bs-popover-auto[x-placement^="left"]{
& .arrow::before{
border: 0;
}
}
}
.popover-header{
background-color: $white-color;
border: none;
padding: 15px 15px 5px;
font-size: $font-size-h4;
margin: 0;
color: $popover-color;
}
.popover-body{
padding: 10px 15px 15px;
line-height: 1.4;
color: $popover-color;
}

85
dmp-frontend/src/assets/scss/core/_popups.scss Normal file
View File

@ -0,0 +1,85 @@
.popover{
font-size: $font-size-base;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
border: none;
line-height: 1.7;
max-width: 240px;
&.bs-popover-top .arrow:before,
&.bs-popover-left .arrow:before,
&.bs-popover-right .arrow:before,
&.bs-popover-bottom .arrow:before,{
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
.popover-header{
color: $default-color-opacity;
font-size: $font-size-base;
text-transform: capitalize;
font-weight: $font-weight-semi;
margin: 0;
margin-top: 5px;
border: none;
background-color: transparent;
}
&:before{
display: none;
}
&.bs-tether-element-attached-top:after{
border-bottom-color:$white-color;
top: -9px;
}
&.popover-primary{
@include popover-color($primary-color, $white-color);
}
&.popover-info{
@include popover-color($info-color, $white-color);
}
&.popover-warning{
@include popover-color($warning-color, $white-color);
}
&.popover-danger{
@include popover-color($danger-color, $white-color);
}
&.popover-success{
@include popover-color($success-color, $white-color);
}
}
.tooltip{
&.bs-tooltip-right .arrow:before{
border-right-color:$white-color;
}
&.bs-tooltip-top .arrow:before{
border-top-color:$white-color;
}
&.bs-tooltip-bottom .arrow:before{
border-bottom-color:$white-color;
}
&.bs-tooltip-left .arrow:before{
border-left-color:$white-color;
}
}
.tooltip-inner{
padding: $padding-base-vertical $padding-base-horizontal;
min-width: 130px;
background-color: $white-color;
font-size: $font-size-base;
color: inherit;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
}

98
dmp-frontend/src/assets/scss/core/_radios.scss Normal file
View File

@ -0,0 +1,98 @@
@mixin radio-color($color, $opacity){
& ~ .check,
& ~ .circle {
opacity: $opacity;
}
& ~ .check {
background-color: $color;
}
& ~ .circle {
border-color: $color;
}
}
.form-check{
.form-check-label {
cursor: pointer;
padding-left: 25px;
position: relative;
@include mdb-label-color-toggle-focus();
span {
display: block;
position: absolute;
left: -1px;
top: -1px;
transition-duration: 0.2s;
}
.circle {
border: 1px solid $mdb-radio-color-off;
height: 15px;
width: 15px;
border-radius: 100%;
top: 1px;
.check {
height: 15px;
width: 15px;
border-radius: 100%;
background-color: $mdb-radio-color-on;
@include transform-scale3d(unquote('0,0,0'));
}
}
.form-check-input:not(:checked) ~ .check:after {
@include animation(rippleOff 500ms);
}
.form-check-input:checked ~ .check:after {
@include animation(rippleOff 500ms);
}
}
.form-check-input {
opacity: 0;
height: 0;
width: 0;
overflow: hidden;
&:checked {
@include radio-color($mdb-radio-color-on, 1);
}
&:checked ~ .circle .check {
@include transform-scale3d(unquote('0.65, 0.65, 1'));
}
}
.form-check-input[disabled] {
// light theme spec: Disabled: #000000, Opacity 26%
@include radio-color($black, 0.26);
& + .circle .check{
background-color: $black;
}
}
.form-check-sign{
vertical-align: middle;
position: relative;
top: -2px;
float: left;
padding-right: 10px;
display: inline-block;
}
}
.form-check + .form-check {
margin-top: 0;
}

830
dmp-frontend/src/assets/scss/core/_responsive.scss Normal file
View File

@ -0,0 +1,830 @@
@media all and (max-width: 991px) {
[class*="navbar-expand-"] > .container,
[class*="navbar-expand-"] > .container-fluid{
padding-left: 15px;
padding-right: 15px;
}
.navbar .navbar-collapse .navbar-nav > li.button-container{
padding: 15px;
}
.carousel .card .card-body{
max-width: 340px;
margin: 0 auto;
min-height: 400px;
}
.navbar-collapse{
position: fixed;
display: block;
top: 0px;
height: 100vh;
width: 230px;
right: 0;
margin-right: 0 !important;
z-index: 1032;
visibility: visible;
background-color: #999;
overflow-y: visible;
border-top: none;
text-align: left;
padding-right: 0;
padding-left: 0;
max-height: none !important;
@include transform-translate-x(230px);
@include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
&::after{
top: 0;
left: 0;
height: 100%;
width: 100%;
position: absolute;
background-color: $white-color;
display: block;
content: "";
z-index: 1;
}
.dropdown-toggle:after{
position: absolute;
right: 16px;
margin-top: 8px;
}
.navbar-nav{
position: relative;
z-index: 3;
.nav-item{
.nav-link{
color: $black-color;
margin: 5px 15px;
}
&.button-container .nav-link{
margin: 15px;
}
&:after{
width: calc(100% - 30px);
content: "";
display: block;
height: 1px;
margin-left: 15px;
// background-color: #e5e5e5;
}
&:last-child {
&:after{
display: none;
}
}
}
}
.nav-open &{
@include transform-translate-x(0px);
}
}
.nav-open{
.navbar-translate{
@include transform-translate-x(-230px);
}
}
.navbar{
.navbar-translate{
width: 100%;
position: relative;
display: flex;
-ms-flex-pack: justify !important;
justify-content: space-between !important;
-ms-flex-align: center;
align-items: center;
@include transitions-property (transform, 0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
}
.dropdown.show .dropdown-menu{
display: block;
}
.dropdown .dropdown-menu{
display: none;
}
.dropdown-menu{
.dropdown-item{
margin-left: 1.5rem;
margin-right: 1.5rem;
}
}
.dropdown.show .dropdown-menu,
.dropdown .dropdown-menu{
background-color: transparent;
border: 0;
padding-bottom: 15px;
transition: none;
-webkit-box-shadow: none;
box-shadow: none;
transform: none !important;
width: auto;
margin-bottom: 15px;
padding-top: 0;
height: 300px;
animation: none;
opacity: 1;
overflow-y: scroll;
}
}
.navbar.navbar-transparent{
.navbar-toggler{
.navbar-toggler-icon{
background-color: $white-color;
}
}
}
#bodyClick {
height: 100%;
width: 100%;
position: fixed;
opacity: 0;
top: 0;
left: auto;
right: 230px;
content: "";
z-index: 1029;
overflow-x: hidden;
}
// for demo
#navbar .navbar-collapse,
#navigation .navbar-collapse{
display: none !important;
}
}
@media all and (min-width: 991px) {
.navbar .navbar-nav{
align-items: center;
.button-container{
margin-left: 0.1875px;
}
}
}
@media screen and (max-width: 991px) {
.presentation-page {
.section-components {
.components-macbook {
max-width: 850px !important;
max-height: 480px !important;
margin-top: 12vh;
left: -12px;
}
.coloured-card-img,
.table-img {
display: none;
}
.social-img {
left: 47%;
top: 37%;
}
.pin-btn-img {
top: 54%;
}
.share-btn-img {
top: 12%;
}
.coloured-card-btn-img {
top: -2%;
left: 65%;
}
}
.section-content {
.area-img {
max-width: 130px;
max-height: 170px;
}
.info-img {
max-width: 170px;
max-height: 120px;
}
}
}
}
@media screen and (max-width: 767px) {
.presentation-page {
.section-components {
.components-macbook {
max-width: 350px !important;
max-height: 250px !important;
margin-top: 12vh;
left: -12px;
}
.coloured-card-img,
.table-img {
display: none;
}
.social-img {
left: -7%;
top: 37%;
}
.pin-btn-img {
top: 54%;
}
.share-btn-img {
top: 7%;
}
.coloured-card-btn-img {
top: -2%;
}
}
}
.presentation-page,
.index-page,
.section-page{
#cd-vertical-nav{
display: none;
}
}
.index-page{
.cd-section{
.tim-typo .tim-note{
width: 60px;
}
}
}
}
@media screen and (max-width: 400px){
.pro-badge{
top: 90px !important;
right: 30px !important;
}
.cd-vertical-nav{
display: none !important;
}
}
/* Changes for small display */
@media (max-width: 991px){
.form-group{
textarea{
padding-top: 15px;
}
}
.nav-open .menu-on-left .main-panel{
position: initial;
}
html,
body{
overflow-x: hidden;
}
.menu-on-left{
.nav-open &{
.main-panel,
.wrapper-full-page,
.navbar-fixed > div{
@include transform-translate-x(260px);
}
}
.sidebar,
.off-canvas-sidebar{
left: 0;
right: auto;
@include transform-translate-x(-260px);
}
.close-layer{
left: auto;
right: 0;
}
}
.timeline{
&:before{
left: 5%;
}
> li > .timeline-badge{
left: 5%;
}
> li > .timeline-panel{
float: right;
width: 86%;
&:before{
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
&:after{
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
}
.nav-mobile-menu{
.dropdown .dropdown-menu{
display: none;
position: static !important;
background-color: transparent;
width: auto;
float: none;
box-shadow: none;
&.showing{
animation: initial;
animation-duration: 0s;
}
&.hiding{
transform: none;
opacity: 1;
}
}
.dropdown.show .dropdown-menu{
display: block;
}
li.active > a{
background-color: rgba(255, 255, 255, 0.1);
}
}
.navbar-minimize {
display: none;
}
.card .form-horizontal {
.label-on-left,
.label-on-right{
padding-left:15px;
padding-top: 8px;
}
.form-group{
margin-top: 0px;
}
.checkbox-radios{
padding-bottom: 15px;
.checkbox:first-child,
.radio:first-child{
margin-top: 0;
}
}
.checkbox-inline{
margin-top: 0;
}
}
.sidebar{
display: none;
box-shadow: none;
.sidebar-wrapper{
padding-bottom: 60px;
}
.nav-mobile-menu{
margin-top: 0;
.notification{
float: left;
line-height: 30px;
margin-right: 8px;
}
.open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
}
.main-panel{
width: 100%;
}
.navbar-transparent{
padding-top: 15px;
background-color: rgba(0, 0, 0, 0.45);
}
body {
position: relative;
}
.nav-open{
.main-panel,
.wrapper-full-page,
.navbar .container .navbar-toggler,
.navbar .container .navbar-wrapper,
.navbar .container{
left: 0;
@include transform-translate-x(-260px);
}
.sidebar{
@include shadow-big();
}
.off-canvas-sidebar .navbar-collapse,
.sidebar{
@include transform-translate-x(0);
}
}
.wrapper-full-page,
.navbar .container .navbar-toggler,
.navbar .container .navbar-wrapper,
.navbar .container{
@include transform-translate-x(0px);
@include transitions (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
left: 0;
}
.off-canvas-sidebar .navbar .container{
transform: none;
}
.main-panel,
.navbar-collapse{
@include transitions (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
}
.navbar .navbar-collapse.collapse,
.navbar .navbar-collapse.collapse.in,
.navbar .navbar-collapse.collapsing{
display: none !important;
}
.off-canvas-sidebar .navbar .navbar-collapse.collapse,
.off-canvas-sidebar .navbar .navbar-collapse.collapse.in,
.off-canvas-sidebar .navbar .navbar-collapse.collapsing{
display: block !important;
}
.navbar-nav > li{
float: none;
position: relative;
display: block;
}
.off-canvas-sidebar nav .navbar-collapse{
margin: 0;
> ul {
margin-top: 19px;
}
}
.sidebar,
.off-canvas-sidebar nav .navbar-collapse{
position: fixed;
display: block;
top: 0;
height: 100vh;
width: 260px;
right: 0;
left: auto;
z-index: 1032;
visibility: visible;
background-color: #9A9A9A;
overflow-y: visible;
border-top: none;
text-align: left;
padding-right: 0px;
padding-left: 0;
@include transform-translate-x(260px);
@include transitions (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
> ul {
position: relative;
z-index: 4;
width: 100%;
}
&::before{
top: 0;
left: 0;
height: 100%;
width: 100%;
position: absolute;
background-color: #282828;
display: block;
content: "";
z-index: 1;
}
.logo{
position: relative;
z-index: 4;
}
.navbar-form{
margin: 10px 0px;
float: none !important;
padding-top: 1px;
padding-bottom: 1px;
position: relative;
}
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
}
}
.form-group{
&.form-search{
.form-control{
font-size: 1.7em;
height: 37px;
width: 78%;
}
}
}
.navbar-form{
.btn{
position: absolute;
top: -5px;
right: -50px;
}
}
.close-layer{
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
top: 0;
left: auto;
background: rgba(0, 0, 0, 0.35);
content: "";
z-index: 9999;
overflow-x: hidden;
@include transitions($slow-transition-time, $transition-ease-in);
&.visible{
opacity: 1;
}
}
.navbar-toggler .icon-bar {
display: block;
position: relative;
background: #555 !important;
width: 24px;
height: 2px;
border-radius: 1px;
margin: 0 auto;
}
.navbar-header .navbar-toggler {
padding: 15px;
margin-top: 4px;
width: 40px;
height: 40px;
}
.bar1,
.bar2,
.bar3 {
outline: 1px solid transparent;
}
@include topbar-x-rotation();
@include topbar-back-rotation();
@include bottombar-x-rotation();
@include bottombar-back-rotation();
.navbar-toggler{
.icon-bar:nth-child(2){
top: 0px;
@include bar-animation($topbar-back);
}
.icon-bar:nth-child(3){
opacity: 1;
}
.icon-bar:nth-child(4){
bottom: 0px;
@include bar-animation($bottombar-back);
}
&.toggled{
.icon-bar:nth-child(2){
top: 6px;
@include bar-animation($topbar-x);
}
.icon-bar:nth-child(3){
opacity: 0;
}
.icon-bar:nth-child(4){
bottom: 6px;
@include bar-animation($bottombar-x);
}
}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.dropdown-menu .divider{
background-color: rgba(229, 229, 229, 0.15);
}
.navbar-nav {
margin: 1px 0;
.open .dropdown-menu > li {
& > a{
padding: 15px 15px 5px 50px;
}
&:first-child > a{
padding: 5px 15px 5px 50px;
}
&:last-child > a {
padding: 15px 15px 25px 50px;
}
}
}
[class*="navbar-"] .navbar-nav {
& > li > a,
> li > a:hover,
> li > a:focus,
.active > a,
.active > a:hover,
.active > a:focus,
.open .dropdown-menu > li > a,
.open .dropdown-menu > li > a:hover,
.open .dropdown-menu > li > a:focus,
.navbar-nav .open .dropdown-menu > li > a:active {
color: white;
}
& > li > a,
> li > a:hover,
> li > a:focus,
.open .dropdown-menu > li > a,
.open .dropdown-menu > li > a:hover,
.open .dropdown-menu > li > a:focus{
opacity: .7;
background: transparent;
}
&.navbar-nav .open .dropdown-menu > li > a:active {
opacity: 1;
}
& .dropdown > a{
&:hover .caret {
border-bottom-color: #777;
border-top-color: #777;
}
&:active .caret {
border-bottom-color: white;
border-top-color: white;
}
}
}
.dropdown-menu {
display: none;
}
.navbar-fixed-top {
-webkit-backface-visibility: hidden;
}
#bodyClick {
height: 100%;
width: 100%;
position: fixed;
opacity: 0;
top: 0;
left: auto;
right: 260px;
content: "";
z-index: 9999;
overflow-x: hidden;
}
.social-line .btn{
margin: $margin-bottom;
}
.subscribe-line .form-control{
margin: $margin-bottom;
}
.social-line.pull-right{
float: none;
}
.footer:not(.footer-big) nav > ul li{
float: none;
}
.social-area.pull-right{
float: none !important;
}
.form-control + .form-control-feedback{
margin-top: -8px;
}
.navbar-toggle:hover,.navbar-toggle:focus {
background-color: transparent !important;
}
.media-post .author{
width: 20%;
float: none !important;
display: block;
margin: 0 auto 10px;
}
.media-post .media-body{
width: 100%;
}
.navbar-collapse.collapse{
height: 100% !important;
}
.navbar-collapse.collapse.in {
display: block;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
.navbar-collapse{
.nav p{
font-size: $font-size-base;
margin: 0;
}
}
}
@media (min-width: 992px) {
.main-panel {
.navbar .navbar-collapse {
.navbar-nav .nav-item .nav-link p {
display: none;
}
}
}
.nav-mobile-menu,
.sidebar .navbar-form{
display: none !important;
}
}

41
dmp-frontend/src/assets/scss/core/_ripples.scss Normal file
View File

@ -0,0 +1,41 @@
// marker class (used as a selector for one-off elements to decorate)
.ripple {
position: relative;
}
.ripple-container {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
border-radius: inherit;
.ripple-decorator {
position: absolute;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
pointer-events: none;
background-color: rgba($black, 0.05);
border-radius: 100%;
opacity: 0;
transform: scale(1);
transform-origin: 50%;
&.ripple-on {
opacity: 0.1;
transition: opacity 0.15s ease-in 0s,
transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
&.ripple-out {
opacity: 0;
transition: opacity 0.1s linear 0s !important;
}
}
}

503
dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss Normal file
View File

@ -0,0 +1,503 @@
.wrapper{
position: relative;
top: 0;
height: 100vh;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 2;
width: 260px;
background: $white-color;
@include shadow-big();
.caret{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid\9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
&[data-background-color="black"]{
background-color: #191919;
}
.logo-img{
width: 35px;
display: block;
max-height: 30px;
margin-left: 13px;
margin-right: 15px;
img{
width: 35px;
top: 16px;
position: absolute;
}
}
.sidebar-wrapper{
position: relative;
height: calc(100vh - 75px);
overflow: auto;
width: 260px;
z-index: 4;
padding-bottom: 30px;
.dropdown .dropdown-backdrop{
display: none !important;
}
.navbar-form{
border: none;
box-shadow: none;
.input-group {
font-size: 1.7em;
height: 36px;
width: 78%;
padding-left: 17px;
}
}
> .nav,
.user .user-info{
[data-toggle="collapse"] ~ div > ul > li > a{
span{
display: inline-block;
@extend .animation-transition-general;
}
.sidebar-normal{
margin: 0;
position: relative;
transform: translateX(0px);
opacity: 1;
white-space: nowrap;
display: block;
}
.sidebar-mini{
text-transform: uppercase;
width: 30px;
margin-right: 15px;
text-align: center;
letter-spacing: 1px;
position: relative;
float: left;
display: inherit;
}
i{
font-size: 17px;
line-height: 20px;
width: 26px;
}
}
}
}
.logo-tim{
border-radius: 50%;
border: 1px solid #333;
display: block;
height: 61px;
width: 61px;
float: left;
overflow: hidden;
img{
width: 60px;
height: 60px;
}
}
.nav{
margin-top: 20px;
display: block;
.caret{
margin-top: 13px;
position: absolute;
right: 6px;
}
li{
> a{
&:hover,
&:focus{
background-color: transparent;
outline: none;
}
}
&:first-child > a{
margin: 0 15px;
}
&:hover > a,
& .dropdown-menu a:hover,
& .dropdown-menu a:focus,
&.active > [data-toggle="collapse"]{
background-color: rgba(200, 200, 200, 0.2);
color: $black-color;
box-shadow: none;
}
&.active > [data-toggle="collapse"]{
i{
color: #a9afbb;
}
}
&.active > a,
&.active > a i{
color: $white-color;
}
&.separator{
margin: 15px 0;
&:after{
width: calc(100% - 30px);
content: "";
position: absolute;
height: 1px;
left: 15px;
background-color: rgba(180,180,180, .3);
}
& + li {
margin-top: 31px;
}
}
}
p{
margin: 0;
line-height: 30px;
font-size: 14px;
position: relative;
display: block;
height: auto;
white-space: nowrap;
}
i{
font-size: 24px;
float: left;
margin-right: 15px;
line-height: 30px;
width: 30px;
text-align: center;
color: #a9afbb;
}
}
.nav li a,
.nav li .dropdown-menu a{
margin: 10px 15px 0;
border-radius: $border-radius-base;
color: $black-color;
padding-left: 10px;
padding-right: 10px;
text-transform: capitalize;
font-size: $font-paragraph - 1;
padding: 10px 15px;
}
.sidebar-background{
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
display: block;
top: 0;
left: 0;
background-size: cover;
background-position: center center;
&:after{
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
content: "";
display: block;
background: #FFFFFF;
opacity: .93;
}
}
.logo{
padding: 15px 0px;
margin: 0;
display: block;
position: relative;
z-index: 4;
&:after{
content: '';
position: absolute;
bottom: 0;
right: 15px;
height: 1px;
width: calc(100% - 30px);
background-color: rgba(180,180,180, .3);
}
p{
float: left;
font-size: 20px;
margin: 10px 10px;
color: $white-color;
line-height: 20px;
}
.simple-text{
text-transform: uppercase;
padding: $padding-small-vertical $padding-zero;
display: inline-block;
font-size: 18px;
color: $black-color;
white-space: nowrap;
font-weight: $font-weight-default;
line-height: 30px;
overflow: hidden;
text-align: center;
display: block;
}
}
.logo-tim{
border-radius: 50%;
border: 1px solid #333;
display: block;
height: 61px;
width: 61px;
float: left;
overflow: hidden;
img{
width: 60px;
height: 60px;
}
}
&[data-background-color="black"]{
@include sidebar-background-color($gray-base, $white-color);
.nav li .dropdown-menu .dropdown-item{
color: $white-color;
}
}
&[data-color="purple"]{
@include set-background-color-button($brand-primary);
}
&[data-color="azure"]{
@include set-background-color-button($brand-info);
}
&[data-color="green"]{
@include set-background-color-button($brand-success);
}
&[data-color="orange"]{
@include set-background-color-button($brand-warning);
}
&[data-color="danger"]{
@include set-background-color-button($brand-danger);
}
&[data-color="rose"]{
@include set-background-color-button($brand-rose);
}
&[data-color="white"]{
@include set-background-color-button($white-color);
@include sidebar-active-color($black-color);
}
&[data-background-color="red"]{
@include sidebar-background-color($brand-danger, $white-color);
.user,
.logo,
.nav li.separator{
&:after{
background-color: rgba(255,255,255, .3);
}
}
.nav{
li:hover:not(.active) > a,
li.active > [data-toggle="collapse"]{
background-color: rgba(255, 255, 255, 0.1);
}
}
}
&[data-image]:after,
&.has-image:after{
opacity: .77;
}
}
.off-canvas-sidebar .navbar-collapse{
.nav {
> li > a,
> li > a:hover{
color: $white-color;
margin: 0 15px;
}
> li > a:focus,
> li > a:hover{
background: rgba(200, 200, 200, 0.2);
}
}
}
.main-panel{
position: relative;
float: right;
width: $sidebar-width;
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
.main-content{
margin-top: 70px;
padding: 30px 15px;
min-height: calc(100vh - 123px);
}
.footer{
border-top: 1px solid #e7e7e7;
}
.navbar{
margin-bottom: 0;
}
.header{
margin-bottom: 30px;
.title{
margin-top: 10px;
margin-bottom: 10px;
}
}
}
.perfect-scrollbar-on{
.sidebar,
.main-panel{
height: 100%;
max-height: 100%;
}
}
.sidebar,
.main-panel,
.sidebar-wrapper{
-webkit-transition-property: top,bottom,width;
transition-property: top,bottom, width;
-webkit-transition-duration: .2s,.2s, .35s;
transition-duration: .2s,.2s, .35s;
-webkit-transition-timing-function: linear,linear,ease;
transition-timing-function: linear,linear,ease;
-webkit-overflow-scrolling: touch;
}
.visible-on-sidebar-regular{
display: inline-block !important;
}
.visible-on-sidebar-mini{
display: none !important;
}
@media (min-width: 991px) {
.sidebar-mini{
.visible-on-sidebar-regular{
display: none !important;
}
.visible-on-sidebar-mini{
display: inline-block !important;
}
.sidebar,
.sidebar .sidebar-wrapper{
width: 80px;
}
.main-panel{
width: $sidebar-mini-width;
}
.sidebar{
display: block;
font-weight: 200;
z-index: 9999;
.logo{
a.logo-normal{
opacity: 0;
@include transform-translate-x(-25px);
}
}
.sidebar-wrapper{
> .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
.user .user-info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
.user .user-info > a > span,
> .nav li > a p{
@include transform-translate-x(-25px);
opacity: 0;
}
}
}
.sidebar:hover{
width: 260px;
.logo{
a.logo-normal{
opacity: 1;
@include transform-translate-x(0px);
}
}
.sidebar-wrapper{
width: 260px;
> .nav li > a p,
> .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
.user .user-info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
.user .user-info > a > span{
@include transform-translate-x(0px);
opacity: 1;
}
}
}
}
.sidebar {
.nav .nav-item {
&.active-pro {
position: absolute;
width: 100%;
bottom: 13px;
}
}
}
}

185
dmp-frontend/src/assets/scss/core/_tables.scss Normal file
View File

@ -0,0 +1,185 @@
.table{
> thead > tr > th{
border-bottom-width: 1px;
font-size: $font-size-h5;
font-weight: $font-weight-light;
}
.form-check{
margin-top: 0;
.form-check-sign{
top: -13px;
left: 0;
padding-right: 0;
}
}
.radio,
.checkbox{
margin-top: 0;
margin-bottom: 0;
padding: 0;
width: 15px;
.icons{
position: relative;
}
}
> thead > tr > th,
> tbody > tr > th,
> tfoot > tr > th,
> thead > tr > td,
> tbody > tr > td,
> tfoot > tr > td{
padding: 12px 8px;
vertical-align: middle;
}
thead{
tr{
th{
font-size: 1.063rem;
}
}
}
.th-description{
max-width: 150px;
}
.td-price{
font-size: 26px;
font-weight: $font-weight-light;
margin-top: 5px;
text-align: right;
}
.td-total{
font-weight: $font-weight-bold;
font-size: $font-size-h5;
padding-top: 20px;
text-align: right;
}
.td-actions .btn{
margin: 0px;
padding: 5px;
}
> tbody > tr{
position: relative;
}
}
.table-shopping{
> thead > tr > th{
font-size: $font-size-h6;
text-transform: uppercase;
}
> tbody > tr > td{
font-size: $font-paragraph;
b{
display: block;
margin-bottom: 5px;
}
}
.td-name{
font-weight: $font-weight-default;
font-size: 1.5em;
line-height: 1.42857143;
small{
color: $gray-light;
font-size: 0.75em;
font-weight: $font-weight-light;
}
}
.td-number{
font-weight: $font-weight-light;
font-size: $font-size-h4;
}
.td-name{
min-width: 200px;
}
.td-number{
text-align: right;
min-width: 150px;
small{
margin-right: 3px;
}
}
.img-container{
width: 120px;
max-height: 160px;
overflow: hidden;
display: block;
img{
width: 100%;
}
}
}
// BS4 has not yet converted the following to variables - keep an eye on it and move to variables when possible.
.thead-inverse {
th {
//color: $bmd-inverse; // #fff;
//background-color: $gray-dark;
}
}
.thead-default {
th {
//color: $gray;
//background-color: $bmd-inverse-lighter; //$gray-lighter;
}
}
.table-inverse {
color: $bmd-inverse-light; //$gray-lighter;
//background-color: $gray-dark;
//th,
//td,
//thead th {
// border-color: $gray;
//}
}
.table {
thead th {
font-size: $bmd-table-header-font-size;
font-weight: 500;
border-top-width: 0;
border-bottom-width: $table-border-width;
}
}
thead.thead-inverse,
// needs specificity
.table-inverse thead {
th {
color: $bmd-inverse-lighter;
}
}
.table-inverse {
th,
td,
thead th {
border-color: $bmd-table-border-color-inverse;
}
}
.table-striped>tbody>tr:nth-of-type(odd){
background-color: #f9f9f9;
}
.table.table-hover tbody tr:hover{
background-color: #f5f5f5;
}

83
dmp-frontend/src/assets/scss/core/_tabs.scss Normal file
View File

@ -0,0 +1,83 @@
.nav-tabs {
border: 0;
border-radius: $border-radius-base;
padding: 0 15px;
.nav-item {
.nav-link {
color: $white-color;
border: 0;
margin: 0;
border-radius: $border-radius-base;
line-height: $mdb-btn-font-size-base * 2;
text-transform: uppercase;
font-size: $mdb-btn-font-size-base;
padding: 10px 15px;
background-color: transparent;
transition: 0.3s background-color 0s;
&:hover {
border: 0;
}
}
.nav-link,
.nav-link:hover,
.nav-link:focus {
border: 0 !important;
color: $white-color !important;
font-weight: $font-weight-bold;
}
&.disabled .nav-link,
&.disabled .nav-link:hover {
color: rgba(255,255,255,0.5);
}
.material-icons{
margin: -1px 5px 0 0;
}
.nav-link.active{
background-color: rgba(255,255,255, .2);
transition: 0.3s background-color 0.2s;
}
}
}
.nav-tabs {
.nav-link {
border-bottom: $bmd-nav-tabs-border-size solid transparent;
}
// colors
@include bmd-tabs-color($bmd-nav-tabs-color, $bmd-nav-tabs-active-color, $bmd-nav-tabs-active-border-color, $bmd-nav-tabs-disabled-link-color, $bmd-nav-tabs-disabled-link-color-hover);
&.header-primary {
@include bmd-tabs-color($bmd-nav-tabs-primary-color, $bmd-nav-tabs-primary-active-color, $bmd-nav-tabs-primary-active-border-color, $bmd-nav-tabs-primary-disabled-link-color, $bmd-nav-tabs-primary-disabled-link-color-hover);
}
&.bg-inverse {
@include bmd-tabs-color($bmd-nav-tabs-inverse-color, $bmd-nav-tabs-inverse-active-color, $bmd-nav-tabs-inverse-active-border-color, $bmd-nav-tabs-inverse-disabled-link-color, $bmd-nav-tabs-inverse-disabled-link-color-hover);
}
}
.card-nav-tabs{
margin-top: 45px;
.card-header{
margin-top: -30px !important;
}
}
.tab-content .tab-pane .td-actions{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.card .tab-content .form-check{
margin-top: 6px;
}

85
dmp-frontend/src/assets/scss/core/_togglebutton.scss Normal file
View File

@ -0,0 +1,85 @@
.togglebutton {
vertical-align: middle;
&, label, input, .toggle {
user-select: none;
}
label {
cursor: pointer;
color: $mdb-toggle-label-color;
@include mdb-label-color-toggle-focus();
// Hide original checkbox
input[type=checkbox] {
opacity: 0;
width: 0;
height: 0;
}
.toggle {
text-align: left; // Issue #737 horizontal form
margin-left: 5px;
}
// Switch bg off and disabled
.toggle,
input[type=checkbox][disabled] + .toggle {
content: "";
display: inline-block;
width: 30px;
height: 15px;
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
margin-right: 15px;
transition: background 0.3s ease;
vertical-align: middle;
}
// Handle off
.toggle:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #FFFFFF;
border-radius: 20px;
position: relative;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
left: -5px;
top: -2.5px;
border: 1px solid $mdb-checkbox-border-color;
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
}
input[type=checkbox] {
// Handle disabled
&[disabled] {
& + .toggle:after,
&:checked + .toggle:after {
background-color: #BDBDBD;
}
}
& + .toggle:active:after,
&[disabled] + .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
}
// Ripple off and disabled
&:checked + .toggle:after {
left: 15px;
}
}
// set bg when checked
input[type=checkbox]:checked {
+ .toggle {
background-color: rgba($brand-primary, (70/100)); // Switch bg on
}
+ .toggle:after {
border-color: $brand-primary; // Handle on
}
+ .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
}
}
}
}

53
dmp-frontend/src/assets/scss/core/_tooltip.scss Normal file
View File

@ -0,0 +1,53 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.tooltip-inner, .mat-tooltip {
color: $gray !important;
line-height: 1.5em;
background: $white-color;
border: none;
border-radius: $border-radius-base !important;
@include shadow-8dp();
}
.tooltip, .tooltip.in {
//opacity: 1;
}
.tooltip.in{
opacity: 1;
@include transform-translate-y(0px);
}
.tooltip{
opacity: 0;
transition: opacity, transform .2s ease;
@include transform-translate-y(5px);
&.left{
.tooltip-arrow{
border-left-color: $white-color;
}
}
&.right{
.tooltip-arrow{
border-right-color: $white-color;
}
}
&.top{
.tooltip-arrow{
border-top-color: $white-color;
}
}
&.bottom{
.tooltip-arrow{
border-bottom-color: $white-color;
}
}
}
.tooltip-inner, .mat-tooltip{
padding: 10px 15px;
min-width: 130px;
}
.mat-tooltip{
text-align: center;
}

92
dmp-frontend/src/assets/scss/core/_type.scss Normal file
View File

@ -0,0 +1,92 @@
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
font-family: $font-family-sans-serif;
font-weight: 300;
line-height: 1.5em;
}
h1, .h1 {
font-size: $font-size-h1;
line-height: 1.15em;
}
h2, .h2{
font-size: $font-size-h2;
}
h3, .h3{
font-size: $font-size-h3;
line-height: 1.4em;
margin: 20px 0 10px;
}
h4, .h4{
font-size: $font-size-h4;
line-height: 1.4em;
font-weight: 300;
}
h5, .h5 {
font-size: $font-size-h5;
line-height: 1.4em;
margin-bottom: 15px;
}
h6, .h6{
font-size: $font-size-h6;
text-transform: uppercase;
font-weight: $font-weight-bold;
}
.title,
.card-title,
.info-title,
.footer-brand,
.footer-big h5,
.footer-big h4,
.media .media-heading{
//font-weight: $font-weight-extra-bold;
// font-family: $font-family-serif;
&,
a{
color: $black-color;
text-decoration: none;
}
}
.card-blog .card-title{
font-weight: $font-weight-extra-bold;
}
h2.title{
margin-bottom: $margin-base * 2;
}
.description,
.card-description,
.footer-big p{
color: $gray-light;
}
.text-warning {
color: $brand-warning !important;
}
.text-primary {
color: $brand-primary !important;
}
.text-danger {
color: $brand-danger !important;
}
.text-success {
color: $brand-success !important;
}
.text-info {
color: $brand-info !important;
}
.text-rose{
color: $brand-rose !important;
}
.text-gray{
color: $gray-color !important;
}

35
dmp-frontend/src/assets/scss/core/_variables.scss Normal file
View File

@ -0,0 +1,35 @@
@import "variables/colors";
@import "variables/shadow";
@import "variables/bootstrap-material-design-base";
// Customized BS variables
@import "variables/custom-forms";
@import "variables/spacing";
@import "variables/body";
@import "variables/brand";
@import "variables/buttons";
@import "variables/card";
@import "variables/code";
@import "variables/dropdown";
@import "variables/forms";
@import "variables/list-group";
@import "variables/nav";
@import "variables/pagination";
@import "variables/state";
@import "variables/tables";
@import "variables/tooltip";
@import "variables/type";
@import "variables/modals";
// import their vars after customization for use below
$enable-flex: true; // fully adopt flexbox layouts
$enable-shadows: true; // enable shadows, set to false to turn off shadows
@import "variables/layout";
@import "variables/menu";
@import "variables/drawer";
@import "variables/snackbar";
@import "variables/bootstrap-material-design";

28
dmp-frontend/src/assets/scss/core/cards/_card-plain.scss Normal file
View File

@ -0,0 +1,28 @@
.card-plain {
background: transparent;
box-shadow: none;
.card-header:not(.card-avatar) {
margin-left: 0;
margin-right: 0;
}
.card-body {
padding-left: 5px;
padding-right: 5px;
}
.card-header-image {
margin: 0 !important;
border-radius: $border-radius-large;
img {
border-radius: $border-radius-large;
}
}
.card-footer {
padding-left: 5px;
padding-right: 5px;
background-color: transparent;
}
}

48
dmp-frontend/src/assets/scss/core/cards/_card-profile.scss Normal file
View File

@ -0,0 +1,48 @@
.card-profile{
margin-top: 30px;
text-align: center;
.card-avatar {
margin: -50px auto 0;
border-radius: 50%;
overflow: hidden;
padding: 0;
@include shadow-big();
& + .card-body {
margin-top: 15px;
}
img {
width: 100%;
height: auto;
}
}
.card-body + .card-footer {
margin-top: -15px;
}
.card-footer {
.btn.btn-just-icon {
font-size: 20px;
padding: 12px 12px;
line-height: 1em;
}
}
&.card-plain {
.card-avatar {
margin-top: 0;
}
}
.card-header:not([class*="card-header-"]){
background: transparent;
}
.card-avatar {
max-width: 130px;
max-height: 130px;
}
}

46
dmp-frontend/src/assets/scss/core/cards/_card-stats.scss Normal file
View File

@ -0,0 +1,46 @@
.card-stats{
.card-header{
&.card-header-icon,
&.card-header-text{
text-align: right;
}
.card-icon + .card-title,
.card-icon + .card-category{
padding-top: 10px;
}
&.card-header-icon .card-title,
&.card-header-text .card-title,
&.card-header-icon .card-category,
&.card-header-text .card-category {
margin: 0;
}
.card-category {
margin-bottom: 0;
margin-top: 0;
&:not([class*="text-"]){
color: $gray-color;
font-size: $font-paragraph;
}
}
& + .card-footer{
border-top: 1px solid #eee;
margin-top: 14px;
}
&.card-header-icon i {
font-size: 36px;
line-height: 56px;
width: 56px;
height: 56px;
text-align: center;
}
}
.card-body {
text-align: right;
}
}

130
dmp-frontend/src/assets/scss/core/mixins/_alert.scss Normal file
View File

@ -0,0 +1,130 @@
// alert-variations("", $brand-primary)
@mixin alert-variations($component, $selector-suffix, $brand-default) {
@include generic-variations($component, $selector-suffix, $brand-default, "alert-variations-content", null);
}
@mixin alert-variations-content($args){
$variation-color: map-get($args, variation-color);
$variation-color-text: map-get($args, variation-color-text);
background-color: lighten($variation-color,3%);
color: $variation-color-text;
a, .alert-link {
color: $variation-color-text;
}
}
// interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given
@mixin call-variations-content-mixin($args) {
$mixin-name: map-get($args, mixin-name);
@if $mixin-name == variations-content {
@include variations-content($args);
} @else if $mixin-name == background-variations-content {
@include background-variations-content($args);
} @else if $mixin-name == text-variations-content {
@include text-variations-content($args);
} @else if $mixin-name == button-variations-content {
@include button-variations-content($args);
} @else if $mixin-name == bg-color-variations-content {
@include bg-color-variations-content($args);
} @else if $mixin-name == bg-box-shadow-variations-content {
@include bg-box-shadow-variations-content($args);
} @else if $mixin-name == bg-img-variations-content {
@include bg-img-variations-content($args);
} @else if $mixin-name == navbar-variations-content {
@include navbar-variations-content($args);
}@else if $mixin-name == alert-variations-content {
@include alert-variations-content($args);
} @else {
@error "Unknown mixin: #{$mixin-name}"
}
}
//
// To use this mixin you should pass a function as final parameter to define
// the style. In that definition you can use the following variables to define it.
//
// $variation-color-name ---> "red", "green", "indigo" ...
// $variation-color-full-name ---> "red", "green-50", "indigo-400" ...
// $variation-color ---> #f44336, #e8f5e9, #5c6bc0 ...
// $variation-color-text ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
//
@mixin generic-variations($component, $selector-suffix, $color-default, $mixin-name, $mdb-param-1) {
//setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include)
$args: (
//extra: $selector-suffix,
//default: $color-default,
mixin-name: $mixin-name,
material-param-1: $mdb-param-1
);
// bootstrap styles
&#{$selector-suffix},
&#{$component}-default#{$selector-suffix} {
$args-extra: map-merge($args, (
variation-color: $white-color,
variation-color-text: $gray
));
@include call-variations-content-mixin($args-extra);
}
&#{$component}-inverse#{$selector-suffix} {
$args-inverse: map-merge($args, (
variation-color: #212121,
variation-color-text: #fff
));
@include call-variations-content-mixin($args-inverse);
}
&#{$component}-primary#{$selector-suffix} {
$args-primary: map-merge($args, (
variation-color: $brand-primary,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-primary);
}
&#{$component}-success#{$selector-suffix} {
$args-success: map-merge($args, (
variation-color: $brand-success,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-success);
}
&#{$component}-info#{$selector-suffix} {
$args-info: map-merge($args, (
variation-color: $brand-info,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-info);
}
&#{$component}-warning#{$selector-suffix} {
$args-warning: map-merge($args, (
variation-color: $brand-warning,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-warning);
}
&#{$component}-danger#{$selector-suffix} {
$args-danger: map-merge($args, (
variation-color: $brand-danger,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-danger);
}
&#{$component}-rose#{$selector-suffix} {
$args-rose: map-merge($args, (
variation-color: $brand-rose,
variation-color-text: $mdb-text-color-light
));
@include call-variations-content-mixin($args-rose);
}
}
@mixin alert-icon-color($color) {
i{
color: $color;
}
}

109
dmp-frontend/src/assets/scss/core/mixins/_animations.scss Normal file
View File

@ -0,0 +1,109 @@
// Animations (from mdl http://www.getmdl.io/)
@mixin material-animation-fast-out-slow-in($duration:0.2s) {
transition-duration: $duration;
transition-timing-function: $bmd-animation-curve-fast-out-slow-in;
}
@mixin material-animation-linear-out-slow-in($duration:0.2s) {
transition-duration: $duration;
transition-timing-function: $bmd-animation-curve-linear-out-slow-in;
}
@mixin material-animation-fast-out-linear-in($duration:0.2s) {
transition-duration: $duration;
transition-timing-function: $bmd-animation-curve-fast-out-linear-in;
}
@mixin material-animation-default($duration:0.2s) {
transition-duration: $duration;
transition-timing-function: $bmd-animation-curve-default;
}
@mixin rotate-180() {
-webkit-transform: rotate( 180deg );
-moz-transform: rotate( 180deg );
-o-transform: rotate( 180deg );
-ms-transform: rotate(180deg);
transform: rotate( 180deg );
}
@mixin transform-scale($value){
-webkit-transform: scale($value);
-moz-transform: scale($value);
-o-transform: scale($value);
-ms-transform: scale($value);
transform: scale($value);
}
@mixin rotateY-180() {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
-ms-transform: rotateY(180deg);
transform: rotateY( 180deg );
}
@mixin transitions($time, $type){
-webkit-transition: all $time $type;
-moz-transition: all $time $type;
-o-transition: all $time $type;
-ms-transition: all $time $type;
transition: all $time $type;
}
@mixin transitions-property($property, $time, $type){
-webkit-transition: $property $time $type;
-moz-transition: $property $time $type;
-o-transition: $property $time $type;
-ms-transition: $property $time $type;
transition: $property $time $type;
}
@mixin transform-translate-x($value){
-webkit-transform: translate3d($value, 0, 0);
-moz-transform: translate3d($value, 0, 0);
-o-transform: translate3d($value, 0, 0);
-ms-transform: translate3d($value, 0, 0);
transform: translate3d($value, 0, 0);
}
@mixin transform-translate-y($value){
-webkit-transform: translate3d(0,$value, 0);
-moz-transform: translate3d(0, $value, 0);
-o-transform: translate3d(0, $value, 0);
-ms-transform: translate3d(0, $value, 0);
transform: translate3d(0, $value, 0);
}
@mixin perspective($value){
-webkit-perspective: $value;
-moz-perspective: $value;
-o-perspective: $value;
-ms-perspective: $value;
perspective: $value;
}
@mixin transform-style($type){
-webkit-transform-style: $type;
-moz-transform-style: $type;
-o-transform-style: $type;
-ms-transform-style: $type;
transform-style: $type;
}
@mixin backface-visibility($type){
-webkit-backface-visibility: $type;
-moz-backface-visibility: $type;
-o-backface-visibility: $type;
-ms-backface-visibility: $type;
backface-visibility: $type;
}
@mixin transform-translate-y-dropdown($value){
-webkit-transform: translate3d(0, $value, 0) !important;
-moz-transform: translate3d(0, $value, 0) !important;
-o-transform: translate3d(0, $value, 0) !important;
-ms-transform: translate3d(0, $value, 0) !important;
transform: translate3d(0, $value, 0) !important;
}

34
dmp-frontend/src/assets/scss/core/mixins/_breakpoints.scss Normal file
View File

@ -0,0 +1,34 @@
// case where behavior is responsive, or with a marker class
@mixin media-breakpoint-down-or($breakpoint, $name) {
#{unquote($name)} {
@content;
}
@include media-breakpoint-down($breakpoint) {
@content;
}
}
// case where behavior is responsive, or with a marker class
@mixin media-breakpoint-up-or($breakpoint, $name) {
#{unquote($name)} {
@content;
}
@include media-breakpoint-up($breakpoint) {
@content;
}
}
// Name of the previous breakpoint, or null
//
// >> breakpoint-next(sm)
// xs
// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
// xs
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
// xs
@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@return if($n > 1, nth($breakpoint-names, $n - 1), null);
}

385
dmp-frontend/src/assets/scss/core/mixins/_buttons.scss Normal file
View File

@ -0,0 +1,385 @@
// from bs mixins/buttons button-variant
@mixin bmd-button-variant($color, $background, $focus-background, $active-background, $border, $focus-border, $active-border) {
color: $color;
background-color: $background;
border-color: $border;
@include hover {
color: $color;
background-color: $focus-background;
border-color: $focus-border;
}
&:focus,
&.focus,
&:hover{
color: $color;
background-color: $focus-background;
border-color: $focus-border;
}
&:active,
&.active,
.open > &.dropdown-toggle,
.show > &.dropdown-toggle {
color: $color;
background-color: $focus-background;
border-color: $focus-border;
@include shadow-2dp-color($background);
&:hover,
&:focus,
&.focus {
color: $color;
background-color: $active-background;
border-color: $active-border;
}
}
// when it is an icon, kill the active bg on open dropdown, but stabilize on hover
.open > &.dropdown-toggle.bmd-btn-icon {
color: inherit;
background-color: $background;
// leave hover on with the lighter focus color
&:hover {
background-color: $focus-background;
}
}
&.disabled,
&:disabled {
&:focus,
&.focus {
background-color: $background;
border-color: $border;
}
@include hover {
background-color: $background;
border-color: $border;
}
}
}
@mixin bmd-flat-button-variant(
$color,
$border: $bmd-btn-border,
$focus-border: $bmd-btn-focus-bg,
$active-border: $bmd-btn-active-bg
) {
$background: $bmd-btn-bg;
$focus-background: $bmd-btn-focus-bg;
$active-background: $bmd-btn-active-bg;
@include bmd-button-variant($color,
$background,
$focus-background,
$active-background,
$border,
$focus-border,
$active-border);
// inverse color scheme
.bg-inverse & {
$focus-background: $bmd-inverse-btn-focus-bg;
$focus-border: $bmd-inverse-btn-focus-bg;
$active-background: $bmd-inverse-btn-active-bg;
$active-border: $bmd-inverse-btn-active-bg;
@include bmd-button-variant($color,
$background,
$focus-background,
$active-background,
$border,
$focus-border,
$active-border);
}
// reverse the above for links
&.btn-link {
background-color: transparent;
}
}
@mixin bmd-flat-button-color() {
@include bmd-flat-button-variant($bmd-btn-color);
// flat bg with text color variations
&.btn-primary {
@include bmd-flat-button-variant($btn-primary-bg);
}
&.btn-secondary {
@include bmd-flat-button-variant($btn-secondary-color);
}
&.btn-info {
@include bmd-flat-button-variant($btn-info-bg);
}
&.btn-success {
@include bmd-flat-button-variant($btn-success-bg);
}
&.btn-warning {
@include bmd-flat-button-variant($btn-warning-bg);
}
&.btn-danger {
@include bmd-flat-button-variant($btn-danger-bg);
}
}
@mixin bmd-outline-button-color() {
&.btn-outline,
&.btn-outline-primary,
&.btn-outline-secondary,
&.btn-outline-info,
&.btn-outline-success,
&.btn-outline-warning,
&.btn-outline-danger {
border-color: currentColor;
border-style: solid;
border-width: 1px;
}
// flat bg with text and border color variations
&.btn-outline {
@include bmd-flat-button-variant($bmd-btn-color, $bmd-btn-color, $bmd-btn-color, $bmd-btn-color);
}
&.btn-outline-primary {
@include bmd-flat-button-variant($btn-primary-bg, $btn-primary-bg, $btn-primary-bg, $btn-primary-bg);
}
&.btn-outline-secondary {
@include bmd-flat-button-variant($btn-secondary-color, $btn-secondary-color, $btn-secondary-color, $btn-secondary-color);
}
&.btn-outline-info {
@include bmd-flat-button-variant($btn-info-bg, $btn-info-bg, $btn-info-bg, $btn-info-bg);
}
&.btn-outline-success {
@include bmd-flat-button-variant($btn-success-bg, $btn-success-bg, $btn-success-bg, $btn-success-bg);
}
&.btn-outline-warning {
@include bmd-flat-button-variant($btn-warning-bg, $btn-warning-bg, $btn-warning-bg, $btn-warning-bg);
}
&.btn-outline-danger {
@include bmd-flat-button-variant($btn-danger-bg, $btn-danger-bg, $btn-danger-bg, $btn-danger-bg);
}
}
@mixin bmd-raised-button-variant($color, $background, $border) {
// FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only?
$focus-background: contrast-color(
$background,
darken($background, 3%),
lighten($background, 3%)
);
//$focus-background: darken($background, 10%); // default bootstrap
$focus-border: darken($border, 12%);
$active-background: $focus-background;
//$active-background: darken($background, 17%);
$active-border: darken($border, 25%);
@include bmd-button-variant($color,
$background,
$focus-background,
$active-background,
$border,
$focus-border,
$active-border);
@include shadow-2dp-color($background);
&:focus,
&:active,
&:hover{
// remove this line if you want black shadows
@include button-shadow-color($background);
}
&.btn-link{
background-color: transparent;
color: $background;
box-shadow: none;
&:hover,
&:focus,
&:active{
background-color: transparent;
color: $background;
}
}
}
@mixin bmd-raised-button-color() {
&.btn-primary {
@include bmd-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color);
}
&.btn-secondary {
@include bmd-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border-color);
}
&.btn-info {
@include bmd-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color);
}
&.btn-success {
@include bmd-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color);
}
&.btn-warning {
@include bmd-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color);
}
&.btn-danger {
@include bmd-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color);
}
&.btn-rose {
@include bmd-raised-button-variant($btn-rose-color, $btn-rose-bg, $btn-rose-border-color);
}
&,
&.btn-default{
@include bmd-raised-button-variant($btn-default-color, $btn-default-bg, $btn-default-border-color);
}
}
@mixin bmd-social-buttons(){
&.btn-facebook {
@include bmd-raised-button-variant($white, $social-facebook, $social-facebook);
}
&.btn-twitter {
@include bmd-raised-button-variant($white, $social-twitter, $social-twitter);
}
&.btn-pinterest {
@include bmd-raised-button-variant($white, $social-pinterest, $social-pinterest);
}
&.btn-google {
@include bmd-raised-button-variant($white, $social-google, $social-google);
}
&.btn-linkedin {
@include bmd-raised-button-variant($white, $social-linkedin, $social-linkedin);
}
&.btn-dribbble {
@include bmd-raised-button-variant($white, $social-dribbble, $social-dribbble);
}
&.btn-github {
@include bmd-raised-button-variant($white, $social-github, $social-github);
}
&.btn-youtube {
@include bmd-raised-button-variant($white, $social-youtube, $social-youtube);
}
&.btn-instagram {
@include bmd-raised-button-variant($white, $social-instagram, $social-instagram);
}
&.btn-reddit {
@include bmd-raised-button-variant($white, $social-reddit, $social-reddit);
}
&.btn-tumblr {
@include bmd-raised-button-variant($white, $social-tumblr, $social-tumblr);
}
&.btn-behance {
@include bmd-raised-button-variant($white, $social-behance, $social-behance);
}
}
@mixin undo-bs-tab-focus() {
// clear out the tab-focus() from BS
&,
&:active,
&.active {
&:focus,
&.focus {
//@include tab-focus();
outline: 0;
}
}
}
$opacity-gray-3: rgba(222,222,222, .3) !default;
$opacity-gray-5: rgba(222,222,222, .5) !default;
$opacity-gray-8: rgba(222,222,222, .8) !default;
$opacity-5: rgba(255,255,255, .5) !default;
$opacity-8: rgba(255,255,255, .8) !default;
$datepicker-color-days: rgba(255,255,255, .8) !default;
$datepicker-color-old-new-days: rgba(255,255,255, .4) !default;
$opacity-1: rgba(255,255,255, .1) !default;
$opacity-2: rgba(255,255,255, .2) !default;
@mixin shadow-big-dash(){
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity * 3),
0 4px 25px 0px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
}
@mixin shadow-big-navbar(){
box-shadow: 0 10px 20px -12px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity * 3),
0 3px 20px 0px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
0 8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
}
@mixin shadow-big-color($color){
// new box shadow optimized for Tablets and Phones
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14),
0 7px 10px -5px rgba($color, 0.4)
}
@mixin shadow-alert-color($color){
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
0 7px 10px -5px rgba($color, 0.4)
}
@mixin btn-styles($btn-color) {
// remove this line if you want black shadows
@include shadow-2dp-color($btn-color);
&,
&:hover,
&:focus,
&:active,
&.active,
&:active:focus,
&:active:hover,
&.active:focus,
&.active:hover,
.open > &.dropdown-toggle,
.open > &.dropdown-toggle:focus,
.open > &.dropdown-toggle:hover {
background-color: $btn-color;
color: $white-color;
}
&:focus,
&:active,
&:hover{
// remove this line if you want black shadows
@include button-shadow-color($btn-color);
}
&.disabled,
&:disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
box-shadow: none;
}
}
&.btn-simple{
background-color: transparent;
color: $btn-color;
box-shadow: none;
&:hover,
&:focus,
&:active{
background-color: transparent;
color: $btn-color;
}
}
}

92
dmp-frontend/src/assets/scss/core/mixins/_chartist.scss Normal file
View File

@ -0,0 +1,92 @@
// Scales for responsive SVG containers
$ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
$ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
$ct-class-chart: ct-chart !default;
$ct-class-chart-line: ct-chart-line !default;
$ct-class-chart-bar: ct-chart-bar !default;
$ct-class-horizontal-bars: ct-horizontal-bars !default;
$ct-class-chart-pie: ct-chart-pie !default;
$ct-class-chart-donut: ct-chart-donut !default;
$ct-class-label: ct-label !default;
$ct-class-series: ct-series !default;
$ct-class-line: ct-line !default;
$ct-class-point: ct-point !default;
$ct-class-area: ct-area !default;
$ct-class-bar: ct-bar !default;
$ct-class-slice-pie: ct-slice-pie !default;
$ct-class-slice-donut: ct-slice-donut !default;
$ct-class-grid: ct-grid !default;
$ct-class-slice-donut-solid: ct-slice-donut-solid !default;
$ct-class-grid-background: ct-grid-background !default;
$ct-class-vertical: ct-vertical !default;
$ct-class-horizontal: ct-horizontal !default;
$ct-class-start: ct-start !default;
$ct-class-end: ct-end !default;
// Class names to be used when generating CSS
// Container ratio
$ct-container-ratio: (1/1.618) !default;
// Text styles for labels
$ct-text-color: rgba(0, 0, 0, 0.4) !default;
$ct-text-size: 1.3rem !default;
$ct-text-align: flex-start !default;
$ct-text-justify: flex-start !default;
$ct-text-line-height: 1;
// Grid styles
$ct-grid-color: rgba(0, 0, 0, 0.2) !default;
$ct-grid-dasharray: 2px !default;
$ct-grid-width: 1px !default;
$ct-grid-background-fill: none !default;
// Line chart properties
$ct-line-width: 4px !default;
$ct-line-dasharray: false !default;
$ct-point-size: 10px !default;
// Line chart point, can be either round or square
$ct-point-shape: round !default;
// Area fill transparency between 0 and 1
$ct-area-opacity: 0.1 !default;
// Bar chart bar width
$ct-bar-width: 10px !default;
// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
$ct-donut-width: 60px !default;
// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
// should set this property to false
$ct-include-classes: true !default;
// If this is set to true the CSS will contain colored series. You can extend or change the color with the
// properties below
$ct-include-colored-series: $ct-include-classes !default;
// If set to true this will include all responsive container variations using the scales defined at the top of the script
$ct-include-alternative-responsive-containers: $ct-include-classes !default;
// Series names and colors. This can be extended or customized as desired. Just add more series and colors.
$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
$ct-series-colors: (
$brand-info,
$brand-danger,
$brand-warning,
$brand-primary,
$brand-success,
$font-background-light-grey,
$gray-color,
$social-google,
$social-tumblr,
$social-youtube,
$social-twitter,
$social-pinterest,
$social-behance,
#6188e2,
#a748ca
) !default;

138
dmp-frontend/src/assets/scss/core/mixins/_colored-shadows.scss Normal file
View File

@ -0,0 +1,138 @@
@mixin shadow-big(){
box-shadow: 0 16px 38px -12px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity * 4),
0 4px 25px 0px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
}
@mixin shadow-big-image(){
// new box shadow optimized for Tables and Phones
box-shadow: 0 5px 15px -8px rgba(0, 0, 0, $bmd-shadow-ambient-opacity * 2),
0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
}
@mixin shadow-big-navbar(){
box-shadow: 0 10px 20px -12px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity * 3),
0 3px 20px 0px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
}
// @mixin shadow-big-color($color){
// // new box shadow optimized for Tables and Phones
// box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.2),
// 0 13px 24px -11px rgba($color, 0.60);
// }
@mixin shadow-small-color($color){
// new box shadow optimized for Tablets and Phones
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14),
0 7px 10px -5px rgba($color, 0.4)
}
@mixin shadow-navbar-color($color){
// new box shadow optimized for Tablets and Phones
@if($color == $white-color) {
box-shadow: 0 4px 18px 0px rgba(0, 0, 0, .12),
0 7px 10px -5px rgba(0,0,0, 0.15);
}@else{
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14),
0 7px 12px -5px rgba($color, 0.46);
}
}
@mixin shadow-2dp(){
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity),
0 3px 1px -2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
0 1px 5px 0 rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
}
@mixin shadow-4dp(){
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity),
0 1px 10px 0 rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
0 2px 4px -1px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
}
@mixin shadow-6dp(){
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity),
0 1px 18px 0 rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
0 3px 5px -1px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
}
@mixin shadow-8dp(){
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity),
0 3px 14px 2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
0 5px 5px -3px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
}
@mixin shadow-16dp(){
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity),
0 6px 30px 5px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity);
}
@mixin shadow-2dp-color($color){
box-shadow: 0 2px 2px 0 rgba($color, $bmd-shadow-penumbra-opacity),
0 3px 1px -2px rgba($color, $bmd-shadow-umbra-opacity),
0 1px 5px 0 rgba($color, $bmd-shadow-ambient-opacity);
}
@mixin shadow-4dp-color($color){
box-shadow: 0 4px 5px 0 rgba($color, $bmd-shadow-penumbra-opacity),
0 1px 10px 0 rgba($color, $bmd-shadow-ambient-opacity),
0 2px 4px -1px rgba($color, $bmd-shadow-umbra-opacity);
}
@mixin shadow-8dp-color($color){
box-shadow: 0 8px 10px 1px rgba($color, $bmd-shadow-penumbra-opacity),
0 3px 14px 2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
0 5px 5px -3px rgba($color, $bmd-shadow-umbra-opacity);
}
@mixin shadow-16dp-color($color){
box-shadow: 0 16px 24px 2px rgba($color, $bmd-shadow-penumbra-opacity),
0 6px 30px 5px rgba(0, 0, 0, $bmd-shadow-ambient-opacity),
0 8px 10px -5px rgba($color, $bmd-shadow-umbra-opacity);
}
@mixin button-shadow-color($color){
box-shadow: 0 14px 26px -12px rgba($color, $bmd-shadow-penumbra-opacity * 3),
0 4px 23px 0px rgba(0,0,0, $bmd-shadow-ambient-opacity),
0 8px 10px -5px rgba($color, $bmd-shadow-umbra-opacity);
}
@mixin shadow-z-1(){
box-shadow:
0 1px 6px 0 rgba(0, 0, 0, 0.12),
0 1px 6px 0 rgba(0, 0, 0, 0.12);
}
@mixin shadow-z-1-hover(){
box-shadow:
0 5px 11px 0 rgba(0, 0, 0, 0.18),
0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
@mixin shadow-z-2(){
box-shadow:
0 8px 17px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@mixin shadow-z-3(){
box-shadow:
0 12px 15px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
@mixin shadow-z-4(){
box-shadow:
0 16px 28px 0 rgba(0, 0, 0, 0.22),
0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
@mixin shadow-z-5(){
box-shadow:
0 27px 24px 0 rgba(0, 0, 0, 0.2),
0 40px 77px 0 rgba(0, 0, 0, 0.22);
}

253
dmp-frontend/src/assets/scss/core/mixins/_drawer.scss Normal file
View File

@ -0,0 +1,253 @@
// Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time
@mixin bmd-drawer-x-out($size) {
@each $side, $abbrev in (left: l, right: r) {
.bmd-drawer-f-#{$abbrev} {
> .bmd-layout-drawer {
// position
top: 0;
#{$side}: 0;
width: $size;
height: 100%;
@if $side == left {
transform: translateX(
-$size - 10px
); // initial position of drawer (closed), way off screen
} @else {
transform: translateX(
$size + 10px
); // initial position of drawer (closed), way off screen
}
}
> .bmd-layout-header,
> .bmd-layout-content {
margin-#{$side}: 0;
}
}
}
}
@mixin bmd-drawer-y-out($size) {
@each $side, $abbrev in (top: t, bottom: b) {
.bmd-drawer-f-#{$abbrev} {
> .bmd-layout-drawer {
// position
#{$side}: 0;
left: 0;
width: 100%;
height: $size;
@if $side == top {
transform: translateY(
-$size - 10px
); // initial position of drawer (closed), way off screen
} @else {
transform: translateY(
$size + 10px
); // initial position of drawer (closed), way off screen
}
}
> .bmd-layout-content {
margin-#{$side}: 0;
}
}
}
}
@function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") {
// e.g. &, &-sm, &-md, &-lg
$name: "&-#{$breakpoint}#{$suffix}";
@if $breakpoint == xs {
$name: "&";
}
@return $name;
}
@mixin bmd-drawer-x-in($size) {
@each $side, $abbrev in (left: l, right: r) {
.bmd-drawer-f-#{$abbrev} {
// Push - drawer will push the header and content (default behavior)
> .bmd-layout-header {
width: calc(100% - #{$size});
margin-#{$side}: $size;
}
> .bmd-layout-drawer {
transform: translateX(0);
}
> .bmd-layout-content {
margin-#{$side}: $size;
}
}
}
}
@mixin bmd-drawer-y-in($size) {
@each $side, $abbrev in (top: t, bottom: b) {
.bmd-drawer-f-#{$abbrev} {
// 1. Push - drawer will push the header or content
> .bmd-layout-header {
@if $side == top {
// only add margin-top on a header when the drawer is at the top
margin-#{$side}: $size;
}
}
> .bmd-layout-drawer {
transform: translateY(0);
}
> .bmd-layout-content {
@if $side == bottom {
// only add margin-bottom on content when the drawer is at the bottom
margin-#{$side}: $size;
}
}
}
}
}
// breakpoint based open to a particular size
@mixin bmd-drawer-x-in-up($size, $breakpoint) {
// e.g. &, &-sm, &-md, &-lg
$name: bmd-drawer-breakpoint-name($breakpoint, "-up");
.bmd-drawer-in {
#{unquote($name)} {
// bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
@if $breakpoint == xs {
// bmd-drawer-in marker class (non-responsive)
@include bmd-drawer-x-in($size);
} @else {
// responsive class
@include media-breakpoint-up($breakpoint) {
// bmd-drawer-f-(left and right) styles
@include bmd-drawer-x-in($size);
}
}
}
}
}
// breakpoint based open to a particular size
@mixin bmd-drawer-y-in-up($size, $breakpoint) {
// e.g. &, &-sm, &-md, &-lg
$name: bmd-drawer-breakpoint-name($breakpoint, "-up");
.bmd-drawer-in {
#{unquote($name)} {
// bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
@if $breakpoint == xs {
// bmd-drawer-in marker class (non-responsive)
@include bmd-drawer-y-in($size);
} @else {
// responsive class
@include media-breakpoint-up($breakpoint) {
// bmd-drawer-f-(left and right) styles
@include bmd-drawer-y-in($size);
}
}
}
}
}
@mixin bmd-drawer-x-overlay() {
@include bmd-layout-backdrop-in();
@each $side, $abbrev in (left: l, right: r) {
.bmd-drawer-f-#{$abbrev} {
> .bmd-layout-header,
> .bmd-layout-content {
width: 100%;
margin-#{$side}: 0;
}
}
}
}
@mixin bmd-drawer-y-overlay() {
@include bmd-layout-backdrop-in();
@each $side, $abbrev in (top: t, bottom: b) {
.bmd-drawer-f-#{$abbrev} {
> .bmd-layout-header {
@if $side == top {
// only add margin-top on a header when the drawer is at the top
margin-#{$side}: 0;
}
}
> .bmd-layout-content {
@if $side == bottom {
// only add margin-bottom on content when the drawer is at the bottom
margin-#{$side}: 0;
}
}
}
}
}
// Overlay - left/right responsive overlay classes and marker class
@mixin bmd-drawer-x-overlay-down($breakpoint) {
// e.g. &, &-sm, &-md, &-lg
$name: bmd-drawer-breakpoint-name($breakpoint, "-down");
.bmd-drawer-overlay {
#{unquote($name)} {
// bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
// x - left/right
@if $breakpoint == xs {
// overlay marker class (non-responsive)
// Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
// responsive bmd-drawer-in-* media queries above win (and overlay is ignored)
&.bmd-drawer-overlay {
@include bmd-drawer-x-overlay();
}
} @else {
@include media-breakpoint-down($breakpoint) {
// overlay responsive class
@include bmd-drawer-x-overlay();
}
}
}
}
}
// Overlay - top/bottom responsive overlay classes and marker class
@mixin bmd-drawer-y-overlay-down($breakpoint) {
// e.g. &, &-sm, &-md, &-lg
$name: bmd-drawer-breakpoint-name($breakpoint, "-down");
.bmd-drawer-overlay {
#{unquote($name)} {
// bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
//// y - top/bottom
@if $breakpoint == xs {
// overlay marker class (non-responsive)
// Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
// responsive bmd-drawer-in-* media queries above win (and overlay is ignored)
&.bmd-drawer-overlay {
@include bmd-drawer-y-overlay();
}
} @else {
@include media-breakpoint-down($breakpoint) {
// overlay responsive class
@include bmd-drawer-y-overlay();
}
}
}
}
}

Some files were not shown because too many files have changed in this diff Show More