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

Merge remote-tracking branch 'origin/ui-redesign' into ui-redesign

This commit is contained in:
George Kalampokis 2020-09-11 14:29:50 +03:00
parent 88ea24d367 22b59ea6b6
commit bc6193c7d7
12 changed files with 99 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
dmp-frontend/src/app/ui/auth/login/login.component.html
View File

@ -7,21 +7,21 @@
<div class="row justify-content-center pb-4"> <div class="row justify-content-center pb-4">
<div class="flex-column"> <div class="flex-column">
<div *ngIf="hasOpenAireOauth()" class="col-auto pr-4"> <div *ngIf="hasOpenAireOauth()" class="col-auto pr-4">
<button mat-icon-button (click)="openaireLogin()" class="d-flex justify-content-center"> <button mat-icon-button (click)="openaireLogin()" class="openaireIconButton d-flex justify-content-center align-items-center">
<span class="openaireIcon"></span> <span class="openaireIcon"></span>
</button> </button>
</div> </div>
</div> </div>
<div class="flex-column"> <div class="flex-column">
<div *ngIf="hasOrcidOauth()" class="col-auto pl-4 pr-4"> <div *ngIf="hasOrcidOauth()" class="col-auto pl-4 pr-4">
<button mat-icon-button (click)="orcidLogin()" class="d-flex justify-content-center"> <button mat-icon-button (click)="orcidLogin()" class="orcidIconMediumButton d-flex justify-content-center align-items-center">
<span class="orcidIconMedium"></span> <span class="orcidIconMedium"></span>
</button> </button>
</div> </div>
</div> </div>
<div class="flex-column"> <div class="flex-column">
<div *ngIf="hasB2AccessOauth()" class="col-auto pl-4"> <div *ngIf="hasB2AccessOauth()" class="col-auto pl-4">
<button mat-icon-button (click)="b2AccessLogin()" class="d-flex justify-content-center"> <button mat-icon-button (click)="b2AccessLogin()" class="iconmediumButton d-flex justify-content-center align-items-center">
<span class="iconmedium"></span> <span class="iconmedium"></span>
</button> </button>
</div> </div>
@ -30,21 +30,21 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="flex-column"> <div class="flex-column">
<div *ngIf="hasGoogleOauth()" class="col-auto pr-4"> <div *ngIf="hasGoogleOauth()" class="col-auto pr-4">
<button mat-icon-button id="googleSignInButton" class="d-flex justify-content-center"> <button mat-icon-button id="googleSignInButton" class="d-flex justify-content-center align-items-center">
<span class="googleIcon"></span> <span class="googleIcon"></span>
</button> </button>
</div> </div>
</div> </div>
<div class="flex-column"> <div class="flex-column">
<div *ngIf="hasFacebookOauth()" class="col-auto pl-4 pr-4"> <div *ngIf="hasFacebookOauth()" class="col-auto pl-4 pr-4">
<button mat-icon-button (click)="facebookLogin()" class="d-flex justify-content-center"> <button mat-icon-button (click)="facebookLogin()" class="facebookIconButton d-flex justify-content-center align-items-center">
<span class="facebookIcon"></span> <span class="facebookIcon"></span>
</button> </button>
</div> </div>
</div> </div>
<div class="flex-column"> <div class="flex-column">
<div *ngIf="hasTwitterOauth()" class="col-auto pl-4"> <div *ngIf="hasTwitterOauth()" class="col-auto pl-4">
<button mat-icon-button (click)="twitterLogin()" class="d-flex justify-content-center"> <button mat-icon-button (click)="twitterLogin()" class="twitterIconButton d-flex justify-content-center align-items-center">
<span class="twitterIcon"></span> <span class="twitterIcon"></span>
</button> </button>
</div> </div>
@ -147,4 +147,4 @@
<h5>{{ 'HOME.LOGIN.TEXT' | translate }}</h5> <h5>{{ 'HOME.LOGIN.TEXT' | translate }}</h5>
</div> </div>
</div> </div>
</div> --> </div> -->

74
dmp-frontend/src/app/ui/auth/login/login.component.scss
View File

