enable "custom actions" account context menu & add "edit" action, #456

vladimiry · Apr 13, 2022 · 0ed7055 · 0ed7055
1 parent 3ab7b8f
commit 0ed7055
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 31 deletions.
diff --git a/src/electron-main/api/endpoints-builders/account.ts b/src/electron-main/api/endpoints-builders/account.ts
@@ -38,7 +38,6 @@ export async function buildEndpoints(
                 customNotificationCode,
                 notificationShellExec,
                 notificationShellExecCode,
-                contextMenu,
                 customCSS,
                 title,
                 entryUrl,
@@ -64,7 +63,6 @@ export async function buildEndpoints(
                 customNotificationCode,
                 notificationShellExec,
                 notificationShellExecCode,
-                contextMenu,
                 customCSS,
                 title,
                 entryUrl,
@@ -99,7 +97,6 @@ export async function buildEndpoints(
                 customNotificationCode,
                 notificationShellExec,
                 notificationShellExecCode,
-                contextMenu,
                 customCSS,
                 title,
                 entryUrl,
@@ -144,7 +141,6 @@ export async function buildEndpoints(
                 account.customNotificationCode = customNotificationCode;
                 account.notificationShellExec = notificationShellExec;
                 account.notificationShellExecCode = notificationShellExecCode;
-                account.contextMenu = contextMenu;
                 account.customCSS = customCSS;
                 account.title = title;
                 account.database = database;

diff --git a/src/electron-main/storage-upgrade.ts b/src/electron-main/storage-upgrade.ts
@@ -590,6 +590,11 @@ export const upgradeSettings: upgradeSettingsType = ((): upgradeSettingsType =>
                     }
                 });
             },
+            "4.14.0": (settings: Settings): void => {
+                settings.accounts.forEach((account) => {
+                    delete (account as typeof account & { contextMenu?: boolean }).contextMenu;
+                });
+            },
         };
     }
 

