[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

src/app/app.component.html

@@ -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

src/app/manageStakeholders/manageStakeholders.component.html

@@ -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>

src/app/monitor/monitor.component.html

@@ -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>

src/app/topic/indicators.component.html

@@ -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: 'public'}" (click)="hide(element)">Public</a>
-            <li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'private'}" (click)="hide(element)">Private</a></li>
+            </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"
+    <div [class.list-view]="!grid" [id]="number._id"
-             class="uk-grid-match section uk-grid-small"
+         class="uk-grid-match section uk-grid-small"
-             *ngFor="let number of displayNumbers; let i = index"
+         *ngFor="let number of displayNumbers; let i = index"
-             uk-sortable="group: number" uk-grid>
+         uk-sortable="group: number" uk-grid>
-      <div class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
+      <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">
+                  <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>
+                    <i class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
-                  {{(indicator.isPublic) ? 'Public' : 'Private'}}
+                    {{(indicator.isPublic) ? 'Public' : 'Private'}}
-                </div>
+                  </div>
-                <div class="uk-margin-medium-right uk-flex uk-flex-middle">
+                  <div 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'}}
-                </div>
+                  </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"
+        <div [class.list-view]="!grid" [id]="'chart-' + chart._id"
-                 class="uk-grid-match section uk-grid-small uk-grid"
+             class="uk-grid-match section uk-grid-small uk-grid uk-margin-top"
-                 uk-sortable="group: chart" uk-grid>
+             uk-sortable="group: chart" uk-grid>
-          <div class="tools disable-sortable uk-sortable-nodrag">
+          <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 *ngIf="grid && chartSections.at(i)"
-            <div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="null" label="Add a section title"></div>
+               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>

src/app/topic/indicators.component.ts

@@ -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) {
+  
+  }
 }

src/assets/env-properties.json

@@ -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=",
 

src/assets/monitor-custom.css

@@ -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{
+.dashboard .double-header circle, .dashboard .double-header .login svg,
-    stroke: white;
+.dashboard .double-header svg svg *, .dashboard .double-header .login svg *  {
-    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{
     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);
 }

src/assets/theme-assets/dashboard-custom.css

@@ -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;
+  color: var(--primary-color);
-  border: #0d47a1 solid 1px;
+  border: var(--primary-color) solid 1px;
-}
-
-.dashboard #hide_controls #toggle * {
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
 }
 
 .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 {
+.dashboard .section:not(.list-view):hover {
-  border: rgb(28, 169, 213) solid 1px;
+  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-bottom: 25px solid var(--secondary-color);
-  border-right:solid 12px transparent;
+  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);
 }