@ -32,13 +32,13 @@
font: Bold 38px/82px Roboto; font: Bold 38px/82px Roboto;
height: 60px; height: 60px;
letter-spacing: -0.95px; letter-spacing: -0.95px;
color: #23BCBA; color: #23bcba;
margin-top: 11px; margin-top: 11px;
margin-bottom: 21px; margin-bottom: 21px;
} }
.line { .line {
border-top: 5px solid #23BCBA; border-top: 5px solid #23bcba;
width: 116px; width: 116px;
margin-bottom: 97px; margin-bottom: 97px;
} }
@ -165,18 +165,18 @@
} }
.accesss-methods .configurable-logo { .accesss-methods .configurable-logo {
flex-grow: 0; flex-grow: 0;
padding-top: 21px; padding-top: 21px;
padding-bottom: 21px; padding-bottom: 21px;
margin-top: 5px; margin-top: 5px;
height: 90px; height: 90px;
} }
.accesss-methods .zenodo-logo { .accesss-methods .zenodo-logo {
height: 75px; height: 75px;
padding-top: 8px; padding-top: 8px;
margin-top: 13px; margin-top: 13px;
} }
.tip { .tip {
margin-top: -20px; margin-top: -20px;
@ -234,16 +234,38 @@ span.facebookIcon {
span.twitterIcon { span.twitterIcon {
background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy\ \(5\).png") no-repeat; background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy\ \(5\).png") no-repeat;
} }
span.googleIcon, span.facebookIcon, span.twitterIcon { span.googleIcon,
span.facebookIcon,
span.twitterIcon {
float: left; float: left;
transform: scale(0.8); transform: scale(0.8);
width: 45px; width: 45px;
height: 45px; height: 45px;
} }
#googleSignInButton,
.facebookIconButton,
.twitterIconButton,
.openaireIconButton,
.orcidIconMediumButton,
.iconmediumButton {
width: 60px !important;
height: 60px !important;
}
#googleSignInButton:hover,
.facebookIconButton:hover,
.twitterIconButton:hover,
.openaireIconButton:hover,
.orcidIconMediumButton:hover,
.iconmediumButton:hover {
// background-color: #129d993b;
background-color: #ececec;
border-radius: 60%;
}
span.openaireIcon { span.openaireIcon {
background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy\ \(6\).png") no-repeat; background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy\ \(6\).png") no-repeat;
background-position: center; background-position: center;
@ -257,7 +279,7 @@ span.orcidIconMedium {
background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy.png") no-repeat; background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy.png") no-repeat;
background-position: center; background-position: center;
float: left; float: left;
transform: scale(0.80); transform: scale(0.8);
width: 50px; width: 50px;
height: 45px; height: 45px;
} }
@ -271,17 +293,17 @@ span.iconmedium {
} }
span.configurableIcon { span.configurableIcon {
float: right; float: right;
width: 80px; width: 80px;
height: 56px; height: 56px;
} }
span.zenodoIcon { span.zenodoIcon {
background: url("../../../../assets/images/argos-login/zenodo-gradient-200.png") no-repeat; background: url("../../../../assets/images/argos-login/zenodo-gradient-200.png") no-repeat;
background-position: center; background-position: center;
float: right; float: right;
transform: scale(0.70); transform: scale(0.7);
width: 200px; width: 200px;
height: 80px; height: 80px;
} }
@ -301,14 +323,14 @@ span.zenodoIcon {
} }
.configurable-button { .configurable-button {
margin-top: 10px; margin-top: 10px;
width: fit-content; width: fit-content;
} }
.zenodo-button { .zenodo-button {
margin-top: 10px; margin-top: 10px;
width: fit-content; width: fit-content;
} }
// .login-logo { // .login-logo {
// background: url(img/open-dmp.png) no-repeat; // background: url(img/open-dmp.png) no-repeat;
@ -318,7 +340,7 @@ span.zenodoIcon {
// } // }
.laptop-img { .laptop-img {
// background: url("../../../../assets/splash/assets/img/laptop.png") no-repeat; // background: url("../../../../assets/splash/assets/img/laptop.png") no-repeat;
background: url("../../../../assets/splash/assets/img/1_Main/Png/Who\ \ \ Benefits\ Small.png") no-repeat; background: url("../../../../assets/splash/assets/img/1_Main/Png/Who\ \ \ Benefits\ Small.png") no-repeat;
width: 164px; width: 164px;
height: 200px; height: 200px;

6
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
View File

@ -1,6 +1,7 @@
<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)" [formGroup]="form" class="dynamic-form-composite-field row"> <div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)" [formGroup]="form" class="dynamic-form-composite-field row">
<div *ngIf="form.get('fields').value.length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)" class="col-12"> <!-- <div *ngIf="form.get('fields').value.length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)" class="col-12"> -->
<div *ngIf="form.get('fields').length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)" class="col-12">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<app-form-composite-title class="row" [form]="form" [isChild]="isChild"></app-form-composite-title> <app-form-composite-title class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>
@ -22,7 +23,8 @@
</div> </div>
</div> </div>
<div *ngIf="form.get('fields').value.length > 1" class="col-12"> <!-- <div *ngIf="form.get('fields').value.length > 1" class="col-12"> -->
<div *ngIf="form.get('fields').length > 1" class="col-12">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<app-form-composite-title class="row" [form]="form" [isChild]="isChild"></app-form-composite-title> <app-form-composite-title class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>

19
dmp-frontend/src/app/ui/navbar/navbar.component.scss
View File

@ -45,8 +45,9 @@ $mat-card-header-size: 40px !default;
cursor: pointer; cursor: pointer;
} }
.faq-title:hover { .faq-title:hover,
color: #23bcba; .lang:hover {
color: #23bcba !important;
} }
.lang { .lang {
@ -56,7 +57,14 @@ $mat-card-header-size: 40px !default;
.hamburger { .hamburger {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
padding: 0.4rem 1.5rem 0rem; padding: 0.6rem;
margin-left: 0.8rem;
margin-right: 0.8rem;
}
.hamburger:hover {
background-color: #ececec !important;
border-radius: 50%;
} }
.icon-bar1, .icon-bar1,
@ -121,3 +129,8 @@ $mat-card-header-size: 40px !default;
.login-label { .login-label {
text-transform: uppercase; text-transform: uppercase;
} }
.navbar-nav:hover {
background-color: #ececec;
border-radius: 6px;
}

12
dmp-frontend/src/app/ui/sidebar/sidebar.component.html
View File

@ -4,10 +4,16 @@
<div *ngIf="showItem(groupMenuItem);"> <div *ngIf="showItem(groupMenuItem);">
<hr *ngIf="!firstGroup"> <hr *ngIf="!firstGroup">
<mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" *ngFor="let groupMenuRoute of groupMenuItem.routes; let first = first" class="nav-item" [ngClass]="{'mt-4': first && firstGroup}"> <mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" *ngFor="let groupMenuRoute of groupMenuItem.routes; let first = first" class="nav-item" [ngClass]="{'mt-4': first && firstGroup}">
<a class="nav-link nav-row" *ngIf="groupMenuRoute.path !== '/contact-support' && groupMenuRoute.path !== '/co-branding' && groupMenuRoute.path !== '/feedback'" [routerLink]="[groupMenuRoute.path]" [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans', 'dataset-tour' : groupMenuRoute.path == '/datasets'}"> <a class="nav-link nav-row" *ngIf="groupMenuRoute.path !== '/contact-support' && groupMenuRoute.path !== '/co-branding' && groupMenuRoute.path !== '/feedback' && groupMenuRoute.path !== '/datasets'" [routerLink]="[groupMenuRoute.path]" [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans'}">
<i class="material-icons icon">{{ groupMenuRoute.icon }}</i> <i class="material-icons icon">{{ groupMenuRoute.icon }}</i>
<i *ngIf="groupMenuRoute.path == '/plans' || groupMenuRoute.path == '/datasets'" class="material-icons icon-mask">person</i> <i *ngIf="groupMenuRoute.path == '/plans'" class="material-icons icon-mask">person</i>
<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans' || groupMenuRoute.path == '/datasets'}">{{groupMenuRoute.title | translate}}</span> <span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}">{{groupMenuRoute.title | translate}}</span>
</a>
<a class="nav-link nav-row dataset-tour" *ngIf="groupMenuRoute.path === '/datasets'" [routerLink]="[groupMenuRoute.path]">
<span class="inner-line"></span>
<i class="material-icons icon">{{ groupMenuRoute.icon }}</i>
<i class="material-icons icon-mask">person</i>
<span class="pl-0">{{groupMenuRoute.title | translate}}</span>
</a> </a>
<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/co-branding'" href="/splash/resources/co-branding.html"> <a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/co-branding'" href="/splash/resources/co-branding.html">
<i class="material-icons icon">{{ groupMenuRoute.icon }}</i> <i class="material-icons icon">{{ groupMenuRoute.icon }}</i>

9
dmp-frontend/src/app/ui/sidebar/sidebar.component.scss
View File

@ -37,6 +37,15 @@ $mat-card-header-size: 30px !default;
color: #23BCBA; color: #23BCBA;
} }
.inner-line {
margin-left: 12px;
margin-right: 10px;
width: 20px;
height: 13px;
border-left: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
mat-list-item { mat-list-item {
display: flex !important; display: flex !important;
height: auto !important; height: auto !important;

2
dmp-frontend/src/app/ui/sidebar/sidebar.component.ts
View File

@ -28,7 +28,7 @@ export const GENERAL_ROUTES: RouteInfo[] = [
]; ];
export const DMP_ROUTES: RouteInfo[] = [ export const DMP_ROUTES: RouteInfo[] = [
{ path: '/plans', title: 'SIDE-BAR.MY-DMPS', icon: 'library_books' }, { path: '/plans', title: 'SIDE-BAR.MY-DMPS', icon: 'library_books' },
{ path: '/datasets', title: 'SIDE-BAR.MY-DATASET-DESC', icon: 'dns' }, { path: '/datasets', title: 'SIDE-BAR.MY-DATASETS', icon: 'dns' },
// { path: '/quick-wizard', title: 'SIDE-BAR.QUICK-WIZARD', icon: 'play_circle_outline' }, // { path: '/quick-wizard', title: 'SIDE-BAR.QUICK-WIZARD', icon: 'play_circle_outline' },
// { path: '/plans/new', title: 'SIDE-BAR.ADD-EXPERT', icon: 'playlist_add' } // { path: '/plans/new', title: 'SIDE-BAR.ADD-EXPERT', icon: 'playlist_add' }
]; ];

1
dmp-frontend/src/assets/i18n/de.json
View File

@ -210,6 +210,7 @@
"QUICK-WIZARD-DATASET": "Füge Datensatzbeschreibung hinzu (Assistent)", "QUICK-WIZARD-DATASET": "Füge Datensatzbeschreibung hinzu (Assistent)",
"ADD-EXPERT": "Neuer DMP (Experte)", "ADD-EXPERT": "Neuer DMP (Experte)",
"MY-DATASET-DESC": "Meine Datensatzbeschreibungen", "MY-DATASET-DESC": "Meine Datensatzbeschreibungen",
"MY-DATASETS": "Meine Datensatzbeschreibungen",
"MY-GRANTS": "Meine Förderungen", "MY-GRANTS": "Meine Förderungen",
"HISTORY": "CHRONIK", "HISTORY": "CHRONIK",
"HISTORY-VISITED": "ZULETZT BESUCHT", "HISTORY-VISITED": "ZULETZT BESUCHT",

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

@ -222,6 +222,7 @@
"QUICK-WIZARD-DATASET": "Add Dataset Description (Wizard)", "QUICK-WIZARD-DATASET": "Add Dataset Description (Wizard)",
"ADD-EXPERT": "New DMP (Expert)", "ADD-EXPERT": "New DMP (Expert)",
"MY-DATASET-DESC": "My Dataset Desc.", "MY-DATASET-DESC": "My Dataset Desc.",
"MY-DATASETS": "My Datasets",
"MY-GRANTS": "My Grants", "MY-GRANTS": "My Grants",
"HISTORY": "HISTORY", "HISTORY": "HISTORY",
"HISTORY-VISITED": "LAST VISITED", "HISTORY-VISITED": "LAST VISITED",

1
dmp-frontend/src/assets/i18n/es.json
View File

@ -189,6 +189,7 @@
"DMP-PROFILES": "Plantillas del PGD", "DMP-PROFILES": "Plantillas del PGD",
"ABOUT": "Acerca de", "ABOUT": "Acerca de",
"MY-DATASET-DESCRIPTIONS": "MIS DESCRIPCIONES DEL DATASET", "MY-DATASET-DESCRIPTIONS": "MIS DESCRIPCIONES DEL DATASET",
"MY-DATASETS": "Mis Descripciones Del Dataset",
"DATASET-DESCRIPTION-WIZARD": "Asistente de la descripción del dataset", "DATASET-DESCRIPTION-WIZARD": "Asistente de la descripción del dataset",
"PUBLIC DATASETS": "DESCRIPCIONES DEL DATASET PUBLICADA", "PUBLIC DATASETS": "DESCRIPCIONES DEL DATASET PUBLICADA",
"PUBLIC-DMPS": "PGDS PUBLICADOS", "PUBLIC-DMPS": "PGDS PUBLICADOS",

1
dmp-frontend/src/assets/i18n/gr.json
View File

@ -186,6 +186,7 @@
"DMP-PROFILES": "Templates Σχεδίων Διαχείρισης Δεδομένων", "DMP-PROFILES": "Templates Σχεδίων Διαχείρισης Δεδομένων",
"ABOUT": "Σχετικά", "ABOUT": "Σχετικά",
"MY-DATASET-DESCRIPTIONS": "ΤΑ ΣΧΕΔΙΑ ΔΙΑΧΕΙΡΙΣΗΣ ΔΕΔΟΜΕΝΩΝ ΜΟΥ", "MY-DATASET-DESCRIPTIONS": "ΤΑ ΣΧΕΔΙΑ ΔΙΑΧΕΙΡΙΣΗΣ ΔΕΔΟΜΕΝΩΝ ΜΟΥ",
"MY-DATASETS": "ΤΑ ΣΧΕΔΙΑ ΔΙΑΧΕΙΡΙΣΗΣ ΔΕΔΟΜΕΝΩΝ ΜΟΥ",
"DATASET-DESCRIPTION-WIZARD": "Wizard Περιγραφών Συνόλων Δεδομένων", "DATASET-DESCRIPTION-WIZARD": "Wizard Περιγραφών Συνόλων Δεδομένων",
"PUBLIC DATASETS": "ΔΗΜΟΣΙΕΥΜΕΝΕΣ ΠΕΡΙΓΡΑΦΕΣ ΣΥΝΟΛΩΝ ΔΕΔΟΜΕΝΩΝ", "PUBLIC DATASETS": "ΔΗΜΟΣΙΕΥΜΕΝΕΣ ΠΕΡΙΓΡΑΦΕΣ ΣΥΝΟΛΩΝ ΔΕΔΟΜΕΝΩΝ",
"PUBLIC-DMPS": "ΔΗΜΟΣΙΕΥΜΕΝΑ ΣΧΕΔΙΑ ΔΙΑΧΕΙΡΙΣΗΣ ΔΕΔΟΜΕΝΩΝ", "PUBLIC-DMPS": "ΔΗΜΟΣΙΕΥΜΕΝΑ ΣΧΕΔΙΑ ΔΙΑΧΕΙΡΙΣΗΣ ΔΕΔΟΜΕΝΩΝ",

1
dmp-frontend/src/assets/i18n/tr.json
View File

@ -187,6 +187,7 @@
"DMP-PROFILES": "VYP Şablonları", "DMP-PROFILES": "VYP Şablonları",
"ABOUT": "Hakkında", "ABOUT": "Hakkında",
"MY-DATASET-DESCRIPTIONS": "Veri Seti Şablonlarım", "MY-DATASET-DESCRIPTIONS": "Veri Seti Şablonlarım",
"MY-DATASETS": "Veri Seti Şablonlarım",
"DATASET-DESCRIPTION-WIZARD": "Veri Seti Tanım Sihirbazı", "DATASET-DESCRIPTION-WIZARD": "Veri Seti Tanım Sihirbazı",
"PUBLIC DATASETS": "Yayınlanmış Veri Seti TANIMLARI", "PUBLIC DATASETS": "Yayınlanmış Veri Seti TANIMLARI",
"PUBLIC-DMPS": "YAYINLANMIŞ VYP'LARI", "PUBLIC-DMPS": "YAYINLANMIŞ VYP'LARI",