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
2025-01-10 04:25:08 +00:00 · 2017-11-27 14:28:08 +03:00 · 2017-11-27 14:28:08 +03:00 · 5a9cd36282
commit 5a9cd36282
parent 297bb95a2e
12 changed files with 1769 additions and 750 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -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",
--- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
+++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
@ -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;
        }
--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
+++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
@ -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;
+}
--- a/src/app/main/content/apps/contacts/contacts.component.scss
+++ b/src/app/main/content/apps/contacts/contacts.component.scss
@ -3,12 +3,4 @@
    .content {
        overflow: hidden;
    }
-}
-
-#add-contact-button {
-    position: absolute;
-    bottom: 12px;
-    right: 12px;
-    padding: 0;
-    z-index: 99;
 }
--- a/src/app/main/content/apps/contacts/contacts.component.ts
+++ b/src/app/main/content/apps/contacts/contacts.component.ts
@ -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();
+    }
 }
--- a/src/app/main/content/pages/profile/profile.component.html
+++ b/src/app/main/content/pages/profile/profile.component.html
@ -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>
--- a/src/app/main/content/pages/profile/tabs/about/about.component.html
+++ b/src/app/main/content/pages/profile/tabs/about/about.component.html
@ -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>
--- a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html
+++ b/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html
@ -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>
--- a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html
+++ b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html
@ -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>
--- a/src/app/main/navbar/horizontal/navbar-horizontal.component.ts
+++ b/src/app/main/navbar/horizontal/navbar-horizontal.component.ts
@ -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');
    }
 }
--- a/src/app/main/navbar/vertical/navbar-vertical.component.scss
+++ b/src/app/main/navbar/vertical/navbar-vertical.component.scss
@ -2,7 +2,7 @@

 fuse-main {

-    &.fuse-nav-bar-folded {
+    &.fuse-nav-bar-folded:not(.fuse-nav-bar-horizontal) {

        .content-wrapper {