From 678dde8c0e0c0f3226634eb87afc3ab90b64edf7 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Fri, 22 Sep 2017 11:32:31 +0300
Subject: [PATCH] calendar, mail and todo tweaks

---
 .../apps/calendar/calendar.component.scss     |   8 +-
 .../mail-list-item.component.html             |  97 +++++++------
 .../mail-list-item.component.scss             | 133 +++++++++---------
 .../content/apps/mail/mail.component.html     |   2 +-
 .../content/apps/mail/mail.component.scss     |  12 ++
 .../todo/todo-list/todo-list.component.scss   |   6 -
 .../content/apps/todo/todo.component.html     |   4 +-
 .../content/apps/todo/todo.component.scss     |   9 ++
 8 files changed, 154 insertions(+), 117 deletions(-)

diff --git a/src/app/main/content/apps/calendar/calendar.component.scss b/src/app/main/content/apps/calendar/calendar.component.scss
index 626b6b85..a525f698 100644
--- a/src/app/main/content/apps/calendar/calendar.component.scss
+++ b/src/app/main/content/apps/calendar/calendar.component.scss
@@ -26,8 +26,8 @@
     }
 
     .cal-open-day-events {
-        background: whitesmoke;
-        box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.13);
+        background: #455A64;
+        box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, 0.54);
         padding: 0;
         display: flex;
         flex-direction: column;
