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

[Monitor Dashboard|Trunk] 

-add tabs for manage profiles page
- update css for admin tabs
- add css for visibility quick menu



git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59693 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Argiro Kokogiannaki 2020-10-26 13:53:07 +00:00
parent 264a16c9bf
commit f68b7187e9
8 changed files with 74 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,13 @@
<div id="page_content">
<div id="page_content_inner">
<div>
<ul class="uk-tab customTabs admin" uk-tab>
<li [class.uk-active]="tab === 'managers'"><a (click)="changeTab('all')"><span class="title">All</span></a></li>
<li *ngIf="isAdministrator()" [class.uk-active]="tab === 'members'"><a (click)="changeTab('templates')"><span class="title">Profile templates</span></a></li>
<li [class.uk-active]="tab === 'members'"><a (click)="changeTab('profiles')"><span class="title">Profiles</span></a></li>
</ul>
</div>
<div class="uk-padding-small md-bg-white" uk-grid>
<div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
<div>
@ -15,8 +23,9 @@
</div>
</div>
</div>
<h6 class="main">Default Profiles</h6>
<div class = "uk-child-width-1-4@m uk-child-width-1-3@s uk-grid-match uk-grid-small"
<div *ngIf="tab != 'profiles' && isAdministrator()" class="uk-margin-top">
<h6 class="main">Profile Templates</h6>
<div class = "uk-child-width-1-4@m uk-child-width-1-3@s uk-grid-match uk-grid-small"
uk-grid>
<loading *ngIf="loading"></loading>
<ng-template ngFor [ngForOf]="displayDefaultStakeholders" let-stakeholder let-i="index">
@ -27,8 +36,10 @@
{text:'Create a new default profile.', isDefault:true}"></ng-container>
</div>
</div>
<h4 class="uk-text-bold">Profiles</h4>
<div class="uk-grid-match uk-grid-small uk-child-width-1-4@m uk-child-width-1-3@s"
</div>
<div *ngIf="tab != 'templates'" class="uk-margin-top">
<h6 class="">Profiles</h6>
<div class="uk-grid-match uk-grid-small uk-child-width-1-4@m uk-child-width-1-3@s"
uk-grid>
<loading *ngIf="loading"></loading>
<ng-template ngFor [ngForOf]="displayStakeholders" let-stakeholder let-i="index">
@ -40,6 +51,7 @@
' select indicators based on a default or a blank profile.', isDefault:false}"></ng-container>
</div>
</div>
</div>
</div>
</div>
@ -69,7 +81,7 @@
</div>
</div>
</div>
<div class="md-card-dropdown uk-inline clickable">
<div class="md-card-dropdown uk-inline clickable visibilityMenuIcon">
<i [attr.uk-icon]="stakeholderUtils.isPublicIcon.get(stakeholder.visibility)"
(click)="$event.stopPropagation();$event.preventDefault()"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">

6
src/app/manageStakeholders/manageStakeholders.component.ts
View File

@ -52,7 +52,8 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
@ViewChild('editStakeholderModal') editStakeholderModal: AlertModal;
@ViewChild('deleteStakeholderModal') deleteStakeholderModal: AlertModal;
@ViewChild('editStakeholderComponent') editStakeholderComponent: EditStakeholderComponent;
tab:"all" | "templates" | "profiles" = "all";
constructor(private stakeholderService: StakeholderService,
private userManagementService: UserManagementService,
private propertiesService: EnvironmentSpecificService,
@ -235,4 +236,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
public isAdministrator(): boolean {
return Session.isPortalAdministrator(this.user);
}
changeTab(tab:"all" | "templates" | "profiles"){
this.tab = tab;
}
}

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

@ -40,20 +40,20 @@
</ng-template>
<div id="page_content" [class.greyOut]="filterToggle" (click)=" (filterToggle)?filterToggle = false:filterToggle">
<div>
<div class="uk-navbar-container uk-navbar-transparent uk-sticky uk-sticky-fixed" style="top: 70px; position:
<div class="uk-navbar-container uk-navbar-transparent uk-sticky uk-sticky-fixed" style="top: 100px; position:
fixed; width: 100%">
<div class="uk-margin-large-left">
<nav class=" ">
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="">
<ul *ngIf="activeTopic && activeTopic.categories.length > 1"
class="categoriesTabs uk-tab ">
class="customTabs uk-tab ">
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category let-i="index">
<li *ngIf="isPublicOrIsMember(category.visibility)"
[class.uk-active]="category.alias ===
activeCategory.alias">
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)"
class="uk-margin-remove-bottom uk-h4"
><span>{{category.name}}</span></a>
><span class="title">{{category.name}}</span></a>
</li>
</ng-template>
</ul>

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

