Added sidebar

.gitignore

@@ -99,3 +99,5 @@ typings/
 
 # next.js build output
 .next
+
+package-lock.json

angular.json

@@ -8,7 +8,11 @@
       "sourceRoot": "src",
       "projectType": "application",
       "prefix": "app",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:component": {
+          "styleext": "scss"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -23,9 +27,15 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/sass/styles.scss",
+              "./node_modules/bootstrap/dist/css/bootstrap.css",
+              "./node_modules/bootstrap/dist/css/bootstrap-grid.css",
+              "./node_modules/bootstrap/dist/css/bootstrap-reboot.css"
             ],
-            "scripts": []
+            "scripts": [
+              "./node_modules/jquery/dist/jquery.min.js",
+              "./node_modules/bootstrap/dist/js/bootstrap.js"
+            ]
           },
           "configurations": {
             "production": {

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
+    "bootstrap": "^4.2.1",
     "core-js": "^2.5.4",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"
@@ -41,7 +42,7 @@
     "karma-coverage-istanbul-reporter": "~2.0.0",
     "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.3.0",
+    "protractor": "^5.4.2",
     "ts-node": "~5.0.1",
     "tslint": "~5.9.1",
     "typescript": "~2.7.2"

src/app/app.component.html

@@ -1,20 +1,2 @@
-<!--The content below is only a placeholder and can be replaced.-->
+<app-sidebar></app-sidebar>
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
 

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import * as $ from 'node_modules/jquery/dist/jquery';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,90 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'app';
+
+  ngOnInit() {
+    $(document).ready(() => {
+      $('#sidebarCollapse').on('click', () => {
+        $('#sidebar').toggleClass('active');
+        $('.hideable').toggleClass('hide');
+      });
+      $('#content nav div.collapse li a.nav-link i.far.fa-star').hover(() => {
+        $('#content nav div.collapse li a.nav-link i.far.fa-star').toggleClass('fas');
+      });
+      $('#content nav div.collapse li a.nav-link i.far.fa-trash-alt').hover(() => {
+        $('#content nav div.collapse li a.nav-link i.far.fa-trash-alt').toggleClass('fas');
+      });
+      $('#content nav div.collapse li a.nav-link i.far.fa-paper-plane').hover(() => {
+        $('#content nav div.collapse li a.nav-link i.far.fa-paper-plane').toggleClass('fas');
+      });
+      // $('#command').keyup((e) => {
+      //   const code = (e.keyCode ? e.keyCode : e.which);
+      //   if (code === 13) {
+      //     $('#widgets').children().addClass('hide');
+      //     $('#successAlert').addClass('hide');
+      //     $('#dangetAlert').addClass('hide');
+      //     $('#intentBox').addClass('hide');
+      //     const command = document.getElementById('command').value;
+      //     if (command) {
+      //       const text = { text: command };
+      //       recastclient.getAndCallProcessIntent(command, text);
+      //     } else {
+      //       dom.showEmptyCommandMessage('Please type some relevant words in the command box.');
+      //     }
+      //   }
+      // });
+      $('#btnFavorites').click(() => {
+    
+      });
+      $('#btnClearCommand').click(() => {
+        $('#command').val('');
+        $('#command').focus();
+      });
+      function hitEnter(command) {
+        const commandInputField = $('#command');
+        if (command) commandInputField.val(command);
+        const e = $.Event('keyup');
+        e.which = 13;
+        commandInputField.focus();
+        commandInputField.trigger(e);
+      }
+      $('#btnFireCommand').click(() => {
+        hitEnter("");
+      });
+      $('#hideInfoAlert').on('click', () => {
+        $('#intentBox').addClass('hide');
+      });
+      $('#hideSuccessAlert').on('click', () => {
+        $('#successAlert').addClass('hide');
+      });
+      $('#conversations').on('click', '.close', function () {
+        const $target = $(this).closest('.card');
+        const line = $target.next();
+        $target.hide('slow', () => { $target.remove(); });
+        line.hide('slow', () => { line.remove(); });
+      });
+      $('#conversations').on('click', '.btn.btn-info.float-right', function () {
+        const parentText = $(this).closest('.card-text').text();
+        const command = parentText.substring(0, parentText.indexOf('Repeat'));
+        hitEnter(command);
+      });
+      $('#hideDangerAlert').on('click', () => {
+        $('#dangerAlert').addClass('hide');
+      });
+      // $('#git_bridge').on('click', () => {
+      //   window.location.href = 'https://github.com/login/oauth/authorize?scope=user:email:repo&client_id=f6f649a1fe2dfea082ba';
+      // });
+      const localHistory = JSON.parse(window.localStorage.getItem('currentState'));
+      // window.onload = initOps();
+    
+      function initOps() {
+        $('#command').focus();
+        // dom.loadConversations(helper.concatenateAndSort(localHistory));
+      }
+      if (window.location.href.match(/\?code=(.*)/)) {
+        const code = window.location.href.match(/\?code=(.*)/)[1];
+        // app.getToken(code);
+      }
+    });
+  }
 }

src/app/app.module.ts

@@ -1,14 +1,18 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
+import { SidebarComponent } from './components/l2/sidebar/sidebar.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    SidebarComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/l2/sidebar/sidebar.component.html

@@ -0,0 +1,70 @@
+<div class="wrapper">
+  <nav id="sidebar" class="active">
+
+    <div class="sidebar-header">
+      <button type="button" id="sidebarCollapse" class="btn btn-info">
+        <i class="fas fa-align-justify"></i>
+      </button>
+      <h3 class="logotext">Microbot</h3>
+      <!-- <strong>MB</strong> -->
+    </div>
+
+    <ul class="list-unstyled components">
+      <li class="active">
+        <!-- data-toggle="collapse"  -->
+        <a href="#homeSubmenu">
+          <i class="fas fa-home"></i>
+          <span class="hideable hide">Home</span>
+        </a>
+      </li>
+      <li>
+        <a href="#">
+          <i class="fas fa-briefcase"></i>
+          <span class="hideable hide">About</span>
+        </a>
+        <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
+          <i class="fas fa-copy"></i>
+          <span class="hideable hide">Tasks</span>
+        </a>
+        <ul class="collapse list-unstyled" id="pageSubmenu">
+          <li>
+            <a href="#">Repo</a>
+          </li>
+          <li>
+            <a href="#">Issues</a>
+          </li>
+          <li>
+            <a href="#">Admin</a>
+          </li>
+        </ul>
+      </li>
+      <li>
+        <a href="#">
+          <i class="fas fa-image"></i>
+          <span class="hideable hide">Favorites</span>
+        </a>
+      </li>
+      <li>
+        <a href="#">
+          <i class="fas fa-question"></i>
+          <span class="hideable hide">FAQ</span>
+        </a>
+      </li>
+      <li>
+        <a href="#">
+          <i class="fas fa-paper-plane"></i>
+          <span class="hideable hide">Contact</span>
+        </a>
+      </li>
+    </ul>
+
+    <!-- <ul class="list-unstyled CTAs">
+      <li>
+          <a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a>
+      </li>
+      <li>
+          <a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
+      </li>
+  </ul> -->
+  </nav>
+</div>

src/app/components/l2/sidebar/sidebar.component.scss

@@ -0,0 +1,436 @@
+@import "./src/sass/_variables.scss";
+
+a,
+a:hover,
+a:focus {
+    color: inherit;
+    text-decoration: none;
+    transition: all 0.3s;
+}
+
+.navbar {
+    padding: 15px 10px;
+    background: #fff;
+    border: none;
+    border-radius: 0 5px 5px 0;
+    margin-bottom: 40px;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.navbar-btn {
+    box-shadow: none;
+    outline: none !important;
+    border: none;
+}
+
+.line {
+    width: 100%;
+    height: 1px;
+    border-bottom: 1px dashed #ddd;
+    margin: 20px 0;
+}
+
+i,
+span {
+    display: inline-block;
+}
+
+/* ---------------------------------------------------
+    SIDEBAR STYLE
+----------------------------------------------------- */
+
+.wrapper {
+    display: flex;
+    align-items: stretch;
+}
+
+#sidebar {
+    min-width: 250px;
+    max-width: 250px;
+    background: $theme-supplementer;
+    color: $themeColor-Dark;
+    transition: all 0.3s;
+}
+
+#sidebar.active {
+    min-width: 80px;
+    max-width: 80px;
+    text-align: center;
+}
+
+#sidebar.active .sidebar-header h3,
+#sidebar.active .CTAs {
+    display: none;
+}
+
+.sidebar-header h3 {
+  display: inline;
+  padding-left: 0.6em;
+  vertical-align: middle;
+}
+
+#sidebar.active .sidebar-header strong {
+    display: block;
+}
+
+#sidebar ul li a {
+    text-align: left;
+}
+
+#sidebar.active ul li a {
+    padding: 20px 10px;
+    text-align: center;
+    font-size: 0.85em;
+}
+
+#sidebar.active ul li a i {
+    margin-right: 0;
+    display: block;
+    font-size: 1.8em;
+    margin-bottom: 5px;
+}
+
+#sidebar.active ul ul a {
+    padding: 10px !important;
+}
+
+#sidebar.active .dropdown-toggle::after {
+    top: auto;
+    bottom: 10px;
+    right: 50%;
+    -webkit-transform: translateX(50%);
+    -ms-transform: translateX(50%);
+    transform: translateX(50%);
+}
+
+#sidebar .sidebar-header {
+    padding: 20px;
+    background:$themeColor-Dark;
+}
+
+#sidebar .sidebar-header strong {
+    display: none;
+    font-size: 1.8em;
+}
+
+#sidebar ul.components {
+    padding: 20px 0;
+    border-bottom: 3px solid $themeColor-Dark;
+}
+
+#sidebar ul li a {
+    padding: 10px;
+    font-size: 1.1em;
+    display: block;
+}
+
+#sidebar ul li a:hover {
+    color: #7386D5;
+    background: #fff;
+}
+
+#sidebar ul li a i {
+    margin-right: 10px;
+}
+
+#sidebar ul li.active>a,
+a[aria-expanded="true"] {
+    color: $theme-supplementer;
+    background:$themeColor-Dark;
+}
+
+a[data-toggle="collapse"] {
+    position: relative;
+}
+
+.dropdown-toggle::after {
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    transform: translateY(-50%);
+}
+
+ul ul a {
+    font-size: 0.9em !important;
+    padding-left: 30px !important;
+    background: white;
+    font-weight: bolder;
+}
+
+ul.CTAs {
+    padding: 20px;
+}
+
+ul.CTAs a {
+    text-align: center;
+    font-size: 0.9em !important;
+    display: block;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+a.download {
+    background: #fff;
+    color: #7386D5;
+}
+
+a.article,
+a.article:hover {
+    background: #6d7fcc !important;
+    color: #fff !important;
+}
+
+/* ---------------------------------------------------
+    CONTENT STYLE
+----------------------------------------------------- */
+
+#content {
+    width: 100%;
+    padding: 20px;
+    min-height: 100vh;
+    transition: all 0.3s;
+}
+
+/* ---------------------------------------------------
+    MEDIAQUERIES
+----------------------------------------------------- */
+
+@media (max-width: 768px) {
+    #sidebar {
+        min-width: 80px;
+        max-width: 80px;
+        text-align: center;
+        margin-left: -80px !important;
+    }
+    .dropdown-toggle::after {
+        top: auto;
+        bottom: 10px;
+        right: 50%;
+        -webkit-transform: translateX(50%);
+        -ms-transform: translateX(50%);
+        transform: translateX(50%);
+    }
+    #sidebar.active {
+        margin-left: 0 !important;
+    }
+    #sidebar .sidebar-header h3,
+    #sidebar .CTAs {
+        display: none;
+    }
+    #sidebar .sidebar-header strong {
+        display: block;
+    }
+    #sidebar ul li a {
+        padding: 20px 10px;
+    }
+    #sidebar ul li a span {
+        font-size: 0.85em;
+    }
+    #sidebar ul li a i {
+        margin-right: 0;
+        display: block;
+    }
+    #sidebar ul ul a {
+        padding: 10px !important;
+    }
+    #sidebar ul li a i {
+        font-size: 1.3em;
+    }
+    #sidebar {
+        margin-left: 0;
+    }
+    #sidebarCollapse span {
+        display: none;
+    }
+    .text-muted {
+        color: #bcb !important;
+    }
+}
+
+@media(min-width: 576px) {
+    .card-group>.card:first-child {
+        border-top-right-radius: .25rem;
+        border-bottom-right-radius: .25rem;
+    }
+    .card-group>.card:not(:first-child):not(:last-child):not(:only-child) {
+        border-radius: .25rem;
+    }
+    .card-group>.card:last-child {
+        border-top-left-radius: .25rem;
+        border-bottom-left-radius: .25rem;
+    }
+}
+/* -------------------------------------------------
+ADDITIONS
+--------------------------------------------------*/
+.hide {
+  display: none;
+}
+
+.prompt {
+  display: flex;
+  width: 2em;
+  border-right: 1px solid #c99034;
+  background-color: #f5d38b;
+  width: 4%;
+  margin-bottom: 40px;
+  border-radius: 4px 0 0 4px;
+}
+
+.promptext {
+  animation:blinkingText 0.8s infinite;
+  color: #975f04;
+  text-align: center;
+  line-height: 2em;
+  font: 1.5em bolder;
+  margin: auto;
+}
+
+.good {
+    animation: anim .3s ease-in-out;
+}
+
+.repoLink {
+    color: #000;
+    font-weight: bolder;
+    text-decoration: underline;
+}
+
+.headerprompt {
+  display: flex;
+  width: 100%;
+}
+
+.logotext {
+  color: $theme-supplementer;
+}
+
+#content nav div.collapse li a.nav-link i.far {
+  color: $theme-supplementer;
+  font-size: 1.8em;
+  padding: 0.2em;
+}
+
+#loading-img {
+    background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
+    height: 100%;
+    z-index: 20;
+}
+
+.overlay {
+    background: #e9e9e9;
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0.5;
+}
+
+.loader {
+    border: 0px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 2px solid #3498db;
+    border-right: 2px solid #3498db;
+    width: 20px;
+    height: 20px;
+    -webkit-animation: spin 2s linear infinite; /* Safari */
+    animation: spin 2s linear infinite;
+  }
+.card:not(.widget) {
+    background: linear-gradient(to right, white, lightblue)
+}
+.light-red {
+    // background:linear-gradient(white, lightblue);
+    background: linear-gradient(to right, white, #dfc99a)
+}
+  
+// f3d98c
+.featureRequest {
+    background-color : #007bff;
+    color: white;
+    font-size: 1.5em;
+    padding: 10px 20px;
+    border-radius: 30px;
+}
+  
+  #featureRequest {
+    position: fixed;
+    bottom: 2em;
+    right: 2.5em;
+  }
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes anim {
+    0% {
+      display: none;
+      opacity: 0;
+    }
+    1% {
+      display: block;
+      opacity: 0;
+      transform: scale(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+}
+@keyframes blinkingText {
+  0%{     color: #000;    }
+  49%{    color: transparent; }
+  50%{    color: transparent; }
+  99%{    color:transparent;  }
+  100%{   color: #000;    }
+}
+
+/* --------------------------------------------------
+  OVERRIDES
+  --------------------------------------------------*/
+  .btn:not(.featureRequest) {
+    background-color: $theme-supplementer;
+    color: $themeColor-Dark
+  }
+
+  #content #header .navbar {
+    width: 96%;
+  }
+
+  .navbar-form {
+    width: 88%;
+  }
+
+  .form-control {
+    padding: .6rem 1em;
+  }
+
+  .container-fluid {
+    padding-left: 0.3em;
+  }
+
+  .card-group {
+    flex-direction:column;
+  }
+
+  #command.form-control {
+      width: 87%;
+  }
+
+  .ml-auto {
+      margin-left: 0!important;
+  }
+
+  .btn-info {
+      border-color: orange;
+  }
+
+  .btn-info:hover {
+    border-color: orange;
+    opacity: 1
+}

src/app/components/l2/sidebar/sidebar.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/l2/sidebar/sidebar.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss']
+})
+export class SidebarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/index.html

@@ -7,6 +7,9 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
+    crossorigin="anonymous">
 </head>
 <body>
   <app-root></app-root>

src/sass/_variables.scss

@@ -0,0 +1,4 @@
+$themeColor-Light: #f3e2c7;
+$themeColor-Dark:#252525;
+$theme-font: verdana, sans-serif;
+$theme-supplementer: #f39c12;

src/sass/styles.scss

@@ -0,0 +1,19 @@
+@import "./src/sass/_variables.scss";
+
+html {
+    height: 100%;
+}
+
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: $themeColor-Dark;
+    min-height: 100%;
+}
+
+p {
+    font-family: 'Poppins', sans-serif;
+    font-size: 1.1em;
+    font-weight: 300;
+    line-height: 1.7em;
+    // color: #999;
+}