Added main display zones

This commit is contained in:
Nicolas Constant 2018-03-15 20:43:53 -04:00
parent 70bca9f5f6
commit 3ec22bac0c
14 changed files with 148 additions and 5 deletions

View File

@ -41,6 +41,10 @@
<Content Include="README.md" />
<Content Include="src\app\app.component.css" />
<Content Include="src\app\app.component.html" />
<Content Include="src\app\components\left-side-bar\left-side-bar.component.css" />
<Content Include="src\app\components\left-side-bar\left-side-bar.component.html" />
<Content Include="src\app\components\streams-main-display\streams-main-display.component.css" />
<Content Include="src\app\components\streams-main-display\streams-main-display.component.html" />
<Content Include="src\assets\.gitkeep" />
<Content Include="src\favicon.ico" />
<Content Include="src\index.html" />
@ -59,6 +63,10 @@
<Folder Include="e2e\" />
<Folder Include="src\" />
<Folder Include="src\app\" />
<Folder Include="src\app\components\left-side-bar\" />
<Folder Include="src\app\components\" />
<Folder Include="src\app\components\streams-main-display\" />
<Folder Include="src\app\services\" />
<Folder Include="src\assets\" />
<Folder Include="src\environments\" />
</ItemGroup>
@ -68,6 +76,10 @@
<TypeScriptCompile Include="src\app\app.component.spec.ts" />
<TypeScriptCompile Include="src\app\app.component.ts" />
<TypeScriptCompile Include="src\app\app.module.ts" />
<TypeScriptCompile Include="src\app\components\left-side-bar\left-side-bar.component.spec.ts" />
<TypeScriptCompile Include="src\app\components\left-side-bar\left-side-bar.component.ts" />
<TypeScriptCompile Include="src\app\components\streams-main-display\streams-main-display.component.spec.ts" />
<TypeScriptCompile Include="src\app\components\streams-main-display\streams-main-display.component.ts" />
<TypeScriptCompile Include="src\environments\environment.prod.ts" />
<TypeScriptCompile Include="src\environments\environment.ts" />
<TypeScriptCompile Include="src\main.ts" />

View File

@ -0,0 +1,11 @@
app-left-side-bar {
}
app-streams-main-display {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50px;
}

View File

@ -1,7 +1,13 @@
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<app-left-side-bar>
</app-left-side-bar>
<app-streams-main-display>
</app-streams-main-display>
<!--<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<button (click)="launchWindow()">Launch Window</button>
</div>
</div>-->

View File

@ -4,11 +4,15 @@ import { NgModule } from '@angular/core';
import { NgxElectronModule } from 'ngx-electron';
import { AppComponent } from './app.component';
import { LeftSideBarComponent } from './components/left-side-bar/left-side-bar.component';
import { StreamsMainDisplayComponent } from './components/streams-main-display/streams-main-display.component';
@NgModule({
declarations: [
AppComponent
AppComponent,
LeftSideBarComponent,
StreamsMainDisplayComponent
],
imports: [
BrowserModule,

View File

@ -0,0 +1,6 @@
#mam-left-bar {
width: 50px;
height: calc(100%);
background: green;
outline: 1px dotted red;
}

View File

@ -0,0 +1,4 @@
<div id="mam-left-bar">
</div>

View File

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

View File

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

View File

@ -0,0 +1,6 @@
#mam-main-display {
width: calc(100%);
height: calc(100%);
background: blue;
outline: 1px dotted red;
}

View File

@ -0,0 +1,4 @@
<div id="mam-main-display">
</div>

View File

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

View File

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

View File

@ -9,6 +9,8 @@
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<app-root>
loading...
</app-root>
</body>
</html>

View File

@ -1 +1,9 @@
/* You can add global styles to this file, and also import other style files */
html, body {
background-color: lightcoral;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}