Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

move stream-overlay to dedicated component

This commit is contained in:
Nicolas Constant 2018-10-22 01:25:40 -04:00
parent 81324e6366
commit 1152085038
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
8 changed files with 164 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -38,6 +38,7 @@ import { ReplyToStatusComponent } from './components/stream/status/reply-to-stat
import { UserProfileComponent } from './components/stream/user-profile/user-profile.component';
import { ThreadComponent } from './components/stream/thread/thread.component';
import { HashtagComponent } from './components/stream/hashtag/hashtag.component';
import { StreamOverlayComponent } from './components/stream/stream-overlay/stream-overlay.component';
const routes: Routes = [
{ path: "", redirectTo: "home", pathMatch: "full" },
@ -68,7 +69,8 @@ const routes: Routes = [
ReplyToStatusComponent,
UserProfileComponent,
ThreadComponent,
HashtagComponent
HashtagComponent,
StreamOverlayComponent
],
imports: [
BrowserModule,

13
src/app/components/stream/stream-overlay/stream-overlay.component.html Normal file
View File

@ -0,0 +1,13 @@
<div class="stream-overlay">
<div class="stream-overlay__header">
<a href class="overlay-close">CLOSE</a>
<a href class="overlay-previous">PREV</a>
<a href class="overlay-next">NEXT</a>
</div>
<div class="stream-overlay__title">
Account
</div>
<app-user-profile></app-user-profile>
<app-hashtag></app-hashtag>
<app-thread></app-thread>
</div>

51
src/app/components/stream/stream-overlay/stream-overlay.component.scss Normal file
View File

@ -0,0 +1,51 @@
@import "variables";
.stream-overlay {
// position: absolute;
// z-index: 50;
width: $stream-column-width;
height: calc(100%);
background-color: rgba(#ff0000, 0.3);
// margin: 0 0 0 $stream-column-separator;
// outline: 1px red solid;
// float: left;
&__header {
width: calc(100%);
height: 30px;
background-color: $column-header-background-color;
padding: 6px 10px 0 10px;
& a {
color: whitesmoke;
font-size: 0.8em;
font-weight: normal;
margin: 0;
}
}
&__title {
width: calc(100%);
height: 30px;
background-color: $column-header-background-color;
border-top: 1px solid whitesmoke;
border-bottom: 1px solid whitesmoke;
padding: 3px 10px 0 10px;
}
}
.overlay-previous {
display: block;
float: left;
}
.overlay-next {
display: block;
float: right;
padding-right: 20px;
}
.overlay-close {
display: block;
float: right;
}

25
src/app/components/stream/stream-overlay/stream-overlay.component.spec.ts Normal file
View File

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

15
src/app/components/stream/stream-overlay/stream-overlay.component.ts Normal file
View File

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

15
src/app/components/stream/stream.component.html
View File

@ -1,17 +1,6 @@
<div class="stream-column">
<div class="stream-overlay">
<div class="stream-overlay__header">
<a href class="overlay-close">CLOSE</a>
<a href class="overlay-previous">PREV</a>
<a href class="overlay-next">NEXT</a>
</div>
<div class="stream-overlay__title">
Account
</div>
<app-user-profile></app-user-profile>
<app-hashtag></app-hashtag>
<app-thread></app-thread>
</div>
<app-stream-overlay class="stream-overlay" *ngIf="overlayActive"></app-stream-overlay>
<div class="stream-column__stream-header">
<a href title="return to top" (click)="goToTop()">

75
src/app/components/stream/stream.component.scss
View File

@ -57,49 +57,48 @@
z-index: 50;
width: $stream-column-width;
height: calc(100%);
background-color: rgba(#ff0000, 0.3);
// background-color: rgba(#ff0000, 0.3);
// // margin: 0 0 0 $stream-column-separator;
// // outline: 1px red solid;
// // float: left;
// &__header {
// width: calc(100%);
// height: 30px;
// background-color: $column-header-background-color;
// padding: 6px 10px 0 10px;
// & a {
// color: whitesmoke;
// font-size: 0.8em;
// font-weight: normal;
// margin: 0;
// }
// }
// margin: 0 0 0 $stream-column-separator;
// outline: 1px red solid;
// float: left;
&__header {
width: calc(100%);
height: 30px;
background-color: $column-header-background-color;
padding: 6px 10px 0 10px;
& a {
color: whitesmoke;
font-size: 0.8em;
font-weight: normal;
margin: 0;
}
}
&__title {
width: calc(100%);
height: 30px;
background-color: $column-header-background-color;
border-top: 1px solid whitesmoke;
border-bottom: 1px solid whitesmoke;
padding: 3px 10px 0 10px;
}
// &__title {
// width: calc(100%);
// height: 30px;
// background-color: $column-header-background-color;
// border-top: 1px solid whitesmoke;
// border-bottom: 1px solid whitesmoke;
// padding: 3px 10px 0 10px;
// }
}
.overlay-previous {
display: block;
float: left;
}
// .overlay-previous {
// display: block;
// float: left;
// }
.overlay-next {
display: block;
float: right;
padding-right: 20px;
}
// .overlay-next {
// display: block;
// float: right;
// padding-right: 20px;
// }
.overlay-close {
display: block;
float: right;
}
// .overlay-close {
// display: block;
// float: right;
// }

19
src/app/components/stream/stream.component.ts
View File

@ -21,6 +21,9 @@ export class StreamComponent implements OnInit {
private bufferStream: Status[] = [];
private bufferWasCleared: boolean;
overlayActive: boolean;
overlayParams: string;
@Input()
set streamElement(streamElement: StreamElement) {
this._streamElement = streamElement;
@ -47,6 +50,21 @@ export class StreamComponent implements OnInit {
ngOnInit() {
}
browseAccount(account: any): void {
console.warn('browseAccount');
console.warn(account);
}
browseHashtag(hashtag: any): void {
console.warn('browseHashtag');
console.warn(hashtag);
}
browseThread(thread: any): void {
console.warn('browseThread');
console.warn(thread);
}
@ViewChild('statusstream') public statustream: ElementRef;
goToTop(): boolean {
this.loadBuffer();
@ -150,7 +168,6 @@ export class StreamComponent implements OnInit {
this.checkAndCleanUpStream();
});
}
private checkAndCleanUpStream(): void {
if (this.streamPositionnedAtTop && this.statuses.length > 60) {