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

[Monitor Dashboard]: customize breadcrumbs. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57602 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2019-11-13 16:01:33 +00:00
parent 68006a73a1
commit eb88aec5d9
3 changed files with 69 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/home/home.component.html
View File

@ -41,7 +41,8 @@
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<label class="uk-text-bold">Topic Settings</label> <label class="uk-text-bold">Topic Settings</label>
<input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name" <input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name"
[class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')" type="text"> [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')"
type="text">
</div> </div>
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<label>Description</label> <label>Description</label>
@ -79,7 +80,7 @@
</li> </li>
</ng-template> </ng-template>
<li> <li>
<a (click)="saveTopicOpen(newTopic)"> <a (click)="saveTopicOpen(newTopic)">
<span class="menu_icon"><i class="material-icons">add</i></span> <span class="menu_icon"><i class="material-icons">add</i></span>
<span class="menu_title">Create new Topic</span> <span class="menu_title">Create new Topic</span>
</a> </a>
@ -95,7 +96,8 @@
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<label class="uk-text-bold">New Topic</label> <label class="uk-text-bold">New Topic</label>
<input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name" <input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name"
[class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')" type="text"> [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')"
type="text">
</div> </div>
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<label>Description</label> <label>Description</label>
@ -164,17 +166,14 @@
Select one of the <span class="md-color-blue-900">topics below</span>! Select one of the <span class="md-color-blue-900">topics below</span>!
</div> </div>
</div> </div>
<div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-medium uk-grid uk-grid-match" uk-grid <div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium" uk-grid>
uk-height-match="target: .md-card; row: true">
<ng-template ngFor [ngForOf]="stakeholder.topics" let-topic> <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic>
<div> <div>
<a [routerLink]="topic.alias"> <a [routerLink]="topic.alias" class="md-card">
<div class="md-card"> <div class="md-card-content">
<div class="md-card-content"> <h6 class="uk-text-bold">{{topic.name}}</h6>
<h6 class="uk-text-bold">{{topic.name}}</h6> <div class="uk-text-secondary">
<div class="uk-text-secondary"> {{topic.description}}
{{topic.description}}
</div>
</div> </div>
</div> </div>
</a> </a>

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

