Users/benfeely/docs perf (#4)

* Fix bug in import.

* Add some margin below triangle.

* Updates to triangles to support user controlled size.

* Updates to the rendering style, showing content.

* Extra fix.

* Done updating performance profiles.

* Add dot-count to the triangles.

* Toggle profile images zoomed and not.

* Improve the layout a bit for fabric component docs.

* Fix format for output under buttons.

* Switching from Material to Semantic UI for demo.
There is already an Angular version for Material, so not much point of enabling Material React components in Angular.

* Add basic support for Semantic UI button.

Author: benfeely

.angular-cli.json

@@ -99,9 +99,9 @@
       "tags": []
     },
     {
-      "name": "material",
+      "name": "semantic-ui",
       "appRoot": "",
-      "root": "libs/material/src",
+      "root": "libs/semantic-ui/src",
       "test": "../../../test.js",
       "tags": []
     },

apps/demo/src/app/app.module.ts

@@ -2,12 +2,12 @@ import { NgModule } from '@angular/core';
 import { NxModule } from '@nrwl/nx';
 
 import { AngularReactBrowserModule } from '@angular-react/core';
-import { FabButtonComponent, FabDialogModule } from '@angular-react/fabric';
+import { FabDialogModule, FabButtonModule } from '@angular-react/fabric';
 import { AppComponent } from './app.component';
 
 
 @NgModule({
-  imports: [AngularReactBrowserModule, NxModule.forRoot(), FabButtonComponent, FabDialogModule],
+  imports: [AngularReactBrowserModule, NxModule.forRoot(), FabButtonModule, FabDialogModule],
   declarations: [AppComponent],
   bootstrap: [AppComponent]
 })

apps/docs/src/app/app-routing.module.ts

@@ -7,7 +7,7 @@ import {
   DocsComponent,
   FabricComponent,
   LandingComponent,
-  MaterialComponent,
+  SemanticUiComponent,
   MixedPerfComponent,
   PerformanceComponent,
   ProfilesComponent,
@@ -26,7 +26,7 @@ const routes: Routes = [
     { path: 'components', component: ComponentDocsComponent, children: [
       { path: '', redirectTo: 'fabric', pathMatch: 'full' },
       { path: 'fabric', component: FabricComponent },
-      { path: 'material', component: MaterialComponent },
+      { path: 'semantic-ui', component: SemanticUiComponent },
     ] },
     { path: 'docs', component: DocsComponent },
 ];

apps/docs/src/app/app.module.ts

@@ -13,6 +13,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { ReactComponentsModule } from './react-components';
 import { AppComponent } from './app.component';
 import { FabricModule } from './fabric.module';
+import { SemanticModule } from './semantic.module';
 
 
 @NgModule({
@@ -23,6 +24,7 @@ import { FabricModule } from './fabric.module';
     BrowserAnimationsModule,
     MaterialModule,
     FabricModule,
+    SemanticModule,
 
     SharedModule,
     ReactComponentsModule,

apps/docs/src/app/components/components.module.ts

@@ -12,12 +12,14 @@ import { IconsComponent } from './icons/icons.component';
 import { SubNavComponent } from './sub-nav/sub-nav.component';
 import { SharedModule } from '../shared';
 import { FabricModule } from '../fabric.module';
+import { PageHeaderComponent } from './page-header/page-header.component';
 
 
 const components = [
   DotComponent,
   IconsComponent,
   NavbarComponent,
+  PageHeaderComponent,
   SubNavComponent,
   TriangleComponent,
 ];

apps/docs/src/app/components/dot/dot.component.html

@@ -6,6 +6,7 @@
   [style.top]="y"
   [style.color]="color"
   [style.background-color]="backgroundColor"
+  [style.font-size]="size"
   (mouseenter)="onMouseEnter($event)"
   (mouseleave)="onMouseLeave($event)"
 >

apps/docs/src/app/components/page-header/page-header.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

apps/docs/src/app/components/page-header/page-header.component.scss

@@ -0,0 +1,23 @@
+:host {
+  display: flex;
+  // flex-direction: row;
+  // justify-content: last-baseline;
+
+  /deep/ {
+    h1, h2, h3, h4, h5, h6 {
+      display: inline-block;
+      margin: 0;
+      padding-bottom: 4px;
+      margin-right: 10px;
+    }
+
+    div {
+      flex-grow: 1;
+    }
+
+    button {
+      margin-left: -8px;
+    }
+  }
+
+}

…docs/material/material.component.spec.ts …age-header/page-header.component.spec.tsapps/docs/src/app/containers/component-docs/material/material.component.spec.ts renamed to apps/docs/src/app/components/page-header/page-header.component.spec.ts apps/docs/src/app/containers/component-docs/material/material.component.spec.ts renamed to apps/docs/src/app/components/page-header/page-header.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MaterialComponent } from './material.component';
+import { PageHeaderComponent } from './page-header.component';
 
-describe('MaterialComponent', () => {
-  let component: MaterialComponent;
-  let fixture: ComponentFixture<MaterialComponent>;
+describe('PageHeaderComponent', () => {
+  let component: PageHeaderComponent;
+  let fixture: ComponentFixture<PageHeaderComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ MaterialComponent ]
+      declarations: [ PageHeaderComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(MaterialComponent);
+    fixture = TestBed.createComponent(PageHeaderComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

apps/docs/src/app/components/page-header/page-header.component.ts

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