purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-10-31 15:43:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Angular and Angular Material 6 compatibility

Browse Source 
+ Small adjustments and polishing up in various apps and pages
This commit is contained in:
Sercan Yemen 2018-05-06 13:29:08 +03:00
parent 5fd146b8da
commit ebf865e2c7
35 changed files with 121 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/fuse-fake-db/mail.ts
View File

@ -442,13 +442,15 @@ export class MailFakeDb
'id' : 0,
'handle': 'starred',
'title' : 'Starred',
'icon' : 'star'
'icon' : 'star',
'color' : 'amber-fg'
},
{
'id' : 1,
'handle': 'important',
'title' : 'Important',
'icon' : 'label'
'icon' : 'label',
'color' : 'red-fg'
}
];

2
src/app/main/content/apps/academy/course/course.component.html
View File

@ -38,7 +38,7 @@
<mat-icon>menu</mat-icon>
</button>
<button mat--iconbutton class="mr-16" [routerLink]="'/apps/academy/courses'">
<button mat-icon-button class="mr-16" [routerLink]="'/apps/academy/courses'">
<mat-icon>arrow_back</mat-icon>
</button>

10
src/app/main/content/apps/chat/chat-view/chat-view.component.html
View File

@ -9,11 +9,11 @@
<div fxLayout="row" fxLayoutAlign="start center">
<!-- RESPONSIVE CHATS BUTTON-->
<div mat-icon-button fxHide.gt-md class="responsive-chats-button mr-16"
fuseMatSidenavToggler="chat-left-sidenav"
aria-label="chats button">
<mat-icon class="s-36">chat</mat-icon>
</div>
<button mat-icon-button fxHide.gt-md class="responsive-chats-button mr-16"
fuseMatSidenavToggler="chat-left-sidenav"
aria-label="chats button">
<mat-icon>chat</mat-icon>
</button>
<!-- / RESPONSIVE CHATS BUTTON-->
<!-- CHAT CONTACT-->

6
src/app/main/content/apps/contacts/contact-list/contact-list.component.html
View File

@ -73,13 +73,13 @@
<mat-cell *cdkCellDef="let contact">
<div fxFlex="row" fxLayoutAlign="end center">
<button mat-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
<mat-icon *ngIf="user.starred.includes(contact.id)">star</mat-icon>
<mat-icon *ngIf="!user.starred.includes(contact.id)">star_outline</mat-icon>
<mat-icon class="amber-fg" *ngIf="user.starred.includes(contact.id)">star</mat-icon>
<mat-icon class="secondary-text" *ngIf="!user.starred.includes(contact.id)">star_outline</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More"
(click)="$event.stopPropagation();">
<mat-icon>more_vert</mat-icon>
<mat-icon class="secondary-text">more_vert</mat-icon>
</button>
<mat-menu #moreMenu="matMenu">

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

@ -30,6 +30,7 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy
checkboxes: {};
onContactsChangedSubscription: Subscription;
onFilterChangedSubscription: Subscription;
onSelectedContactsChangedSubscription: Subscription;
onUserDataChangedSubscription: Subscription;
@ -72,6 +73,10 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy
this.user = user;
});
this.onFilterChangedSubscription =
this.contactsService.onFilterChanged.subscribe(() => {
this.contactsService.deselectContacts();
});
}
ngOnInit()
@ -82,6 +87,7 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy
ngOnDestroy()
{
this.onContactsChangedSubscription.unsubscribe();
this.onFilterChangedSubscription.unsubscribe();
this.onSelectedContactsChangedSubscription.unsubscribe();
this.onUserDataChangedSubscription.unsubscribe();
}

2
src/app/main/content/apps/contacts/contacts.service.ts
View File

