added the reply module

This commit is contained in:
Nicolas Constant 2018-10-13 01:10:43 -04:00
parent 015ac2a184
commit 002debc8da
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
8 changed files with 101 additions and 4 deletions

View File

@ -34,6 +34,7 @@ import { AddNewStatusComponent } from "./components/floating-column/add-new-stat
import { ManageAccountComponent } from "./components/floating-column/manage-account/manage-account.component"; import { ManageAccountComponent } from "./components/floating-column/manage-account/manage-account.component";
import { ActionBarComponent } from './components/stream/status/action-bar/action-bar.component'; import { ActionBarComponent } from './components/stream/status/action-bar/action-bar.component';
import { WaitingAnimationComponent } from './components/waiting-animation/waiting-animation.component'; import { WaitingAnimationComponent } from './components/waiting-animation/waiting-animation.component';
import { ReplyToStatusComponent } from './components/stream/status/reply-to-status/reply-to-status.component';
const routes: Routes = [ const routes: Routes = [
{ path: "", redirectTo: "home", pathMatch: "full" }, { path: "", redirectTo: "home", pathMatch: "full" },
@ -60,7 +61,8 @@ const routes: Routes = [
AddNewAccountComponent, AddNewAccountComponent,
SearchComponent, SearchComponent,
ActionBarComponent, ActionBarComponent,
WaitingAnimationComponent WaitingAnimationComponent,
ReplyToStatusComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

View File

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, Input } from '@angular/core'; import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
import { Store } from '@ngxs/store'; import { Store } from '@ngxs/store';
import { StatusWrapper } from '../../stream.component'; import { StatusWrapper } from '../../stream.component';
@ -16,6 +16,7 @@ import { Status, Results } from '../../../../services/models/mastodon.interfaces
export class ActionBarComponent implements OnInit, OnDestroy { export class ActionBarComponent implements OnInit, OnDestroy {
@Input() statusWrapper: StatusWrapper; @Input() statusWrapper: StatusWrapper;
@Output() replyEvent = new EventEmitter();
isFavorited: boolean; isFavorited: boolean;
isBoosted: boolean; isBoosted: boolean;
@ -80,7 +81,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
} }
reply(): boolean { reply(): boolean {
console.warn('reply'); this.replyEvent.emit();
return false; return false;
} }

View File

@ -0,0 +1,8 @@
<form (ngSubmit)="onSubmit()">
<textarea [(ngModel)]="status" name="status" class="form-control form-control-sm" style="min-width: 100%" rows="5" required placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
<select class="form-control form-control-sm form-control--privacy" id="privacy" name="privacy" [(ngModel)]="selectedPrivacy">
<option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>
</select>
<button type="submit" class="btn btn-sm btn-custom-primary">REPLY!</button>
</form>

View File

@ -0,0 +1,36 @@
@import "variables";
@import "panel";
@import "buttons";
$btn-send-status-width: 60px;
.form-control {
margin-bottom: 5px;
&--privacy{
display: inline-block;
width: calc(100% - 5px - #{$btn-send-status-width});
}
}
.btn-custom-primary {
display: inline-block;
width: $btn-send-status-width;
position: relative;
top: -1px;
left: 5px;
// background-color: orange;
// border-color: orange;
// color: black;
font-weight: 500;
// &:hover {
// }
// &:focus {
// border-color: darkblue;
// }
}

View File

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

View File

@ -0,0 +1,17 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-reply-to-status',
templateUrl: './reply-to-status.component.html',
styleUrls: ['./reply-to-status.component.scss']
})
export class ReplyToStatusComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

View File

@ -18,5 +18,7 @@
<app-attachements *ngIf="hasAttachments" class="attachments" [attachments]="displayedStatus.media_attachments"></app-attachements> <app-attachements *ngIf="hasAttachments" class="attachments" [attachments]="displayedStatus.media_attachments"></app-attachements>
<app-action-bar [statusWrapper]="statusWrapper"></app-action-bar> <app-action-bar [statusWrapper]="statusWrapper" (replyEvent)="openReply()"></app-action-bar>
<app-reply-to-status *ngIf="replyingToStatus" ></app-reply-to-status>
</div> </div>

View File

@ -14,6 +14,7 @@ export class StatusComponent implements OnInit {
displayedStatus: Status; displayedStatus: Status;
reblog: boolean; reblog: boolean;
hasAttachments: boolean; hasAttachments: boolean;
replyingToStatus: boolean;
private _statusWrapper: StatusWrapper; private _statusWrapper: StatusWrapper;
status: Status; status: Status;
@ -66,4 +67,9 @@ export class StatusComponent implements OnInit {
return formatDate(date, 'MM/dd', this.locale); return formatDate(date, 'MM/dd', this.locale);
} }
openReply(): boolean{
this.replyingToStatus = !this.replyingToStatus;
return false;
}
} }