fix(pmp-web): add tooltips to the navigation bar items

fixes #178
valueadd-poland · Apr 24, 2020 · 153b7f3 · 153b7f3
1 parent f1e6703
commit 153b7f3
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 9 deletions.
diff --git a/...feature/src/lib/containers/repositories-statistics/repositories-statistics.component.html b/...feature/src/lib/containers/repositories-statistics/repositories-statistics.component.html
@@ -1,4 +1,4 @@
-<h1 class="page__title">Projects with PRs pending</h1>
+<h1 class="page__title">Repositories with PRs pending</h1>
 
 <pmp-statistics-overview-table
   (navigateToItem)="onNavigateToRepository($event)"

diff --git a/...ory-statistics/feature/src/lib/repository-statistics/repository-statistics.component.html b/...ory-statistics/feature/src/lib/repository-statistics/repository-statistics.component.html
@@ -1,4 +1,4 @@
-<pmp-go-back-header link="/repositories">Projects with PRs pending</pmp-go-back-header>
+<pmp-go-back-header link="/repositories">Repositories with PRs pending</pmp-go-back-header>
 
 <div class="repository-statistics__container">
   <pmp-header-container

diff --git a/...tistics/feature/src/lib/containers/reviewer-statistics/reviewer-statistics.component.html b/...tistics/feature/src/lib/containers/reviewer-statistics/reviewer-statistics.component.html
@@ -1,4 +1,4 @@
-<pmp-go-back-header link="/reviewer">Projects with PRs pending</pmp-go-back-header>
+<pmp-go-back-header link="/reviewer">Reviewers with PRs pending</pmp-go-back-header>
 
 <div class="user-statistics__container">
   <pmp-header-container

diff --git a/...stics/feature/src/lib/containers/reviewers-statistics/reviewers-statistics.component.html b/...stics/feature/src/lib/containers/reviewers-statistics/reviewers-statistics.component.html
@@ -1,4 +1,4 @@
-<h1 class="page__title">Repository reviewers with PRs pending</h1>
+<h1 class="page__title">Reviewers with PRs pending</h1>
 
 <pmp-statistics-overview-table
   [data]="reviewersStatisticsCollection$ | async"

diff --git a/libs/pmp-web/shared/ui-sidebar/src/lib/components/sidebar/sidebar.component.html b/libs/pmp-web/shared/ui-sidebar/src/lib/components/sidebar/sidebar.component.html
@@ -5,20 +5,26 @@
         class="sidebar__item"
         [routerLink]="['/reviewer']"
         routerLinkActive="sidebar__item--active"
+        matTooltip="Reviewers"
+        matTooltipPosition="right"
       >
         <mat-icon>people</mat-icon>
       </a>
       <a
         class="sidebar__item"
         [routerLink]="['/repositories']"
         routerLinkActive="sidebar__item--active"
+        matTooltip="Repositories"
+        matTooltipPosition="right"
       >
         <mat-icon>folder</mat-icon>
       </a>
       <a
         class="sidebar__item"
         [routerLink]="['/repository-settings']"
         routerLinkActive="sidebar__item--active"
+        matTooltip="Settings"
+        matTooltipPosition="right"
       >
         <mat-icon>settings</mat-icon>
       </a>

diff --git a/libs/pmp-web/shared/ui-sidebar/src/lib/components/sidebar/sidebar.component.scss b/libs/pmp-web/shared/ui-sidebar/src/lib/components/sidebar/sidebar.component.scss
@@ -27,14 +27,14 @@ mat-sidenav {
 }
 
 .sidebar__item {
-  & mat-icon {
+  mat-icon {
     width: 32px;
     height: 32px;
     font-size: 32px;
     cursor: pointer;
+    color: gray;
   }
 
-  color: gray;
   display: block;
   overflow: hidden;
 
@@ -46,11 +46,11 @@ mat-sidenav {
     margin-top: 20px;
   }
 
-  &:hover {
+  &:hover mat-icon {
     color: #fc3b56;
   }
 
-  &.sidebar__item--active {
+  &.sidebar__item--active mat-icon {
     color: #fc3b56;
   }
 }
diff --git a/libs/pmp-web/shared/ui-sidebar/src/lib/pmp-web-shared-ui-sidebar.module.ts b/libs/pmp-web/shared/ui-sidebar/src/lib/pmp-web-shared-ui-sidebar.module.ts
@@ -3,9 +3,10 @@ import { NgModule } from '@angular/core';
 import { MatIconModule, MatSidenavModule } from '@angular/material';
 import { RouterModule } from '@angular/router';
 import { SidebarComponent } from './components/sidebar/sidebar.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
-  imports: [CommonModule, MatIconModule, RouterModule, MatSidenavModule],
+  imports: [MatTooltipModule, CommonModule, MatIconModule, RouterModule, MatSidenavModule],
   declarations: [SidebarComponent],
   exports: [SidebarComponent]
 })