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

refactoring in prevision of favorite/boost wiring with the API

This commit is contained in:
Nicolas Constant 2018-10-01 23:46:12 -04:00
parent 0da9947e11
commit 630dbf2f76
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
11 changed files with 173 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,6 +32,7 @@ import { AddNewAccountComponent } from './components/floating-column/add-new-acc
import { SearchComponent } from './components/floating-column/search/search.component';
import { AddNewStatusComponent } from "./components/floating-column/add-new-status/add-new-status.component";
import { ManageAccountComponent } from "./components/floating-column/manage-account/manage-account.component";
import { ActionBarComponent } from './components/stream/status/action-bar/action-bar.component';
const routes: Routes = [
{ path: "", redirectTo: "home", pathMatch: "full" },
@ -56,7 +57,8 @@ const routes: Routes = [
AttachementsComponent,
SettingsComponent,
AddNewAccountComponent,
SearchComponent
SearchComponent,
ActionBarComponent
],
imports: [
BrowserModule,

14
src/app/components/stream/status/action-bar/action-bar.component.html Normal file
View File

@ -0,0 +1,14 @@
<div class="action-bar">
<a href class="action-bar__link" title="Reply" (click)="reply()">
<ion-icon name="ios-undo"></ion-icon>
</a>
<a href class="action-bar__link" title="Boost" [class.boosted]="isBoosted" (click)="boost()">
<ion-icon name="md-swap"></ion-icon>
</a>
<a href class="action-bar__link" title="Favourite" [class.favorited]="isFavorited" (click)="favorite()">
<ion-icon name="md-star"></ion-icon>
</a>
<a href class="action-bar__link" title="More" (click)="more()">
<ion-icon name="ios-more"></ion-icon>
</a>
</div>

33
src/app/components/stream/status/action-bar/action-bar.component.scss Normal file
View File

@ -0,0 +1,33 @@
@import "variables";
.action-bar {
// outline: 1px solid greenyellow; // height: 20px;
margin: 5px 10px 5px $avatar-column-space;
padding: 0;
font-size: 24px;
height: 30px;
&__link {
color: $status-secondary-color;
&:hover {
color: $status-links-color;
}
&:not(:last-child) {
margin-right: 15px;
}
}
}
.boosted {
color: $boost-color;
&:hover {
color: darken($boost-color, 10);
}
}
.favorited {
color: $favorite-color;
&:hover {
color: darken($favorite-color, 10);
}
}

25
src/app/components/stream/status/action-bar/action-bar.component.spec.ts Normal file
View File

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

41
src/app/components/stream/status/action-bar/action-bar.component.ts Normal file
View File

@ -0,0 +1,41 @@
import { Component, OnInit, Input } from '@angular/core';
import { StatusWrapper } from '../../stream.component';
@Component({
selector: 'app-action-bar',
templateUrl: './action-bar.component.html',
styleUrls: ['./action-bar.component.scss']
})
export class ActionBarComponent implements OnInit {
@Input() statusWrapper: StatusWrapper;
isFavorited: boolean;
isBoosted: boolean;
constructor() { }
ngOnInit() {
}
reply(): boolean {
console.warn('reply');
return false;
}
boost(): boolean {
console.warn('boost');
this.isBoosted = !this.isBoosted;
return false;
}
favorite(): boolean {
console.warn('favorite');
this.isFavorited = !this.isFavorited;
return false;
}
more(): boolean {
console.warn('more');
return false;
}
}

21
src/app/components/stream/status/status.component.html
View File

@ -1,5 +1,6 @@
<div class="reblog" *ngIf="reblog">
<a class="reblog__profile-link" href>{{ status.account.display_name }} <img *ngIf="reblog" class="reblog__avatar" src="{{ status.account.avatar }}" /></a> boosted
<a class="reblog__profile-link" href>{{ status.account.display_name }} <img *ngIf="reblog" class="reblog__avatar"
src="{{ status.account.avatar }}" /></a> boosted
</div>
<div class="status">
@ -15,21 +16,7 @@
getCompactRelativeTime(status.created_at) }}</div>
<div class="status__content" innerHTML="{{displayedStatus.content}}"></div>
<div *ngIf="hasAttachments" class="attachments">
<app-attachements [attachments]="displayedStatus.media_attachments"></app-attachements>
</div>
<app-attachements *ngIf="hasAttachments" class="attachments" [attachments]="displayedStatus.media_attachments"></app-attachements>
<div class="action-bar">
<a href class="action-bar__link"><ion-icon name="ios-undo"></ion-icon></a>
<a href class="action-bar__link"><ion-icon name="md-star"></ion-icon></a>
<a href class="action-bar__link"><ion-icon name="md-swap"></ion-icon></a>
<a href class="action-bar__link"><ion-icon name="ios-more"></ion-icon></a>
</div>
<!-- <div class="status_galery">
<p>
status.reblog: {{status.reblog}} <br />
status.media_attachments: {{status.media_attachments}}
</p>
</div> -->
<app-action-bar [statusWrapper]="statusWrapper"></app-action-bar>
</div>