@ -120,7 +120,7 @@ export class ContactsService implements Resolve<any>
*/
toggleSelectedContact(id)
{
// First, check if we already have that todo as selected...
// First, check if we already have that contact as selected...
if ( this.selectedContacts.length > 0 )
{
const index = this.selectedContacts.indexOf(id);

2
src/app/main/content/apps/dashboards/analytics/analytics.component.html
View File

@ -41,7 +41,7 @@
<div class="content">
<div class="left mr-32">
<div class="left mr-lg-32">
<div class="pb-24 font-size-18 font-weight-300">
How are your active users trending over time?

2
src/app/main/content/apps/e-commerce/orders/orders.component.html
View File

@ -21,7 +21,7 @@
<!-- / APP TITLE -->
<!-- SEARCH -->
<div class="search-input-wrapper ml-8 m-sm-0"
<div class="search-input-wrapper ml-sm-16"
fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
<label for="search" class="mr-8">
<mat-icon class="secondary-text">search</mat-icon>

9
src/app/main/content/apps/e-commerce/orders/orders.component.scss
View File

@ -1,3 +1,5 @@
@import "src/@fuse/scss/fuse";
:host {
.header {
@ -5,6 +7,13 @@
.search-input-wrapper {
max-width: 480px;
}
@include media-breakpoint-down(xs) {
margin: 24px 0;
height: 128px !important;
min-height: 128px !important;
max-height: 128px !important;
}
}
.mat-tab-group,

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

@ -39,14 +39,14 @@
<!-- / APP TITLE -->
<button mat-raised-button
class="save-product-button mat-white-bg mt-16 mt-sm-0"
class="save-product-button mat-white-bg"
[disabled]="productForm.invalid"
*ngIf="pageType ==='new'" (click)="addProduct()">
<span>ADD</span>
</button>
<button mat-raised-button
class="save-product-button mat-white-bg mt-16 mt-sm-0"
class="save-product-button mat-white-bg"
[disabled]="productForm.invalid || productForm.pristine"
*ngIf="pageType ==='edit'" (click)="saveProduct()">
<span>SAVE</span>

11
src/app/main/content/apps/e-commerce/products/products.component.html
View File

@ -15,13 +15,18 @@
<!-- APP TITLE -->
<div class="logo my-12 m-sm-0"
fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon mr-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">shopping_basket</mat-icon>
<span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Products</span>
<mat-icon class="logo-icon mr-16" *fuseIfOnDom
[@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
shopping_basket
</mat-icon>
<span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
Products
</span>
</div>
<!-- / APP TITLE -->
<!-- SEARCH -->
<div class="search-input-wrapper mx-12 m-md-0"
<div class="search-input-wrapper mx-24 m-md-0"
fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
<label for="search" class="mr-8">
<mat-icon class="secondary-text">search</mat-icon>

7
src/app/main/content/apps/e-commerce/products/products.component.scss
View File

@ -9,9 +9,10 @@
}
@include media-breakpoint-down(xs) {
height: 176px !important;
min-height: 176px !important;
max-height: 176px !important;
margin: 8px 0;
height: 192px !important;
min-height: 192px !important;
max-height: 192px !important;
}
}

2
src/app/main/content/apps/file-manager/file-list/file-list.component.html
View File

@ -44,7 +44,7 @@
<mat-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="file-manager-right-sidenav">
<mat-icon>info</mat-icon>
<mat-icon class="secondary-text">info</mat-icon>
</button>
</mat-cell>
</ng-container>

8
src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.html
View File

@ -25,13 +25,13 @@
<div class="actions" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
<mat-icon *ngIf="mail.starred">star</mat-icon>
<mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
<mat-icon class="amber-fg" *ngIf="mail.starred">star</mat-icon>
<mat-icon class="secondary-text" *ngIf="!mail.starred">star_outline</mat-icon>
</button>
<button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
<mat-icon *ngIf="mail.important">label</mat-icon>
<mat-icon *ngIf="!mail.important">label_outline</mat-icon>
<mat-icon class="red-fg" *ngIf="mail.important">label</mat-icon>
<mat-icon class="secondary-text" *ngIf="!mail.important">label_outline</mat-icon>
</button>
</div>
</div>

2
src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html
View File

@ -50,7 +50,7 @@
<div class="nav-item" *ngFor="let filter of (filters$ | async)">
<a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/filter/' + filter.handle"
routerLinkActive="active">
<mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
<mat-icon class="nav-link-icon" [ngClass]="filter.color" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
<span>{{filter.title}}</span>
</a>
</div>

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

@ -27,13 +27,13 @@
<div class="actions" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
<mat-icon *ngIf="mail.starred">star</mat-icon>
<mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
<mat-icon class="amber-fg" *ngIf="mail.starred">star</mat-icon>
<mat-icon class="secondary-text" *ngIf="!mail.starred">star_outline</mat-icon>
</button>
<button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
<mat-icon *ngIf="mail.important">label</mat-icon>
<mat-icon *ngIf="!mail.important">label_outline</mat-icon>
<mat-icon class="red-fg" *ngIf="mail.important">label</mat-icon>
<mat-icon class="secondary-text" *ngIf="!mail.important">label_outline</mat-icon>
</button>
</div>
</div>

2
src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
View File

@ -49,7 +49,7 @@
<div class="nav-item" *ngFor="let filter of filters">
<a class="nav-link" matRipple [routerLink]="'/apps/mail/filter/' + filter.handle" routerLinkActive="active">
<mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
<mat-icon class="nav-link-icon" [ngClass]="filter.color" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
<span>{{filter.title}}</span>
</a>
</div>

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

@ -326,18 +326,20 @@
<span fxFlex class="section-title">{{checklist.name}}</span>
<div>
<button mat-icon-button class="checklist-actions-button"
[matMenuTriggerFor]="checklistActionsMenu">
<mat-icon class="s-20">more_vert</mat-icon>
</button>
<mat-menu #checklistActionsMenu="matMenu">
<button mat-menu-item (click)="removeChecklist(checklist)">
<mat-icon>delete</mat-icon>
<span>Remove Checklist</span>
</button>
</mat-menu>
</div>
</div>
@ -372,7 +374,7 @@
<button mat-icon-button class="checklist-actions-button"
(click)="removeChecklistItem(checkItem, checklist)">
<mat-icon class="s-20">delete</mat-icon>
<mat-icon class="secondary-text s-20">delete</mat-icon>
</button>
</div>

24
src/app/main/content/apps/todo/todo-details/todo-details.component.html
View File

@ -20,32 +20,34 @@
<div class="actions" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button (click)="toggleDeleted($event)" aria-label="Toggle delete">
<mat-icon *ngIf="todo.deleted">delete_forever</mat-icon>
<mat-icon *ngIf="!todo.deleted">delete</mat-icon>
</button>
<button mat-icon-button (click)="toggleImportant($event)" aria-label="Toggle important">
<mat-icon *ngIf="todo.important">error</mat-icon>
<mat-icon *ngIf="!todo.important">error_outline</mat-icon>
<mat-icon class="red-fg" *ngIf="todo.important">error</mat-icon>
<mat-icon class="secondary-text" *ngIf="!todo.important">error_outline</mat-icon>
</button>
<button mat-icon-button (click)="toggleStar($event)" aria-label="Toggle star">
<mat-icon *ngIf="todo.starred">star</mat-icon>
<mat-icon *ngIf="!todo.starred">star_outline</mat-icon>
<mat-icon class="amber-fg" *ngIf="todo.starred">star</mat-icon>
<mat-icon class="secondary-text" *ngIf="!todo.starred">star_outline</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="labelMenu" fxFlex="0 1 auto">
<mat-icon>label</mat-icon>
<mat-icon class="secondary-text">label</mat-icon>
</button>
<mat-menu #labelMenu="matMenu">
<button mat-menu-item *ngFor="let tag of tags"
(click)="toggleTagOnTodo(tag.id)">
{{tag.title}}
<mat-icon *ngIf="hasTag(tag.id)">check</mat-icon>
<mat-icon *ngIf="!hasTag(tag.id)"></mat-icon>
<span>{{tag.title}}</span>
</button>
</mat-menu>
<button mat-icon-button (click)="toggleDeleted($event)" aria-label="Toggle delete">
<mat-icon class="secondary-text" *ngIf="todo.deleted">delete_forever</mat-icon>
<mat-icon class="secondary-text" *ngIf="!todo.deleted">delete</mat-icon>
</button>
</div>
</div>

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

@ -157,6 +157,11 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
this.todoService.toggleTagOnTodo(tagId, this.todo);
}
hasTag(tagId)
{
return this.todoService.hasTag(tagId, this.todo);
}
addTodo()
{
this.todoService.updateTodo(this.todoForm.getRawValue());

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

@ -35,19 +35,19 @@
<button mat-icon-button (click)="toggleImportant($event)"
aria-label="Toggle important" fxHide.xs>
<mat-icon *ngIf="todo.important">error</mat-icon>
<mat-icon *ngIf="!todo.important">error_outline</mat-icon>
<mat-icon class="red-fg" *ngIf="todo.important">error</mat-icon>
<mat-icon class="secondary-text" *ngIf="!todo.important">error_outline</mat-icon>
</button>
<button mat-icon-button (click)="toggleStar($event)"
aria-label="Toggle star" fxHide.xs>
<mat-icon *ngIf="todo.starred">star</mat-icon>
<mat-icon *ngIf="!todo.starred">star_outline</mat-icon>
<mat-icon class="amber-fg" *ngIf="todo.starred">star</mat-icon>
<mat-icon class="secondary-text" *ngIf="!todo.starred">star_outline</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More" (click)="$event.stopPropagation()"
fxHide.xs>
<mat-icon>more_vert</mat-icon>
<mat-icon class="secondary-text">more_vert</mat-icon>
</button>
<mat-menu #moreMenu="matMenu">

2
src/app/main/content/apps/todo/todo.model.ts
View File

@ -30,7 +30,7 @@ export class Todo
this.starred = todo.starred;
this.important = todo.important;
this.deleted = todo.deleted;
this.tags = todo.tags;
this.tags = todo.tags || [];
}
}

