mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
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:
parent
cb2b544526
commit
e6ee5d017e
|
@ -32,7 +32,7 @@
|
|||
|
||||
@include media-breakpoint-down('xs') {
|
||||
top: -120px;
|
||||
max-height: calc(100vh - 60px);
|
||||
max-height: calc(100vh - 100px);
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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%'}}">
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,4 +5,5 @@
|
|||
overflow-y: auto;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
border-right: 1px solid rgba(0, 0, 0, .12);
|
||||
}
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -381,8 +381,6 @@ export class TodoService implements Resolve<any>
|
|||
|
||||
this.getTodos().then(todos => {
|
||||
|
||||
this.setCurrentTodo(todo.id);
|
||||
|
||||
resolve(todos);
|
||||
|
||||
}, reject);
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user