@@ -44,11 +44,11 @@
             transition: box-shadow 300ms ease;
 
             &:first-of-type {
-                margin-top: 24px;
+                margin-top: 16px;
             }
 
             &:last-of-type {
-                margin-bottom: 24px;
+                margin-bottom: 16px;
             }
 
             &:hover {
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
index 59a8858d..1f5b486e 100644
--- a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
+++ b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
@@ -1,52 +1,67 @@
 <div fxLayout="row" fxLayoutAlign="start center">
 
-    <md-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()" (click)="$event.stopPropagation();"></md-checkbox>
+    <md-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()"
+                 (click)="$event.stopPropagation();"></md-checkbox>
 
     <div class="info" fxFlex FlexLayout="column">
 
-        <div class="name" fxLayout="row" fxLayoutAlign="start center">
+        <div class="row-1" fxLayout="row" fxLayoutAlign="start center">
 
-            <img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/>
-
-            <div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
-
-            <span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>
-
-            <md-icon *ngIf="mail.hasAttachments">attachment</md-icon>
-        </div>
-
-        <div class="subject text-truncate">
-            {{mail.subject}}
-        </div>
-
-        <div class="message text-truncate" *ngIf="mail?.message">
-
-            {{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
-        </div>
-
-        <div class="labels" fxLayout="row" fxLayoutWrap>
-            <div class="label" *ngFor="let labelId of mail.labels"
-                 fxLayout="row" fxLayoutAlign="start center">
-                <div class="label-color" [ngStyle]="{'background-color': labels | getById:labelId:'color'}"></div>
-                <div class="label-title">{{labels | getById:labelId:'title'}}</div>
+            <div class="name" fxLayout="row" fxLayoutAlign="start center" fxFlex>
+                <img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/>
+                <div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
+                <span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>
+                <md-icon *ngIf="mail.hasAttachments">attachment</md-icon>
             </div>
+
+            <div fxLayout="row" fxLayoutAlign="start center">
+
+                <div class="time">{{mail.time}}</div>
+
+                <!--<div class="actions" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-sm>
+
+                    <button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
+                        <md-icon *ngIf="mail.starred">star</md-icon>
+                        <md-icon *ngIf="!mail.starred">star_outline</md-icon>
+                    </button>
+
+                    <button md-button class="mat-icon-button" (click)="toggleImportant($event)"
+                            aria-label="Toggle important">
+                        <md-icon *ngIf="mail.important">label</md-icon>
+                        <md-icon *ngIf="!mail.important">label_outline</md-icon>
+                    </button>
+
+                </div>-->
+
+            </div>
+
         </div>
+
+        <div class="row-2" fxLayout="row" fxLayoutAlign="start center">
+
+            <div fxLayout="column" fxLayoutAlign="start start">
+
+                <div class="subject text-truncate">
+                    {{mail.subject}}
+                </div>
+
+                <div class="message text-truncate" *ngIf="mail?.message">
+                    {{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
+                </div>
+
+                <div class="labels" fxLayout="row" fxLayoutWrap fxHide fxShow.gt-sm>
+                    <div class="label" *ngFor="let labelId of mail.labels"
+                         fxLayout="row" fxLayoutAlign="start center">
+                        <div class="label-color"
+                             [ngStyle]="{'background-color': labels | getById:labelId:'color'}"></div>
+                        <div class="label-title">{{labels | getById:labelId:'title'}}</div>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+
     </div>
 
-    <div fxLayout="column" fxLayoutAlign="space-between end">
-
-        <div class="time">{{mail.time}}</div>
-
-        <div class="actions" fxLayout="row" fxLayoutAlign="start center">
-            <button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
-                <md-icon *ngIf="mail.starred">star</md-icon>
-                <md-icon *ngIf="!mail.starred">star_outline</md-icon>
-            </button>
-
-            <button md-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
-                <md-icon *ngIf="mail.important">label</md-icon>
-                <md-icon *ngIf="!mail.important">label_outline</md-icon>
-            </button>
-        </div>
-    </div>
 </div>
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
index 0e58acde..45676aff 100644
--- a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
+++ b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
@@ -12,16 +12,19 @@
 
         .info {
 
-            .name,
-            .subject {
+            .name {
                 font-weight: 700;
             }
 
-            .message {
-            }
+            .row-2 {
 
-            .labels {
-                background: #FFFFFF;
+                .subject {
+                    font-weight: 700;
+                }
+
+                .labels {
+                    background: #FFFFFF;
+                }
             }
         }
     }
@@ -31,12 +34,11 @@
 
         .info {
 
-            .message {
+            .row-2 {
 
-            }
-
-            .labels {
-                background: #FFF8E1;
+                .labels {
+                    background: #FFF8E1;
+                }
             }
         }
     }
@@ -46,10 +48,11 @@
 
         .info {
 
-            .message {
-            }
-            .labels {
-                background: #E3F2FD;
+            .row-2 {
+
+                .labels {
+                    background: #E3F2FD;
+                }
             }
         }
     }
@@ -57,68 +60,70 @@
     .info {
         overflow: hidden;
         width: 0;
-        margin: 0 16px;
+        margin-left: 16px;
         position: relative;
 
-        .name {
-            font-size: 15px;
-            font-weight: 500;
-            padding-bottom: 8px;
+        .row-1 {
+            margin-bottom: 8px;
 
-            .avatar {
-                min-width: 32px;
-                width: 32px;
-                height: 32px;
-                line-height: 32px;
-                background-color: mat-color($accent);
+            .name {
+                font-size: 15px;
+                font-weight: 500;
+
+                .avatar {
+                    min-width: 32px;
+                    width: 32px;
+                    height: 32px;
+                    line-height: 32px;
+                    background-color: mat-color($accent);
+                }
+            }
+
+            .actions {
+                margin-left: 4px;
+
+                .mat-icon-button {
+                    width: 32px;
+                    height: 32px;
+                    line-height: 1;
+                }
             }
         }
 
-        .subject {
+        .row-2 {
 
-        }
+            .subject,
+            .message {
+                width: 100%;
+            }
 
-        .message {
-            position: relative;
-            color: rgba(0, 0, 0, 0.54);
-        }
+            .message {
+                position: relative;
+                color: rgba(0, 0, 0, 0.54);
+            }
 
-        .labels {
-            position: absolute;
-            background: #FAFAFA;
-            bottom: 0;
-            right: 0;
-            padding-left: 6px;
+            .labels {
+                position: absolute;
+                background: #FFFFFF;
+                bottom: 0;
+                right: 0;
+                padding-left: 6px;
 
-            .label {
-                font-size: 11px;
-                border-radius: 2px;
-                margin: 0 4px 0 0;
-                padding: 3px 8px;
-                background-color: rgba(0, 0, 0, 0.08);
+                .label {
+                    font-size: 11px;
+                    border-radius: 2px;
+                    margin: 0 4px 0 0;
+                    padding: 3px 8px;
+                    background-color: rgba(0, 0, 0, 0.08);
 
-                .label-color {
-                    width: 8px;
-                    height: 8px;
-                    margin-right: 8px;
-                    border-radius: 50%;
+                    .label-color {
+                        width: 8px;
+                        height: 8px;
+                        margin-right: 8px;
+                        border-radius: 50%;
+                    }
                 }
             }
         }
     }
-
-    .time {
-        margin: 0 8px 6px 8px;
-    }
-
-    .actions {
-
-        .md-icon-button {
-            margin: 0;
-            padding: 0;
-            width: 32px;
-            height: 32px;
-        }
-    }
-
 }
diff --git a/src/app/main/content/apps/mail/mail.component.html b/src/app/main/content/apps/mail/mail.component.html
index 1f516acd..fd95af52 100644
--- a/src/app/main/content/apps/mail/mail.component.html
+++ b/src/app/main/content/apps/mail/mail.component.html
@@ -42,7 +42,7 @@
                 <!-- CONTENT TOOLBAR -->
                 <div class="toolbar px-24 py-8">
 
-                    <div fxFlex="row" fxLayoutAlign="start center">
+                    <div class="mail-selection" fxFlex="row" fxLayoutAlign="start center">
                         <md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
                                      [indeterminate]="isIndeterminate"></md-checkbox>
 
diff --git a/src/app/main/content/apps/mail/mail.component.scss b/src/app/main/content/apps/mail/mail.component.scss
index b29cdab3..9a355577 100644
--- a/src/app/main/content/apps/mail/mail.component.scss
+++ b/src/app/main/content/apps/mail/mail.component.scss
@@ -40,6 +40,10 @@
 
             @include media-breakpoint(xs) {
 
+                fuse-mail-list {
+                    border-right: none;
+                }
+
                 fuse-mail-list,
                 fuse-mail-details {
                     flex: 1 0 100%;
@@ -51,6 +55,14 @@
 
                 &.current-mail-selected {
 
+                    .toolbar {
+                        padding-left: 16px !important;
+
+                        .mail-selection {
+                            display: none !important;
+                        }
+                    }
+
                     .content {
 
                         fuse-mail-list {
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list.component.scss b/src/app/main/content/apps/todo/todo-list/todo-list.component.scss
index 676c4aa9..8fb43255 100644
--- a/src/app/main/content/apps/todo/todo-list/todo-list.component.scss
+++ b/src/app/main/content/apps/todo/todo-list/todo-list.component.scss
@@ -5,10 +5,4 @@
     overflow-y: auto;
     position: relative;
     padding: 0;
-    border-right: 1px solid rgba(0, 0, 0, .12);
 }
-
-.todo-list {
-
-}
-
diff --git a/src/app/main/content/apps/todo/todo.component.html b/src/app/main/content/apps/todo/todo.component.html
index fd447bbc..d0526557 100644
--- a/src/app/main/content/apps/todo/todo.component.html
+++ b/src/app/main/content/apps/todo/todo.component.html
@@ -41,7 +41,8 @@
 
                 <!-- CONTENT TOOLBAR -->
                 <div class="toolbar px-24 py-8">
-                    <div fxFlex="row" fxLayoutAlign="start center">
+
+                    <div class="todo-selection" fxFlex="row" fxLayoutAlign="start center">
                         <md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedTodos"
                                      [indeterminate]="isIndeterminate"></md-checkbox>
 
@@ -76,6 +77,7 @@
                             <md-icon>arrow_back</md-icon>
                         </button>
                     </div>
+
                 </div>
                 <!-- / CONTENT TOOLBAR -->
 
diff --git a/src/app/main/content/apps/todo/todo.component.scss b/src/app/main/content/apps/todo/todo.component.scss
index 219ab321..903a75e5 100644
--- a/src/app/main/content/apps/todo/todo.component.scss
+++ b/src/app/main/content/apps/todo/todo.component.scss
@@ -36,6 +36,7 @@
         }
 
         .content-card {
+
             @include media-breakpoint-down(lg) {
 
                 fuse-todo-list,
@@ -49,6 +50,14 @@
 
                 &.current-todo-selected {
 
+                    .toolbar {
+                        padding-left: 16px !important;
+
+                        .todo-selection {
+                            display: none !important;
+                        }
+                    }
+
                     .content {
 
                         fuse-todo-list {