First iteration of displaying toots

Mamoth/Mamoth.njsproj

@@ -49,6 +49,8 @@
     <Content Include="src\app\components\streams-selection-footer\streams-selection-footer.component.html" />
     <Content Include="src\app\components\stream\stream.component.css" />
     <Content Include="src\app\components\stream\stream.component.html" />
+    <Content Include="src\app\components\toot\toot.component.css" />
+    <Content Include="src\app\components\toot\toot.component.html" />
     <Content Include="src\assets\.gitkeep" />
     <Content Include="src\favicon.ico" />
     <Content Include="src\index.html" />
@@ -72,6 +74,7 @@
     <Folder Include="src\app\components\streams-main-display\" />
     <Folder Include="src\app\components\streams-selection-footer\" />
     <Folder Include="src\app\components\stream\" />
+    <Folder Include="src\app\components\toot\" />
     <Folder Include="src\app\models\" />
     <Folder Include="src\app\services\" />
     <Folder Include="src\assets\" />
@@ -91,9 +94,12 @@
     <TypeScriptCompile Include="src\app\components\streams-selection-footer\streams-selection-footer.component.ts" />
     <TypeScriptCompile Include="src\app\components\stream\stream.component.spec.ts" />
     <TypeScriptCompile Include="src\app\components\stream\stream.component.ts" />
+    <TypeScriptCompile Include="src\app\components\toot\toot.component.spec.ts" />
+    <TypeScriptCompile Include="src\app\components\toot\toot.component.ts" />
     <TypeScriptCompile Include="src\app\models\account.models.ts">
       <SubType>Code</SubType>
     </TypeScriptCompile>
+    <TypeScriptCompile Include="src\app\models\stream.models.ts" />
     <TypeScriptCompile Include="src\environments\environment.prod.ts" />
     <TypeScriptCompile Include="src\environments\environment.ts" />
     <TypeScriptCompile Include="src\main.ts" />

Mamoth/src/app/app.module.ts

@@ -8,6 +8,7 @@ import { LeftSideBarComponent } from './components/left-side-bar/left-side-bar.c
 import { StreamsMainDisplayComponent } from './components/streams-main-display/streams-main-display.component';
 import { StreamComponent } from './components/stream/stream.component';
 import { StreamsSelectionFooterComponent } from './components/streams-selection-footer/streams-selection-footer.component';
+import { TootComponent } from './components/toot/toot.component';
 
 
 @NgModule({
@@ -16,7 +17,8 @@ import { StreamsSelectionFooterComponent } from './components/streams-selection-
     LeftSideBarComponent,
     StreamsMainDisplayComponent,
     StreamComponent,
-    StreamsSelectionFooterComponent
+    StreamsSelectionFooterComponent,
+    TootComponent
   ],
   imports: [
     BrowserModule, 

Mamoth/src/app/components/left-side-bar/left-side-bar.component.ts

@@ -1,10 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { AccountWrapper } from '../../models/account.models';
+import { Component, OnInit } from "@angular/core";
+import { AccountWrapper } from "../../models/account.models";
 
 @Component({
-  selector: 'app-left-side-bar',
-  templateUrl: './left-side-bar.component.html',
-  styleUrls: ['./left-side-bar.component.css']
+  selector: "app-left-side-bar",
+  templateUrl: "./left-side-bar.component.html",
+  styleUrls: ["./left-side-bar.component.css"]
 })
 export class LeftSideBarComponent implements OnInit {
   accounts: AccountWrapper[] = [];

Mamoth/src/app/components/stream/stream.component.css

@@ -1,7 +1,31 @@
 #mam-stream-column {
   width: 300px;
-  height: calc(100%);
+  height: calc(100% - 30px);
 
   background-color: aqua;
 
 }
+
+#mam-stream-header {
+  width: calc(100%);
+  height: 30px;
+
+  background-color: black;
+  
+  border-bottom: 1px solid whitesmoke;
+}
+
+  #mam-stream-header h1 {
+    color: whitesmoke;
+    font-size: 0.8em;
+    font-weight: normal;
+    margin: 0;
+    padding: 8px 0 0 10px;
+  }
+
+
+#mam-stream-toots {
+  height: calc(100% - 30px);
+  overflow: auto;
+
+}