@ -492,7 +492,7 @@
<!--</modal-alert>-->
<ng-template #visibilityOptions let-indicator="indicator" >
<span class="uk-invisible-hover uk-padding-remove" (click)="$event.stopPropagation();$event.preventDefault()">
<i [attr.uk-icon]="stakeholderUtils.isPublicIcon.get(indicator.visibility)" class="clickable"></i>
<i [attr.uk-icon]="stakeholderUtils.isPublicIcon.get(indicator.visibility)" class="clickable visibilityMenuIcon"></i>
<div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let v of stakeholderUtils.visibility" [class.selectedVisibility]="v.value == indicator.visibility">

39
src/app/topic/topic.component.html
View File

@ -1,32 +1,31 @@
<aside id="sidebar_main">
<div id="sidebar_content">
<div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom uk-text-center">
<!--<div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom uk-text-center">
<img *ngIf="properties.environment =='beta' || properties.environment =='development'" class="badge"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
[alt]="properties.environment">
<div class="uk-position-relative uk-margin-small-top">
<!-- <div *ngIf="!stakeholder.defaultId" class="uk-badge default">Default</div>-->
<!-- <img class="logo" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">-->
<!-- <div class="uk-margin-top" *ngIf="!stakeholder.logoUrl" >{{stakeholder.name}}</div>-->
&lt;!&ndash; <div *ngIf="!stakeholder.defaultId" class="uk-badge default">Default</div>&ndash;&gt;
&lt;!&ndash; <img class="logo" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">&ndash;&gt;
&lt;!&ndash; <div class="uk-margin-top" *ngIf="!stakeholder.logoUrl" >{{stakeholder.name}}</div>&ndash;&gt;
<a [href]="properties.domain + properties.baseLink"><div class="portalLogo logo" ></div></a>
</div>
</div>
<div *ngIf="stakeholder && stakeholder.topics[topicIndex]" class="menu_section">
</div>-->
<div *ngIf="stakeholder && stakeholder.topics[topicIndex]" class="menu_section uk-margin-top">
<div class="uk-text-center">
<a [routerLink]="'/admin/' + stakeholder.alias" class="uk-h5 uk-link-heading">
<span class="" uk-icon="icon:close;ratio:1.8"></span>
<span class="uk-margin-left">Indicators</span>
</a>
</div>
<ul class="uk-list">
<li class="uk-margin-bottom md-bg-blue-900 uk-padding-small">
<a [routerLink]="'/admin/' + stakeholder.alias" class="uk-link">
<span class="" uk-icon="icon:close;ratio:2"></span>
</a>
</li>
<li class="submenu_trigger">
<ul class="uk-nav-default">
<ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
<li
[title]="topic.name+': '+(topic.isActive?'Active':'Inactive')+', '+(topic.isPublic?'Public':'Private')"
class="uk-margin-top uk-margin-small-right uk-visible-toggle"
[class.uk-active]="topicIndex == i" [class.uk-text-primary]="topicIndex == i"
[class.uk-active]="topicIndex == i"
[class.uk-text-bold]="topicIndex == i">
<a [routerLink]="'../' + topic.alias" class="uk-flex">
<span *ngIf="topic.icon" class="menu_icon">
@ -64,12 +63,12 @@
</li>
</ng-template>
<li class="uk-text-center uk-margin-top uk-visible-toggle">
<a href="#" (click)="editTopicOpen(-1); $event.preventDefault()">
<span (click)="editTopicOpen(-1); $event.preventDefault()">
<!-- <span class="menu_icon"><i class="material-icons">add</i></span>-->
<span
class="menu_icon uk-icon-button uk-button-primary icon-button-small"><i uk-icon="icon:plus; ratio:0.7"></i></span>
class="menu_icon uk-icon-button portal-icon-button icon-button-small"><i uk-icon="icon:plus; ratio:0.7"></i></span>
<span class="uk-hidden-hover"> Create new topic</span>
</a>
</span>
</li>
</ul>
</li>
@ -90,7 +89,7 @@
<nav class=" ">
<div *ngIf="stakeholder && stakeholder.topics[topicIndex]" class="">
<ul *ngIf="stakeholder.topics[topicIndex] && stakeholder.topics[topicIndex].categories.length > 0"
class="categoriesTabs uk-tab admin uk-flex uk-flex-middle">
class="customTabs uk-tab admin uk-flex uk-flex-middle">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
<li class="uk-visible-toggle"
[class.uk-active]="category.alias === stakeholder.topics[topicIndex].categories[categoryIndex].alias">
@ -100,7 +99,7 @@
<ng-container *ngTemplateOutlet="visibilityOptions; context:
{i:i, type: 'cat',
visibility: stakeholder.topics[topicIndex].categories[i].visibility}"></ng-container>
<span> {{category.name}}</span>
<span class="title"> {{category.name}}</span>
<span class="uk-invisible-hover"
(click)="$event.stopPropagation();$event.preventDefault()">
<i class=" onHover" uk-icon="more-vertical"></i>
@ -218,7 +217,7 @@
<ng-template #visibilityOptions let-type="type" let-i="i" let-visibility="visibility" >
<span class="uk-invisible-hover uk-padding-remove" (click)="$event.stopPropagation();$event.preventDefault()">
<i [attr.uk-icon]="stakeholderUtils.isPublicIcon.get(visibility)" class="clickable"></i>
<i [attr.uk-icon]="stakeholderUtils.isPublicIcon.get(visibility)" class="clickable visibilityMenuIcon"></i>
<div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let v of stakeholderUtils.visibility" [class.selectedVisibility]="v.value == visibility">

