Geir/startdesk experiments layout

src/app/app.component.html

@@ -72,6 +72,11 @@
         <span class="foldersidebarcount" style="margin-right: 24px"> {{ draftDeskService.draftModels.length }} </span>
       </mat-list-item>
 
+      <mat-list-item (click)="overview()" id="overviewButton" [ngClass]="{'selectedFolder' : overviewSelected}">
+        <mat-icon mat-list-icon svgIcon="blur" class="folderIconStandard"></mat-icon>
+        <p mat-line class="folderName">Overview</p>
+      </mat-list-item>
+
       <mat-divider></mat-divider>
     </mat-nav-list>
 

src/app/app.component.ts

@@ -98,6 +98,7 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
   selectedFolder = 'Inbox';
   composeSelected: boolean;
   draftsSelected: boolean;
+  overviewSelected: boolean;
 
   timeOfDay: string;
 
@@ -381,6 +382,7 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
     ).subscribe((event: NavigationEnd) => {
       this.composeSelected = this.router.url === '/compose?new=true';
       this.draftsSelected = this.router.url === '/compose';
+      this.overviewSelected = this.router.url === '/overview';
     });
 
     // Download visible messages in the background
@@ -494,6 +496,15 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
     );
   }
 
+  public overview() {
+    this.router.navigate(['/overview']);
+    setTimeout(() => {
+        if (this.mobileQuery.matches && this.sidemenu.opened) {
+          this.sidemenu.close();
+        }
+      }, 0);
+  }
+
   renameFolder(folder: RenameFolderEvent) {
     this.rmmapi.renameFolder(
       folder.id, folder.name

src/app/app.module.ts

@@ -81,6 +81,7 @@ import { HotkeyModule } from 'angular2-hotkeys';
 import { RMM } from './rmm';
 import { PopularRecipientsComponent } from './popular-recipients/popular-recipients.component';
 import { OverviewComponent } from './start/overview.component';
+import { StartDeskComponent } from './start/startdesk.component';
 import { SearchService } from './xapian/searchservice';
 import { SavedSearchesComponent } from './saved-searches/saved-searches.component';
 import { SavedSearchesService } from './saved-searches/saved-searches.service';
@@ -107,6 +108,10 @@ const routes: Routes = [
             path: 'compose',
             component: DraftDeskComponent
           },
+          {
+            path: 'overview',
+            component: StartDeskComponent
+          },
           {
             path: 'welcome',
             component: WelcomeDeskComponent

src/app/start/startdesk.component.html

@@ -1,3 +1,4 @@
+<!--
 <div id="startdesk">
   <div id="heading">
     <div id="title">
@@ -10,23 +11,33 @@ <h1>Runbox Dash Desk</h1>
       <mat-icon id="panelControlLarge">check_box_outline_blank</mat-icon>
     </div>
   </div>
+-->
 
   <div id="dashdeskOverviewContainer">
     <mat-card class="mat-card dashdeskOverview">
-      <h3><mat-icon>blur_on</mat-icon>Communication overview</h3>
-      <h4>Activity highlights</h4>
-      <div id="hilightsSettings">
-        <mat-form-field>
-          <mat-label> Time span </mat-label>
-          <mat-select [(ngModel)]="timeSpan" (selectionChange)="changeTimeSpan($event)">
-            <mat-option [value]="TimeSpan.TODAY"> Today </mat-option>
-            <mat-option [value]="TimeSpan.YESTERDAY"> Yesterday </mat-option>
-            <mat-option [value]="TimeSpan.LAST3"> Last 3 days </mat-option>
-            <mat-option [value]="TimeSpan.LAST7"> Last 7 days </mat-option>
-            <mat-option [value]="TimeSpan.CUSTOM"> Custom (NYI) </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-checkbox [checked]="unreadOnly" (change)="toggleUnreadOnly($event)"> Unread only </mat-checkbox>
+      <h3><mat-icon>blur_on</mat-icon> Communication overview</h3>
+      <div id="hilightsHeader">
+	<h4 id="hilightsHeading">Activity highlights</h4>
+	<div id="hilightsSettings">
+          <mat-form-field>
+            <mat-select [(ngModel)]="timeSpan" (selectionChange)="changeTimeSpan($event)">
+              <mat-option [value]="TimeSpan.TODAY"> Today </mat-option>
+              <mat-option [value]="TimeSpan.YESTERDAY"> Yesterday </mat-option>
+              <mat-option [value]="TimeSpan.LAST3"> Last 3 days </mat-option>
+              <mat-option [value]="TimeSpan.LAST7"> Last 7 days </mat-option>
+              <mat-option [value]="TimeSpan.CUSTOM"> Custom (NYI) </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field>
+            <mat-select [(ngModel)]="folder" (selectionChange)="changeFolder($event)">
+              <mat-option [value]=""> Current folder </mat-option>
+              <mat-option [value]=""> All folders </mat-option>
+            </mat-select>
+          </mat-form-field>
+	</div>
+	<div id="unreadOnly">
+          <mat-checkbox [checked]="unreadOnly" (change)="toggleUnreadOnly($event)"> Unread only </mat-checkbox>
+	</div>
       </div>
       <mat-tab-group>
         <mat-tab label="All emails ({{ totalEmailCount }})">
@@ -42,7 +53,7 @@ <h4>Activity highlights</h4>
           <mat-card class="mat-card dashdeskOverview" *ngFor="let sender of regularOverview.concat(mailingListOverview)">
             <div class="contact">
               <mat-icon> {{ sender.icon }}</mat-icon> <h4> {{ sender.name }} </h4>
-              <div class="messages">{{ sender.emails.length }} messages today</div>
+              <div class="messages">{{ sender.emails.length }} messages</div>
             </div>
             <div class="subject">
               <ul>
@@ -93,7 +104,8 @@ <h4>Activity highlights</h4>
     </mat-card>
   </div>
 
-  <!-- <div id="dashdeskSections">
+  <!--
+  <div id="dashdeskSections">
     <mat-card class="mat-card">
       <h3><mat-icon>email</mat-icon>Email highlights</h3>
       <div>New messages: <u>Inbox</u>, <u>Friends</u>, <u>Enemies</u> <mat-icon class="start_chart" style="color: red">show_chart</mat-icon></div>
@@ -122,4 +134,3 @@ <h3><mat-icon>assignment</mat-icon>Task highlights</h3>
       <div>Upcoming: <u>Destroy One Ring</u> <mat-icon class="start_chart" style="margin-left: 30px; -webkit-transform: scaleX(-1); transform: scaleX(-1); color: red">insert_chart</mat-icon></div>
     </mat-card>
   </div> -->
-</div>

src/app/start/startdesk.component.scss

@@ -4,116 +4,136 @@ $rmm-default-highlight:  mat-palette($mat-light-blue, 50, 25, 75);
 #startdesk {
     position: relative;
     margin: 0px 20px 100px 30px;
-    
+
     #heading {
-	display: flex;
+        display: flex;
     }
     #title {
+        display: flex;
+        flex-grow: 1;
+    }
+    #panelControls {
+        display: flex;
+        flex-grow: 1;
+        justify-content: flex-end;
+        align-items: center;
+    }
+    h3 {
+        margin: 0;
+        padding: 0;
+    }
+}
+
+.dashdeskOverview mat-card {
+    //float: left;
+    //margin: 0 20px 20px 0;
+    //width: 90%;
+    padding: 20px;
+    margin: 10px 0;
+}
+#panelControls mat-icon {
+    vertical-align: bottom;
+    line-height: 24px;
+}
+#panelControlSmall {
+    font-size: 16px;
+    width: 16px;
+    height: auto;
+}
+#panelControlMedium {
+    font-size: 24px;
+    width: 24px;
+    height: auto;
+}
+#panelControlLarge {
+    font-size: 40px;
+    width: 40px;
+    height: auto;
+}
+#dashdeskOverviewContainer {
+    display: block;
+//    width: 100%;
+//    height: 100%;
+//
+//    .dashdeskOverview {
+//        width: 90%;
+//    }
+    .dashdeskOverview mat-card {
+        display: flex;
+    }
+    .noMessagesCard {
+	display: flex;
+	justify-content: center;
+    }
+
+    #hilightsHeading {
+	display: flex;
+        margin: 10px 0;
+    }
+    #hilightsHeader {
+        margin: 10px 0;
 	display: flex;
 	flex-grow: 1;
