Increased the Fuse version number

+ Updated Angular, Angular Material and Flex Layout
+ Updated various components for better Angular5 support
+ Fixed: Contacts app various issues
+ Fixed: Duplicate content in Profile page tabs
+ Fixed: Folded status of the Navbar shouldn't brake the layout if Horizontal Navbar is active
This commit is contained in:
Sercan Yemen 2017-11-27 14:28:08 +03:00
parent 297bb95a2e
commit 5a9cd36282
12 changed files with 1769 additions and 750 deletions

2370
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{
"name": "fuse2",
"version": "1.2.2",
"version": "1.2.3",
"license": "",
"scripts": {
"ng": "ng",
@ -16,49 +16,49 @@
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.2",
"@angular/animations": "5.0.2",
"@angular/cdk": "5.0.0-rc0",
"@angular/common": "5.0.2",
"@angular/compiler": "5.0.2",
"@angular/core": "5.0.2",
"@angular/flex-layout": "2.0.0-beta.10",
"@angular/forms": "5.0.2",
"@angular/http": "5.0.2",
"@angular/material": "5.0.0-rc0",
"@angular/material-moment-adapter": "5.0.0-rc0",
"@angular/platform-browser": "5.0.2",
"@angular/platform-browser-dynamic": "5.0.2",
"@angular/router": "5.0.2",
"@angular/animations": "5.0.3",
"@angular/cdk": "5.0.0-rc.1",
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/core": "5.0.3",
"@angular/flex-layout": "2.0.0-beta.10-4905443",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/material": "5.0.0-rc.1",
"@angular/material-moment-adapter": "5.0.0-rc.1",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@angular/router": "5.0.3",
"@ngx-translate/core": "8.0.0",
"@swimlane/ngx-charts": "github:HitomiTenshi/ngx-charts#angular5",
"@swimlane/ngx-datatable": "11.0.4",
"@swimlane/ngx-charts": "7.0.1",
"@swimlane/ngx-datatable": "11.1.4",
"@withinpixels/ngx-dnd": "3.1.0",
"angular-calendar": "0.21.3",
"angular-calendar": "0.22.1",
"angular-in-memory-web-api": "0.5.1",
"angular2-markdown": "1.6.0",
"classlist.js": "1.1.20150312",
"core-js": "2.5.1",
"d3": "4.11.0",
"d3": "4.12.0",
"hammerjs": "2.0.8",
"highlight.js": "9.12.0",
"intl": "1.2.5",
"moment": "2.19.2",
"ngx-color-picker": "4.4.0",
"ngx-color-picker": "5.0.4",
"ngx-cookie-service": "1.0.9",
"perfect-scrollbar": "1.0.3",
"perfect-scrollbar": "1.2.0",
"rxjs": "5.5.2",
"web-animations-js": "2.3.1",
"zone.js": "0.8.18"
},
"devDependencies": {
"@angular/cli": "1.5.2",
"@angular/compiler-cli": "5.0.2",
"@angular/language-service": "5.0.2",
"@angular/cli": "1.5.4",
"@angular/compiler-cli": "5.0.3",
"@angular/language-service": "5.0.3",
"@angularclass/hmr": "2.1.3",
"@types/jasmine": "2.5.54",
"@types/jasminewd2": "2.0.3",
"@types/node": "6.0.92",
"codelyzer": "3.2.2",
"codelyzer": "4.0.1",
"jasmine-core": "2.6.4",
"jasmine-spec-reporter": "4.1.1",
"karma": "1.7.1",

View File

@ -1,3 +1,5 @@
@import "src/app/core/scss/fuse";
.contact-form-dialog {
.mat-dialog-container {
@ -5,6 +7,10 @@
width: 400px;
overflow: hidden;
@include media-breakpoint('xs') {
width: auto;
}
.mat-toolbar {
min-height: initial;
}

View File

@ -44,12 +44,9 @@ fuse-contacts-contact-list {
}
#add-contact-button {
position: fixed;
position: absolute;
bottom: 12px;
right: 12px;
padding: 0;
@include media-breakpoint-down('xs') {
top: 12px;
}
z-index: 99;
}

View File

@ -4,11 +4,3 @@
overflow: hidden;
}
}
#add-contact-button {
position: absolute;
bottom: 12px;
right: 12px;
padding: 0;
z-index: 99;
}

View File

@ -1,10 +1,11 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ContactsService } from './contacts.service';
import { fuseAnimations } from '../../../../core/animations';
import { FormControl, FormGroup } from '@angular/forms';
import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component';
import { MatDialog } from '@angular/material';
import 'rxjs/add/operator/distinctUntilChanged';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector : 'fuse-contacts',
@ -13,11 +14,12 @@ import 'rxjs/add/operator/distinctUntilChanged';
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations
})
export class FuseContactsComponent implements OnInit
export class FuseContactsComponent implements OnInit, OnDestroy
{
hasSelectedContacts: boolean;
searchInput: FormControl;
dialogRef: any;
onSelectedContactsChangedSubscription: Subscription;
constructor(
private contactsService: ContactsService,
@ -51,11 +53,11 @@ export class FuseContactsComponent implements OnInit
ngOnInit()
{
this.contactsService.onSelectedContactsChanged
.subscribe(selectedContacts => {
this.hasSelectedContacts = selectedContacts.length > 0;
});
this.onSelectedContactsChangedSubscription =
this.contactsService.onSelectedContactsChanged
.subscribe(selectedContacts => {
this.hasSelectedContacts = selectedContacts.length > 0;
});
this.searchInput.valueChanges
.debounceTime(300)
@ -65,4 +67,8 @@ export class FuseContactsComponent implements OnInit
});
}
ngOnDestroy()
{
this.onSelectedContactsChangedSubscription.unsubscribe();
}
}

