Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #611 from NicolasConstant/topic_reorganize-accounts 

Topic reorganize accounts
This commit is contained in:
Nicolas Constant 2023-08-20 03:35:34 -04:00 committed by GitHub
parent 8cee7289eb 0305cc6ac7
commit e62987b11a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 1290 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1169
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -25,13 +25,14 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^7.2.7",
"@angular/cdk": "^7.2.7",
"@angular/animations": "^7.2.16",
"@angular/cdk": "^7.3.7",
"@angular/common": "^7.2.7",
"@angular/compiler": "^7.2.7",
"@angular/core": "^7.2.7",
"@angular/forms": "^7.2.7",
"@angular/http": "^7.2.7",
"@angular/material": "^16.2.1",
"@angular/platform-browser": "^7.2.7",
"@angular/platform-browser-dynamic": "^7.2.7",
"@angular/pwa": "^0.12.4",

2
src/app/app.module.ts
View File

@ -5,6 +5,7 @@ import { HttpModule } from "@angular/http";
import { HttpClientModule } from '@angular/common/http';
import { NgModule, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { DragDropModule } from '@angular/cdk/drag-drop';
// import { NgxElectronModule } from 'ngx-electron';
import { NgxsModule } from '@ngxs/store';
@ -177,6 +178,7 @@ const routes: Routes = [
OwlDateTimeModule,
OwlNativeDateTimeModule,
OverlayModule,
DragDropModule,
// NgxElectronModule,
RouterModule.forRoot(routes),

3
src/app/components/floating-column/settings/settings.component.html
View File

@ -220,6 +220,9 @@
(change)="onEnableFreezeAvatarChanged()" type="checkbox" name="enableFreezeAvatar"
value="enableFreezeAvatar" id="enableFreezeAvatar">
<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>
<h4 class="panel__subtitle">About</h4>

18
src/app/components/floating-column/settings/settings.component.scss
View File

@ -153,4 +153,22 @@
background-color: #32384d;
}
}
}
.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;
}
}

9
src/app/components/floating-column/settings/settings.component.ts
View File

@ -156,7 +156,14 @@ export class SettingsComponent implements OnInit, OnDestroy {
ngOnDestroy(): void {
if(this.languageSub) this.languageSub.unsubscribe();
}
}
iconMenuLocked = true;
toogleLockIconMenu(): boolean {
this.navigationService.changeIconMenuState(this.iconMenuLocked);
this.iconMenuLocked = ! this.iconMenuLocked;
return false;
}
onSearchLang(input: string) {
this.searchedLangs = this.languageService.searchLanguage(input);

27
src/app/components/left-side-bar/left-side-bar.component.html
View File

@ -8,27 +8,36 @@
<fa-icon [icon]="faSearch"></fa-icon>
</a>
<div *ngFor="let account of accounts">
<app-account-icon [account]="account" (toogleAccountNotify)="onToogleAccountNotify($event)"
(openMenuNotify)="onOpenMenuNotify($event)">
</app-account-icon>
<div *ngIf="!iconMenuIsDraggable">
<div *ngFor="let account of accounts">
<app-account-icon [account]="account" (toogleAccountNotify)="onToogleAccountNotify($event)"
(openMenuNotify)="onOpenMenuNotify($event)">
</app-account-icon>
</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 }"
href title="add new account" (click)="addNewAccount()" (contextmenu)="addNewAccount()">
<fa-icon [icon]="faPlus"></fa-icon>
</a>
<a class="left-bar-button left-bar-button--scheduled left-bar-button--bottom left-bar-link" href title="scheduled statuses"
*ngIf="hasAccounts && hasScheduledStatuses"
(click)="openScheduledStatuses()"
<a class="left-bar-button left-bar-button--scheduled left-bar-button--bottom left-bar-link" href
title="scheduled statuses" *ngIf="hasAccounts && hasScheduledStatuses" (click)="openScheduledStatuses()"
(contextmenu)="openScheduledStatuses()">
<fa-icon [icon]="faCalendarAlt"></fa-icon>
</a>
<a class="left-bar-button left-bar-button--cog left-bar-button--bottom left-bar-link" href title="settings" (click)="openSettings()"
(contextmenu)="openSettings()">
<a class="left-bar-button left-bar-button--cog left-bar-button--bottom left-bar-link" href title="settings"
(click)="openSettings()" (contextmenu)="openSettings()">
<fa-icon [icon]="faCog"></fa-icon>
</a>
</div>

34
src/app/components/left-side-bar/left-side-bar.component.scss
View File

@ -82,4 +82,38 @@ $height-button: 40px;
.no-accounts {
padding-top: 10px;
// 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;
}
}

24
src/app/components/left-side-bar/left-side-bar.component.ts
View File

@ -1,12 +1,13 @@
import { Component, OnInit, OnDestroy } from "@angular/core";
import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
import { Subscription, Observable } from "rxjs";
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 { HotkeysService, Hotkey } from 'angular2-hotkeys';
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 { UserNotificationService, UserNotification } from '../../services/user-notification.service';
import { ToolsService } from '../../services/tools.service';
@ -24,6 +25,7 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
faPlus = faPlus;
faCog = faCog;
faCalendarAlt = faCalendarAlt;
faArrowsAltV = faArrowsAltV;
accounts: AccountWithNotificationWrapper[] = [];
hasAccounts: boolean;
@ -33,6 +35,7 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
private accountSub: Subscription;
private scheduledSub: Subscription;
private notificationSub: Subscription;
private draggableIconMenuSub: Subscription;
constructor(
private readonly settingsService: SettingsService,
@ -103,7 +106,13 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
}
}
iconMenuIsDraggable = false;
ngOnInit() {
this.draggableIconMenuSub = this.navigationService.enableDraggableIconMenu.subscribe(x => {
this.iconMenuIsDraggable = x;
});
this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
if (accounts) {
//Update and Add
@ -164,6 +173,17 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
this.accountSub.unsubscribe();
this.notificationSub.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) {

5
src/app/services/navigation.service.ts
View File

@ -10,6 +10,7 @@ export class NavigationService {
activatedPanelSubject = new BehaviorSubject<OpenLeftPanelEvent>(new OpenLeftPanelEvent(LeftPanelType.Closed));
activatedMediaSubject: Subject<OpenMediaEvent> = new Subject<OpenMediaEvent>();
columnSelectedSubject = new BehaviorSubject<number>(-1);
enableDraggableIconMenu = new BehaviorSubject<boolean>(false);
constructor() { }
@ -19,6 +20,10 @@ export class NavigationService {
this.activatedPanelSubject.next(newEvent);
}
changeIconMenuState(draggable: boolean) {
this.enableDraggableIconMenu.next(draggable);
}
openPanel(type: LeftPanelType){
const newEvent = new OpenLeftPanelEvent(type);
this.activatedPanelSubject.next(newEvent);

15
src/app/states/accounts.state.ts
View File

@ -6,6 +6,11 @@ export class AddAccount {
constructor(public account: AccountInfo) {}
}
export class ReorderAccounts {
static readonly type = '[Accounts] Reorder';
constructor(public accounts: AccountInfo[]) {}
}
export class SelectAccount {
static readonly type = '[Accounts] Select account';
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)
UpdateAccount(ctx: StateContext<AccountsStateModel>, action: UpdateAccount){
const state = ctx.getState();