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

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.

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

@@ -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/api/index.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/storage-upgrade.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/shared/api/main.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/constants.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/model/options.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/util.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/web/browser-window/app/_accounts/account-title.component.html

@@ -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

src/web/browser-window/app/_accounts/account-title.component.scss

@@ -20,58 +20,54 @@
         &.selected {
             .btn {
                 @include account-title-button(
-                    map_get($app-account-title-btn-colors, "selected-bg"),
-                    map_get($app-account-title-btn-colors, "selected-border"),
+                        map_get($app-account-title-btn-colors, "selected-bg"),
+                        map_get($app-account-title-btn-colors, "selected-border"),
                 );
+
+                &:nth-child(2) {
+                    .fa {
+                        &.syncing {
+                            color: theme-color("primary");
+                        }
+                    }
+                }
             }
 
             .btn,
             .login-delay {
                 color: map_get($app-account-title-btn-colors, "selected-text");
             }
-
-            .b-toggle-view {
-                .fa {
-                    &.syncing {
-                        color: theme-color("primary");
-                    }
-                }
-            }
         }
 
         &:not(.selected) {
-            &.stored {
-                .b-handle {
-                    border-right-color: $app-color-secondary-btn-split-border;
-                }
+            > .btn:not(:last-child) {
+                border-right-color: $app-color-secondary-btn-split-border;
             }
         }
 
-        > .btn:first-child {
-            flex-grow: 1;
-        }
-    }
-
-    .b-handle {
-        display: flex;
-        flex-grow: 1;
-        text-decoration: none;
-        align-items: center;
-    }
+        > .btn {
+            &:nth-child(1) {
+                flex-grow: 1;
+                display: flex;
+                text-decoration: none;
+                align-items: center;
+            }
 
-    .b-toggle-view {
-        @include app-dropdown-toggle-split;
-        margin-left: 0;
-        flex-grow: 0;
-        border-left-width: 0;
+            &:nth-child(2) {
+                @include app-dropdown-toggle-split;
+                margin-left: 0;
+                flex-grow: 0;
+                border-left-width: 0;
 
-        .fa {
-            font-size: 78%;
-            width: 0.78em; // prevents button size change on icon toggling
+                .fa {
+                    font-size: 78%;
+                    width: 0.78em; // prevents button size change on icon toggling
 
-            &.syncing {
-                color: $app-color-primary-light;
-                animation: app-keyframes-opacity 1s linear infinite;
+                    &.syncing {
+                        color: $app-color-primary-light;
+                        animation: app-keyframes-opacity 1s linear infinite;
+                    }
+                }
             }
         }
     }
@@ -82,7 +78,7 @@
 
     .login-delay {
         color: $gray-300;
-        font-size: 85%;
+        font-size: 80%;
 
         .fa ~ span {
             margin-left: $app-spacer-1 / 2;

src/web/browser-window/app/_accounts/accounts.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="initialized$ | async" [ngClass]="{'compact-layout': compactLayout$ | async}" class="wrapper">
+<div *ngIf="initialized$ | async" [attr.class]="'wrapper layout-mode-' + (layoutMode$ | async)">
     <div class="accounts-block px-2 pt-2" [ngClass]="{'d-none': hideControls$ | async}">
         <div class="controls">
             <div class="btn-group" dropdown>
@@ -9,16 +9,6 @@
                     <span class="caret"></span>
                 </button>
                 <ul *dropdownMenu class="dropdown-menu" role="menu">
-                    <li role="menuitem">
-                        <button
-                            (click)="toggleCompactLayout()"
-                            class="dropdown-item toggle-layout-view"
-                            title="Toggling vertical/horizontal accounts handle buttons positioning"
-                            type="button"
-                        >
-                            Toggle View Mode
-                        </button>
-                    </li>
                     <li role="menuitem">
                         <button (click)="openSettingsFolder()" class="dropdown-item" type="button">
                             Open Settings Folder