Merge pull request #611 from NicolasConstant/topic_reorganize-accounts
Topic reorganize accounts
This commit is contained in:
commit
e62987b11a
File diff suppressed because it is too large
Load Diff
|
@ -25,13 +25,14 @@
|
||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "^7.2.7",
|
"@angular/animations": "^7.2.16",
|
||||||
"@angular/cdk": "^7.2.7",
|
"@angular/cdk": "^7.3.7",
|
||||||
"@angular/common": "^7.2.7",
|
"@angular/common": "^7.2.7",
|
||||||
"@angular/compiler": "^7.2.7",
|
"@angular/compiler": "^7.2.7",
|
||||||
"@angular/core": "^7.2.7",
|
"@angular/core": "^7.2.7",
|
||||||
"@angular/forms": "^7.2.7",
|
"@angular/forms": "^7.2.7",
|
||||||
"@angular/http": "^7.2.7",
|
"@angular/http": "^7.2.7",
|
||||||
|
"@angular/material": "^16.2.1",
|
||||||
"@angular/platform-browser": "^7.2.7",
|
"@angular/platform-browser": "^7.2.7",
|
||||||
"@angular/platform-browser-dynamic": "^7.2.7",
|
"@angular/platform-browser-dynamic": "^7.2.7",
|
||||||
"@angular/pwa": "^0.12.4",
|
"@angular/pwa": "^0.12.4",
|
||||||
|
|
|
@ -5,6 +5,7 @@ import { HttpModule } from "@angular/http";
|
||||||
import { HttpClientModule } from '@angular/common/http';
|
import { HttpClientModule } from '@angular/common/http';
|
||||||
import { NgModule, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
|
import { NgModule, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
|
||||||
import { RouterModule, Routes } from "@angular/router";
|
import { RouterModule, Routes } from "@angular/router";
|
||||||
|
import { DragDropModule } from '@angular/cdk/drag-drop';
|
||||||
// import { NgxElectronModule } from 'ngx-electron';
|
// import { NgxElectronModule } from 'ngx-electron';
|
||||||
|
|
||||||
import { NgxsModule } from '@ngxs/store';
|
import { NgxsModule } from '@ngxs/store';
|
||||||
|
@ -177,6 +178,7 @@ const routes: Routes = [
|
||||||
OwlDateTimeModule,
|
OwlDateTimeModule,
|
||||||
OwlNativeDateTimeModule,
|
OwlNativeDateTimeModule,
|
||||||
OverlayModule,
|
OverlayModule,
|
||||||
|
DragDropModule,
|
||||||
// NgxElectronModule,
|
// NgxElectronModule,
|
||||||
RouterModule.forRoot(routes),
|
RouterModule.forRoot(routes),
|
||||||
|
|
||||||
|
|
|
@ -220,6 +220,9 @@
|
||||||
(change)="onEnableFreezeAvatarChanged()" type="checkbox" name="enableFreezeAvatar"
|
(change)="onEnableFreezeAvatarChanged()" type="checkbox" name="enableFreezeAvatar"
|
||||||
value="enableFreezeAvatar" id="enableFreezeAvatar">
|
value="enableFreezeAvatar" id="enableFreezeAvatar">
|
||||||
<label class="noselect sub-section__label" for="enableFreezeAvatar">freeze animated avatar</label>
|
<label class="noselect sub-section__label" for="enableFreezeAvatar">freeze animated avatar</label>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
reorder account's icons: <a href class="toogle-lock-icon-menu" (click)="toogleLockIconMenu()"><span *ngIf="iconMenuLocked">Unlock Icons</span><span *ngIf="!iconMenuLocked">Lock Icons</span></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h4 class="panel__subtitle">About</h4>
|
<h4 class="panel__subtitle">About</h4>
|
||||||
|
|
|
@ -154,3 +154,21 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toogle-lock-icon-menu {
|
||||||
|
display: block;
|
||||||
|
padding: 3px 40px;
|
||||||
|
width: 170px;
|
||||||
|
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
background-color: #1f2330;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: #32384d;
|
||||||
|
}
|
||||||
|
}
|
|
@ -158,6 +158,13 @@ export class SettingsComponent implements OnInit, OnDestroy {
|
||||||
if(this.languageSub) this.languageSub.unsubscribe();
|
if(this.languageSub) this.languageSub.unsubscribe();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
iconMenuLocked = true;
|
||||||
|
toogleLockIconMenu(): boolean {
|
||||||
|
this.navigationService.changeIconMenuState(this.iconMenuLocked);
|
||||||
|
this.iconMenuLocked = ! this.iconMenuLocked;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
onSearchLang(input: string) {
|
onSearchLang(input: string) {
|
||||||
this.searchedLangs = this.languageService.searchLanguage(input);
|
this.searchedLangs = this.languageService.searchLanguage(input);
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,11 +8,21 @@
|
||||||
<fa-icon [icon]="faSearch"></fa-icon>
|
<fa-icon [icon]="faSearch"></fa-icon>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<div *ngIf="!iconMenuIsDraggable">
|
||||||
<div *ngFor="let account of accounts">
|
<div *ngFor="let account of accounts">
|
||||||
<app-account-icon [account]="account" (toogleAccountNotify)="onToogleAccountNotify($event)"
|
<app-account-icon [account]="account" (toogleAccountNotify)="onToogleAccountNotify($event)"
|
||||||
(openMenuNotify)="onOpenMenuNotify($event)">
|
(openMenuNotify)="onOpenMenuNotify($event)">
|
||||||
</app-account-icon>
|
</app-account-icon>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div *ngIf="iconMenuIsDraggable" cdkDropList [cdkDropListData]="accounts" (cdkDropListDropped)="onDrop($event)">
|
||||||
|
<div *ngFor="let account of accounts" cdkDrag class="draggable">
|
||||||
|
<fa-icon class="draggable__icon" [icon]="faArrowsAltV"></fa-icon>
|
||||||
|
<img class="draggable__avatar" src="{{ account.avatar }}" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<a class="left-bar-button left-bar-button--add left-bar-link" [ngClass]="{'no-accounts': hasAccounts === false }"
|
<a class="left-bar-button left-bar-button--add left-bar-link" [ngClass]="{'no-accounts': hasAccounts === false }"
|
||||||
href title="add new account" (click)="addNewAccount()" (contextmenu)="addNewAccount()">
|
href title="add new account" (click)="addNewAccount()" (contextmenu)="addNewAccount()">
|
||||||
|
@ -20,15 +30,14 @@
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
||||||
<a class="left-bar-button left-bar-button--scheduled left-bar-button--bottom left-bar-link" href title="scheduled statuses"
|
<a class="left-bar-button left-bar-button--scheduled left-bar-button--bottom left-bar-link" href
|
||||||
*ngIf="hasAccounts && hasScheduledStatuses"
|
title="scheduled statuses" *ngIf="hasAccounts && hasScheduledStatuses" (click)="openScheduledStatuses()"
|
||||||
(click)="openScheduledStatuses()"
|
|
||||||
(contextmenu)="openScheduledStatuses()">
|
(contextmenu)="openScheduledStatuses()">
|
||||||
<fa-icon [icon]="faCalendarAlt"></fa-icon>
|
<fa-icon [icon]="faCalendarAlt"></fa-icon>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a class="left-bar-button left-bar-button--cog left-bar-button--bottom left-bar-link" href title="settings" (click)="openSettings()"
|
<a class="left-bar-button left-bar-button--cog left-bar-button--bottom left-bar-link" href title="settings"
|
||||||
(contextmenu)="openSettings()">
|
(click)="openSettings()" (contextmenu)="openSettings()">
|
||||||
<fa-icon [icon]="faCog"></fa-icon>
|
<fa-icon [icon]="faCog"></fa-icon>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
|
@ -83,3 +83,37 @@ $height-button: 40px;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
// color: cornflowerblue;
|
// color: cornflowerblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$draggable-accent-color: #47e927;
|
||||||
|
// $draggable-accent-color: #a8ff97;
|
||||||
|
.draggable {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: auto;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
border: 2px solid #df0adf;
|
||||||
|
border: 2px solid $draggable-accent-color;
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
width: calc(100%);
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
float: left;
|
||||||
|
z-index: 5;
|
||||||
|
color:$draggable-accent-color;
|
||||||
|
|
||||||
|
top: 6px;
|
||||||
|
left: 12px;
|
||||||
|
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,12 +1,13 @@
|
||||||
import { Component, OnInit, OnDestroy } from "@angular/core";
|
import { Component, OnInit, OnDestroy } from "@angular/core";
|
||||||
|
import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
|
||||||
import { Subscription, Observable } from "rxjs";
|
import { Subscription, Observable } from "rxjs";
|
||||||
import { Store } from "@ngxs/store";
|
import { Store } from "@ngxs/store";
|
||||||
import { faPlus, faCog, faSearch } from "@fortawesome/free-solid-svg-icons";
|
import { faPlus, faCog, faSearch, faArrowsAltV } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { faCommentAlt, faCalendarAlt } from "@fortawesome/free-regular-svg-icons";
|
import { faCommentAlt, faCalendarAlt } from "@fortawesome/free-regular-svg-icons";
|
||||||
import { HotkeysService, Hotkey } from 'angular2-hotkeys';
|
import { HotkeysService, Hotkey } from 'angular2-hotkeys';
|
||||||
|
|
||||||
import { AccountWrapper } from "../../models/account.models";
|
import { AccountWrapper } from "../../models/account.models";
|
||||||
import { AccountInfo, SelectAccount } from "../../states/accounts.state";
|
import { AccountInfo, ReorderAccounts, SelectAccount } from "../../states/accounts.state";
|
||||||
import { NavigationService, LeftPanelType } from "../../services/navigation.service";
|
import { NavigationService, LeftPanelType } from "../../services/navigation.service";
|
||||||
import { UserNotificationService, UserNotification } from '../../services/user-notification.service';
|
import { UserNotificationService, UserNotification } from '../../services/user-notification.service';
|
||||||
import { ToolsService } from '../../services/tools.service';
|
import { ToolsService } from '../../services/tools.service';
|
||||||
|
@ -24,6 +25,7 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
|
||||||
faPlus = faPlus;
|
faPlus = faPlus;
|
||||||
faCog = faCog;
|
faCog = faCog;
|
||||||
faCalendarAlt = faCalendarAlt;
|
faCalendarAlt = faCalendarAlt;
|
||||||
|
faArrowsAltV = faArrowsAltV;
|
||||||
|
|
||||||
accounts: AccountWithNotificationWrapper[] = [];
|
accounts: AccountWithNotificationWrapper[] = [];
|
||||||
hasAccounts: boolean;
|
hasAccounts: boolean;
|
||||||
|
@ -33,6 +35,7 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
|
||||||
private accountSub: Subscription;
|
private accountSub: Subscription;
|
||||||
private scheduledSub: Subscription;
|
private scheduledSub: Subscription;
|
||||||
private notificationSub: Subscription;
|
private notificationSub: Subscription;
|
||||||
|
private draggableIconMenuSub: Subscription;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private readonly settingsService: SettingsService,
|
private readonly settingsService: SettingsService,
|
||||||
|
@ -103,7 +106,13 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
iconMenuIsDraggable = false;
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
this.draggableIconMenuSub = this.navigationService.enableDraggableIconMenu.subscribe(x => {
|
||||||
|
this.iconMenuIsDraggable = x;
|
||||||
|
});
|
||||||
|
|
||||||
this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
|
this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
|
||||||
if (accounts) {
|
if (accounts) {
|
||||||
//Update and Add
|
//Update and Add
|
||||||
|
@ -164,6 +173,17 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
|
||||||
this.accountSub.unsubscribe();
|
this.accountSub.unsubscribe();
|
||||||
this.notificationSub.unsubscribe();
|
this.notificationSub.unsubscribe();
|
||||||
this.scheduledSub.unsubscribe();
|
this.scheduledSub.unsubscribe();
|
||||||
|
this.draggableIconMenuSub.unsubscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
onDrop(event: CdkDragDrop<AccountWithNotificationWrapper[]>) {
|
||||||
|
if (event.previousContainer === event.container) {
|
||||||
|
moveItemInArray(event.container.data,
|
||||||
|
event.previousIndex,
|
||||||
|
event.currentIndex);
|
||||||
|
|
||||||
|
this.store.dispatch([new ReorderAccounts(this.accounts.map(x => x.info))])
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onToogleAccountNotify(acc: AccountWrapper) {
|
onToogleAccountNotify(acc: AccountWrapper) {
|
||||||
|
|
|
@ -10,6 +10,7 @@ export class NavigationService {
|
||||||
activatedPanelSubject = new BehaviorSubject<OpenLeftPanelEvent>(new OpenLeftPanelEvent(LeftPanelType.Closed));
|
activatedPanelSubject = new BehaviorSubject<OpenLeftPanelEvent>(new OpenLeftPanelEvent(LeftPanelType.Closed));
|
||||||
activatedMediaSubject: Subject<OpenMediaEvent> = new Subject<OpenMediaEvent>();
|
activatedMediaSubject: Subject<OpenMediaEvent> = new Subject<OpenMediaEvent>();
|
||||||
columnSelectedSubject = new BehaviorSubject<number>(-1);
|
columnSelectedSubject = new BehaviorSubject<number>(-1);
|
||||||
|
enableDraggableIconMenu = new BehaviorSubject<boolean>(false);
|
||||||
|
|
||||||
constructor() { }
|
constructor() { }
|
||||||
|
|
||||||
|
@ -19,6 +20,10 @@ export class NavigationService {
|
||||||
this.activatedPanelSubject.next(newEvent);
|
this.activatedPanelSubject.next(newEvent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
changeIconMenuState(draggable: boolean) {
|
||||||
|
this.enableDraggableIconMenu.next(draggable);
|
||||||
|
}
|
||||||
|
|
||||||
openPanel(type: LeftPanelType){
|
openPanel(type: LeftPanelType){
|
||||||
const newEvent = new OpenLeftPanelEvent(type);
|
const newEvent = new OpenLeftPanelEvent(type);
|
||||||
this.activatedPanelSubject.next(newEvent);
|
this.activatedPanelSubject.next(newEvent);
|
||||||
|
|
|
@ -6,6 +6,11 @@ export class AddAccount {
|
||||||
constructor(public account: AccountInfo) {}
|
constructor(public account: AccountInfo) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class ReorderAccounts {
|
||||||
|
static readonly type = '[Accounts] Reorder';
|
||||||
|
constructor(public accounts: AccountInfo[]) {}
|
||||||
|
}
|
||||||
|
|
||||||
export class SelectAccount {
|
export class SelectAccount {
|
||||||
static readonly type = '[Accounts] Select account';
|
static readonly type = '[Accounts] Select account';
|
||||||
constructor(public account: AccountInfo, public multiselection: boolean = false) {}
|
constructor(public account: AccountInfo, public multiselection: boolean = false) {}
|
||||||
|
@ -46,6 +51,16 @@ export class AccountsState {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Action(ReorderAccounts)
|
||||||
|
ReorderAccounts(ctx: StateContext<AccountsStateModel>, action: ReorderAccounts){
|
||||||
|
// const state = ctx.getState();
|
||||||
|
const reorderedAccounts = action.accounts;
|
||||||
|
|
||||||
|
ctx.patchState({
|
||||||
|
accounts: [...reorderedAccounts]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
@Action(UpdateAccount)
|
@Action(UpdateAccount)
|
||||||
UpdateAccount(ctx: StateContext<AccountsStateModel>, action: UpdateAccount){
|
UpdateAccount(ctx: StateContext<AccountsStateModel>, action: UpdateAccount){
|
||||||
const state = ctx.getState();
|
const state = ctx.getState();
|
||||||
|
|
Loading…
Reference in New Issue