ui for the sidemenu to make more nice looking

geneontology · Apr 6, 2020 · 1b42fe3 · 1b42fe3
1 parent c8cbd5c
commit 1b42fe3
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 127 deletions.
diff --git a/src/@noctua.search/components/search-form/search-form.component.html b/src/@noctua.search/components/search-form/search-form.component.html
@@ -129,8 +129,8 @@
         <div class="ph-15 noc-annoton-group-row" fxLayout="column">
           <mat-form-field appearance="outline" class="noc-sm">
             <mat-label>Organisms</mat-label>
-            <input matInput formControlName="organism" placeholder="Species" [matAutocomplete]="speciesAuto" />
-            <mat-autocomplete #speciesAuto="matAutocomplete" [displayWith]="organismDisplayFn"
+            <input matInput formControlName="organism" placeholder="Species" [matAutocomplete]="organismAuto" />
+            <mat-autocomplete #organismAuto="matAutocomplete" [displayWith]="organismDisplayFn"
               class="noc-term-autocomplete">
               <mat-option *ngFor="let organism of filteredOrganisms | async" [value]="organism">
                 <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">

diff --git a/src/@noctua.search/services/search-menu.service.ts b/src/@noctua.search/services/search-menu.service.ts
@@ -17,7 +17,7 @@ export class NoctuaSearchMenuService {
             id: 4
         }, contributor: {
             id: 5
-        }, species: {
+        }, organism: {
             id: 6
         },
         history: {

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -18,7 +18,7 @@ import {
     faSitemap,
     faPaw, faUser,
     faUsers, faListAlt,
-    faClock, faCalendarDay, faCalendarWeek
+    faClock, faCalendarDay, faCalendarWeek, faHistory, faSearch
 } from '@fortawesome/free-solid-svg-icons';
 import { faGithub, faFacebook, faTwitter } from '@fortawesome/free-brands-svg-icons';
 import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
@@ -63,15 +63,17 @@ export class AppModule {
         library.addIcons(
             faCalendarDay,
             faCalendarWeek,
+            faClock,
             faFacebook,
             faGithub,
+            faHistory,
             faListAlt,
             faPaw,
-            faUser,
-            faClock,
-            faUsers,
+            faSearch,
             faSitemap,
             faTwitter,
+            faUser,
+            faUsers,
         );
     }
 }
diff --git a/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.html b/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.html
@@ -32,9 +32,11 @@
       <th mat-header-cell *matHeaderCellDef fxFlex="" fxLayout="row" fxLayoutAlign="start center">Contributors</th>
       <td mat-cell *matCellDef="let cam" fxFlex="" fxLayout="row" fxLayoutAlign="start center">
         <mat-chip-list>
-          <mat-chip *ngFor="let contributor of cam.contributors"
+          <mat-chip class="noc-user-chip" *ngFor="let contributor of cam.contributors"
             (click)="noctuaSearchService.filter(noctuaSearchService.filterType.contributors, contributor)">
-            <mat-icon class="s-12">person</mat-icon>
+            <span class="noc-icon">
+              <fa-icon [icon]="['fas', 'user']"></fa-icon>
+            </span>
             <span>{{contributor.name}}</span>
           </mat-chip>
         </mat-chip-list>

diff --git a/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.scss b/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.scss
@@ -64,6 +64,22 @@ $rotate-graph: 235deg;
     max-width: 200px;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    &.noc-user-chip {
+      padding: 0;
+      @include deep-height(25px);
+      font-size: 10px;
+
+      .noc-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 25px;
+        width: 25px;
+        border-radius: 50%;
+        border: #BBB solid 1px;
+      }
+    }
   }
 
 
@@ -137,7 +153,6 @@ $rotate-graph: 235deg;
         @include deep-height(25px);
         font-size: 10px;
       }
-
     }
 
   }

diff --git a/src/app/main/apps/noctua-search/noctua-search.component.html b/src/app/main/apps/noctua-search/noctua-search.component.html
@@ -1,34 +1,39 @@
 <div class="w-100-p h-100-p" fxLayout="row" fxLayoutAlign="start start">
   <div class="noc-sidemenu" fxLayout="column" fxLayoutAlign="start center">
-    <button mat-icon-button color="primary" class="noc-rounded-button"
+    <button mat-icon-button color="" class="noc-rounded-button"
+      [ngClass]="{'noc-active': noctuaSearchMenuService.selectedLeftPanel?.id === noctuaSearchMenuService.leftPanel.filter.id}"
       (click)="toggleLeftDrawer(noctuaSearchMenuService.leftPanel.filter)" matTooltip="Filter"
       [matTooltipPosition]="'after'" [matTooltipShowDelay]="1500">
-      <mat-icon> search </mat-icon>
+      <fa-icon [icon]="['fas', 'search']"></fa-icon>
     </button>
