enable new "left-thin" account handle buttons layout mode, #175

Author: vladimiry

README.md

@@ -40,7 +40,7 @@ The way of verifying that the installation packages attached to the [releases](h
 - :bell: **System tray icon** with a total number of unread messages shown on top of it. Enabling [local messages store](https://github.com/vladimiry/ElectronMail/issues/32) improves this feature ([how to enable](https://github.com/vladimiry/ElectronMail/releases/tag/v2.0.0-beta.1)), see respective [issue](https://github.com/vladimiry/ElectronMail/issues/30).
 - :gear: **Starting minimized to tray**.
 - :gear: **Closing to tray**.
-- :gear: **Switchable accounts handle buttons positioning** (vertical, horizontal and horizontal-dropdown). See details [here](https://github.com/vladimiry/ElectronMail/issues/36) and screenshots in the [images](images) folder.
+- :gear: **Switchable accounts handle buttons positioning** (`top` , `left`, `left-thin`). See details in [#36](https://github.com/vladimiry/ElectronMail/issues/36) and [#175](https://github.com/vladimiry/ElectronMail/issues/175). Demo screenshots placed in the [images](images) folder (specifically [this](images/controls-view-modes-(top-left-left_thing).gif) image).
 - :package: **Batch emails export** to EML files. Feature released with [v2.0.0-beta.4](https://github.com/vladimiry/ElectronMail/releases/tag/v2.0.0-beta.4) version, requires `local messages store` feature to be enabled ([how to enable](https://github.com/vladimiry/ElectronMail/releases/tag/v2.0.0-beta.1)).
 - :closed_lock_with_key: **Built-in/prepackaged web clients**. The built-in web clients are built from source code, see respective official [Protonmail](https://github.com/ProtonMail/WebClient) repository. See [79](https://github.com/vladimiry/ElectronMail/issues/79) and [80](https://github.com/vladimiry/ElectronMail/issues/80) issues for details.
 - :gear: **Configuring proxy per account** support. Enabled since [v3.0.0](https://github.com/vladimiry/ElectronMail/releases/tag/v3.0.0) release. See [113](https://github.com/vladimiry/ElectronMail/issues/113) and [120](https://github.com/vladimiry/ElectronMail/issues/120) issues for details.

images/controls-view-modes-(top-left-left_thing).gif

@@ -350,15 +350,15 @@ const tests: Record<keyof TestContext["endpoints"], (t: ExecutionContext<TestCon
         const patches: Array<Partial<BaseConfig>> = [
             {
                 startHidden: false,
-                compactLayout: true,
+                layoutMode: "top",
                 closeToTray: false,
                 unreadNotifications: true,
                 checkUpdateAndNotify: true,
                 logLevel: "warn",
             },
             {
                 startHidden: true,
-                compactLayout: undefined,
+                layoutMode: undefined,
                 closeToTray: true,
                 unreadNotifications: false,
                 checkUpdateAndNotify: false,
@@ -446,21 +446,6 @@ const tests: Record<keyof TestContext["endpoints"], (t: ExecutionContext<TestCon
         await readConfigAndSettings(t.context.endpoints, {password: OPTIONS.masterPassword});
         t.true(await t.context.ctx.settingsStore.readable(), "store: settings file exists");
     },
-
-    toggleCompactLayout: async (t) => {
-        const endpoints = t.context.endpoints;
-        const action = endpoints.toggleCompactLayout;
-
-        const config1 = await readConfig(endpoints);
-        t.true(config1.compactLayout);
-
-        const config2 = await action();
-        t.is(config2.compactLayout, !config1.compactLayout);
-
-        await action();
-        const config3 = await t.context.ctx.configStore.readExisting();
-        t.is(config3.compactLayout, !config2.compactLayout);
-    },
 };
 
 Object.entries(tests).forEach(([apiMethodName, method]) => {

src/electron-main/__test__/api/index.spec.ts

@@ -321,15 +321,6 @@ export const initApi = async (ctx: Context): Promise<IpcMainApiEndpoints> => {
             return ctx.settingsStore.readable();
         },
 
-        async toggleCompactLayout() {
-            const config = await ctx.configStore.readExisting();
-
-            return ctx.configStore.write({
-                ...config,
-                compactLayout: !config.compactLayout,
-            });
-        },
-
         async generateTOTPToken({secret}) {
             return {
                 token: authenticator.generate(secret),

src/electron-main/api/index.ts

@@ -14,6 +14,7 @@ import {INITIAL_STORES, PLATFORM} from "./constants";
 import {IPC_MAIN_API_NOTIFICATION$} from "src/electron-main/api/constants";
 import {IPC_MAIN_API_NOTIFICATION_ACTIONS} from "src/shared/api/main";
 import {
+    LAYOUT_MODES,
     ONE_SECOND_MS,
     PACKAGE_VERSION,
     PROTON_API_ENTRY_PRIMARY_VALUE,
@@ -288,6 +289,24 @@ const CONFIG_UPGRADES: Record<string, (config: Config) => void> = {
                 });
             });
         })();
+
+        (() => {
+            const key: keyof Pick<Config, "layoutMode"> = "layoutMode";
+
+            if (LAYOUT_MODES.some(({value}) => value === config[key])) {
+                return;
+            }
+
+            type PrevConfig = Config & { compactLayout?: boolean };
+            const compactLayout = (config as PrevConfig).compactLayout;
+            delete (config as PrevConfig).compactLayout;
+
+            config[key] = typeof compactLayout === "boolean"
+                ? compactLayout
+                    ? "top"
+                    : "left"
+                : INITIAL_STORES.config()[key];
+        })();
     },
     // WARN needs to be the last updater
     "100.0.0": (config) => {

src/electron-main/storage-upgrade.ts

@@ -111,8 +111,6 @@ export const ENDPOINTS_DEFINITION = {
 
     toggleBrowserWindow: ActionType.Promise<{ forcedState: boolean } | void>(),
 
-    toggleCompactLayout: ActionType.Promise<void, Config>(),
-
     updateOverlayIcon: ActionType.Promise<{
         hasLoggedOut: boolean;
         unread: number;

src/shared/api/main.ts

@@ -188,6 +188,11 @@ export const ZOOM_FACTORS: ReadonlyArray<number> = [
     2,
 ];
 
+export const LAYOUT_MODES = [
+    {value: "top", title: "top"},
+    {value: "left", title: "left"},
+    {value: "left-thin", title: "left (thin)"},
+] as const;
 
 export const WEB_VIEW_SESSION_STORAGE_KEY_SKIP_LOGIN_DELAYS = "ELECTRON_MAIL_SKIP_LOGIN_DELAYS";
 

src/shared/constants.ts

@@ -41,7 +41,7 @@ export interface Config extends BaseConfig, Partial<StoreModel.StoreEntity> {
     // base
     checkUpdateAndNotify: boolean;
     closeToTray: boolean;
-    compactLayout: boolean;
+    layoutMode: (typeof import("src/shared/constants").LAYOUT_MODES)[number]["value"];
     customTrayIconColor: string;
     customUnreadBgColor: string;
     customUnreadTextColor: string;
@@ -60,7 +60,7 @@ export interface Config extends BaseConfig, Partial<StoreModel.StoreEntity> {
 export type BaseConfig = Pick<Config,
     | "checkUpdateAndNotify"
     | "closeToTray"
-    | "compactLayout"
+    | "layoutMode"
     | "customTrayIconColor"
     | "customUnreadBgColor"
     | "customUnreadTextColor"

src/shared/model/options.ts

@@ -63,7 +63,7 @@ export function initialConfig(): Config {
             // base
             checkUpdateAndNotify: false,
             closeToTray: true,
-            compactLayout: true,
+            layoutMode: "top",
             customTrayIconColor: "",
             customUnreadBgColor: "",
             customUnreadTextColor: "",
@@ -85,7 +85,7 @@ export function pickBaseConfigProperties(
     {
         checkUpdateAndNotify,
         closeToTray,
-        compactLayout,
+        layoutMode,
         customTrayIconColor,
         customUnreadBgColor,
         customUnreadTextColor,
@@ -104,7 +104,7 @@ export function pickBaseConfigProperties(
     return {
         checkUpdateAndNotify,
         closeToTray,
-        compactLayout,
+        layoutMode,
         customTrayIconColor,
         customUnreadBgColor,
         customUnreadTextColor,

src/shared/util.ts

@@ -3,7 +3,7 @@
     [ngClass]="{'selected': state.selected, 'stored': state.stored, 'login-filled-once': state.account.loginFilledOnce}"
     class="btn-group"
 >
-    <a class="btn btn-sm btn-secondary b-handle" href="mailto:{{ state.account.accountConfig.login }}">
+    <a class="btn btn-sm btn-secondary" href="mailto:{{ state.account.accountConfig.login }}">
         <electron-mail-unread-badge
             *ngIf="state.account.notifications.unread"
             [value]="state.account.notifications.unread"
@@ -14,16 +14,14 @@
         </div>
         <div *ngIf="state.loginDelayed" class="d-flex mr-2 login-delay">
             <i *ngIf="state.account.loginDelayedUntilSelected" class="fa fa-hand-pointer-o mr-1"></i>
-            <span *ngIf="state.account.loginDelayedSeconds; let remainingSeconds">{{ remainingSeconds }}</span>
-        </div>
-        <div class="d-flex flex-grow-1">
-            {{ state.account.accountConfig.title || state.account.accountConfig.login }}
+            <span class="letters" *ngIf="state.account.loginDelayedSeconds; let remainingSeconds">{{ remainingSeconds }}</span>
         </div>
+        <div class="d-flex flex-grow-1 letters login">{{ state.account.accountConfig.title || state.account.accountConfig.login }}</div>
     </a>
     <button
         (click)="toggleViewMode($event)"
         *ngIf="state.stored"
-        class="btn btn-sm btn-secondary b-toggle-view"
+        class="btn btn-sm btn-secondary"
         title="Toggle online/database view mode"
     >
         <i