diff --git a/src/shared/model/account.ts b/src/shared/model/account.ts
@@ -21,7 +21,6 @@ export type AccountConfig = NoExtraProps<{
     rotateUserAgent?: boolean;
     disabled?: boolean;
     customCSS?: string;
-    contextMenu?: boolean;
     customNotification?: boolean;
     customNotificationCode?: string;
     notificationShellExec?: boolean;

diff --git a/src/shared/model/container.ts b/src/shared/model/container.ts
@@ -25,7 +25,6 @@ export type AccountConfigCreateUpdatePatch = NoExtraProps<Pick<AccountConfig,
     | "customNotificationCode"
     | "notificationShellExec"
     | "notificationShellExecCode"
-    | "contextMenu"
     | "customCSS"
     | "credentials"
     | "database"

diff --git a/src/web/browser-window/app/_accounts/account-title.component.html b/src/web/browser-window/app/_accounts/account-title.component.html
@@ -1,13 +1,26 @@
-<ng-container *ngIf="(state$ | async)?.contextMenuOpen">
-    <ul class="dropdown-menu px-0 py-1" role="menu" style="display: block">
-        <li role="menuitem">
-            <button (click)="unloadContextMenuAction($event)" class="dropdown-item d-flex" title="Unload" type="button">
-                <i class="fa fa-window-close"></i>
-                <span class="ml-1">Unload</span>
-            </button>
-        </li>
-    </ul>
-</ng-container>
+<ng-ccontainer *ngIf="state$ | async; let state">
+    <ng-container *ngIf="state?.contextMenuOpen">
+        <ul class="dropdown-menu px-0 py-1" role="menu" style="display: block">
+            <li role="menuitem">
+                <button
+                    (click)="editContextMenuAction($event, {login: state.account.accountConfig.login})"
+                    class="dropdown-item d-flex"
+                    title="Unload"
+                    type="button"
+                >
+                    <i class="fa fa-pencil"></i>
+                    <span class="ml-1">Edit</span>
+                </button>
+            </li>
+            <li role="menuitem">
+                <button (click)="unloadContextMenuAction($event)" class="dropdown-item d-flex" title="Unload" type="button">
+                    <i class="fa fa-times text-danger"></i>
+                    <span class="ml-1">Unload</span>
+                </button>
+            </li>
+        </ul>
+    </ng-container>
+</ng-ccontainer>
 <div
     *ngIf="state$ | async; let state"
     [ngClass]="{'selected': state.selected, 'stored': state.stored, 'login-filled-once': state.account.loginFilledOnce}"

diff --git a/src/web/browser-window/app/_accounts/account-title.component.ts b/src/web/browser-window/app/_accounts/account-title.component.ts
@@ -6,8 +6,10 @@ import {select, Store} from "@ngrx/store";
 import type {Unsubscribable} from "rxjs";
 import UUID from "pure-uuid";
 
-import {ACCOUNTS_ACTIONS} from "src/web/browser-window/app/store/actions";
+import {AccountConfig} from "src/shared/model/account";
+import {ACCOUNTS_ACTIONS, NAVIGATION_ACTIONS} from "src/web/browser-window/app/store/actions";
 import {AccountsSelectors} from "src/web/browser-window/app/store/selectors";
+import {SETTINGS_OUTLET, SETTINGS_PATH} from "src/web/browser-window/app/app.constants";
 import {State} from "src/web/browser-window/app/store/reducers/accounts";
 import {WebAccount} from "src/web/browser-window/app/model";
 
@@ -126,19 +128,29 @@ export class AccountTitleComponent implements OnInit, OnDestroy {
 
     @HostListener("contextmenu", ["$event"])
     onContextMenu(event: MouseEvent): void {
-        if (!this.stateSubject$.value.account.accountConfig.contextMenu) {
-            return;
-        }
         event.preventDefault();
         this.patchState({contextMenuOpen: true});
     }
 
     unloadContextMenuAction(event: MouseEvent): void {
         event.preventDefault();
+        event.stopPropagation();
+        this.patchState({contextMenuOpen: false});
         const uuid = new UUID(4).format();
         this.accountUnloadRollback.emit({accountUnloadRollbackUuid: uuid});
         this.store.dispatch(ACCOUNTS_ACTIONS.Unload({login: this.stateSubject$.value.account.accountConfig.login, uuid}));
+    }
+
+    editContextMenuAction(event: MouseEvent, {login}: Pick<AccountConfig, "login">): void {
+        event.preventDefault();
+        event.stopPropagation();
         this.patchState({contextMenuOpen: false});
+        this.store.dispatch(
+            NAVIGATION_ACTIONS.Go({
+                path: [{outlets: {[SETTINGS_OUTLET]: `${SETTINGS_PATH}/account-edit`}}],
+                queryParams: {login},
+            }),
+        );
     }
 
     toggleViewMode(event: Event): void {

diff --git a/src/web/browser-window/app/_options/account-edit.component.html b/src/web/browser-window/app/_options/account-edit.component.html
@@ -272,13 +272,6 @@
                         Enable the&nbsp;<a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/wiki/FAQ">local store</a>&nbsp;view mode by default
                     </label>
                 </div>
-                <div class="custom-control custom-switch clearfix">
-                    <input class="custom-control-input" formControlName="contextMenu" id="contextMenuCheckbox" type="checkbox">
-                    <label class="custom-control-label d-flex" for="contextMenuCheckbox">
-                        Enable the "custom actions" context menu on the account handle button
-                        <a class="ml-1" href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/456">#456</a>
-                    </label>
-                </div>
             </accordion-group>
             <accordion-group [isOpen]="false" heading="Desktop Notifications">
                 <div *ngIf="controls.customNotification.disabled" class="mb-2 custom-notification-hint">

diff --git a/src/web/browser-window/app/_options/account-edit.component.ts b/src/web/browser-window/app/_options/account-edit.component.ts
@@ -32,7 +32,6 @@ export class AccountEditComponent implements OnInit, OnDestroy {
             | "customNotificationCode"
             | "notificationShellExec"
             | "notificationShellExecCode"
-            | "contextMenu"
             | "customCSS"
             | "login"
             | "title"
@@ -53,7 +52,6 @@ export class AccountEditComponent implements OnInit, OnDestroy {
         customNotificationCode: new FormControl(null),
         notificationShellExec: new FormControl(false),
         notificationShellExecCode: new FormControl(null),
-        contextMenu: new FormControl(false),
         customCSS: new FormControl(null),
         blockNonEntryUrlBasedRequests: new FormControl(null),
         externalContentProxyUrlPattern: new FormControl(
@@ -215,7 +213,6 @@ export class AccountEditComponent implements OnInit, OnDestroy {
                     "customNotificationCode",
                     "notificationShellExec",
                     "notificationShellExecCode",
-                    "contextMenu",
                     "customCSS",
                     "title",
                     "database",
@@ -291,7 +288,6 @@ export class AccountEditComponent implements OnInit, OnDestroy {
             customNotificationCode: controls.customNotificationCode.value,
             notificationShellExec: Boolean(controls.notificationShellExec.value),
             notificationShellExecCode: controls.notificationShellExecCode.value,
-            contextMenu: Boolean(controls.contextMenu.value),
             customCSS: controls.customCSS.value,
             entryUrl: controls.entryUrl.value,
             blockNonEntryUrlBasedRequests: Boolean(controls.blockNonEntryUrlBasedRequests.value),