feat(api): Add api item icons

Author: BrunnerLivio

src/app/homepage/api/api-list/api-list.component.html

@@ -2,12 +2,18 @@
   <h1>
     API List
   </h1>
-  <section #content></section>
-  <section *ngFor="let section of apiSection | async">
-    <h3>{{ section.title }}</h3>
+  <section class="api-list" *ngFor="let section of apiSection | async">
+    <h2>
+      <a [href]="'/api/' + section.name">{{ section.name }}</a>
+    </h2>
     <ul>
       <li class="api-list-item" *ngFor="let item of section.items">
-        <a [href]="'/api/' + section.name + '/' + item.title">{{ item.docType }} - {{ item.title }} </a>
+        <a [href]="'/api/' + section.name + '/' + item.title">
+          <span class="symbol {{ item.docType }}"></span>
+          <span class="item-title">
+            {{ item.title }}
+          </span>
+        </a>
       </li>
     </ul>
   </section>

src/app/homepage/api/api-list/api-list.component.scss

@@ -1,3 +1,10 @@
+@import '../../../../scss/variables.scss';
+
+.api-list {
+  width: 80%;
+  margin-left: 10%;
+}
+
 .api-list-item {
   list-style: none;
   display: inline-block;
@@ -7,4 +14,49 @@
 
 ul {
   padding: 0;
-}
+}
+
+a {
+  color: $black-color;
+  display: inline-block;
+  line-height: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .item-title {
+    padding: 0 5px;
+    position: relative;
+    top: 2px;
+  }
+}
+
+h2 {
+  a {
+    font-size: 24px;
+    color: $red-color;
+  }
+}
+
+.symbol {
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba($black-color, .24);
+  color: $white-color;
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+  width: 16px;
+
+  // SYMBOL TYPES
+  // Symbol mapping variables in *constants*
+  @each $name, $symbol in $api-symbols {
+    &.#{$name} {
+      background: map-get($symbol, background);
+
+      &:before {
+        content: map-get($symbol, content);
+      }
+    }
+  }
+}

src/app/homepage/api/api-list/api-list.component.ts

@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { Observable, from } from 'rxjs';
+import { Observable } from 'rxjs';
 import { ApiSection, ApiService } from '../api.service';
-import { map, switchMap } from 'rxjs/operators';
-import { isNgTemplate } from '@angular/compiler';
 
 @Component({
   selector: 'app-api-list',

src/scss/variables.scss

@@ -6,3 +6,73 @@ $grey-color: #404040;
 $darkgrey-color: #272727;
 $black-color: #151515;
 $red-color: #ed2945;
+$blue-color: #2196F3;
+$dark-blue-color: #0D47A1;
+$pink-color: #D81B60;
+$amber-color: #FFA000;
+$orange-color: #fb8c00;
+$green-color: #4CAF50;
+$teal-color: #009688;
+$purple-color: #8E24AA;
+$light-green-color: #7CB342;
+$blue-grey-color: #546E7A;
+
+
+$api-symbols: (
+  all: (
+    content: ' ',
+    background: $white-color
+  ),
+  class: (
+    content: 'C',
+    background: $dark-blue-color
+  ),
+  const: (
+    content: 'K',
+    background: $grey-color
+  ),
+  decorator: (
+    content: '@',
+    background: $blue-color
+  ),
+  enum: (
+    content: 'E',
+    background: $amber-color
+  ),
+  function: (
+    content: 'F',
+    background: $green-color
+  ),
+  interface: (
+    content: 'I',
+    background: $teal-color
+  ),
+  let: (
+    content: 'K',
+    background: $grey-color
+  ),
+  nestmodule: (
+    content: 'M',
+    background: $red-color
+  ),
+  injectable: (
+    content: 'I',
+    background: $orange-color
+  ),
+  package: (
+    content: 'Pk',
+    background: $purple-color
+  ),
+  pipe: (
+    content: 'P',
+    background: $blue-grey-color
+  ),
+  type-alias: (
+    content: 'T',
+    background: $light-green-color
+  ),
+  var: (
+    content: 'K',
+    background: $grey-color
+  ),
+);