From 68153225bc3d5819f20102f6ef329c24da97c3e8 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Thu, 15 Mar 2018 23:48:30 -0400 Subject: [PATCH] First iteration of displaying toots --- Mamoth/Mamoth.njsproj | 6 ++++ Mamoth/src/app/app.module.ts | 4 ++- .../left-side-bar/left-side-bar.component.ts | 10 +++--- .../components/stream/stream.component.css | 26 ++++++++++++++- .../components/stream/stream.component.html | 9 +++++- .../app/components/stream/stream.component.ts | 31 +++++++++++++++--- .../app/components/toot/toot.component.css | 32 +++++++++++++++++++ .../app/components/toot/toot.component.html | 8 +++++ .../components/toot/toot.component.spec.ts | 25 +++++++++++++++ .../src/app/components/toot/toot.component.ts | 17 ++++++++++ Mamoth/src/app/models/stream.models.ts | 10 ++++++ Mamoth/src/styles.css | 4 ++- 12 files changed, 169 insertions(+), 13 deletions(-) create mode 100644 Mamoth/src/app/components/toot/toot.component.css create mode 100644 Mamoth/src/app/components/toot/toot.component.html create mode 100644 Mamoth/src/app/components/toot/toot.component.spec.ts create mode 100644 Mamoth/src/app/components/toot/toot.component.ts create mode 100644 Mamoth/src/app/models/stream.models.ts diff --git a/Mamoth/Mamoth.njsproj b/Mamoth/Mamoth.njsproj index 35efdcd4..dddc820c 100644 --- a/Mamoth/Mamoth.njsproj +++ b/Mamoth/Mamoth.njsproj @@ -49,6 +49,8 @@ + + @@ -72,6 +74,7 @@ + @@ -91,9 +94,12 @@ + + Code + diff --git a/Mamoth/src/app/app.module.ts b/Mamoth/src/app/app.module.ts index 6aff94bb..5fca86b6 100644 --- a/Mamoth/src/app/app.module.ts +++ b/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, diff --git a/Mamoth/src/app/components/left-side-bar/left-side-bar.component.ts b/Mamoth/src/app/components/left-side-bar/left-side-bar.component.ts index 7eee16df..8568fad2 100644 --- a/Mamoth/src/app/components/left-side-bar/left-side-bar.component.ts +++ b/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[] = []; diff --git a/Mamoth/src/app/components/stream/stream.component.css b/Mamoth/src/app/components/stream/stream.component.css index db87d81d..44a7edc5 100644 --- a/Mamoth/src/app/components/stream/stream.component.css +++ b/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; + +} diff --git a/Mamoth/src/app/components/stream/stream.component.html b/Mamoth/src/app/components/stream/stream.component.html index 008587cc..9d17804a 100644 --- a/Mamoth/src/app/components/stream/stream.component.html +++ b/Mamoth/src/app/components/stream/stream.component.html @@ -1,3 +1,10 @@
- stream works! + +
+
+ +
+
diff --git a/Mamoth/src/app/components/stream/stream.component.ts b/Mamoth/src/app/components/stream/stream.component.ts index 406c616d..feccb4f1 100644 --- a/Mamoth/src/app/components/stream/stream.component.ts +++ b/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; } } diff --git a/Mamoth/src/app/components/toot/toot.component.css b/Mamoth/src/app/components/toot/toot.component.css new file mode 100644 index 00000000..c170c785 --- /dev/null +++ b/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; +} diff --git a/Mamoth/src/app/components/toot/toot.component.html b/Mamoth/src/app/components/toot/toot.component.html new file mode 100644 index 00000000..d3fbcd0e --- /dev/null +++ b/Mamoth/src/app/components/toot/toot.component.html @@ -0,0 +1,8 @@ +
+
+ +
+
+

{{ toot.content }}

+
+
diff --git a/Mamoth/src/app/components/toot/toot.component.spec.ts b/Mamoth/src/app/components/toot/toot.component.spec.ts new file mode 100644 index 00000000..856e2bb2 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TootComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TootComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Mamoth/src/app/components/toot/toot.component.ts b/Mamoth/src/app/components/toot/toot.component.ts new file mode 100644 index 00000000..d67441b1 --- /dev/null +++ b/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() { + } + +} diff --git a/Mamoth/src/app/models/stream.models.ts b/Mamoth/src/app/models/stream.models.ts new file mode 100644 index 00000000..efa94921 --- /dev/null +++ b/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; +} diff --git a/Mamoth/src/styles.css b/Mamoth/src/styles.css index 2f22b29c..8e341263 100644 --- a/Mamoth/src/styles.css +++ b/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; }