-    <button mat-icon-button color="primary" class="noc-rounded-button" (click)="
-      toggleLeftDrawer(noctuaSearchMenuService.leftPanel.group)" matTooltip="Browse by group"
-      [matTooltipPosition]="'after'" [matTooltipShowDelay]="1000">
-      <mat-icon> people_outline </mat-icon>
-    </button>
-    <button mat-icon-button color="primary" class="noc-rounded-button" (click)="
+    <button mat-icon-button color="" class="noc-rounded-button" (click)="
       toggleLeftDrawer(noctuaSearchMenuService.leftPanel.contributor)" matTooltip="Browse by contributor"
+      [ngClass]="{'noc-active': noctuaSearchMenuService.selectedLeftPanel?.id === noctuaSearchMenuService.leftPanel.contributor.id}"
       [matTooltipPosition]="'after'" [matTooltipShowDelay]="1000">
-      <mat-icon>person_outline</mat-icon>
+      <fa-icon [icon]="['fas', 'user']"></fa-icon>
     </button>
-    <button mat-icon-button color="primary" class="noc-rounded-button" (click)="
-      toggleLeftDrawer(noctuaSearchMenuService.leftPanel.species)" matTooltip="Search by species"
-      [matTooltipPosition]="'after'" [matTooltipShowDelay]="1000">
-      <mat-icon> pets </mat-icon>
+    <button mat-icon-button color="" class="noc-rounded-button" (click)="
+      toggleLeftDrawer(noctuaSearchMenuService.leftPanel.group)"
+      [ngClass]="{'noc-active': noctuaSearchMenuService.selectedLeftPanel?.id === noctuaSearchMenuService.leftPanel.group.id}"
+      matTooltip="Browse by group" [matTooltipPosition]="'after'" [matTooltipShowDelay]="1000">
+      <fa-icon [icon]="['fas', 'users']"></fa-icon>
     </button>
-    <!-- <button mat-icon-button color="primary" class="noc-rounded-button"
+    <button mat-icon-button color="" class="noc-rounded-button" (click)="
+      toggleLeftDrawer(noctuaSearchMenuService.leftPanel.organism)"
+      [ngClass]="{'noc-active': noctuaSearchMenuService.selectedLeftPanel?.id === noctuaSearchMenuService.leftPanel.organism.id}"
+      matTooltip="Search by organism" [matTooltipPosition]="'after'" [matTooltipShowDelay]="1000">
+      <fa-icon [icon]="['fas', 'paw']"></fa-icon>
+    </button>
+    <!-- <button mat-icon-button color="" class="noc-rounded-button"
       (click)="toggleLeftDrawer(noctuaSearchMenuService.leftPanel.relation)" matTooltip="Relation Search"
       [matTooltipPosition]="'after'" [matTooltipShowDelay]="1500">
       <mat-icon class="icon-rotate-relation"> linear_scale </mat-icon>
     </button> -->
-    <button mat-icon-button color="primary" class="noc-rounded-button"
-      (click)="toggleLeftDrawer(noctuaSearchMenuService.leftPanel.history)" matTooltip="History"
-      [matTooltipPosition]="'after'" [matTooltipShowDelay]="1500">
-      <mat-icon> history </mat-icon>
+    <button mat-icon-button color="" class="noc-rounded-button"
+      (click)="toggleLeftDrawer(noctuaSearchMenuService.leftPanel.history)"
+      [ngClass]="{'noc-active': noctuaSearchMenuService.selectedLeftPanel?.id === noctuaSearchMenuService.leftPanel.history.id}"
+      matTooltip="History" [matTooltipPosition]="'after'" [matTooltipShowDelay]="1500">
+      <fa-icon [icon]="['fas', 'history']"></fa-icon>
     </button>
   </div>
   <mat-drawer-container class="w-100-p h-100-p" fxLayout="row" fxLayoutAlign="start start" autosize>
@@ -40,7 +45,7 @@
         <noc-search-groups *ngSwitchCase="noctuaSearchMenuService.leftPanel.group.id"></noc-search-groups>
         <noc-search-contributors *ngSwitchCase="noctuaSearchMenuService.leftPanel.contributor.id">
         </noc-search-contributors>
-        <noc-search-organisms *ngSwitchCase="noctuaSearchMenuService.leftPanel.species.id"></noc-search-organisms>
+        <noc-search-organisms *ngSwitchCase="noctuaSearchMenuService.leftPanel.organism.id"></noc-search-organisms>
         <noc-search-history *ngSwitchCase="noctuaSearchMenuService.leftPanel.history.id"></noc-search-history>
       </div>
     </mat-drawer>

diff --git a/src/app/main/apps/noctua-search/noctua-search.component.scss b/src/app/main/apps/noctua-search/noctua-search.component.scss
@@ -1,113 +1,104 @@
 @import "src/@noctua/scss/noctua";
 @import "src/@noctua.common/scss/noctua.common";
+$primary: map-get($theme, primary);
+$accent: map-get($theme, accent);
 
