small tweaks and ng-* cleanups

+ Fixed: todo item action buttons shouldn't trigger "view todo" action
+ Fixed: contacts selected bar mobile issues
This commit is contained in:
Sercan Yemen 2017-09-22 15:02:07 +03:00
parent cb2b544526
commit e6ee5d017e
17 changed files with 37 additions and 42 deletions

View File

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

View File

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

View File

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

View File

@ -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%'}}">

View File

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

View File

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

View File

@ -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);
}

View File

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

View File

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

View File

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

View File

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

View File

@ -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"
fxHide.xs>
<button md-button class="mat-icon-button" (click)="toggleImportant($event)"
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"
fxHide.xs>
<button md-button class="mat-icon-button" (click)="toggleStar($event)"
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>

View File

@ -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);
}
}

View File

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

View File

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

View File

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

View File

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