41
src/app/components/stream/status/status.component.scss
View File

@ -1,5 +1,5 @@
@import "variables";
$avatar-column-space: 70px;
.reblog {
position: relative;
margin: 5px 0 0 10px;
@ -76,12 +76,12 @@ $avatar-column-space: 70px;
&__content {
/*width: calc(100% - 50px);*/
word-wrap: break-word;
margin: 0px 10px 10px $avatar-column-space;
}
&__content p {
margin: 0;
font-size: 0.85em;
margin: 0 10px 0 $avatar-column-space;
}
// &__content p {
// margin: 0 !important;
// font-size: 0.85em;
// }
&__created-at {
color: $status-secondary-color;
position: absolute;
@ -90,6 +90,10 @@ $avatar-column-space: 70px;
}
}
// .attachments {
// }
//Mastodon styling
:host ::ng-deep .status__content {
color: $status-primary-color;
@ -101,24 +105,15 @@ $avatar-column-space: 70px;
& .invisible {
display: none;
}
& p {
margin: 0px;
//font-size: .9em;
// font-size: 14px;
}
}
.attachments {
width: calc(100% - 80px);
margin: 0px 10px 10px $avatar-column-space;
display: block;
// width: calc(100% - 80px);
margin: 10px 10px 0 $avatar-column-space;
}
.action-bar {
// outline: 1px solid greenyellow; // height: 20px;
margin: 0px 10px 10px $avatar-column-space;
font-size: 24px;
&__link {
color: $status-secondary-color;
&:hover {
color: $status-links-color;
}
&:not(:last-child) {
margin-right: 15px;
}
}
}

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

