From f68b7187e9cee6390989a13825bfbd131d091c18 Mon Sep 17 00:00:00 2001
From: Argiro Kokogiannaki <argirok@di.uoa.gr>
Date: Mon, 26 Oct 2020 13:53:07 +0000
Subject: [PATCH] [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
---
 .../manageStakeholders.component.html         | 22 ++++++++---
 .../manageStakeholders.component.ts           |  6 ++-
 src/app/monitor/monitor.component.html        |  6 +--
 src/app/topic/indicators.component.html       |  2 +-
 src/app/topic/topic.component.html            | 39 +++++++++----------
 src/assets/dashboard-theme/structure.css      |  5 ++-
 src/assets/monitor-custom.css                 |  6 +--
 src/assets/new.css                            | 29 ++++++++++----
 8 files changed, 74 insertions(+), 41 deletions(-)

diff --git a/src/app/manageStakeholders/manageStakeholders.component.html b/src/app/manageStakeholders/manageStakeholders.component.html
index a3b3ef9..7a9368f 100644
--- a/src/app/manageStakeholders/manageStakeholders.component.html
+++ b/src/app/manageStakeholders/manageStakeholders.component.html
@@ -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">
diff --git a/src/app/manageStakeholders/manageStakeholders.component.ts b/src/app/manageStakeholders/manageStakeholders.component.ts
index 861aff5..cefec38 100644
--- a/src/app/manageStakeholders/manageStakeholders.component.ts
+++ b/src/app/manageStakeholders/manageStakeholders.component.ts
@@ -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;
+  }
 }
diff --git a/src/app/monitor/monitor.component.html b/src/app/monitor/monitor.component.html
index 0c9f83f..9c00027 100644
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@@ -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>
diff --git a/src/app/topic/indicators.component.html b/src/app/topic/indicators.component.html
index 04976e8..5116eab 100644
--- a/src/app/topic/indicators.component.html
+++ b/src/app/topic/indicators.component.html
@@ -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">
diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html
index 8a4770c..3153979 100644
--- a/src/app/topic/topic.component.html
+++ b/src/app/topic/topic.component.html
@@ -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">
diff --git a/src/assets/dashboard-theme/structure.css b/src/assets/dashboard-theme/structure.css
index b8ea9aa..811dd22 100644
--- a/src/assets/dashboard-theme/structure.css
+++ b/src/assets/dashboard-theme/structure.css
@@ -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;
diff --git a/src/assets/monitor-custom.css b/src/assets/monitor-custom.css
index afb412e..6892abe 100644
--- a/src/assets/monitor-custom.css
+++ b/src/assets/monitor-custom.css
@@ -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;
 }
 
diff --git a/src/assets/new.css b/src/assets/new.css
index d3f789a..5332674 100644
--- a/src/assets/new.css
+++ b/src/assets/new.css
@@ -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;
+
+}