purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-12-07 21:06:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Angular 5.0.1 & Angular Material 5.0.0-rc0 compatibility (wip)

Browse Source
This commit is contained in:
Sercan Yemen
2017-11-12 22:36:14 +03:00
parent 06679343a4
commit 7f357306eb
18 changed files with 148 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/core/components/material-color-picker/material-color-picker.component.html
View File

@@ -2,7 +2,7 @@
type="button"
class="mat-elevation-z1"
[matMenuTriggerFor]="colorMenu"
(onMenuOpen)="onMenuOpen()"
(menuOpened)="onMenuOpen()"
[ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
<mat-icon>palette</mat-icon>
</button>

2
src/app/core/components/shortcuts/shortcuts.component.html
View File

@@ -26,7 +26,7 @@
</div>
<button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut"
(onMenuOpen)="onMenuOpen()">
(menuOpened)="onMenuOpen()">
<mat-icon class="amber-600-fg">star</mat-icon>
</button>

4
src/app/core/components/shortcuts/shortcuts.component.ts
View File

@@ -149,7 +149,9 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
onMenuOpen()
{
this.searchInputField.nativeElement.focus();
setTimeout(() => {
this.searchInputField.nativeElement.focus();
});
}
showMobileShortcutsPanel()

5
src/app/core/scss/partials/_angular-material-fix.scss
View File

@@ -59,3 +59,8 @@ mat-sidenav-container {
width: 14px;
height: 7px;
}
// Fix: "Input underlines has wrong color opacity value"
.mat-form-field-underline {
background-color: rgba(0, 0, 0, 0.12);
}

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

@@ -4,7 +4,7 @@
<mat-toolbar>
<!-- TOOLBAR TOP -->
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<!-- USER AVATAR WRAPPER -->
<div class="avatar-wrapper">
@@ -16,7 +16,8 @@
alt="{{user.name}}"/>
<!-- / USER AVATAR -->
<mat-icon class="s-16 status" [ngClass]="user.status" [matMenuTriggerFor]="userStatusMenu"></mat-icon>
<mat-icon class="s-16 status" [ngClass]="user.status"
[matMenuTriggerFor]="userStatusMenu"></mat-icon>
<!-- USER STATUS -->
<mat-menu id="user-status-menu" #userStatusMenu="matMenu">
@@ -69,7 +70,8 @@
</button>
</mat-menu>
</div>
</div>
</mat-toolbar-row>
<!-- / TOOLBAR TOP -->
<!-- TOOLBAR BOTTOM -->

5
src/app/main/content/apps/chat/sidenavs/left/user/user.component.html
View File

@@ -5,20 +5,19 @@
<mat-toolbar>
<!-- TOOLBAR TOP -->
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<button mat-button class="mat-icon-button" (click)="changeLeftSidenavView('chats')" aria-label="back">
<mat-icon>arrow_back</mat-icon>
</button>
</div>
</mat-toolbar-row>
<!-- / TOOLBAR TOP -->
<!-- TOOLBAR BOTTOM -->
<mat-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">
<img [src]="user.avatar" class="avatar user-avatar huge" alt="{{user.name}}"/>
<div class="user-name my-8">{{user.name}}</div>
</mat-toolbar-row>

10
src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html
View File

@@ -5,7 +5,7 @@
<mat-toolbar>
<!-- TOOLBAR TOP -->
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<div>Contact Info</div>
@@ -13,7 +13,7 @@
<mat-icon>close</mat-icon>
</button>
</div>
</mat-toolbar-row>
<!-- / TOOLBAR TOP -->
<!-- TOOLBAR BOTTOM -->
@@ -37,9 +37,9 @@
<mat-card>
<mat-form-field fxFlex>
<textarea matInput placeholder="Mood" name="mood"
[value]="contact.mood" rows="3" disabled>
</textarea>
<textarea matInput placeholder="Mood" name="mood"
[value]="contact.mood" rows="3" disabled>
</textarea>
</mat-form-field>
</mat-card>

4
src/app/main/content/apps/contacts/contact-form/contact-form.component.html
View File

@@ -1,13 +1,13 @@
<div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">{{dialogTitle}}</span>
<button mat-button class="mat-icon-button"
(click)="dialogRef.close()"
aria-label="Close dialog">
<mat-icon>close</mat-icon>
</button>
</div>
</mat-toolbar-row>
<mat-toolbar-row class="toolbar-bottom py-8 py-sm-16" fxLayout="column" fxLayoutAlign="center center">
<img [src]="contact.avatar" class=" avatar contact-avatar huge"

51
src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { ContactsService } from '../contacts.service';
import { Observable } from 'rxjs/Observable';
import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component';
@@ -7,6 +7,7 @@ import { FuseConfirmDialogComponent } from '../../../../../core/components/confi
import { FormGroup } from '@angular/forms';
import { DataSource } from '@angular/cdk/collections';
import { fuseAnimations } from '../../../../../core/animations';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector : 'fuse-contacts-contact-list',
@@ -14,7 +15,7 @@ import { fuseAnimations } from '../../../../../core/animations';
styleUrls : ['./contact-list.component.scss'],
animations : fuseAnimations
})
export class FuseContactsContactListComponent implements OnInit
export class FuseContactsContactListComponent implements OnInit, OnDestroy
{
@ViewChild('dialogContent') dialogContent: TemplateRef<any>;
@@ -25,6 +26,10 @@ export class FuseContactsContactListComponent implements OnInit
selectedContacts: any[];
checkboxes: {};
onContactsChangedSubscription: Subscription;
onSelectedContactsChangedSubscription: Subscription;
onUserDataChangedSubscription: Subscription;
dialogRef: any;
confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
@@ -34,27 +39,30 @@ export class FuseContactsContactListComponent implements OnInit
public dialog: MatDialog
)
{
this.contactsService.onContactsChanged.subscribe(contacts => {
this.onContactsChangedSubscription =
this.contactsService.onContactsChanged.subscribe(contacts => {
this.contacts = contacts;
this.contacts = contacts;
this.checkboxes = {};
contacts.map(contact => {
this.checkboxes[contact.id] = false;
this.checkboxes = {};
contacts.map(contact => {
this.checkboxes[contact.id] = false;
});
});
});
this.contactsService.onSelectedContactsChanged.subscribe(selectedContacts => {
for ( const id in this.checkboxes )
{
this.checkboxes[id] = selectedContacts.includes(id);
}
this.selectedContacts = selectedContacts;
});
this.onSelectedContactsChangedSubscription =
this.contactsService.onSelectedContactsChanged.subscribe(selectedContacts => {
for ( const id in this.checkboxes )
{
this.checkboxes[id] = selectedContacts.includes(id);
}
this.selectedContacts = selectedContacts;
});
this.contactsService.onUserDataChanged.subscribe(user => {
this.user = user;
});
this.onUserDataChangedSubscription =
this.contactsService.onUserDataChanged.subscribe(user => {
this.user = user;
});
}
@@ -63,6 +71,13 @@ export class FuseContactsContactListComponent implements OnInit
this.dataSource = new FilesDataSource(this.contactsService);
}
ngOnDestroy()
{
this.onContactsChangedSubscription.unsubscribe();
this.onSelectedContactsChangedSubscription.unsubscribe();
this.onUserDataChangedSubscription.unsubscribe();
}
editContact(contact)
{
this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {

4
src/app/main/content/apps/e-commerce/product/product.component.html
View File

@@ -90,7 +90,7 @@
formControlName="categories">
<mat-chip *ngFor="let category of product.categories"
removable="true" (remove)="product.removeCategory(category)">
removable="true" (removed)="product.removeCategory(category)">
{{category}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
@@ -109,7 +109,7 @@
formControlName="tags">
<mat-chip *ngFor="let tag of product.tags"
removable="true" (remove)="product.removeTag(tag)">
removable="true" (removed)="product.removeTag(tag)">
{{tag}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>

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

@@ -71,7 +71,7 @@
<!-- CHECKLIST -->
<div class="due-date " fxFlex="0 1 auto">
<button mat-icon-button class="" [matMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="matMenuTrigger" (onMenuOpen)="onChecklistMenuOpen()">
<button mat-icon-button class="" [matMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="matMenuTrigger" (menuOpened)="onChecklistMenuOpen()">
<mat-icon>check_box</mat-icon>
</button>

4
src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
View File

@@ -20,6 +20,10 @@
.mat-form-field-flex {
align-items: center;
.mat-form-field-infix {
display: none;
}
.mat-input-element {
display: none;
}

32
src/app/main/content/apps/todo/todo-details/todo-details.component.ts
View File

@@ -48,12 +48,13 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
this.todoForm = this.createTodoForm();
this.onFormChange = this.todoForm.valueChanges
.debounceTime(500)
.distinctUntilChanged()
.subscribe(data => {
this.todoService.updateTodo(data);
});
this.onFormChange =
this.todoForm.valueChanges
.debounceTime(500)
.distinctUntilChanged()
.subscribe(data => {
this.todoService.updateTodo(data);
});
}
});
@@ -65,15 +66,16 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
});
// Subscribe to update on tag change
this.onNewTodoClicked = this.todoService.onNewTodoClicked
.subscribe(() => {
this.todo = new Todo({});
this.todo.id = FuseUtils.generateGUID();
this.formType = 'new';
this.todoForm = this.createTodoForm();
this.focusTitleField();
this.todoService.onCurrentTodoChanged.next([this.todo, 'new']);
});
this.onNewTodoClicked =
this.todoService.onNewTodoClicked
.subscribe(() => {
this.todo = new Todo({});
this.todo.id = FuseUtils.generateGUID();
this.formType = 'new';
this.todoForm = this.createTodoForm();
this.focusTitleField();
this.todoService.onCurrentTodoChanged.next([this.todo, 'new']);
});
}
focusTitleField()

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

@@ -5,7 +5,7 @@
</mat-icon>
<mat-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()"
class="mr-16" fxFlex="0 1 auto">
class="mr-16" fxFlex="0 1 auto" (click)="$event.stopPropagation()">
</mat-checkbox>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex>

4
src/app/main/content/pages/knowledge-base/dialogs/article/article.component.html
View File

@@ -1,7 +1,9 @@
<div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0">
<span class="title dialog-title">{{data.article.title}}</span>
<mat-toolbar-row>
<span class="title dialog-title">{{data.article.title}}</span>
</mat-toolbar-row>
</mat-toolbar>
<div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>

2
src/app/main/content/ui/colors/colors.component.html
View File

@@ -25,7 +25,7 @@
<!-- CONTENT -->
<div class="content">
<mat-tab-group class="color-tabs" dynamicHeight="true" (selectChange)="selectColor($event)">
<mat-tab-group class="color-tabs" dynamicHeight="true" (selectedTabChange)="selectColor($event)">
<mat-tab *ngFor="let color of ['primary', 'accent', 'warn']" label="{{color}}">
<ng-template mat-tab-label>