+	justify-content: space-around;
+	align-items: center;
     }
-    #panelControls {
+    #hilightsSettings {
 	display: flex;
 	flex-grow: 1;
-	justify-content: flex-end;
+	justify-content: space-around;
 	align-items: center;
     }
-    h3 {
-	margin: 0;
-	padding: 0;
+    #unreadOnly {
+	display: flex;
+	flex-grow: 1;
+	justify-content: space-around;
+	align-items: center;
+    }
+    .contact {
+        width: 33%;
+        font-weight: bold;
+    }
+    .contact mat-icon {
+        margin-right: 10px;
+        font-size: 40px;
+        width: 40px;
+        height: auto;
+    }
+    .contact h4 {
+        display: inline;
+        margin: 10px 0;
+    }
+    .messages {
+        margin: 0 5px;
+    }
+    .subject {
+        width: 66%;
+        text-decoration: underline;
     }
+    .subject ul {
+        margin: 0;
+    }
+    .subject li {
+        list-style-type: square;
+    }
+}
+#dashdeskSections {
     mat-card {
-	float: left;
-	margin: 0 20px 20px 0;
-	width: 90%;
-	padding: 20px;
-    }
-    #panelControls mat-icon {
-	vertical-align: bottom;
-	line-height: 24px;
-    }
-    #panelControlSmall {
-	font-size: 16px;
-	width: 16px;
-	height: auto;
-    }
-    #panelControlMedium {
-	font-size: 24px;
-	width: 24px;
-	height: auto;
-    }
-    #panelControlLarge {
-	font-size: 40px;
-	width: 40px;
-	height: auto;
-    }
-    #dashdeskOverviewContainer {
-	display: block;
-	width: 100%;
-	height: 100%;
-
-	.dashdeskOverview {
-	    width: 90%;
-	}
-	.dashdeskOverview mat-card {
-	    display: flex;
-	}
-	.contact {
-	    width: 33%;
-	    font-weight: bold;
-	}
-	.contact mat-icon {
-	    margin-right: 10px;
-	    font-size: 40px;
-	    width: 40px;
-	    height: auto;
-	}
-	.contact h4 {
-	    display: inline;
-	    margin: 10px 0;
-	}
-	.messages {
-	    margin: 0 5px;
-	}
-	.subject {
-	    width: 66%;
-	    text-decoration: underline;
-	}
-	.subject ul {
-	    margin: 0;
-	}
-	.subject li {
-	    list-style-type: square;
-	}
-    }
-    #dashdeskSections {
-	mat-card {
-	    width: 43%;
-	    height: 250px;
-	    padding: 20px;
-	}
-	mat-card div {
-	    margin: 10px 0;
-	}
-	mat-card h3 mat-icon {
-	    font-size: 1.4em;
-	    height: 1em;
-	    margin-right: 20px;
-	}
-	.start_chart {
-	    font-size: 3em;
-	    height: auto;
-	}
+        width: 43%;
+        height: 250px;
+        padding: 20px;
     }
-
-    .noMessagesCard {
-        display: flex;
-        justify-content: center;
+    mat-card div {
+        margin: 10px 0;
     }
-
-    #hilightsSettings {
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
+    mat-card h3 mat-icon {
+        font-size: 1.4em;
+        height: 1em;
+        margin-right: 20px;
+    }
+    .start_chart {
+        font-size: 3em;
+        height: auto;
     }
 }
+

src/app/start/startdesk.component.ts

@@ -86,8 +86,13 @@ export class StartDeskComponent implements OnInit {
         const dateRange = this.dateRange();
         const messages = this.searchService.getMessagesInTimeRange(
             dateRange[0], dateRange[1]
-        ).map(id => this.searchService.getDocData(id)
-        ).filter(msg => !this.unreadOnly || !msg.seen);
+        ).map(
+            id => this.searchService.getDocData(id)
+        ).filter(
+            msg => !this.unreadOnly || !msg.seen
+        ).filter(
+            msg => msg.folder !== 'Sent'
+        );
 
         // Ideally, we'll obtain a list of mailing lists from List-ID across the entirety of search index
         // We don't have that luxury currently, so this hack will have to do