View File

@ -8,10 +8,12 @@
fxLayoutAlign.gt-sm="start center">
<img class="profile-image avatar huge" src="assets/images/avatars/katherine.jpg"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
<div class="name" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Katherine Wilson</div>
<div class="name" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Katherine Wilson
</div>
</div>
<div class="actions" fxLayout="row" fxLayoutAlign="end center" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">
<div class="actions" fxLayout="row" fxLayoutAlign="end center" *fuseIfOnDom
[@animate]="{value:'*',params:{delay:'200ms'}}">
<button mat-raised-button color="accent" aria-label="Follow">Follow</button>
<button mat-raised-button color="primary" aria-label="Send Message">Send Message</button>
</div>

View File

@ -1,10 +1,8 @@
<div id="about" class="p-24" fxLayout="row" fxLayoutWrap>
<div class="about-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65"
*fuseIfOnDom [@animateStagger]="{value:'50'}">
<div class="about-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65">
<div class="profile-box info-box general" fxLayout="column"
[@animate]="{value:'*',params:{y:'100%'}}">
<div class="profile-box info-box general" fxLayout="column">
<header class="mat-accent-bg">
<div class="title">General Information</div>
@ -38,8 +36,7 @@
</div>
<div class="profile-box info-box work" fxLayout="column"
[@animate]="{value:'*',params:{y:'100%'}}">
<div class="profile-box info-box work" fxLayout="column">
<header class="mat-accent-bg">
<div class="title">Work</div>
@ -68,8 +65,7 @@
</div>
</div>
<div class="profile-box info-box contact" fxLayout="column"
[@animate]="{value:'*',params:{y:'100%'}}">
<div class="profile-box info-box contact" fxLayout="column">
<header class="mat-accent-bg">
<div class="title">Contact</div>
@ -104,11 +100,9 @@
</div>
<div class="about-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="35"
*fuseIfOnDom [@animateStagger]="{value:'50'}">
<div class="about-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="35">
<div class="profile-box friends" fxLayout="column"
[@animate]="{value:'*',params:{y:'100%'}}">
<div class="profile-box friends" fxLayout="column">
<header class="mat-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
<div class="title">Friends</div>
@ -125,8 +119,7 @@
</div>
<div class="profile-box groups" fxLayout="column"
[@animate]="{value:'*',params:{y:'100%'}}">
<div class="profile-box groups" fxLayout="column">
<header class="mat-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
<div class="title">Joined Groups</div>

View File

@ -1,4 +1,4 @@
<div id="photos-videos" class="p-24" *fuseIfOnDom [@animateStagger]="{value:'50'}">
<div id="photos-videos" class="p-24">
<div class="period" *ngFor="let period of photosVideos">
<div class="period-title">
@ -7,8 +7,7 @@
</div>
<div class="period-media" fxLayout="row" fxLayoutWrap>
<div class="media" *ngFor="let media of period.media"
[@animate]="{value:'*',params:{y:'100%'}}">
<div class="media" *ngFor="let media of period.media">
<img class="preview" [src]="media.preview" title="{{media.title}}">
<div class="title">{{media.title}}</div>
</div>

View File

@ -1,10 +1,8 @@
<div id="timeline" class="p-24" fxLayout="row" fxLayoutWrap>
<div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65"
*fuseIfOnDom [@animateStagger]="{value:'50'}">
<div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65">
<div class="profile-box add-post"
[@animate]="{value:'*',params:{y:'100%'}}">
<div class="profile-box add-post">
<div class="form" fxFlex>
@ -37,8 +35,7 @@
<mat-divider></mat-divider>
<div class="timeline-item" *ngFor="let post of timeline.posts"
[@animate]="{value:'*',params:{y:'100%'}}">
<div class="timeline-item" *ngFor="let post of timeline.posts">
<header fxLayout="row" fxLayoutAlign="space-between start">
<div class="user" fxLayout="row" fxLayoutAlign="start center">
@ -136,8 +133,7 @@
<div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35">
<div class="profile-box latest-activity" fxLayout="column"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'100%'}}">
<div class="profile-box latest-activity" fxLayout="column">
<header class="mat-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
<div class="title">Latest Activity</div>

View File

@ -1,4 +1,5 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { FuseMainComponent } from '../../main.component';
@Component({
selector : 'fuse-navbar-horizontal',
@ -6,14 +7,19 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
styleUrls : ['./navbar-horizontal.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FuseNavbarHorizontalComponent implements OnInit
export class FuseNavbarHorizontalComponent implements OnInit, OnDestroy
{
constructor()
constructor(private fuseMainComponent: FuseMainComponent)
{
}
ngOnInit()
{
this.fuseMainComponent.addClass('fuse-nav-bar-horizontal');
}
ngOnDestroy()
{
this.fuseMainComponent.removeClass('fuse-nav-bar-horizontal');
}
}

View File

@ -2,7 +2,7 @@
fuse-main {
&.fuse-nav-bar-folded {
&.fuse-nav-bar-folded:not(.fuse-nav-bar-horizontal) {
.content-wrapper {