Mamoth/src/app/components/stream/stream.component.html

@@ -1,3 +1,10 @@
 <div id="mam-stream-column">
-  stream works!
+  <div id="mam-stream-header">
+    <a href title="return to top" (click)="goToTop()"><h1>{{ stream.streamName.toUpperCase() }}</h1></a>
+  </div>
+  <div id="mam-stream-toots">
+    <div *ngFor="let toot of toots">
+      <app-toot [toot]="toot"></app-toot>
+    </div>
+  </div>
 </div>

Mamoth/src/app/components/stream/stream.component.ts

@@ -1,15 +1,38 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
+import { Stream, TootWrapper } from "../../models/stream.models";
+import { AccountWrapper } from "../../models/account.models";
 
 @Component({
-  selector: 'app-stream',
-  templateUrl: './stream.component.html',
-  styleUrls: ['./stream.component.css']
+  selector: "app-stream",
+  templateUrl: "./stream.component.html",
+  styleUrls: ["./stream.component.css"]
 })
 export class StreamComponent implements OnInit {
+  stream: Stream;
+  toots: TootWrapper[] = [];
 
   constructor() { }
 
   ngOnInit() {
+    //Stubs
+    const newStream = new Stream();
+    newStream.streamName = "Stream Name";
+    this.stream = newStream;
+
+    const acc1 = new AccountWrapper();
+    acc1.username = "@mastodon.social@Gargron";
+    acc1.avatar = "https://files.mastodon.social/accounts/avatars/000/000/001/original/4df197532c6b768c.png";
+
+    for (let i = 0; i < 20; i++) {
+      const newToot = new TootWrapper();
+      newToot.account = acc1;
+      newToot.content = "Lorem Elsass ipsum tristique semper elit jetz gehts los lacus habitant Hans sagittis baeckeoffe condimentum id, salu bredele ch'ai libero, ftomi! hop Pfourtz ! id munster auctor, Miss Dahlias rhoncus Yo dû. Salu bissame turpis ante amet non sed gal Spätzle Gal !";
+      this.toots.push(newToot);
+    }
+  }
+
+  goToTop(): boolean {
+    return false;
   }
 
 }

Mamoth/src/app/components/toot/toot.component.css

@@ -0,0 +1,32 @@
+#mam-toot {
+  border: solid white;
+  border-width: 0 0 1px 0;
+  margin: 0;
+  padding: 0;
+}
+
+#mam-toot-avatar {
+  margin: 5px 0 0 5px;
+  width: 50px;
+  height: 50px;
+  float: left;
+
+}
+
+  #mam-toot-avatar img {
+    width: 50px;
+    height: 50px;
+    border-radius: 5px;
+    margin: 0;
+  }
+
+
+#mam-toot-content {
+  /*width: calc(100% - 50px);*/
+  margin: 5px 5px 5px 60px ;
+}
+
+#mam-toot-content p {
+  margin: 0;
+  font-size: 0.85em;
+}

Mamoth/src/app/components/toot/toot.component.html

@@ -0,0 +1,8 @@
+<div id="mam-toot">
+  <div id="mam-toot-avatar">
+    <img src="{{ toot.account.avatar }}" />
+  </div>
+  <div id="mam-toot-content">
+    <p>{{ toot.content }}</p>
+  </div>
+</div>

Mamoth/src/app/components/toot/toot.component.spec.ts

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

Mamoth/src/app/components/toot/toot.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { TootWrapper } from "../../models/stream.models";
+
+@Component({
+  selector: "app-toot",
+  templateUrl: "./toot.component.html",
+  styleUrls: ["./toot.component.css"]
+})
+export class TootComponent implements OnInit {
+  @Input() toot: TootWrapper;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

Mamoth/src/app/models/stream.models.ts

@@ -0,0 +1,10 @@
+import { AccountWrapper } from "./account.models";
+
+export class Stream {
+  streamName: string;
+}
+
+export class TootWrapper {
+  account: AccountWrapper;
+  content: string;
+}

Mamoth/src/styles.css

@@ -1,9 +1,11 @@
 /* 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;
 
+  font-family: sans-serif;
+
+  background-color: lightcoral;
 }