[Monitor Dashboard]: Finish users page

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59717 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/app-routing.module.ts

@@ -35,22 +35,27 @@ const routes: Routes = [
     path: 'admin/:stakeholder/users',
     loadChildren: './users/users.module#UsersModule',
     resolve: {envSpecific: EnvironmentSpecificResolver},
-    data: {hasAdminMenu: true}
+    data: {hasAdminMenu: true},
+    pathMatch: 'full'
   },
   {
     path: 'admin/:stakeholder',
     loadChildren: './general/general.module#GeneralModule',
     resolve: {envSpecific: EnvironmentSpecificResolver},
-    data: {hasAdminMenu: true}
+    data: {hasAdminMenu: true},
+    pathMatch: 'full'
   },
   {
     path: 'admin/:stakeholder/indicators/:topic',
     loadChildren: './topic/topic.module#TopicModule',
     resolve: {envSpecific: EnvironmentSpecificResolver},
+    pathMatch: 'full'
   },
-  {  path: 'admin/:stakeholder/indicators',
+  {
+    path: 'admin/:stakeholder/indicators',
     loadChildren: './topic/topic.module#TopicModule',
     resolve: {envSpecific: EnvironmentSpecificResolver},
+    pathMatch: 'full'
   },
 
   /* Library paths*/

src/app/general/edit-stakeholder/edit-stakeholder.component.ts

@@ -40,10 +40,13 @@ import {UtilitiesService} from "../../openaireLibrary/services/utilities.service
         <div dashboard-input class="uk-width-1-1" [hideControl]="stakeholderFb.get('isUpload').value"
              hint="Upload or link the logo of your profile" [placeholder]="'Write link to the logo'"
              [formInput]="stakeholderFb.get('logoUrl')" label="Logo">
-          <div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-width-2-5@m uk-width-1-1">
+          <div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-width-2-5@l uk-width-1-1">
             <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
-              <div class="uk-width-1-2@m uk-width-1-1 uk-text-center">
-                <button class="uk-button uk-button-secondary" (click)="file.click()">Upload a file</button>
+              <div class="uk-width-3-4@l uk-width-1-1 uk-flex uk-flex-center">
+                <button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap" (click)="file.click()">
+                  <icon name="cloud_upload" [flex]="true"></icon>
+                  <span class="uk-margin-small-left">Upload a file</span>
+                </button>
               </div>
               <div class="uk-text-center uk-text-bold uk-width-expand">
                 OR

src/app/general/edit-stakeholder/edit-stakeholder.module.ts

@@ -5,7 +5,7 @@ import {InputModule} from "../../openaireLibrary/dashboard/sharedComponents/inpu
 import {ReactiveFormsModule} from "@angular/forms";
 import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
 import {IconsService} from "../../openaireLibrary/utils/icons/icons.service";
-import {edit, remove} from "../../openaireLibrary/utils/icons/icons";
+import {cloud_upload, edit, remove} from "../../openaireLibrary/utils/icons/icons";
 
 @NgModule({
   imports: [CommonModule, InputModule, ReactiveFormsModule, IconsModule],
@@ -14,6 +14,6 @@ import {edit, remove} from "../../openaireLibrary/utils/icons/icons";
 })
 export class EditStakeholderModule {
   constructor(private iconsService: IconsService) {
-    this.iconsService.registerIcons([remove, edit]);
+    this.iconsService.registerIcons([remove, edit, cloud_upload]);
   }
 }

src/app/topic/topic.component.html

@@ -19,6 +19,7 @@
     </a>
     </div>
     <ul class="uk-list">
+      <li  class="submenu_trigger">
       <li  class="submenu_trigger">
         <ul class="uk-nav-default">
           <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">

src/assets/dashboard-theme/button.css

@@ -0,0 +1,19 @@
+.uk-button {
+  font-weight: 700;
+}
+
+.uk-button:not(.uk-button-link) {
+  text-transform: none;
+  font-size: 13px;
+}
+
+.uk-button.uk-button-default:enabled {
+  border-color: #B5B5B5;
+  color: currentColor;
+  background-color: #FFFFFF;
+}
+
+.uk-button.uk-button-default:hover:enabled {
+  background-color: #FFFFFF;
+  border-color: currentColor;
+}

src/assets/dashboard-theme/card.css

@@ -0,0 +1,27 @@
+.uk-card.uk-card-default {
+  color: currentColor !important;
+  background-color: #FFFFFF;
+  box-shadow: 0 3px 6px #0000001A;
+}
+
+.uk-card.uk-card-default:not([class*="uk-padding"]) {
+  padding: 19px 25px;
+}
+
+.uk-card .uk-grid.uk-grid-divider>:not(.uk-first-column)::before {
+  border-left: 1px solid currentColor;
+  opacity: 0.2;
+}
+
+.uk-card .uk-button.action {
+  background: #FFFFFF;
+  box-shadow: 0 3px 6px #00000029;
+  border-radius: 40px;
+  font-family: "Roboto", sans-serif;
+  border: none;
+  color: var(--muted-color);
+  text-transform: none;
+  width: fit-content;
+  padding: 9px 22px;
+  line-height: 25px;
+}

src/assets/dashboard-theme/main.css

@@ -3,6 +3,6 @@
 @import "structure.css";
 @import "input.css";
 @import "dropdowns.css";
-/*@import "tabs-pills.css";
+@import "tabs-pills.css";
 @import "card.css";
-@import "button.css";*/
+@import "button.css";

src/assets/dashboard-theme/tabs-pills.css

@@ -0,0 +1,22 @@
+.uk-subnav-pill>*>a:first-child {
+  color: currentColor !important;
+  font-size: 13px;
+  text-transform: none;
+  opacity: 0.5;
+  border-radius: 40px;
+  border: 1px solid currentColor !important;
+  padding: 6px 18px;
+  line-height: 18px;
+}
+
+.uk-subnav-pill > li> a:hover  {
+  opacity: 1;
+}
+
+.uk-subnav-pill > li.uk-active > a {
+  opacity: 1;
+  border-color: var(--primary-color);
+  color: var(--contrast-color) !important;
+  background-color: var(--primary-color);
+  font-weight: bold;
+}

src/assets/dashboard-theme/text.css

@@ -1,6 +1,7 @@
 :root {
   --font-size: 16px;
-  --text-color: #212121;
+  --text-color: #1A1A1A;
+  --muted-color: #4D4D4D;
   --small-font-size: 14px;
   --large-font-size: 18px;
 }
@@ -18,3 +19,7 @@ body {
 .uk-text-large {
   font-size: var(--large-font-size);
 }
+
+.uk-text-muted {
+  color: var(--muted-color);
+}