creation of panel to add new columns
This commit is contained in:
parent
877ac0be2e
commit
c76e081f48
|
@ -5,6 +5,9 @@
|
||||||
</app-streams-main-display>-->
|
</app-streams-main-display>-->
|
||||||
|
|
||||||
<div id="display-zone">
|
<div id="display-zone">
|
||||||
|
<app-floating-column id="floating-column" *ngIf="floatingColumnActive">
|
||||||
|
|
||||||
|
</app-floating-column>
|
||||||
<router-outlet>
|
<router-outlet>
|
||||||
</router-outlet>
|
</router-outlet>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,3 @@
|
||||||
app-left-side-bar {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#display-zone {
|
#display-zone {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -13,6 +9,14 @@ app-left-side-bar {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#floating-column {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
app-streams-selection-footer {
|
app-streams-selection-footer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||||
import { ElectronService } from 'ngx-electron';
|
import { ElectronService } from 'ngx-electron';
|
||||||
|
import { NavigationService } from './services/navigation.service';
|
||||||
|
import { Subscription } from 'rxjs';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -7,15 +9,29 @@ import { ElectronService } from 'ngx-electron';
|
||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
styleUrls: ['./app.component.scss']
|
styleUrls: ['./app.component.scss']
|
||||||
})
|
})
|
||||||
export class AppComponent {
|
export class AppComponent implements OnInit, OnDestroy{
|
||||||
|
|
||||||
title = 'app';
|
title = 'app';
|
||||||
|
|
||||||
constructor(private _electronService: ElectronService) {
|
private floatingColumnActive: boolean;
|
||||||
|
private columnEditorSub: Subscription;
|
||||||
|
|
||||||
|
constructor(private readonly navigationService: NavigationService) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.columnEditorSub = this.navigationService.openColumnEditorSubject.subscribe((username: string) => {
|
||||||
|
if(username) {
|
||||||
|
this.floatingColumnActive = true;
|
||||||
|
} else {
|
||||||
|
this.floatingColumnActive = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
launchWindow(){
|
ngOnDestroy(): void {
|
||||||
this._electronService.shell.openExternal('http://google.com');
|
this.columnEditorSub.unsubscribe();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -24,6 +24,10 @@ import { StreamingService } from "./services/streaming.service";
|
||||||
import { RegisteredAppsState } from "./states/registered-apps.state";
|
import { RegisteredAppsState } from "./states/registered-apps.state";
|
||||||
import { AccountsState } from "./states/accounts.state";
|
import { AccountsState } from "./states/accounts.state";
|
||||||
import { AccountIconComponent } from './components/left-side-bar/presentation/account-icon/account-icon.component';
|
import { AccountIconComponent } from './components/left-side-bar/presentation/account-icon/account-icon.component';
|
||||||
|
import { NavigationService } from "./services/navigation.service";
|
||||||
|
import { FloatingColumnComponent } from './components/floating-column/floating-column.component';
|
||||||
|
import { ColumnsEditorComponent } from './components/floating-column/columns-editor/columns-editor.component';
|
||||||
|
import { MessageEditorComponent } from './components/floating-column/message-editor/message-editor.component';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{ path: "", redirectTo: "home", pathMatch: "full" },
|
{ path: "", redirectTo: "home", pathMatch: "full" },
|
||||||
|
@ -41,7 +45,10 @@ const routes: Routes = [
|
||||||
StreamsSelectionFooterComponent,
|
StreamsSelectionFooterComponent,
|
||||||
TootComponent,
|
TootComponent,
|
||||||
RegisterNewAccountComponent,
|
RegisterNewAccountComponent,
|
||||||
AccountIconComponent
|
AccountIconComponent,
|
||||||
|
FloatingColumnComponent,
|
||||||
|
ColumnsEditorComponent,
|
||||||
|
MessageEditorComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
@ -57,7 +64,7 @@ const routes: Routes = [
|
||||||
]),
|
]),
|
||||||
NgxsStoragePluginModule.forRoot()
|
NgxsStoragePluginModule.forRoot()
|
||||||
],
|
],
|
||||||
providers: [AuthService, AccountsService, StreamsService, StreamingService, { provide: APP_INITIALIZER, useFactory: settingsServiceFactory, deps: [AccountsService], multi: true }],
|
providers: [AuthService, NavigationService, AccountsService, StreamsService, StreamingService, { provide: APP_INITIALIZER, useFactory: settingsServiceFactory, deps: [AccountsService], multi: true }],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
export class AppModule { }
|
export class AppModule { }
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div class="column-editor">
|
||||||
|
<p>adding columns from: {{ username }} </p>
|
||||||
|
|
||||||
|
<a class="add-column__link" href *ngFor="let col of availableColumns" (click)="addColumn(col)">
|
||||||
|
{{ col.name }}
|
||||||
|
</a>
|
||||||
|
<!-- <a class="add-column__link" href>
|
||||||
|
Global Timeline
|
||||||
|
</a>
|
||||||
|
<a class="add-column__link" href>
|
||||||
|
Personnal Timeline
|
||||||
|
</a>
|
||||||
|
<a class="add-column__link" href>
|
||||||
|
Lists, Favs, Activitires, etc
|
||||||
|
</a> -->
|
||||||
|
|
||||||
|
</div>
|
|
@ -0,0 +1,26 @@
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
.column-editor {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: $small-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-column__link {
|
||||||
|
display: block;
|
||||||
|
// width: calc(100% - 20px);
|
||||||
|
width: 100%;
|
||||||
|
// height: 30px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border: solid 1px gray;
|
||||||
|
|
||||||
|
background-color: lightblue;
|
||||||
|
color: #000;
|
||||||
|
|
||||||
|
&:not(:last-child){
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: darken(lightblue, 20);
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { ColumnsEditorComponent } from './columns-editor.component';
|
||||||
|
|
||||||
|
describe('ColumnsEditorComponent', () => {
|
||||||
|
let component: ColumnsEditorComponent;
|
||||||
|
let fixture: ComponentFixture<ColumnsEditorComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ ColumnsEditorComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(ColumnsEditorComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,45 @@
|
||||||
|
import { Component, OnInit, Input } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-columns-editor',
|
||||||
|
templateUrl: './columns-editor.component.html',
|
||||||
|
styleUrls: ['./columns-editor.component.scss']
|
||||||
|
})
|
||||||
|
export class ColumnsEditorComponent implements OnInit {
|
||||||
|
@Input() username: string;
|
||||||
|
|
||||||
|
availableColumns: ColumnElement[] = [];
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.availableColumns.length = 0;
|
||||||
|
|
||||||
|
this.availableColumns.push(new ColumnElement(ColumnTypeEnum.global, 'Global Timeline', this.username));
|
||||||
|
this.availableColumns.push(new ColumnElement(ColumnTypeEnum.local, 'Local Timeline', this.username));
|
||||||
|
this.availableColumns.push(new ColumnElement(ColumnTypeEnum.personnal, 'Personnal Timeline', this.username));
|
||||||
|
}
|
||||||
|
|
||||||
|
addColumn(column: ColumnElement): boolean {
|
||||||
|
console.warn(column);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ColumnElement {
|
||||||
|
constructor(public type: ColumnTypeEnum, public name: string, public username: string) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ColumnTypeEnum {
|
||||||
|
unknown = 0,
|
||||||
|
global = 1,
|
||||||
|
local = 2,
|
||||||
|
personnal = 3,
|
||||||
|
favorites = 4,
|
||||||
|
activity = 5,
|
||||||
|
list = 6,
|
||||||
|
directmessages = 7,
|
||||||
|
}
|
|
@ -0,0 +1,9 @@
|
||||||
|
<div class="floating-column">
|
||||||
|
<div>
|
||||||
|
<a href (click)="closePanel()">close panel</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<app-columns-editor *ngIf="columnEditorIsOpen" [username]="userAccountUsed"></app-columns-editor>
|
||||||
|
<app-message-editor *ngIf="messageEditorIsOpen"></app-message-editor>
|
||||||
|
|
||||||
|
</div>
|
|
@ -0,0 +1,6 @@
|
||||||
|
.floating-column {
|
||||||
|
width: calc(100%);
|
||||||
|
max-width: 400px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { FloatingColumnComponent } from './floating-column.component';
|
||||||
|
|
||||||
|
describe('FloatingColumnComponent', () => {
|
||||||
|
let component: FloatingColumnComponent;
|
||||||
|
let fixture: ComponentFixture<FloatingColumnComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ FloatingColumnComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(FloatingColumnComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,33 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { NavigationService } from '../../services/navigation.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-floating-column',
|
||||||
|
templateUrl: './floating-column.component.html',
|
||||||
|
styleUrls: ['./floating-column.component.scss']
|
||||||
|
})
|
||||||
|
export class FloatingColumnComponent implements OnInit {
|
||||||
|
userAccountUsed: string;
|
||||||
|
columnEditorIsOpen: boolean;
|
||||||
|
messageEditorIsOpen: boolean;
|
||||||
|
|
||||||
|
constructor(private readonly navigationService: NavigationService) { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.navigationService.openColumnEditorSubject.subscribe((username: string) => {
|
||||||
|
this.userAccountUsed = username;
|
||||||
|
if(username) {
|
||||||
|
this.columnEditorIsOpen = true;
|
||||||
|
} else {
|
||||||
|
this.columnEditorIsOpen = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
closePanel(): boolean {
|
||||||
|
this.navigationService.closeColumnEditor();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
<p>
|
||||||
|
message-editor works!
|
||||||
|
</p>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { MessageEditorComponent } from './message-editor.component';
|
||||||
|
|
||||||
|
describe('MessageEditorComponent', () => {
|
||||||
|
let component: MessageEditorComponent;
|
||||||
|
let fixture: ComponentFixture<MessageEditorComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ MessageEditorComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(MessageEditorComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-message-editor',
|
||||||
|
templateUrl: './message-editor.component.html',
|
||||||
|
styleUrls: ['./message-editor.component.scss']
|
||||||
|
})
|
||||||
|
export class MessageEditorComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -6,6 +6,7 @@ import { Account } from "../../services/models/mastodon.interfaces";
|
||||||
import { AccountWrapper } from "../../models/account.models";
|
import { AccountWrapper } from "../../models/account.models";
|
||||||
import { AccountsService } from "../../services/accounts.service";
|
import { AccountsService } from "../../services/accounts.service";
|
||||||
import { AccountsStateModel, AccountInfo } from "../../states/accounts.state";
|
import { AccountsStateModel, AccountInfo } from "../../states/accounts.state";
|
||||||
|
import { NavigationService } from "../../services/navigation.service";
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -21,6 +22,7 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
|
||||||
private sub: Subscription;
|
private sub: Subscription;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
|
private readonly navigationService: NavigationService,
|
||||||
private readonly accountsService: AccountsService,
|
private readonly accountsService: AccountsService,
|
||||||
private readonly store: Store) {
|
private readonly store: Store) {
|
||||||
|
|
||||||
|
@ -59,8 +61,9 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
onOpenMenuNotify(username: string) {
|
onOpenMenuNotify(username: string) {
|
||||||
console.warn(`onOpenMenuNotify username ${username}`);
|
console.warn(`onOpenMenuNotify username ${username}`);
|
||||||
|
this.navigationService.openColumnEditor(username);
|
||||||
}
|
}
|
||||||
|
|
||||||
createNewToot(): boolean {
|
createNewToot(): boolean {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { TestBed, inject } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { NavigationService } from './navigation.service';
|
||||||
|
|
||||||
|
describe('NavigationService', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
providers: [NavigationService]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should be created', inject([NavigationService], (service: NavigationService) => {
|
||||||
|
expect(service).toBeTruthy();
|
||||||
|
}));
|
||||||
|
});
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { BehaviorSubject } from 'rxjs';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class NavigationService {
|
||||||
|
openColumnEditorSubject = new BehaviorSubject<string>(null);
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
openColumnEditor(username: string) {
|
||||||
|
this.openColumnEditorSubject.next(username);
|
||||||
|
}
|
||||||
|
|
||||||
|
closeColumnEditor() {
|
||||||
|
this.openColumnEditorSubject.next(null);
|
||||||
|
}
|
||||||
|
}
|
|
@ -6,4 +6,5 @@ $font-link-primary-hover: #8f93a2;
|
||||||
$color-primary: #141824;
|
$color-primary: #141824;
|
||||||
$color-secondary: #090b10;
|
$color-secondary: #090b10;
|
||||||
|
|
||||||
$default-font-size: 15px;
|
$default-font-size: 15px;
|
||||||
|
$small-font-size: 12px;
|
Loading…
Reference in New Issue