-.noc-welcome {
-  padding: 10px;
-}
-
-.header {
-  padding-bottom: 10px;
-  background-image: linear-gradient(to right, #00174f, rgba(#00174f, 0.8), rgba(#00174f, 0.5)), url("/assets/images/gene.jpeg");
-  background-blend-mode: initial;
-  background-size: cover;
-  background-position: top;
-
-
-  padding-top: 50px !important;
-  position: relative;
-  // background: #1A237E;
-  // background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
-  flex: 1 0 auto;
-  height: 280px;
-  max-height: 280px;
-  text-align: center;
-  overflow: hidden;
-
-  @include media-breakpoint('lt-md') {
-    height: 200px;
-  }
-
-
+:host {
+  padding: 0px;
+  width: 100%;
+  background-color: #FFF;
 
-  .hero-icon {
-    position: absolute;
-    top: -64px;
-    left: 0px;
-    opacity: 0.04;
-    font-size: 512px !important;
-    width: 512px !important;
-    height: 512px !important;
+  .noc-welcome {
+    padding: 10px;
   }
 
-  h1 {
-    font-size: 40px;
-    font-weight: 300;
-    letter-spacing: 0.01em;
+  .header {
+    padding-bottom: 10px;
+    background-image: linear-gradient(to right, #00174f, rgba(#00174f, 0.8), rgba(#00174f, 0.5)), url("/assets/images/gene.jpeg");
+    background-blend-mode: initial;
+    background-size: cover;
+    background-position: top;
+
+
+    padding-top: 50px !important;
+    position: relative;
+    // background: #1A237E;
+    // background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
+    flex: 1 0 auto;
+    height: 280px;
+    max-height: 280px;
     text-align: center;
-    margin-top: 0;
-    margin-bottom: 16px;
-    color: rgba(white, 0.9);
+    overflow: hidden;
 
     @include media-breakpoint('lt-md') {
-      font-size: 24px;
+      height: 200px;
     }
-  }
 
-  h3 {
-    max-width: 80%;
-    text-align: center;
-    font-weight: 300;
-    letter-spacing: 0.03em;
-    margin: 0;
-    color: #ffffff;
-    line-height: 1.5;
 
-    @include media-breakpoint('lt-md') {
-      font-size: 14px;
-    }
-  }
-
-  h4 {
-    padding-top: 10px;
-    max-width: 80%;
-    text-align: center;
-    font-weight: 300;
-    font-size: 12px;
-    margin: 0;
-    color: rgba(#ffffff, 0.8);
-  }
-}
 
+    .hero-icon {
+      position: absolute;
+      top: -64px;
+      left: 0px;
+      opacity: 0.04;
+      font-size: 512px !important;
+      width: 512px !important;
+      height: 512px !important;
+    }
 
-.noc-left-drawer {
-  @include deep-height(100%);
-  @include deep-width(300px);
-  background-color: #FFF;
-  border-right: #BBB solid 1px;
-  @include mat-elevation(4);
-}
+    h1 {
+      font-size: 40px;
+      font-weight: 300;
+      letter-spacing: 0.01em;
+      text-align: center;
+      margin-top: 0;
+      margin-bottom: 16px;
+      color: rgba(white, 0.9);
+
+      @include media-breakpoint('lt-md') {
+        font-size: 24px;
+      }
+    }
 
-.noc-right-drawer {
-  @include deep-height(100%);
-  background-color: #FFF;
-  border-left: #BBB solid 1px;
-}
+    h3 {
+      max-width: 80%;
+      text-align: center;
+      font-weight: 300;
+      letter-spacing: 0.03em;
+      margin: 0;
+      color: #ffffff;
+      line-height: 1.5;
+
+      @include media-breakpoint('lt-md') {
+        font-size: 14px;
+      }
+    }
 
+    h4 {
+      padding-top: 10px;
+      max-width: 80%;
+      text-align: center;
+      font-weight: 300;
+      font-size: 12px;
+      margin: 0;
+      color: rgba(#ffffff, 0.8);
+    }
+  }
 
-$rotate-relation: 155deg;
 
-.icon-rotate-relation {
-  -webkit-transform: rotate($rotate-relation);
-  -moz-transform: rotate($rotate-relation);
-  -ms-transform: rotate($rotate-relation);
-  -o-transform: rotate($rotate-relation);
-  transform: rotate($rotate-relation);
-}
+  .noc-left-drawer {
+    @include deep-height(100%);
+    @include deep-width(300px);
+    background-color: #FFF;
+    border-right: #BBB solid 1px;
+    @include mat-elevation(4);
+  }
 
-:host {
-  padding: 0px;
-  width: 100%;
-  background-color: #FFF;
+  .noc-right-drawer {
+    @include deep-height(100%);
+    background-color: #FFF;
+    border-left: #BBB solid 1px;
+  }
 
   .mat-drawer-content {
     width: 100%;
@@ -183,21 +174,19 @@ $rotate-relation: 155deg;
     margin-right: 5px;
     @include deep-height(100%);
     @include deep-width(60px);
-    @include mat-elevation(2);
+    // @include mat-elevation(2);
     border-right: #999 solid 1px;
 
     button {
       @include deep-width(60px);
       @include deep-height(60px);
 
-      mat-icon {
-        @include noc-icon-size(28px);
-      }
+      font-size: 20px;
+      color: rgba(map-get($primary, default), 0.5);
 
       &.noc-active {
-        mat-icon {
-          color: $noc-primary-color-light;
-        }
+        font-size: 28px;
+        color: map-get($primary, default)
       }
     }
   }