@ -2,6 +2,7 @@ import { Component, OnInit, Input, Inject, LOCALE_ID } from "@angular/core";
import { Status } from "../../../services/models/mastodon.interfaces";
import { formatDate } from '@angular/common';
import { stateNameErrorMessage } from "@ngxs/store/src/decorators/state";
import { StatusWrapper } from "../stream.component";
@Component({
@ -14,16 +15,18 @@ export class StatusComponent implements OnInit {
reblog: boolean;
hasAttachments: boolean;
private _status: Status;
@Input('status')
set status(value: Status) {
this._status = value;
private _statusWrapper: StatusWrapper;
status: Status;
@Input('statusWrapper')
set statusWrapper(value: StatusWrapper) {
this._statusWrapper = value;
this.status = value.status;
if(this.status.reblog){
this.reblog = true;
this.displayedStatus = this._status.reblog;
this.displayedStatus = this.status.reblog;
} else {
this.displayedStatus = this._status;
this.displayedStatus = this.status;
}
if(!this.displayedStatus.account.display_name){
@ -36,8 +39,8 @@ export class StatusComponent implements OnInit {
}
get status(): Status{
return this._status;
get statusWrapper(): StatusWrapper{
return this._statusWrapper;
}

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

@ -3,8 +3,8 @@
<a href title="return to top" (click)="goToTop()"><h1>{{ streamElement.name.toUpperCase() }}</h1></a>
</div>
<div class="stream-toots flexcroll" #statusstream (scroll)="onScroll()"> <!-- data-simplebar -->
<div class="stream-toots__status" *ngFor="let status of statuses">
<app-status [status]="status" ></app-status>
<div class="stream-toots__status" *ngFor="let statusWrapper of statuses">
<app-status [statusWrapper]="statusWrapper" ></app-status>
</div>
</div>
</div>

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

@ -17,7 +17,7 @@ export class StreamComponent implements OnInit {
private account: AccountInfo;
private websocketStreaming: StreamingWrapper;
statuses: Status[] = [];
statuses: StatusWrapper[] = [];
private bufferStream: Status[] = [];
private bufferWasCleared: boolean;
@ -90,7 +90,8 @@ export class StreamComponent implements OnInit {
}
for (const status of this.bufferStream) {
this.statuses.unshift(status);
const wrapper = new StatusWrapper(status, this.account);
this.statuses.unshift(wrapper);
}
this.bufferStream.length = 0;
@ -100,10 +101,11 @@ export class StreamComponent implements OnInit {
this.isProcessingInfiniteScroll = true;
const lastStatus = this.statuses[this.statuses.length - 1];
this.mastodonService.getTimeline(this.account, this._streamElement.type, lastStatus.id)
this.mastodonService.getTimeline(this.account, this._streamElement.type, lastStatus.status.id)
.then((status: Status[]) => {
for (const s of status) {
this.statuses.push(s);
const wrapper = new StatusWrapper(s, this.account);
this.statuses.push(wrapper);
}
})
.catch(err => {
@ -123,7 +125,8 @@ export class StreamComponent implements OnInit {
this.mastodonService.getTimeline(this.account, this._streamElement.type)
.then((results: Status[]) => {
for (const s of results) {
this.statuses.push(s);
const wrapper = new StatusWrapper(s, this.account);
this.statuses.push(wrapper);
}
});
}
@ -133,9 +136,10 @@ export class StreamComponent implements OnInit {
this.websocketStreaming.statusUpdateSubjet.subscribe((update: StatusUpdate) => {
if (update) {
if (update.type === EventEnum.update) {
if (!this.statuses.find(x => x.id == update.status.id)) {
if (!this.statuses.find(x => x.status.id == update.status.id)) {
if (this.streamPositionnedAtTop) {
this.statuses.unshift(update.status);
const wrapper = new StatusWrapper(update.status, this.account);
this.statuses.unshift(wrapper);
} else {
this.bufferStream.push(update.status);
}
@ -159,4 +163,11 @@ export class StreamComponent implements OnInit {
}
}
}
export class StatusWrapper {
constructor(
public status: Status,
public provider: AccountInfo
) {}
}

9
src/sass/_variables.scss
View File

@ -6,13 +6,11 @@ $color-primary: #141824;
$color-secondary: #090b10;
$default-font-size: 15px;
$small-font-size: 12px;
$btn-primary-color: #515a62;
$btn-primary-color: #254d6f;
$btn-primary-color: #444f74;
$btn-primary-color-hover: darken($btn-primary-color, 10);
$btn-primary-font-color: white;
// TEST 1
$status-primary-color: #fff;
$status-secondary-color: #353e64;
@ -21,11 +19,12 @@ $status-links-color: #d9e1e8;
// $status-primary-color : #8f93a2;
// $status-primary-color : lighten(#8f93a2, 30);
// $status-links-color : #b2ccd6;
$boost-color : #5098eb;
$favorite-color: #ffc16f;
// Block dispositions
$stream-selector-height: 30px;
$stream-column-separator: 7px;
$stream-column-width: 320px;
$avatar-column-space: 70px;
//Bootstrap cuistomization
$enable-rounded : false;
$enable-rounded: false;