MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

[Monitor Dashboard | Trunk]: Clarify css of login button. Add section title. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57978 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-01-14 19:48:13 +00:00
parent 54f03f4c98
commit 0142ebb9ec
8 changed files with 239 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.html
View File

@ -17,7 +17,7 @@
<ul class="uk-navbar-nav user_actions">
<li>
<user-mini *ngIf="properties"
[user]="user" [dashboard]="true" [colors]="'light'"
[user]="user" [dashboard]="true"
[redirectUrl]="properties.afterLoginRedirectLink"
[logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
[cookieDomain]=properties.cookieDomain

4
src/app/manageStakeholders/manageStakeholders.component.html
View File

@ -31,7 +31,7 @@
<div [class.uk-child-width-1-4@m]="grid"
[class.uk-child-width-1-3@s]="grid"
[class.uk-child-width-1-1]="!grid"
[class.max-width-large]="!grid"
[class.list-view]="!grid"
class="uk-grid-match uk-grid-small"
uk-grid>
<loading *ngIf="loading"></loading>
@ -115,7 +115,7 @@
<div [class.uk-child-width-1-4@m]="grid"
[class.uk-child-width-1-3@s]="grid"
[class.uk-child-width-1-1]="!grid"
[class.max-width-large]="!grid"
[class.list-view]="!grid"
class="uk-grid-match uk-grid-small"
uk-grid>
<loading *ngIf="loading"></loading>

2
src/app/monitor/monitor.component.html
View File

@ -28,7 +28,7 @@
<ul class="uk-navbar-nav user_actions uk-padding uk-padding-remove-vertical">
<li>
<user-mini *ngIf="properties"
[user]="user" [dashboard]="true" [colors]="'dark'"
[user]="user" [dashboard]="true"
[logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
[cookieDomain]=properties.cookieDomain
[userMenuItems]=userMenuItems>

84
src/app/topic/indicators.component.html
View File

@ -55,18 +55,38 @@
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'public'}" (click)="hide(element)">Public</a></li>
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'private'}" (click)="hide(element)">Private</a></li>
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'public'}" (click)="hide(element)">Public</a>
</li>
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'private'}" (click)="hide(element)">Private</a>
</li>
</ul>
</div>
</div>
</div>
<h4 class="uk-text-bold">Number Indicators</h4>
<div [class.max-width-large]="!grid" [id]="number._id"
class="uk-grid-match section uk-grid-small"
*ngFor="let number of displayNumbers; let i = index"
uk-sortable="group: number" uk-grid>
<div class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
<div [class.list-view]="!grid" [id]="number._id"
class="uk-grid-match section uk-grid-small"
*ngFor="let number of displayNumbers; let i = index"
uk-sortable="group: number" uk-grid>
<div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
<div class="md-btn-group">
<button class="md-btn md-btn-mini"><i class="material-icons">add</i></button>
<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>
<button class="md-btn md-btn-mini"><i class="material-icons">clear</i></button>
</div>
</div>
<div *ngIf="false"
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle disable-sortable uk-sortable-nodrag"
uk-grid>
<div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="null"
label="Add a section title"></div>
<div class="uk-width-expand">
<button class="md-btn md-btn-small">
Save
</button>
</div>
</div>
<div *ngIf="!grid && number.title" class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
<h4>{{number.title}}</h4>
</div>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
@ -80,15 +100,15 @@
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
<ng-template [ngIf]="!grid">
<div class="uk-margin-medium-right uk-flex uk-flex-middle">
<i class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
{{(indicator.isPublic) ? 'Public' : 'Private'}}
</div>
<div class="uk-margin-medium-right uk-flex uk-flex-middle">
<i class="material-icons md-24 uk-margin-small-right"
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
{{(indicator.isActive) ? 'Active' : 'Inactive'}}
</div>
<div class="uk-margin-medium-right uk-flex uk-flex-middle">
<i class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
{{(indicator.isPublic) ? 'Public' : 'Private'}}
</div>
<div class="uk-margin-medium-right uk-flex uk-flex-middle">
<i class="material-icons md-24 uk-margin-small-right"
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
{{(indicator.isActive) ? 'Active' : 'Inactive'}}
</div>
</ng-template>
<div class="md-card-dropdown uk-inline">
<i class="md-icon material-icons">more_vert</i>
@ -134,26 +154,32 @@
</ng-template>
</div>
<h4 class="uk-text-bold">Chart Indicators</h4>
<div>
<div *ngIf="chartSections">
<ng-template ngFor [ngForOf]="displayCharts" let-chart let-i="index">
<div [class.max-width-large]="!grid" [id]="'chart-' + chart._id"
class="uk-grid-match section uk-grid-small uk-grid"
uk-sortable="group: chart" uk-grid>
<div class="tools disable-sortable uk-sortable-nodrag">
<div [class.list-view]="!grid" [id]="'chart-' + chart._id"
class="uk-grid-match section uk-grid-small uk-grid uk-margin-top"
uk-sortable="group: chart" uk-grid>
<div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
<div class="md-btn-group">
<button class="md-btn md-btn-mini"><i class="material-icons">add</i></button>
<button class="md-btn md-btn-mini"><i class="material-icons">drag_indicator</i></button>
<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>
<button class="md-btn md-btn-mini"><i class="material-icons">clear</i></button>
</div>
</div>
<div class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle disable-sortable uk-sortable-nodrag" uk-grid>
<div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="null" label="Add a section title"></div>
<div *ngIf="grid && chartSections.at(i)"
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle uk-margin-bottom disable-sortable uk-sortable-nodrag"
uk-grid>
<div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="chartSections.at(i).get('title')"
label="Add a section title"></div>
<div class="uk-width-expand">
<button class="md-btn md-btn-small md-btn-primary">
<button *ngIf="chartSections.at(i).dirty" class="md-btn">
Save
</button>
</div>
</div>
<div *ngIf="!grid && chart.title" class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
<h4>{{chart.title}}</h4>
</div>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="indicator" [id]="indicator._id"
[class.uk-width-1-3@m]="grid && indicator.width === 'small'"
@ -267,6 +293,14 @@
</div>
</div>
</ng-template>
<div *ngIf="grid" class="new-section uk-margin-top">
<div class="tools uk-flex uk-flex-middle">
<button class="md-btn add uk-margin-small-right">
<i class="material-icons md-24 md-color-white">add</i>
</button>
<span>Create a new section</span>
</div>
</div>
</div>
</div>
</div>