@ -69,11 +69,11 @@
<button class="md-btn md-btn-primary">Preview</button> <button class="md-btn md-btn-primary">Preview</button>
</div> </div>
</div> </div>
<h5 class="uk-text-bold">Number Indicators</h5> <h4 class="uk-text-bold">Number Indicators</h4>
<div [class.uk-child-width-1-3@m]="grid" <div [class.uk-child-width-1-3@m]="grid"
[class.uk-child-width-1-2@s]="grid" [class.uk-child-width-1-2@s]="grid"
[class.uk-child-width-1-1]="!grid" [class.uk-child-width-1-1]="!grid"
uk-height-match="target: .md-card" class="uk-grid-match"
uk-grid> uk-grid>
<ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index"> <ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index">
<div> <div>
@ -114,7 +114,7 @@
</div> </div>
</ng-template> </ng-template>
</div> </div>
<h5 class="uk-text-bold">Chart Indicators</h5> <h4 class="uk-text-bold">Chart Indicators</h4>
<div [class.uk-child-width-1-3@m]="grid" <div [class.uk-child-width-1-3@m]="grid"
[class.uk-child-width-1-2@s]="grid" [class.uk-child-width-1-2@s]="grid"
[class.uk-child-width-1-1]="!grid" [class.uk-child-width-1-1]="!grid"
@ -128,19 +128,23 @@
<ng-template [ngIf]="!grid"> <ng-template [ngIf]="!grid">
<span *ngFor="let indicatorPath of indicator.indicatorPaths" <span *ngFor="let indicatorPath of indicator.indicatorPaths"
class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle"> class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
<i <i class="material-icons md-24 uk-margin-small-right">
class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.chartTypes.get(indicatorPath.type)}}</i> {{indicatorUtils.chartTypes.get(indicatorPath.type)}}
</i>
{{indicatorPath.type + ' Chart'}} {{indicatorPath.type + ' Chart'}}
</span> </span>
</ng-template> </ng-template>
<span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle"> <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
<i <i class="material-icons md-24 uk-margin-small-right">
class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i> {{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
</i>
{{(indicator.isPublic) ? 'Public' : 'Private'}} {{(indicator.isPublic) ? 'Public' : 'Private'}}
</span> </span>
<span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle"> <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
<i class="material-icons md-24 uk-margin-small-right" <i class="material-icons md-24 uk-margin-small-right"
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i> [class.md-color-green-300]="indicator.isActive">
{{indicatorUtils.isActiveIcon}}
</i>
{{(indicator.isActive) ? 'Active' : 'Inactive'}} {{(indicator.isActive) ? 'Active' : 'Inactive'}}
</span> </span>
<i class="md-icon material-icons">more_vert</i> <i class="md-icon material-icons">more_vert</i>
@ -155,17 +159,22 @@
<div class="uk-width-1-3 uk-text-center" <div class="uk-width-1-3 uk-text-center"
[ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid> [ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
<div *ngFor="let indicatorPath of indicator.indicatorPaths"> <div *ngFor="let indicatorPath of indicator.indicatorPaths">
<i class="material-icons md-24">{{indicatorUtils.chartTypes.get(indicatorPath.type)}}</i> <i class="material-icons md-24">
{{indicatorUtils.chartTypes.get(indicatorPath.type)}}
</i>
<div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div> <div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div>
</div> </div>
</div> </div>
<div class="uk-width-1-3 uk-text-center"> <div class="uk-width-1-3 uk-text-center">
<i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i> <i class="material-icons md-24">
{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
</i>
<div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div> <div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
</div> </div>
<div class="uk-width-1-3 uk-text-center"> <div class="uk-width-1-3 uk-text-center">
<i class="material-icons md-24" <i class="material-icons md-24" [class.md-color-green-300]="indicator.isActive">
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i> {{indicatorUtils.isActiveIcon}}
</i>
<div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div> <div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
</div> </div>
</div> </div>

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

@ -7,6 +7,11 @@
--header-height: 70px; --header-height: 70px;
*/ */
/* Global css*/
html .dashboard {
color: black;
}
/* On link hover, his items with this class will be displayed*/ /* On link hover, his items with this class will be displayed*/
.dashboard li>a .onHover { .dashboard li>a .onHover {
@ -16,8 +21,6 @@
.dashboard li>a:hover .onHover { .dashboard li>a:hover .onHover {
display: block; display: block;
} }
/*---*/
/* Custom width of sidebar, change var: sidebar-width*/ /* Custom width of sidebar, change var: sidebar-width*/
.dashboard #sidebar_main { .dashboard #sidebar_main {
@ -31,15 +34,19 @@
transform: translate3d(0,0,0); transform: translate3d(0,0,0);
} }
.dashboard #sidebar_main .sidebar_main_header {
color: #000000;
}
.dashboard #sidebar_main .menu_section > ul > li > a { .dashboard #sidebar_main .menu_section > ul > li > a {
font-weight: 700; font-weight: 700;
font-size: var(--sidebar-font-size); font-size: var(--sidebar-font-size);
color: rgba(0, 0, 0, 0.70); color: rgba(0, 0, 0, 0.7);
} }
.dashboard #sidebar_main .menu_section > ul > li ul a { .dashboard #sidebar_main .menu_section > ul > li ul a {
font-size: var(--sidebar-font-size); font-size: var(--sidebar-font-size);
color: rgba(0, 0, 0, 0.70); color: rgba(0, 0, 0, 0.7);
} }
@media only screen and (min-width: 1220px) { @media only screen and (min-width: 1220px) {
@ -49,6 +56,7 @@
margin-left: var(--sidebar-width); margin-left: var(--sidebar-width);
} }
} }
/* Custom height of header, change var: header-height*/ /* Custom height of header, change var: header-height*/
body.dashboard { body.dashboard {
padding-top: var(--header-height); padding-top: var(--header-height);
@ -57,26 +65,44 @@ body.dashboard {
.dashboard #header_main { .dashboard #header_main {
padding: calc((var(--header-height) - 48px)/2) 25px; padding: calc((var(--header-height) - 48px)/2) 25px;
} }
/*---*/
/* Custom card*/ /* Custom card*/
.dashboard .md-card .md-card-toolbar-heading-text { .dashboard .md-card .md-card-content {
color: rgba(0, 0, 0, 0.8);
}
.dashboard .md-card .md-card-toolbar .md-card-toolbar-actions {
color: rgba(0, 0, 0, 0.8);
}
.dashboard .md-card .md-card-toolbar .md-card-toolbar-heading-text {
font-weight: 700; font-weight: 700;
} }
/*---*/
/* Breadcrumb*/ /* Breadcrumb*/
.dashboard #breadcrumbs { .dashboard #breadcrumbs {
background: inherit; background: inherit;
} }
/* Notification */ .dashboard #breadcrumbs > li a,
.dashboard #breadcrumbs > li span {
color: rgba(0, 0, 0, 0.4);
font-size: 12px;
line-height: 20px;
}
/*Remove the second close added by theme because it was used uikit 2*/ .dashboard #breadcrumbs > li + li a:before,
.dashboard #breadcrumbs > li + li span:before {
font-weight: 400 !important;
margin-top: -9px;
font-size: 16px;
}
/* Notification */
/* Remove the second close added by theme because it was used uikit 2*/
.dashboard .uk-close::after {content: '';} .dashboard .uk-close::after {content: '';}
/* Change z-index, because of sidebar and header z-index is larger that default */ /* Change z-index, because of sidebar and header z-index is bigger that default */
.dashboard .uk-notification { .dashboard .uk-notification {
z-index: 2000; z-index: 2000;
} }
/*---*/