small tweaks and ng-* cleanups

+ Fixed: todo item action buttons shouldn't trigger "view todo" action
+ Fixed: contacts selected bar mobile issues

src/app/core/components/theme-options/theme-options.component.scss

@@ -32,7 +32,7 @@
 
         @include media-breakpoint-down('xs') {
             top: -120px;
-            max-height: calc(100vh - 60px);
+            max-height: calc(100vh - 100px);
             width: 90vw;
         }
 

src/app/main/content/apps/calendar/calendar.component.scss

@@ -26,8 +26,8 @@
     }
 
     .cal-open-day-events {
-        background: whitesmoke;
+        background: #455A64;
-        box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.13);
+        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 {

src/app/main/content/apps/calendar/event-form/event-form.component.html

@@ -66,7 +66,7 @@
                 </md-form-field>
 
                 <md-input-container class="no-errors-spacer" fxFlex md-no-float>
-                    <input mdInput ng-model="calendarEvent.startTime" placeholder="Start Time">
+                    <input mdInput placeholder="Start Time">
                 </md-input-container>
 
             </div>
@@ -80,7 +80,7 @@
                 </md-form-field>
 
                 <md-input-container class="no-errors-spacer" fxFlex md-no-float>
-                    <input mdInput ng-model="calendarEvent.endTime" placeholder="End Time">
+                    <input mdInput placeholder="End Time">
                 </md-input-container>
 
             </div>

src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html

@@ -151,7 +151,6 @@
             </div>
 
             <button md-button class="contact"
-                    ng-show="chatSearch"
                     *ngFor="let contact of contacts| filter: searchText"
                     (click)="getChat(contact.id)"
                     [@animate]="{value:'*',params:{y:'100%'}}">

src/app/main/content/apps/contacts/contacts.component.html

@@ -43,7 +43,7 @@
 
         <!-- SIDENAV -->
         <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
-                    fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-md">
+                    fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-sm">
 
             <fuse-contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></fuse-contacts-main-sidenav>
 

src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html

@@ -1,13 +1,13 @@
 <div fxFlex fxLayout="row" fxLayoutAlign="start center" class="p-24">
 
-    <div class="close-button-wrapper" fxFlex="220px" (click)="deselectAll()">
+    <div class="close-button-wrapper" fxFlex="0 1 auto" fxFlex.gt-sm="220px" (click)="deselectAll()">
         <button class="p-8" md-button fxLayout="row" fxLayoutAlign="start center">
             <md-icon class="mr-8">arrow_back</md-icon>
             <span class="text-uppercase">Back</span>
         </button>
     </div>
 
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+    <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutAlign.gt-sm="space-between center">
 
         <div>
             <span class="selected-contacts-count">

src/app/main/content/apps/contacts/sidenavs/main/main.component.scss

@@ -11,7 +11,7 @@
         flex-direction: column;
         padding: 0;
 
-        @include media-breakpoint(gt-md) {
+        @include media-breakpoint(gt-sm) {
             padding: 24px 4px 24px 24px;
         }
 
@@ -21,7 +21,7 @@
             flex: 0 1 auto;
             padding: 0;
 
-            @include media-breakpoint(gt-md) {
+            @include media-breakpoint(gt-sm) {
                 @include mat-elevation(4);
             }
 

src/app/main/content/apps/dashboards/project/project.component.html

@@ -79,7 +79,8 @@
 
                                 <!-- Back -->
                                 <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
+                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                            aria-label="Flip widget">
                                         <md-icon class="s-16">close</md-icon>
                                     </button>
 
@@ -121,7 +122,8 @@
 
                                 <!-- Back -->
                                 <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
+                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                            aria-label="Flip widget">
                                         <md-icon class="s-16">close</md-icon>
                                     </button>
 
@@ -163,7 +165,8 @@
 
                                 <!-- Back -->
                                 <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
+                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                            aria-label="Flip widget">
                                         <md-icon class="s-16">close</md-icon>
                                     </button>
 
@@ -204,7 +207,8 @@
 
                                 <!-- Back -->
                                 <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
-                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
+                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                            aria-label="Flip widget">
                                         <md-icon class="s-16">close</md-icon>
                                     </button>
 

src/app/main/content/apps/mail/dialogs/compose/compose.component.html

@@ -21,7 +21,7 @@
                        type="email">
             </md-input-container>
 
-            <md-input-container ng-class="{'hidden-cc': vm.hiddenCC, 'hidden-bcc': vm.hiddenBCC}">
+            <md-input-container>
                 <input mdInput name="to"
                        placeholder="To"
                        formControlName="to"

src/app/main/content/apps/mail/mail-details/mail-details.component.html

@@ -85,7 +85,7 @@
             </div>
 
             <button md-button [mdMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
-                    ng-click="$mdOpenMenu($event)">
+                    (click)="$event.stopPropagation()">
                 <md-icon>more_vert</md-icon>
             </button>
 

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html

@@ -386,7 +386,6 @@
                     <div class="section-content">
                         <form name="cardCommentForm"
                               #newCommentForm="ngForm" (submit)="addNewComment(newCommentForm)"
-                              ng-submit="vm.addNewComment(vm.newCommentText); vm.newCommentText =''"
                               class="comment new-comment" fxLayout="column" fxLayoutAlign="start" no-validate>
 
                             <div fxLayout="row">

src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html

@@ -1,18 +1,16 @@
 <div fxLayout="row" fxLayoutAlign="start center">
 
-    <md-icon class="handle mr-16" ngxDragHandle (click)="$event.stopPropagation()" fxFlex="0 1 auto" fxHide.xs>
+    <md-icon class="handle mr-16" ngxDragHandle fxFlex="0 1 auto" fxHide.xs>
         drag_handle
     </md-icon>
 
     <md-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()"
-                 (click)="$event.stopPropagation()"
+                 class="mr-16" fxFlex="0 1 auto">
-                 class="mr-16"
-                 fxFlex="0 1 auto">
     </md-checkbox>
 
     <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
 
-        <div class="info" fxFlex FlexLayout="column">
+        <div class="info" fxFlex fxFlexLayout="column">
 
             <div class="title">
                 {{todo.title}}
@@ -25,9 +23,7 @@
             <div class="tags" fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap>
 
                 <div class="tag" fxLayout="row" fxLayoutAlign="start center" *ngFor="let tagId of todo.tags">
-
                     <div class="tag-color" [ngStyle]="{'background-color': tags | getById:tagId:'color'}"></div>
-
                     <div class="tag-label">{{tags | getById:tagId:'title'}}</div>
                 </div>
 
@@ -37,20 +33,20 @@
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
 
-            <button md-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important"
+            <button md-button class="mat-icon-button" (click)="toggleImportant($event)"
-                    fxHide.xs>
+                    aria-label="Toggle important" fxHide.xs>
                 <md-icon *ngIf="todo.important">error</md-icon>
                 <md-icon *ngIf="!todo.important">error_outline</md-icon>
             </button>
 
-            <button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star"
+            <button md-button class="mat-icon-button" (click)="toggleStar($event)"
-                    fxHide.xs>
+                    aria-label="Toggle star" fxHide.xs>
                 <md-icon *ngIf="todo.starred">star</md-icon>
                 <md-icon *ngIf="!todo.starred">star_outline</md-icon>
             </button>
 
             <button md-button [mdMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
-                    ng-click="$mdOpenMenu($event)" fxHide.xs>
+                    (click)="$event.stopPropagation();" fxHide.xs>
                 <md-icon>more_vert</md-icon>
             </button>
 

src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts

@@ -78,40 +78,34 @@ export class FuseTodoListItemComponent implements OnInit, OnDestroy
 
     /**
      * Toggle star
-     * @param event
      */
     toggleStar(event)
     {
         event.stopPropagation();
 
         this.todo.toggleStar();
-
         this.todoService.updateTodo(this.todo);
     }
 
     /**
      * Toggle Important
-     * @param event
      */
     toggleImportant(event)
     {
         event.stopPropagation();
 
         this.todo.toggleImportant();
-
         this.todoService.updateTodo(this.todo);
     }
 
     /**
      * Toggle Completed
-     * @param event
      */
     toggleCompleted(event)
     {
         event.stopPropagation();
 
         this.todo.toggleCompleted();
-
         this.todoService.updateTodo(this.todo);
     }
 }

src/app/main/content/apps/todo/todo-list/todo-list.component.scss

@@ -5,4 +5,5 @@
     overflow-y: auto;
     position: relative;
     padding: 0;
+    border-right: 1px solid rgba(0, 0, 0, .12);
 }

src/app/main/content/apps/todo/todo.component.scss

@@ -39,6 +39,10 @@
 
             @include media-breakpoint-down(lg) {
 
+                fuse-todo-list {
+                    border-right: 0;
+                }
+
                 fuse-todo-list,
                 fuse-todo-details {
                     flex: 1 0 100%;

src/app/main/content/apps/todo/todo.service.ts

@@ -381,8 +381,6 @@ export class TodoService implements Resolve<any>
 
                     this.getTodos().then(todos => {
 
-                        this.setCurrentTodo(todo.id);
-
                         resolve(todos);
 
                     }, reject);

src/app/main/content/components/widget/widget.component.html

@@ -45,7 +45,7 @@
                     <!-- Back -->
                     <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
                         <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
-                                ng-click="flipWidget()" aria-label="Flip widget">
+                                aria-label="Flip widget">
                             <md-icon class="s-16">close</md-icon>
                         </button>
 
@@ -86,7 +86,7 @@
                             <!-- Back -->
                             <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
                                 <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
-                                        ng-click="flipWidget()" aria-label="Flip widget">
+                                        aria-label="Flip widget">
                                     <md-icon class="s-16">close</md-icon>
                                 </button>