33
src/app/topic/indicators.component.ts
View File

@ -34,7 +34,8 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
public preview: string;
public indicatorUtils: IndicatorUtils = new IndicatorUtils();
public indicatorFb: FormGroup;
public sectionFbs: FormArray;
public chartSections: FormArray;
public numberSections: FormArray;
/**
* Editable indicator
*/
@ -73,6 +74,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
ngOnInit(): void {
this.buildFilters();
this.buildSections();
}
ngOnDestroy(): void {
@ -172,6 +174,31 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
}));
}
private buildSections() {
this.numberSections = this.fb.array([]);
this.numbers.forEach(section => {
this.numberSections.push(this.fb.group({
_id: this.fb.control(section._id),
title: this.fb.control(section.title),
stakeholderAlias: this.fb.control(section.stakeholderAlias),
defaultId: this.fb.control(section.defaultId),
type: this.fb.control(section.type),
indicators: this.fb.control(section.indicators)
}));
});
this.chartSections = this.fb.array([]);
this.charts.forEach(section => {
this.chartSections.push(this.fb.group({
_id: this.fb.control(section._id),
title: this.fb.control(section.title),
stakeholderAlias: this.fb.control(section.stakeholderAlias),
defaultId: this.fb.control(section.defaultId),
type: this.fb.control(section.type),
indicators: this.fb.control(section.indicators)
}));
});
}
filterCharts() {
this.displayCharts = this.filterChartType(this.filterPrivacy(
this.filterStatus(this.filterByKeyword(HelperFunctions.copy(this.charts), this.filters.value.keyword),
@ -508,4 +535,8 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
indicator.isPublic = isPublic;
});
}
createSection(index: number = -1) {
}
}

4
src/assets/env-properties.json
View File

@ -37,9 +37,9 @@
"piwikBaseUrl" :"https://analytics.openaire.eu/piwik.php?idsite=",
"piwikSiteId" : "80",
"loginUrl" :"http://scoobydoo.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/openid_connect_login",
"loginUrl" :"http://rudie.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/openid_connect_login",
"userInfoUrl" : "http://scoobydoo.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=",
"userInfoUrl" : "http://rudie.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=",
"logoutUrl" :"https://aai.openaire.eu/proxy/saml2/idp/SingleLogoutService.php?ReturnTo=",

52
src/assets/monitor-custom.css
View File

