added draggable aspect in service
This commit is contained in:
parent
335cbf4956
commit
f215d027f9
|
@ -8,15 +8,15 @@
|
||||||
<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 cdkDropList
|
<div *ngIf="iconMenuIsDraggable" cdkDropList [cdkDropListData]="accounts" (cdkDropListDropped)="onDrop($event)">
|
||||||
[cdkDropListData]="accounts"
|
|
||||||
(cdkDropListDropped)="onDrop($event)">
|
|
||||||
<div *ngFor="let account of accounts" cdkDrag class="draggable">
|
<div *ngFor="let account of accounts" cdkDrag class="draggable">
|
||||||
<fa-icon class="draggable__icon" [icon]="faArrowsAltV"></fa-icon>
|
<fa-icon class="draggable__icon" [icon]="faArrowsAltV"></fa-icon>
|
||||||
<img class="draggable__avatar" src="{{ account.avatar }}" />
|
<img class="draggable__avatar" src="{{ account.avatar }}" />
|
||||||
|
|
|
@ -35,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,
|
||||||
|
@ -105,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
|
||||||
|
@ -166,6 +173,7 @@ 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[]>) {
|
onDrop(event: CdkDragDrop<AccountWithNotificationWrapper[]>) {
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue