Merge pull request #22 from tomwanzek/migrate-to-material

Migrate to material

.angular-cli.json

@@ -18,8 +18,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
-        "styles.css"
+        "my-theme.scss",
+        "styles.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

e2e/app.e2e-spec.ts

@@ -22,7 +22,7 @@ describe('d3-ng2-demo App', function () {
   it('should have one svg with initial dimensions ' +
   initialDragZoom2Dimensions.width + 'x' + initialDragZoom2Dimensions.height +
   ' in app-drag-zoom-2 component', () => {
-    let svg = page.getComponentElement('app-drag-zoom-2', 'svg');
+    const svg = page.getComponentElement('app-drag-zoom-2', 'svg');
     expect(svg.count()).toEqual(1, 'Incorrect number of elements');
     expect(svg.first().getAttribute('width')).toEqual(initialDragZoom2Dimensions.width + '', 'Incorrect width.');
     expect(svg.first().getAttribute('height')).toEqual(initialDragZoom2Dimensions.height + '', 'Incorrect height.');
@@ -32,13 +32,13 @@ describe('d3-ng2-demo App', function () {
   it('should resize the layout of the Drag & Zoom II visual to '
   + resizedDragZoom2Dimensions.width + 'x' + resizedDragZoom2Dimensions.height +
   ' after pressing "large" button', () => {
-    let button = page.getLayoutButton('large');
+    const button = page.getLayoutButton('large');
 
     expect(button.count()).toEqual(1, 'Incorrect number of "large" buttons');
 
     button.first().click();
 
-    let svg = page.getComponentElement('app-drag-zoom-2', 'svg');
+    const svg = page.getComponentElement('app-drag-zoom-2', 'svg');
     expect(svg.count()).toEqual(1, 'Incorrect number of svg elements');
     expect(svg.first().getAttribute('width')).toEqual(resizedDragZoom2Dimensions.width + '', 'Incorrect width.');
     expect(svg.first().getAttribute('height')).toEqual(resizedDragZoom2Dimensions.height + '', 'Incorrect height.');

e2e/app.po.ts

@@ -11,7 +11,7 @@ export class D3Ng2DemoPage {
   }
 
   getLayoutButton(buttonText: string) {
-    return element(by.tagName('app-wrapper-drag-zoom-2')).all(by.css('button.layout-' + buttonText));
+    return element(by.tagName('app-wrapper-drag-zoom-2')).all(by.css('mat-button-toggle.layout-' + buttonText));
   }
 
 }

karma.conf.js

@@ -34,6 +34,8 @@ module.exports = function (config) {
         flags: ['--no-sandbox']
       }
     },
+    browserDisconnectTimeout: 20000,
+    browserNoActivityTimeout: 20000,
     singleRun: false
   });
 };

package.json

@@ -28,15 +28,17 @@
   },
   "dependencies": {
     "@angular/animations": "^5.1.0",
+    "@angular/cdk": "^5.0.4",
     "@angular/common": "^5.1.0",
     "@angular/compiler": "^5.1.0",
     "@angular/core": "^5.1.0",
+    "@angular/flex-layout": "^2.0.0-beta.12",
     "@angular/forms": "^5.1.0",
     "@angular/http": "^5.1.0",
+    "@angular/material": "^5.0.4",
     "@angular/platform-browser": "^5.1.0",
     "@angular/platform-browser-dynamic": "^5.1.0",
     "@angular/router": "^5.1.0",
-    "bootstrap": "3.3.7",
     "core-js": "^2.4.1",
     "d3-ng2-service": "1.23.3",
     "rxjs": "^5.5.2",

src/_extra-colors.scss

@@ -0,0 +1,187 @@
+@import '~@angular/material/theming';
+
+@mixin extra-color-classes($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $accent: map-get($theme, accent);
+  $primary: map-get($theme, primary);
+  $warn: map-get($theme, warn);
+
+  .extra-code {
+    color: mat-color($accent, darker);
+    background-color: mat-color($accent, lighter);
+  }
+
+  .extra-text {
+    color: mat-color($foreground, text);
+  }
+
+  .extra-divider {
+    color: mat-color($foreground, divider);
+  }
+
+  .extra-hint-text {
+    color: mat-color($foreground, hint-text);
+  }
+
+  .extra-secondary-text {
+    color: mat-color($foreground, secondary-text);
+  }
+
+  // Primary Colors ---------------------------------------------------
+
+  .extra-primary-default {
+    color: mat-color($primary, default);
+  }
+
+  .extra-primary-lighter {
+    color: mat-color($primary, lighter);
+  }
+
+  .extra-primary-darker {
+    color: mat-color($primary, darker);
+  }
+
+  .extra-primary-default-bg {
+    background-color: mat-color($primary, default-contrast);
+  }
+
+  .extra-primary-lighter-bg {
+    background-color: mat-color($primary, lighter-contrast);
+  }
+
+  .extra-primary-darker-bg {
+    background-color: mat-color($primary, darker-contrast);
+  }
+
+  // Primary Colors Inverted ---------------------------------------------------
+
+  .extra-inverted-primary-default {
+    color: mat-color($primary, default-contrast);
+  }
+
+  .extra-inverted-primary-lighter {
+    color: mat-color($primary, lighter-contrast);
+  }
+
+  .extra-inverted-primary-darker {
+    color: mat-color($primary, darker-contrast);
+  }
+
+  .extra-inverted-primary-default-bg {
+    background-color: mat-color($primary);
+  }
+
+  .extra-inverted-primary-lighter-bg {
+    background-color: mat-color($primary, lighter);
+  }
+
+  .extra-inverted-primary-darker-bg {
+    background-color: mat-color($primary, darker);
+  }
+
+  // Accent Colors ---------------------------------------------------
+
+  .extra-accent-default {
+    color: mat-color($accent, default);
+  }
+
+  .extra-accent-lighter {
+    color: mat-color($accent, lighter);
+  }
+
+  .extra-accent-darker {
+    color: mat-color($accent, darker);
+  }
+
+  .extra-accent-default-bg {
+    background-color: mat-color($accent, default-contrast);
+  }
+
+  .extra-accent-lighter-bg {
+    background-color: mat-color($accent, lighter-contrast);
+  }
+
+  .extra-accent-darker-bg {
+    background-color: mat-color($accent, darker-contrast);
+  }
+
+  // Accent Colors Inverted ---------------------------------------------------
+
+  .extra-inverted-accent-default {
+    color: mat-color($accent, default-contrast);
+  }
+
+  .extra-inverted-accent-lighter {
+    color: mat-color($accent, lighter-contrast);
+  }
+
+  .extra-inverted-accent-darker {
+    color: mat-color($accent, darker-contrast);
+  }
+
+  .extra-inverted-accent-default-bg {
+    background-color: mat-color($accent);
+  }
+
+  .extra-inverted-accent-lighter-bg {
+    background-color: mat-color($accent, lighter);
+  }
+
+  .extra-inverted-accent-darker-bg {
+    background-color: mat-color($accent, darker);
+  }
+
+  // Warn Colors ---------------------------------------------------
+
+  .extra-warn-default {
+    color: mat-color($warn, default);
+  }
+
+  .extra-warn-lighter {
+    color: mat-color($warn, lighter);
+  }
+
+  .extra-warn-darker {
+    color: mat-color($warn, darker);
+  }
+
+  .extra-warn-default-bg {
+    background-color: mat-color($warn, default-contrast);
+  }
+
+  .extra-warn-lighter-bg {
+    background-color: mat-color($warn, lighter-contrast);
+  }
+
+  .extra-warn-darker-bg {
+    background-color: mat-color($warn, darker-contrast);
+  }
+
+  // Warn Colors Inverted ---------------------------------------------------
+
+  .extra-inverted-warn-default {
+    color: mat-color($warn, default-contrast);
+  }
+
+  .extra-inverted-warn-lighter {
+    color: mat-color($warn, lighter-contrast);
+  }
+
+  .extra-inverted-warn-darker {
+    color: mat-color($warn, darker-contrast);
+  }
+
+  .extra-inverted-warn-default-bg {
+    background-color: mat-color($warn);
+  }
+
+  .extra-inverted-warn-lighter-bg {
+    background-color: mat-color($warn, lighter);
+  }
+
+  .extra-inverted-warn-darker-bg {
+    background-color: mat-color($warn, darker);
+  }
+
+}

src/app/app.component.css

@@ -1,18 +1,15 @@
-div.jumbotron {
-  background-color: rgb(230, 230, 255);
+.spacer {
+  flex: 1 1 auto;
 }
 
-div.jumbotron p {
-  font-size: 14px;
+.splash-image {
+  max-height: 400px;
 }
 
-div.jumbotron img {
-  max-height: 400px;
-  margin-left: auto;
-  margin-right: auto;
+.text-justify p {
+  text-align: justify;
 }
 
-footer {
-  background-color: #222;
-  color: #eee;
+.text-center p {
+  text-align: center;
 }