@ -19,9 +19,13 @@
--connect-portal-lower-tone: #b48536;
--develop-portal-lower-tone: #9f4e7e;
/* Dashboard variables*/
--sidebar-width: 320px;
--sidebar-font-size: 16px;
--header-height: 70px;
--primary-color: #0d47a1;
--secondary-color: #1CA9D5;
--monitor-header-menu-height: 100px;
}
@ -44,6 +48,12 @@
/*}*/
.double-header #header_menu a {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
.double-header #header_main .uk-navbar-nav > li > a {
font-size: 20px;
font-family: 'Open Sans';
@ -94,15 +104,15 @@
.double-header #header_main{
top: var(--monitor-header-menu-height);
}
.double-header #header_menu{
.double-header #header_menu {
position: fixed;
top: 0;
left: 0;
height:var(--monitor-header-menu-height);
background:white;
z-index: 1215;
}
.double-header #header_menu .uk-navbar-nav > li.uk-active a span {
-webkit-box-shadow: inset 0 -2px 0 #333;
box-shadow: inset 0 -2px 0 #333;
@ -128,46 +138,24 @@
max-height: 80px;
}
.stakeholderPage #style_switcher{
.stakeholderPage #style_switcher {
top:200px;
}
.loginLink.light{
color: white !important;
/* Login Box*/
.dashboard .double-header .login {
color: rgba(0,0,0,.54);
font-weight: bold;
}
circle.userBox.light{
stroke: white;
fill: white;
}
text.userBox.light {
stroke: #0d47a1;
fill: #0d47a1;
}
svg .icon.userBox.light{
stroke: #0d47a1;
fill: none;
}
svg .loginLink.userBox.light{
stroke: white;
fill: none;
}
.loginLink.dark{
color: rgba(0,0,0,.54) !important;
font-weight: bold;
}
circle.userBox.dark, svg .icon.userBox.dark, svg .loginLink.userBox.dark{
.dashboard .double-header circle, .dashboard .double-header .login svg,
.dashboard .double-header svg svg *, .dashboard .double-header .login svg * {
stroke: rgba(0,0,0,.54);
fill: none;
}
text.userBox.dark {
.dashboard .double-header text {
stroke: rgba(0,0,0,.54);
fill: rgba(0,0,0,.54);
}

158
src/assets/theme-assets/dashboard-custom.css
View File

@ -4,6 +4,8 @@
--sidebar-font-size: 16px;
--header-height: 70px;
--list-card-max-width: 1220px;
--primary-color: #0d47a1;
--secondary-color: #1CA9D5;
*/
/* Global css*/
@ -15,6 +17,12 @@ html .dashboard {
cursor: pointer !important;
}
.dashboard #hide_controls #toggle *, .dashboard #header_main a, .dashboard #sidebar_main a {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
/* On link hover, his items with this class will be displayed*/
.dashboard li > a .onHover {
display: none;
@ -25,7 +33,7 @@ html .dashboard {
display: block;
}
/* Custom height of header, change var: header-height*/
/* Sidebar with hide controls*/
.dashboard #sidebar_main {
display: flex;
flex-direction: column;
@ -76,19 +84,13 @@ html .dashboard {
}
.dashboard #hide_controls #toggle:hover, .dashboard #hide_controls #toggle:not(.sidebar_main_open) {
color: #0d47a1;
color: var(--primary-color);
}
.dashboard #hide_controls:hover #toggle:hover .material-icons,
.dashboard #hide_controls #toggle:not(.sidebar_main_open) .material-icons {
color: #0d47a1;
border: #0d47a1 solid 1px;
}
.dashboard #hide_controls #toggle * {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
color: var(--primary-color);
border: var(--primary-color) solid 1px;
}
.dashboard #hide_controls #toggle .material-icons {
@ -177,6 +179,7 @@ html .dashboard {
align-items: center;
}
/* Header */
body.dashboard {
padding-top: var(--header-height);
}
@ -201,7 +204,36 @@ body.dashboard {
margin: calc(var(--header-height) - 48px) 0;
}
/* Custom card*/
.dashboard #header_main .material-icons {
color: white;
}
.dashboard #header_main .login {
color: white;
font-weight: bold;
}
.dashboard #header_main circle, .dashboard #header_main .login svg {
stroke: white;
fill: white;
}
.dashboard #header_main text {
stroke: var(--primary-color);
fill: var(--primary-color);
}
.dashboard #header_main svg svg *{
stroke: var(--primary-color);
fill: none;
}
.dashboard #header_main .login svg *{
stroke: white;
fill: none;
}
/* Card */
.dashboard .md-card .md-card-content {
color: rgba(0, 0, 0, 0.8);
}
@ -210,21 +242,11 @@ body.dashboard {
color: rgba(0, 0, 0, 0.8);
}
@media only screen and (max-width: 767px) {
.dashboard .md-card .md-card-toolbar .md-card-toolbar-actions span {
display: none;
}
}
.dashboard .md-card .md-card-toolbar .md-card-toolbar-heading-text {
font-weight: 700;
float: none;
}
.dashboard .max-width-large {
max-width: 1220px;
}
/* Breadcrumb*/
.dashboard #breadcrumbs {
background: inherit;
@ -245,7 +267,7 @@ body.dashboard {
}
/* Notification */
/* Change z-index, because of sidebar and header z-index is bigger that default */
/* Change z-index, because of sidebar's and header's z-index are bigger that default */
.dashboard .uk-notification {
z-index: 2000;
}
@ -269,7 +291,6 @@ body.dashboard {
font-size: 16px;
}
.dashboard .uk-notification-close.uk-icon.uk-close svg {
display: none;
}
@ -288,6 +309,7 @@ body.dashboard {
}
/* Modal*/
.dashboard .uk-modal .large-modal {
width: 800px;
}
@ -318,6 +340,11 @@ body.dashboard {
cursor: default;
}
/* List view*/
.dashboard .list-view {
max-width: 1220px;
}
/* Section Tools*/
.dashboard .section {
@ -336,21 +363,34 @@ body.dashboard {
display: none;
}
.dashboard .section:hover {
border: rgb(28, 169, 213) solid 1px;
.dashboard .section:not(.list-view):hover {
border: var(--secondary-color) solid 1px;
}
.dashboard .section:hover .tools {
.dashboard .section:not(.list-view):hover .tools {
display: block;
}
.dashboard .section:hover .tools .md-btn-group .md-btn-mini {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 0;
background-color: rgb(28, 169, 213);
-webkit-box-shadow: none;
box-shadow: none;
margin-left: -1px !important;
}
.dashboard .section:hover .tools .md-btn-group .md-btn-mini:first-child {
border-top-left-radius: 5px;
}
.dashboard .section:hover .tools .md-btn-group .md-btn-mini:last-child {
border-top-right-radius: 5px;
}
.dashboard .section .md-btn {
background-color: var(--secondary-color);
width: 20px;
color: white;
}
.dashboard .section:hover .tools .md-btn-group .md-btn-mini * {
@ -359,16 +399,46 @@ body.dashboard {
.dashboard .section:hover .tools .md-btn-group::before {
content: "";
border-bottom: 25px solid rgb(28, 169, 213);
border-bottom: 25px solid var(--secondary-color);
border-left:solid 12px transparent;
width: 0;
margin-left: -1px;
border-top-right-radius: 5px;
}
.dashboard .section:hover .tools .md-btn-group::after {
content: "";
border-bottom: 25px solid rgb(28, 169, 213);
border-right:solid 12px transparent;
border-bottom: 25px solid var(--secondary-color);
border-right: solid 12px transparent;
width: 0;
margin-left: -1px;
border-top-left-radius: 5px;
}
/* New section*/
.dashboard .new-section {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
border: #cecece dashed 2px;
background-color: white;
min-height: 100px;
position: relative;
}
.dashboard .new-section .tools {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dashboard .new-section .tools .md-btn.add {
background-color: var(--secondary-color);
min-width: 40px;
min-height: 40px;
padding: 2px 8px;
border-radius: 50%;
}
/* Dropdown*/
@ -385,7 +455,7 @@ body.dashboard {
}
/* Badge */
.badge {
.dashboard .badge {
height: 75px;
position: absolute;
top: 0;
@ -393,15 +463,31 @@ body.dashboard {
z-index: 1;
}
.small-badge {
.dashboard .badge.small-badge {
height: 70px;
}
.right-badge{
.dashboard .badge.right-badge {
top: 0;
left: auto;
left: auto;
transform: rotate(90deg);
right: 0;
}
/* Login Icon*/
.loginLink.dark{
color: rgba(0,0,0,.54) !important;
font-weight: bold;
}
circle.userBox.dark, svg .icon.userBox.dark, svg .loginLink.userBox.dark{
stroke: rgba(0,0,0,.54);
fill: none;
}
text.userBox.dark {
stroke: rgba(0,0,0,.54);
fill: rgba(0,0,0,.54);
}