working drag&drop
This commit is contained in:
parent
a0cb240446
commit
41faa36087
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),
|
||||||
|
|
||||||
|
|
|
@ -14,21 +14,29 @@
|
||||||
</app-account-icon>
|
</app-account-icon>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div cdkDropList
|
||||||
|
[cdkDropListData]="accounts"
|
||||||
|
(cdkDropListDropped)="onDrop($event)">
|
||||||
|
<div *ngFor="let account of accounts" cdkDrag class="draggable">
|
||||||
|
<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()">
|
||||||
<fa-icon [icon]="faPlus"></fa-icon>
|
<fa-icon [icon]="faPlus"></fa-icon>
|
||||||
</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>
|
|
@ -82,4 +82,15 @@ $height-button: 40px;
|
||||||
.no-accounts {
|
.no-accounts {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
// color: cornflowerblue;
|
// color: cornflowerblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: auto;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
width: calc(100%);
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
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 } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
@ -166,6 +167,18 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
|
||||||
this.scheduledSub.unsubscribe();
|
this.scheduledSub.unsubscribe();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onDrop(event: CdkDragDrop<AccountWithNotificationWrapper[]>) {
|
||||||
|
console.warn(event);
|
||||||
|
|
||||||
|
if (event.previousContainer === event.container) {
|
||||||
|
moveItemInArray(event.container.data,
|
||||||
|
event.previousIndex,
|
||||||
|
event.currentIndex);
|
||||||
|
|
||||||
|
console.warn(this.accounts);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onToogleAccountNotify(acc: AccountWrapper) {
|
onToogleAccountNotify(acc: AccountWrapper) {
|
||||||
this.store.dispatch([new SelectAccount(acc.info)]);
|
this.store.dispatch([new SelectAccount(acc.info)]);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue