First iteration of displaying toots
This commit is contained in:
parent
1e61652428
commit
68153225bc
|
@ -49,6 +49,8 @@
|
||||||
<Content Include="src\app\components\streams-selection-footer\streams-selection-footer.component.html" />
|
<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.css" />
|
||||||
<Content Include="src\app\components\stream\stream.component.html" />
|
<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\assets\.gitkeep" />
|
||||||
<Content Include="src\favicon.ico" />
|
<Content Include="src\favicon.ico" />
|
||||||
<Content Include="src\index.html" />
|
<Content Include="src\index.html" />
|
||||||
|
@ -72,6 +74,7 @@
|
||||||
<Folder Include="src\app\components\streams-main-display\" />
|
<Folder Include="src\app\components\streams-main-display\" />
|
||||||
<Folder Include="src\app\components\streams-selection-footer\" />
|
<Folder Include="src\app\components\streams-selection-footer\" />
|
||||||
<Folder Include="src\app\components\stream\" />
|
<Folder Include="src\app\components\stream\" />
|
||||||
|
<Folder Include="src\app\components\toot\" />
|
||||||
<Folder Include="src\app\models\" />
|
<Folder Include="src\app\models\" />
|
||||||
<Folder Include="src\app\services\" />
|
<Folder Include="src\app\services\" />
|
||||||
<Folder Include="src\assets\" />
|
<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\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.spec.ts" />
|
||||||
<TypeScriptCompile Include="src\app\components\stream\stream.component.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">
|
<TypeScriptCompile Include="src\app\models\account.models.ts">
|
||||||
<SubType>Code</SubType>
|
<SubType>Code</SubType>
|
||||||
</TypeScriptCompile>
|
</TypeScriptCompile>
|
||||||
|
<TypeScriptCompile Include="src\app\models\stream.models.ts" />
|
||||||
<TypeScriptCompile Include="src\environments\environment.prod.ts" />
|
<TypeScriptCompile Include="src\environments\environment.prod.ts" />
|
||||||
<TypeScriptCompile Include="src\environments\environment.ts" />
|
<TypeScriptCompile Include="src\environments\environment.ts" />
|
||||||
<TypeScriptCompile Include="src\main.ts" />
|
<TypeScriptCompile Include="src\main.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 { StreamsMainDisplayComponent } from './components/streams-main-display/streams-main-display.component';
|
||||||
import { StreamComponent } from './components/stream/stream.component';
|
import { StreamComponent } from './components/stream/stream.component';
|
||||||
import { StreamsSelectionFooterComponent } from './components/streams-selection-footer/streams-selection-footer.component';
|
import { StreamsSelectionFooterComponent } from './components/streams-selection-footer/streams-selection-footer.component';
|
||||||
|
import { TootComponent } from './components/toot/toot.component';
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
@ -16,7 +17,8 @@ import { StreamsSelectionFooterComponent } from './components/streams-selection-
|
||||||
LeftSideBarComponent,
|
LeftSideBarComponent,
|
||||||
StreamsMainDisplayComponent,
|
StreamsMainDisplayComponent,
|
||||||
StreamComponent,
|
StreamComponent,
|
||||||
StreamsSelectionFooterComponent
|
StreamsSelectionFooterComponent,
|
||||||
|
TootComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from "@angular/core";
|
||||||
import { AccountWrapper } from '../../models/account.models';
|
import { AccountWrapper } from "../../models/account.models";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-left-side-bar',
|
selector: "app-left-side-bar",
|
||||||
templateUrl: './left-side-bar.component.html',
|
templateUrl: "./left-side-bar.component.html",
|
||||||
styleUrls: ['./left-side-bar.component.css']
|
styleUrls: ["./left-side-bar.component.css"]
|
||||||
})
|
})
|
||||||
export class LeftSideBarComponent implements OnInit {
|
export class LeftSideBarComponent implements OnInit {
|
||||||
accounts: AccountWrapper[] = [];
|
accounts: AccountWrapper[] = [];
|
||||||
|
|
|
@ -1,7 +1,31 @@
|
||||||
#mam-stream-column {
|
#mam-stream-column {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: calc(100%);
|
height: calc(100% - 30px);
|
||||||
|
|
||||||
background-color: aqua;
|
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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
@ -1,3 +1,10 @@
|
||||||
<div id="mam-stream-column">
|
<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>
|
</div>
|
||||||
|
|
|
@ -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({
|
@Component({
|
||||||
selector: 'app-stream',
|
selector: "app-stream",
|
||||||
templateUrl: './stream.component.html',
|
templateUrl: "./stream.component.html",
|
||||||
styleUrls: ['./stream.component.css']
|
styleUrls: ["./stream.component.css"]
|
||||||
})
|
})
|
||||||
export class StreamComponent implements OnInit {
|
export class StreamComponent implements OnInit {
|
||||||
|
stream: Stream;
|
||||||
|
toots: TootWrapper[] = [];
|
||||||
|
|
||||||
constructor() { }
|
constructor() { }
|
||||||
|
|
||||||
ngOnInit() {
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -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>
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -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() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { AccountWrapper } from "./account.models";
|
||||||
|
|
||||||
|
export class Stream {
|
||||||
|
streamName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class TootWrapper {
|
||||||
|
account: AccountWrapper;
|
||||||
|
content: string;
|
||||||
|
}
|
|
@ -1,9 +1,11 @@
|
||||||
/* You can add global styles to this file, and also import other style files */
|
/* You can add global styles to this file, and also import other style files */
|
||||||
html, body {
|
html, body {
|
||||||
background-color: lightcoral;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
|
font-family: sans-serif;
|
||||||
|
|
||||||
|
background-color: lightcoral;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue