inprove ui consistency + enable 3 layout modes: default/tabs/compact

vladimiry · Jul 23, 2018 · f11fc98 · f11fc98
1 parent ce49eca
commit f11fc98
Show file tree

Hide file tree

Showing 13 changed files with 96 additions and 127 deletions.
diff --git a/README.md b/README.md
@@ -4,11 +4,7 @@ is built with Electron unofficial desktop app for [ProtonMail](https://protonmai
 
 [![Build Status: Linux / MacOS](https://travis-ci.org/vladimiry/email-securely-app.svg?branch=master)](https://travis-ci.org/vladimiry/email-securely-app) [![Build status: Windows](https://ci.appveyor.com/api/projects/status/vex909uhwadrse27?svg=true)](https://ci.appveyor.com/project/vladimiry/email-securely-app)
 
-You can see below a screenshots of the `compact` and `default` view modes:
-
-![view-compact](images/view-compact.png)
-
-![view-default](images/view-default.png)
+![view-toggling](images/toggling.gif)
 
 ## Features
 - Cross platform, Linux/OSX/Windows packages [provided](https://github.com/vladimiry/email-securely-app/releases).
@@ -19,9 +15,10 @@ You can see below a screenshots of the `compact` and `default` view modes:
 - Encrypted settings storage with switchable predefined key derivation and encryption presets. Argon2 is used as the default key derivation function.
 - Native notifications for individual accounts clicking on which focuses the app window and selects respective account in the accounts list.
 - System tray icon with a total number of unread messages shown on top of it. Checking unread emails count for Tutanota is currently not efficient enough, respective [issue](https://github.com/vladimiry/email-securely-app/issues/30) has been placed.
+- Full, tabs and dropdown view modes. See details [here](https://github.com/vladimiry/email-securely-app/issues/36) and screenshots in [images](images) folder.
 - Start minimized to tray.
 - Close to tray.
-- Compact view mode.
+
 
 ## Build your own package
 

diff --git a/images/toggling.gif b/images/toggling.gif
diff --git a/images/view-compact.png b/images/view-compact.png
diff --git a/images/view-default.png b/images/view-default.png
diff --git a/images/view-dropdown.png b/images/view-dropdown.png
diff --git a/images/view-full.png b/images/view-full.png
diff --git a/images/view-tabs.png b/images/view-tabs.png
diff --git a/src/web/src/app/+accounts/account-title.component.scss b/src/web/src/app/+accounts/account-title.component.scss
@@ -3,8 +3,7 @@
 :host {
     display: block;
     position: relative;
-    word-break: break-all;
-    padding-right: 17px;
+    padding-right: $list-group-item-padding-x * 1.5;
 
     .account-value-login {
         display: inline;

diff --git a/src/web/src/app/+accounts/account.component.ts b/src/web/src/app/+accounts/account.component.ts
@@ -179,9 +179,9 @@ export class AccountComponent implements AfterViewInit, OnDestroy {
     async ngAfterViewInit() {
         await this.webViewSrcSetupPromise;
 
-        if ((process.env.NODE_ENV/* as BuildEnvironment*/) === "development") {
-            this.webView.addEventListener("dom-ready", () => this.webView.openDevTools());
-        }
+        // if ((process.env.NODE_ENV/* as BuildEnvironment*/) === "development") {
+        //     this.webView.addEventListener("dom-ready", () => this.webView.openDevTools());
+        // }
 
         this.subscribePageLoadedEvents();
 

diff --git a/src/web/src/app/+accounts/accounts.component.html b/src/web/src/app/+accounts/accounts.component.html
@@ -1,29 +1,5 @@
 <div class="wrapper" *ngIf="initialized$ | async" [ngClass]="{'compact-layout': compactLayout$ | async}">
-    <div class="accounts-block p-2">
-        <div class="btn-group accounts-list" dropdown placement="bottom right"
-             [ngStyle]="!accounts.length && {'visibility': 'hidden'}">
-            <div class="unread-summary" *ngIf="unreadSummary">
-                <span class="badge badge-danger">{{ unreadSummary }}</span>
-            </div>
-            <button type="button" class="btn btn-warning-light dropdown-toggle list-group-item-warning"
-                    dropdownToggle *ngIf="selectedAccount">
-                <email-securely-app-account-title [account]="selectedAccount"></email-securely-app-account-title>
-            </button>
-            <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
-                <li role="menuitem" *ngFor="let account of accounts; trackBy: trackAccount">
-                    <a class="dropdown-item" (click)="activateAccount(account)">
-                        <email-securely-app-account-title [account]="account"></email-securely-app-account-title>
-                    </a>
-                </li>
-            </ul>
-        </div>
-        <ul class="list-group accounts-list">
-            <a class="list-group-item list-group-item-action" href="javascript:void(0)"
-               *ngFor="let account of accounts; trackBy: trackAccount" (click)="activateAccount(account)"
-               [ngClass]="{'list-group-item-warning': account.accountConfig.login === (selectedLogin$ | async)}">
-                <email-securely-app-account-title [account]="account"></email-securely-app-account-title>
-            </a>
-        </ul>
+    <div class="accounts-block px-2 pt-2">
         <div class="controls">
             <div class="btn-group" dropdown>
                 <button type="button" class="btn btn-light" (click)="openSettingsView()" id="optionsMenuItem">
@@ -37,7 +13,7 @@
                     <li role="menuitem">
                         <button class="dropdown-item toggle-layout-view" type="button" (click)="toggleCompactLayout()">
                             <i class="fa fa-spinner fa-pulse fa-fw" *ngIf="togglingCompactLayout$ | async"></i>
-                            Toggle Compact View
+                            Toggle View Mode
                         </button>
                     </li>
                     <li role="menuitem">
@@ -67,6 +43,30 @@
                 </ul>
             </div>
         </div>
+        <div class="btn-group accounts-list mb-2 d-lg-none" dropdown placement="bottom right"
+             [ngStyle]="!accounts.length && {'visibility': 'hidden'}">
+            <div class="unread-summary" *ngIf="unreadSummary && accounts.length > 1">
+                <span class="badge badge-danger">{{ unreadSummary }}</span>
+            </div>
+            <button type="button" class="btn btn-warning-light dropdown-toggle list-group-item-warning"
+                    dropdownToggle *ngIf="selectedAccount">
+                <email-securely-app-account-title [account]="selectedAccount"></email-securely-app-account-title>
+            </button>
+            <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
+                <li role="menuitem" *ngFor="let account of accounts; trackBy: trackAccount">
+                    <a class="dropdown-item" (click)="activateAccount(account)">
+                        <email-securely-app-account-title [account]="account"></email-securely-app-account-title>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <ul class="list-group accounts-list d-none d-lg-flex">
+            <a class="list-group-item list-group-item-action" href="javascript:void(0)"
+               *ngFor="let account of accounts; trackBy: trackAccount" (click)="activateAccount(account)"
+               [ngClass]="{'list-group-item-warning': account.accountConfig.login === (selectedLogin$ | async)}">
+                <email-securely-app-account-title [account]="account"></email-securely-app-account-title>
+            </a>
+        </ul>
     </div>
     <div class="account-block">
         <div *ngIf="accounts.length; then accountsDefined else accountsUnDefined"></div>

diff --git a/src/web/src/app/+accounts/accounts.component.scss b/src/web/src/app/+accounts/accounts.component.scss
@@ -1,10 +1,9 @@
 @import "~src/web/src/variables";
 
-$accounts-column-width: 250px;
 $webview-border: darken($app-color-bg-dark, 10%);
 
 :host {
-    display: block;
+    display: flex;
     position: absolute;
     left: 0;
     right: 0;
@@ -19,6 +18,7 @@ $webview-border: darken($app-color-bg-dark, 10%);
     }
 
     .wrapper {
+        width: 100%;
         height: 100%;
         display: flex;
         flex-flow: column;
@@ -32,25 +32,46 @@ $webview-border: darken($app-color-bg-dark, 10%);
         }
     }
 
+    .controls {
+        display: block;
+        margin-right: $app-spacer-2;
+        margin-bottom: 0;
+
+        .btn-group {
+            width: 100%;
+
+            > .btn:first-child {
+                width: 100%;
+            }
+        }
+
+        .dropdown-menu {
+            min-width: 100%;
+
+            .toggle-layout-view {
+                display: none;
+            }
+        }
+    }
+
     .accounts-block {
         display: flex;
         flex-flow: row;
         z-index: 100;
 
-        .accounts-list {
-            flex: 1;
-            flex-grow: 100;
-        }
-
         .list-group.accounts-list {
-            display: none;
+            flex-direction: row;
+            flex-wrap: wrap;
 
-            .list-group-item {
-                word-wrap: break-word;
+            .list-group-item-action {
+                display: inline-block;
+                width: auto;
             }
         }
 
         .btn-group.accounts-list {
+            width: 100%;
+
             &::ng-deep {
                 .dropdown-toggle::after {
                     display: none;
@@ -72,41 +93,20 @@ $webview-border: darken($app-color-bg-dark, 10%);
                 width: 100%;
                 border-top-left-radius: $btn-border-radius;
                 border-bottom-left-radius: $btn-border-radius;
-            }
-
-            .dropdown-menu {
-                margin-top: $app-spacer-2;
-                width: 100%;
 
-                .dropdown-item {
-                    padding-left: $list-group-item-padding-x;
-                    padding-right: $list-group-item-padding-x;
-                }
-            }
-        }
-
-        .controls {
-            display: flex;
-            flex-grow: 0;
-            margin: 0 0 0 $app-spacer-2;
-
-            .btn-group {
-                & > .btn-light {
-                    &:nth-of-type(1) {
-                        width: 100%;
+                &::ng-deep {
+                    #{$app-prefix}-account-title {
+                        @include caret;
                     }
                 }
             }
 
             .dropdown-menu {
-                // sass-lint:disable-all
-                left: auto !important;
-                right: 0 !important;
-                // sass-lint:enable-all
                 margin-top: $app-spacer-2;
+                min-width: 100%;
 
-                .toggle-layout-view {
-                    display: none;
+                .dropdown-item {
+                    padding: ($list-group-item-padding-y * 0.8) $list-group-item-padding-x;
                 }
             }
         }
@@ -117,13 +117,25 @@ $webview-border: darken($app-color-bg-dark, 10%);
         flex: 1;
     }
 
+    .compact-layout {
+        .list-group.accounts-list {
+            .list-group-item-action {
+                border-radius: $list-group-border-radius;
+                margin-bottom: $app-spacer-2 * 1.15;
+                padding: $btn-padding-y $btn-padding-x;
+
+                &:not(:last-child) {
+                    margin-right: $app-spacer-2;
+                }
+            }
+        }
+    }
+
     @media (min-width: #{map-get($grid-breakpoints, lg)}) {
-        .accounts-block {
-            .controls {
-                .dropdown-menu {
-                    .toggle-layout-view {
-                        display: block;
-                    }
+        .controls {
+            .dropdown-menu {
+                .toggle-layout-view {
+                    display: block;
                 }
             }
         }
@@ -142,56 +154,18 @@ $webview-border: darken($app-color-bg-dark, 10%);
                 display: none;
             }
 
-            .no-accounts-block {
-                margin-left: -$accounts-column-width;
+            .controls {
+                margin-right: 0;
+                margin-bottom: $app-spacer-3;
             }
 
             .accounts-block {
                 position: relative;
+                flex-flow: column;
                 flex-grow: 0;
-                width: $accounts-column-width;
 
                 .list-group.accounts-list {
-                    display: flex;
-                    margin-bottom: 50px;
-                }
-
-                .btn-group.accounts-list {
-                    display: none;
-                }
-
-                .controls {
-                    position: absolute;
-                    bottom: 0;
-                    right: 0;
-                    left: 0;
-                    margin: $app-spacer-2;
-
-                    .btn-group {
-                        width: 100%;
-
-                        & > .btn-light {
-                            &:nth-of-type(2) {
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-                            }
-                        }
-                    }
-
-                    .dropdown-toggle {
-                        &::after {
-                            transform: rotate(180deg);
-                        }
-                    }
-
-                    .dropdown-menu {
-                        bottom: 100% !important; // sass-lint:disable-line no-important
-                        top: auto !important; // sass-lint:disable-line no-important
-                        width: 100%;
-                        margin-top: 0;
-                        margin-bottom: $app-spacer-1;
-                    }
+                    flex-direction: column;
                 }
             }
 

diff --git a/src/web/src/app/app.module.constants.ts b/src/web/src/app/app.module.constants.ts
@@ -1,11 +1,11 @@
-import {AccordionModule} from "ngx-bootstrap/accordion";
 import {APP_BASE_HREF} from "@angular/common";
 import {BrowserModule} from "@angular/platform-browser";
-import {BsDropdownModule} from "ngx-bootstrap/dropdown";
 import {EffectsModule} from "@ngrx/effects";
-import {PopoverModule} from "ngx-bootstrap/popover";
 import {StoreModule} from "@ngrx/store";
 import {StoreRouterConnectingModule} from "@ngrx/router-store";
+import {AccordionModule} from "ngx-bootstrap/accordion";
+import {BsDropdownModule} from "ngx-bootstrap/dropdown";
+import {PopoverModule} from "ngx-bootstrap/popover";
 
 import * as AccountsReducer from "./store/reducers/accounts";
 import * as ErrorsReducer from "./store/reducers/errors";

diff --git a/src/web/src/vendor/variables.scss b/src/web/src/vendor/variables.scss
@@ -3,7 +3,6 @@
 
 $primary: #1ba489;
 $modal-header-padding: 0.7rem;
-$list-group-item-padding-y: 0.75rem * 0.9;
 $list-group-item-padding-x: 1.25rem * 0.65;
 
 @import "~bootstrap/scss/variables";