5
src/assets/dashboard-theme/structure.css
View File

@ -41,9 +41,12 @@
color: rgba(0, 0, 0, .7);
}
#sidebar_main .menu_section > ul > li > a:hover, #sidebar_main .menu_section > ul li.current_section > a {
#sidebar_main .menu_section > ul > li > a:hover{
color: var(--secondary-color);
}
#sidebar_main .menu_section > ul li.current_section > a {
color: var(--primary-color);
}
#sidebar_switcher_toggle {
top: 320px !important;

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

@ -54,7 +54,7 @@
border: 0 transparent !important;
color: var(--portal-main-color) !important
}
.stakeholderPage .categoriesTabs >li a{
.stakeholderPage .customTabs >li a{
font-size: 14px;
text-transform: capitalize;
}
@ -62,7 +62,7 @@
font-size: 13px;
text-transform: capitalize;
}
.stakeholderPage .categoriesTabs > li.uk-active a, .stakeholderPage .subCategoriesTabs > li.uk-active a{
.stakeholderPage .customTabs > li.uk-active a, .stakeholderPage .subCategoriesTabs > li.uk-active a{
font-weight:bold;
}
@ -177,7 +177,7 @@ bottom a:not(.license), bottom a > :not(svg) {
opacity: 1 ;
}
.uk-tab.categoriesTabs::before {
.uk-tab.customTabs::before {
border-bottom: none !important;
}

29
src/assets/new.css
View File

@ -133,13 +133,13 @@
*/
.categoriesTabs.uk-tab > li > a, .categoriesTabs.uk-tab > li.uk-active > a,.categoriesTabs.uk-tab > li > a:focus, .categoriesTabs.uk-tab > li > a:hover {
.customTabs.uk-tab > li > a, .customTabs.uk-tab > li.uk-active > a,.customTabs.uk-tab > li > a:focus, .customTabs.uk-tab > li > a:hover {
border: 0 transparent !important;
}
.categoriesTabs.uk-tab > li.uk-active > a,.categoriesTabs.uk-tab > li > a:focus, .categoriesTabs.uk-tab > li > a:hover {
.customTabs.uk-tab > li.uk-active > a,.customTabs.uk-tab > li > a:focus, .customTabs.uk-tab > li > a:hover {
color: var(--secondary-color) !important
}
.categoriesTabs >li a{
.customTabs >li a{
font-size: 14px;
text-transform: capitalize;
}
@ -147,7 +147,7 @@
font-size: 13px;
text-transform: capitalize;
}
.categoriesTabs > li.uk-active a, .subCategoriesTabs > li.uk-active a{
.customTabs > li.uk-active a, .subCategoriesTabs > li.uk-active a{
font-weight:bold;
}
.uk-subnav-pill.subCategoriesTabs > li > a{
@ -167,14 +167,22 @@
opacity: 1 ;
}
.uk-tab.categoriesTabs::before {
.uk-tab.customTabs::before {
border-bottom: none !important;
}
/*dashboard tabs*/
.categoriesTabs.uk-tab.admin > li.uk-active > a, .categoriesTabs.uk-tab.admin > li > a:focus, .categoriesTabs.uk-tab.admin > li > a:hover {
color: var(--primary-color) !important
.customTabs.uk-tab.admin > li.uk-active > a .title {
color: var(--primary-color) !important;
border-bottom: 3.5px solid var(--portal-main-color);
}
.customTabs.uk-tab.admin > li > a:hover .uk-icon, .uk-nav-default > li > a:hover .uk-icon{
color: #646464 !important;
}
.customTabs.uk-tab.admin > li:not(.uk-active) > a.title:focus, .customTabs.uk-tab.admin > li:not(.uk-active) > a:hover,
uk-nav-default > li:not(.uk-active) > a.title:focus, .uk-nav-default > li:not(.uk-active) > a:hover{
color: var(--secondary-color) !important
}
.uk-subnav-pill.subCategoriesTabs.admin > li.uk-active > a{
border: 1px solid var(--primary-color);
@ -287,3 +295,10 @@ li.selectedVisibility::before {
.uk-modal .large-modal {
width: 800px;
}
.visibilityMenuIcon{
border-right: 1px solid var(--secondary-color);
border-bottom: 1px solid var(--secondary-color);
padding: 0px 2px 3px 0px;
}