10
src/app/main/content/apps/todo/todo.service.ts
View File

@ -368,6 +368,16 @@ export class TodoService implements Resolve<any>
this.updateTodo(todo);
}
hasTag(tagId, todo)
{
if ( !todo.tags )
{
return false;
}
return todo.tags.indexOf(tagId) !== -1;
}
/**
* Update the todo
* @param todo

2
src/app/main/content/components-third-party/datatable/ngx-datatable.component.html vendored
View File

@ -14,7 +14,7 @@
<a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0"
href="https://github.com/swimlane/ngx-datatable"
target="_blank">
<mat-icon>link</mat-icon>
<mat-icon class="mr-8">link</mat-icon>
<span>Reference</span>
</a>
</div>

2
src/app/main/content/components-third-party/google-maps/google-maps.component.html vendored
View File

@ -14,7 +14,7 @@
<a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0"
href="https://angular-maps.com"
target="_blank">
<mat-icon>link</mat-icon>
<mat-icon class="mr-8">link</mat-icon>
<span>Reference</span>
</a>
</div>

2
src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.html
View File

@ -5,7 +5,7 @@
<div id="mail-confirm-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div class="logo">
<mat-icon class="s-96">email</mat-icon>
<mat-icon class="blue-fg s-96">email</mat-icon>
</div>
<div class="title">Confirm your email address!</div>

4
src/app/main/content/pages/faq/faq.component.scss
View File

@ -23,7 +23,7 @@
h1 {
color: white;
font-size: 48px;
font-weight: 300;
font-weight: 400;
letter-spacing: 0.01em;
text-align: center;
margin-top: 0;
@ -39,7 +39,7 @@
max-width: 480px;
text-align: center;
font-weight: 300;
letter-spacing: 0.03em;
letter-spacing: 0.075em;
margin: 0;
@include media-breakpoint-down('xs') {

2
src/app/main/content/pages/knowledge-base/knowledge-base.component.html
View File

@ -22,7 +22,7 @@
<a mat-list-item *ngFor="let article of category.featuredArticles"
(click)="readArticle(article)">
<mat-icon class="mr-8">note</mat-icon>
<mat-icon class="secondary-text mr-8">note</mat-icon>
{{ article.title }}
</a>

4
src/app/main/content/pages/knowledge-base/knowledge-base.component.scss
View File

@ -19,7 +19,7 @@
h1 {
color: white;
font-size: 48px;
font-weight: 300;
font-weight: 400;
letter-spacing: 0.01em;
text-align: center;
margin-top: 0;
@ -35,7 +35,7 @@
max-width: 480px;
text-align: center;
font-weight: 300;
letter-spacing: 0.03em;
letter-spacing: 0.075em;
margin: 0;
@include media-breakpoint-down('xs') {

4
src/app/main/content/pages/pricing/style-1/style-1.component.scss
View File

@ -26,7 +26,7 @@
.h1 {
color: white;
font-size: 48px;
font-weight: 300;
font-weight: 400;
letter-spacing: 0.01em;
text-align: center;
@ -41,7 +41,7 @@
text-align: center;
margin-top: 16px;
font-weight: 300;
letter-spacing: 0.03em;
letter-spacing: 0.05em;
@include media-breakpoint-down('xs') {
font-size: 14px;

4
src/app/main/content/pages/pricing/style-2/style-2.component.scss
View File

@ -26,7 +26,7 @@
.h1 {
color: white;
font-size: 48px;
font-weight: 300;
font-weight: 400;
letter-spacing: 0.01em;
text-align: center;
@ -41,7 +41,7 @@
text-align: center;
margin-top: 16px;
font-weight: 300;
letter-spacing: 0.03em;
letter-spacing: 0.05em;
@include media-breakpoint-down('xs') {
font-size: 14px;

4
src/app/main/content/pages/pricing/style-3/style-3.component.scss
View File

@ -26,7 +26,7 @@
.h1 {
color: white;
font-size: 48px;
font-weight: 300;
font-weight: 400;
letter-spacing: 0.01em;
text-align: center;
@ -41,7 +41,7 @@
text-align: center;
margin-top: 16px;
font-weight: 300;
letter-spacing: 0.03em;
letter-spacing: 0.05em;
@include media-breakpoint-down('xs') {
font-size: 14px;

10
src/app/main/content/pages/search/tabs/classic/classic.component.html
View File

@ -5,19 +5,17 @@
<span class="result-count h3 secondary-text">
<span>54</span>
<span>Results</span>
<span class="ml-4">Results</span>
</span>
<div class="pager" fxLayout="row" fxLayoutAlign="start center">
<span class="secondary-text">
<span>Results:&nbsp;</span>
</span>
<span class="mr-4 secondary-text">Results:</span>
<span class="page-info">
<span>1</span>
<span>-</span>
<span class="mx-4">-</span>
<span>10</span>
<span>of</span>
<span class="mx-4">of</span>
<span>54</span>
</span>

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

@ -15,7 +15,7 @@
<a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0"
href="https://www.google.com/design/spec/style/color.html#color-color-palette"
target="_blank">
<mat-icon>link</mat-icon>
<mat-icon class="mr-8">link</mat-icon>
<span>Reference</span>
</a>

10
src/app/main/content/ui/icons/icons.component.html
View File

@ -1,7 +1,8 @@
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
<div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
fxLayoutAlign.gt-xs="space-between center">
<div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
@ -12,8 +13,9 @@
<div class="h1 mt-16">Icons</div>
</div>
<a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0" href="https://material.angular.io" target="_blank">
<mat-icon>link</mat-icon>
<a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0" href="https://material.angular.io"
target="_blank">
<mat-icon class="mr-8">link</mat-icon>
<span>Reference</span>
</a>
@ -41,7 +43,7 @@
<div class="icon-holder m-16" fxLayout="column" fxLayoutAlign="center center"
*ngFor="let icon of filteredIcons">
<mat-icon class="s-48">{{icon}}</mat-icon>
<mat-icon class="secondary-text s-48">{{icon}}</mat-icon>
<div class="icon-name secondary-text mt-8">{{icon}}</div>
</div>