Initial commit

2026-02-10 04:13:02 -05:00 · 2018-06-01 13:58:54 -04:00
parent 1104dc7650
commit 3f745fe93a
9 changed files with 150 additions and 20 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -115,6 +115,14 @@
        "tslib": "1.9.1"
      }
    },
+    "@angular/cdk": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.2.0.tgz",
+      "integrity": "sha512-K5GMMxsIJOETwX9lE9rDz/Fg7EiacZnJP3/nN1cElZ9fmf1eKna/gxICMpKL3uy/VDik8DvH98J8DUKgj6CoNA==",
+      "requires": {
+        "tslib": "1.9.1"
+      }
+    },
    "@angular/cli": {
      "version": "6.0.5",
      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.5.tgz",
@@ -343,6 +351,14 @@
      "integrity": "sha512-yeEMS8GwEhyMKD4nlzg/0Ug56k5Zb58uShjVlh+kr6WWHMRzAtecvNHePlakPjxyWzf/EIDWnMJV31HGOGQYZg==",
      "dev": true
    },
+    "@angular/material": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.2.0.tgz",
+      "integrity": "sha512-4vC2Ycrf1ORP6iGIy9qExVpbjqHJ/ObEQd72pVDQyK127O8cxhGhEiX8QvxdeAGREVxqwfhUGEK/vjH3o110fQ==",
+      "requires": {
+        "tslib": "1.9.1"
+      }
+    },
    "@angular/platform-browser": {
      "version": "6.0.3",
      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.3.tgz",
@@ -4305,6 +4321,11 @@
      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
      "dev": true
    },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
    "handle-thing": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
--- a/package.json
+++ b/package.json
@@ -11,16 +11,19 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^6.0.0",
+    "@angular/animations": "^6.0.3",
+    "@angular/cdk": "^6.2.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
+    "@angular/material": "^6.2.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.4",
+    "hammerjs": "^2.0.8",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
--- a/src/app/app-material.module.ts
+++ b/src/app/app-material.module.ts
@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatTableModule } from '@angular/material/table';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTabsModule } from '@angular/material/tabs';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatButtonModule,
+    MatCardModule,
+    MatTableModule,
+    MatFormFieldModule
+  ],
+  exports: [
+    MatToolbarModule,
+    MatFormFieldModule,
+    MatTableModule,
+    MatIconModule,
+    MatButtonModule,
+    MatTabsModule,
+    MatCardModule
+  ]
+})
+export class AppMaterialModule { }
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -0,0 +1,37 @@
+.logo {
+  font-style: oblique;
+  letter-spacing: 1px;
+}
+
+nav {
+  margin-left: 26px;
+}
+
+.nav_header {
+  list-style-type: none;
+  overflow: hidden;
+  /* padding: 0; */
+}
+
+.nav_header li {
+  float: left;
+}
+
+li a {
+  display: block;
+  padding: 8px 14px;
+  color: white;
+  text-decoration: none;
+}
+
+li a:hover {
+  background: #424242;
+}
+.demo-tab-content {
+  color: white;
+  padding: 16px;
+}
+.container {
+  margin: 2em auto;
+  width: 70%;
+}
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,20 +1,42 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<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==">
+<mat-toolbar color="primary">
+  <mat-toolbar-row>
+    <span class="logo">ACE Inventory Managment</span>
+    <nav>
+      <ul class="nav_header">
+        <li>
+          <a href="#">Home</a>
+        </li>
+        <li>
+          <a href="#">Products</a>
+        </li>
+        <li>
+          <a href="#">Add Product</a>
+        </li>
+        <li>
+          <a href="#">LogIn</a>
+        </li>
+      </ul>
+    </nav>
+  </mat-toolbar-row>
+</mat-toolbar>
+<div class="container">
+  <mat-card>
+    <mat-tab-group>
+      <mat-tab label="About">
+        <div class="demo-tab-content">
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
+          text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
+          book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
+          unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+          and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+        </div>
+      </mat-tab>
+      <mat-tab label="Dashboard">
+        <div class="demo-tab-content">
+          Content 2
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card>
 </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>
-
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AppMaterialModule } from './app-material.module';

 import { AppComponent } from './app.component';

@@ -8,7 +10,9 @@ import { AppComponent } from './app.component';
    AppComponent
  ],
  imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule,
+    AppMaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,7 @@

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
  <app-root></app-root>
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import 'hammerjs';

 if (environment.production) {
  enableProdMode();
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import "~@angular/material/prebuilt-themes/pink-bluegrey.css";
+* {
+  margin: 0;
+}
+body {
+  background: #212121;
+  box-sizing: border-box;
+}