Updated Fuse version and changelog

(Toolbar) Removed unnecessary chat panel toggle method
(Navbar) Fixed: Navbar doesn't grow if it has a small content
2025-12-30 06:07:08 +00:00 · 2018-07-12 11:38:02 +03:00 · 2018-07-12 11:13:09 +03:00 · 2018-07-12 11:04:54 +03:00 · 2018-07-12 10:48:31 +03:00 · 2018-07-12 10:20:34 +03:00
17 changed files with 191 additions and 136 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "fuse",
-  "version": "6.2.0",
+  "version": "6.2.1",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "fuse",
-  "version": "6.2.0",
+  "version": "6.2.1",
  "license": "https://themeforest.net/licenses/terms/regular",
  "scripts": {
    "ng": "ng",
--- a/src/@fuse/components/sidebar/sidebar.component.scss
+++ b/src/@fuse/components/sidebar/sidebar.component.scss
@@ -1,3 +1,5 @@
+@import "src/@fuse/scss/fuse";
+
 fuse-sidebar {
    display: flex;
    flex-direction: column;
@@ -14,6 +16,12 @@ fuse-sidebar {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
    background: white;

+    @include media-breakpoint-down('xs') {
+        min-width: 0 !important;
+        max-width: 80vw !important;
+        width: 80vw !important;
+    }
+
    &.left-positioned {
        left: 0;
        transform: translateX(-100%);
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Platform } from '@angular/cdk/platform';
 import { TranslateService } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -29,20 +31,24 @@ export class AppComponent implements OnInit, OnDestroy
    /**
     * Constructor
     *
+     * @param {DOCUMENT} document
     * @param {FuseConfigService} _fuseConfigService
     * @param {FuseNavigationService} _fuseNavigationService
     * @param {FuseSidebarService} _fuseSidebarService
     * @param {FuseSplashScreenService} _fuseSplashScreenService
     * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
+     * @param {Platform} _platform
     * @param {TranslateService} _translateService
     */
    constructor(
+        @Inject(DOCUMENT) private document: any,
        private _fuseConfigService: FuseConfigService,
        private _fuseNavigationService: FuseNavigationService,
        private _fuseSidebarService: FuseSidebarService,
        private _fuseSplashScreenService: FuseSplashScreenService,
        private _fuseTranslationLoaderService: FuseTranslationLoaderService,
-        private _translateService: TranslateService
+        private _translateService: TranslateService,
+        private _platform: Platform
    )
    {
        // Get default navigation
@@ -66,6 +72,12 @@ export class AppComponent implements OnInit, OnDestroy
        // Use a language
        this._translateService.use('en');

+        // Add is-mobile class to the body if the platform is mobile
+        if ( this._platform.ANDROID || this._platform.IOS )
+        {
+            this.document.body.className += ' is-mobile';
+        }
+
        // Set the private defaults
        this._unsubscribeAll = new Subject();
    }
--- a/src/app/layout/components/chat-panel/chat-panel.component.html
+++ b/src/app/layout/components/chat-panel/chat-panel.component.html
@@ -31,23 +31,23 @@
 <div>

    <!-- Contacts -->
-    <mat-list id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+    <div id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">

-        <mat-list-item *ngFor="let contact of contacts"
-                       [ngClass]="contact.status"
-                       [class.active]="contact.id === selectedContact?.id"
-                       (click)="goToChat(contact)"
-                       [matTooltip]="contact.name"
-                       matTooltipPosition="left"
-                       matRipple>
+        <div *ngFor="let contact of contacts"
+             class="contacts-list-item"
+             [ngClass]="contact.status"
+             [class.active]="contact.id === selectedContact?.id"
+             (click)="goToChat(contact)">

-            <img matListAvatar [src]="contact.avatar">
+            <img class="avatar" [src]="contact.avatar"
+                 [matTooltip]="contact.name"
+                 matTooltipPosition="left">
            <div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
            <div class="status-icon" [ngClass]="contact.status"></div>

-        </mat-list-item>
+        </div>

-    </mat-list>
+    </div>
    <!-- / Contacts -->

    <!-- Chat -->
--- a/src/app/layout/components/chat-panel/chat-panel.component.scss
+++ b/src/app/layout/components/chat-panel/chat-panel.component.scss
@@ -34,6 +34,7 @@ chat-panel {
        width: 72px;
        min-width: 72px;
        max-width: 72px;
+        -webkit-overflow-scrolling: touch;

        // Perfect scrollbar
        .ps__rail-y {
@@ -44,9 +45,14 @@ chat-panel {
            }
        }

-        .mat-list-item {
-            cursor: pointer;
+        .contacts-list-item {
            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 16px;
+            height: 56px;
+            cursor: pointer;

            &.active {
                background-color: mat-color(mat-palette($mat-grey, 300));
@@ -68,50 +74,51 @@ chat-panel {
                }
            }

-            .mat-list-item-content {
+            .avatar {
+                margin: 0;
+            }

-                .unread-count {
-                    position: absolute;
-                    min-width: 18px;
-                    height: 18px;
-                    top: 4px;
-                    left: 10px;
-                    border-radius: 9px;
-                    padding: 0 5px;
-                    font-size: 11px;
-                    text-align: center;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    background-color: mat-color(mat-palette($mat-indigo));
-                    color: white;
-                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
+            .unread-count {
+                position: absolute;
+                min-width: 18px;
+                height: 18px;
+                top: 4px;
+                left: 10px;
+                border-radius: 9px;
+                padding: 0 5px;
+                font-size: 11px;
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: mat-color(mat-palette($mat-indigo));
+                color: white;
+                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
+            }
+
+            .status-icon {
+                position: absolute;
+                width: 12px;
+                height: 12px;
+                bottom: 3px;
+                left: 44px;
+                border: 2px solid white;
+                border-radius: 50%;
+
+                &.online {
+                    background-color: #4CAF50;
                }

-                .status-icon {
-                    position: absolute;
-                    width: 12px;
-                    height: 12px;
-                    bottom: 3px;
-                    left: 44px;
-                    border: 2px solid white;
-                    border-radius: 50%;
+                &.do-not-disturb {
+                    background-color: #F44336;
+                }

-                    &.online {
-                        background-color: #4CAF50;
-                    }
+                &.away {
+                    background-color: #FFC107;
+                }

-                    &.do-not-disturb {
-                        background-color: #F44336;
-                    }
-
-                    &.away {
-                        background-color: #FFC107;
-                    }
-
-                    &.offline {
-                        background-color: #646464;
-                    }
+                &.offline {
+                    background-color: #646464;
                }
            }
        }
@@ -337,6 +344,12 @@ fuse-sidebar {
        min-width: 360px;
        max-width: 360px;

+        @include media-breakpoint-down('xs') {
+            min-width: 0 !important;
+            max-width: 100vw !important;
+            width: 100vw !important;
+        }
+
        // Folded
        &.folded {

--- a/src/app/layout/components/chat-panel/chat-panel.component.ts
+++ b/src/app/layout/components/chat-panel/chat-panel.component.ts
@@ -124,7 +124,7 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
            this._replyForm.reset();

            // Focus to the reply input
-            this._replyInput.nativeElement.focus();
+            // this._replyInput.nativeElement.focus();

            // Scroll to the bottom of the messages list
            if ( this._chatViewScrollbar )
--- a/src/app/layout/components/chat-panel/chat-panel.module.ts
+++ b/src/app/layout/components/chat-panel/chat-panel.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
+import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';

 import { FuseSharedModule } from '@fuse/shared.module';

@@ -18,7 +18,6 @@ import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.se
        MatFormFieldModule,
        MatIconModule,
        MatInputModule,
-        MatListModule,
        MatTabsModule,
        MatTooltipModule,
        MatRippleModule,
--- a/src/app/layout/components/navbar/navbar.component.scss
+++ b/src/app/layout/components/navbar/navbar.component.scss
@@ -1,5 +1,6 @@
 navbar {
    display: flex;
    flex-direction: column;
+    flex: 1 1 auto;
    width: 100%;
 }
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
@@ -1,60 +1,63 @@
@import "src/@fuse/scss/fuse";

 fuse-sidebar {
-    overflow: hidden;

-    &.folded:not(.unfolded) {
+    &.navbar-fuse-sidebar {
+        overflow: hidden;

-        navbar {
+        &.folded:not(.unfolded) {

-            navbar-vertical-style-1 {
+            navbar {

-                .navbar-top {
-                    padding: 12px 0;
-                    justify-content: center;
+                navbar-vertical-style-1 {

-                    .buttons {
-                        display: none;
-                    }
+                    .navbar-top {
+                        padding: 12px 0;
+                        justify-content: center;

-                    .logo {
-
-                        .logo-icon {
-                            width: 32px;
-                            height: 32px;
-                        }
-
-                        .logo-text {
+                        .buttons {
                            display: none;
                        }
+
+                        .logo {
+
+                            .logo-icon {
+                                width: 32px;
+                                height: 32px;
+                            }
+
+                            .logo-text {
+                                display: none;
+                            }
+                        }
                    }
-                }

-                .navbar-scroll-container {
+                    .navbar-scroll-container {

-                    .user {
-                        padding: 12px 0;
+                        .user {
+                            padding: 12px 0;

-                        .avatar-container {
-                            position: relative;
-                            top: auto;
-                            padding: 0;
+                            .avatar-container {
+                                position: relative;
+                                top: auto;
+                                padding: 0;

-                            .avatar {
-                                width: 40px;
-                                height: 40px;
+                                .avatar {
+                                    width: 40px;
+                                    height: 40px;
+                                }
+                            }
+
+                            .username,
+                            .email {
+                                display: none;
                            }
                        }

-                        .username,
-                        .email {
-                            display: none;
+                        .navbar-content {
+                            margin-top: 0;
                        }
                    }
-
-                    .navbar-content {
-                        margin-top: 0;
-                    }
                }
            }
        }
--- a/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
+++ b/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
@@ -1,22 +1,25 @@
@import "src/@fuse/scss/fuse";

 fuse-sidebar {
-    overflow: hidden;

-    &.folded:not(.unfolded) {
+    &.navbar-fuse-sidebar {
+        overflow: hidden;

-        navbar {
+        &.folded:not(.unfolded) {

-            navbar-vertical-style-2 {
+            navbar {

-                .navbar-header {
-                    padding: 0 13px;
+                navbar-vertical-style-2 {

-                    .logo {
+                    .navbar-header {
+                        padding: 0 13px;

-                        .logo-text {
-                            opacity: 0;
-                            transition: opacity 200ms ease;
+                        .logo {
+
+                            .logo-text {
+                                opacity: 0;
+                                transition: opacity 200ms ease;
+                            }
                        }
                    }
                }
--- a/src/app/layout/components/toolbar/toolbar.component.ts
+++ b/src/app/layout/components/toolbar/toolbar.component.ts
@@ -26,7 +26,6 @@ export class ToolbarComponent implements OnInit, OnDestroy
    selectedLanguage: any;
    showLoadingBar: boolean;
    userStatusOptions: any[];
-    chatPanelLockedOpen: string;

    // Private
    private _unsubscribeAll: Subject<any>;
@@ -147,28 +146,6 @@ export class ToolbarComponent implements OnInit, OnDestroy
        this._fuseSidebarService.getSidebar(key).toggleOpen();
    }

-    toggleChatPanel(): void
-    {
-        // Get the chat panel sidebar
-        const chatPanelSidebar = this._fuseSidebarService.getSidebar('chatPanel');
-
-        // Store the original value
-        if ( chatPanelSidebar.lockedOpen !== '' )
-        {
-            this.chatPanelLockedOpen = chatPanelSidebar.lockedOpen;
-        }
-
-        // Toggle
-        if ( chatPanelSidebar.lockedOpen === this.chatPanelLockedOpen )
-        {
-            chatPanelSidebar.lockedOpen = '';
-        }
-        else
-        {
-            chatPanelSidebar.lockedOpen = this.chatPanelLockedOpen;
-        }
-    }
-
    /**
     * Search
     *
--- a/src/app/layout/horizontal/layout-1/layout-1.component.html
+++ b/src/app/layout/horizontal/layout-1/layout-1.component.html
@@ -99,7 +99,7 @@

 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar name="navbar"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                  [folded]="fuseConfig.layout.navbar.folded"
                  *ngIf="!fuseConfig.layout.navbar.hidden">
        <navbar [variant]="fuseConfig.layout.navbar.variant"
--- a/src/app/layout/vertical/layout-1/layout-1.component.html
+++ b/src/app/layout/vertical/layout-1/layout-1.component.html
@@ -101,7 +101,7 @@

 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar name="navbar"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                  [folded]="fuseConfig.layout.navbar.folded"
                  lockedOpen="gt-md"
                  *ngIf="!fuseConfig.layout.navbar.hidden">
@@ -113,7 +113,7 @@

 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar name="navbar" position="right"
+    <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
                  [folded]="fuseConfig.layout.navbar.folded"
                  lockedOpen="gt-md"
                  *ngIf="!fuseConfig.layout.navbar.hidden">
--- a/src/app/layout/vertical/layout-2/layout-2.component.html
+++ b/src/app/layout/vertical/layout-2/layout-2.component.html
@@ -101,7 +101,7 @@

 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar name="navbar"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                  [folded]="fuseConfig.layout.navbar.folded"
                  lockedOpen="gt-md"
                  *ngIf="!fuseConfig.layout.navbar.hidden">
@@ -113,7 +113,7 @@

 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar name="navbar" position="right"
+    <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
                  [folded]="fuseConfig.layout.navbar.folded"
                  lockedOpen="gt-md"
                  *ngIf="!fuseConfig.layout.navbar.hidden">
--- a/src/app/layout/vertical/layout-3/layout-3.component.html
+++ b/src/app/layout/vertical/layout-3/layout-3.component.html
@@ -87,7 +87,7 @@

 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar name="navbar"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                  [folded]="fuseConfig.layout.navbar.folded"
                  lockedOpen="gt-md"
                  *ngIf="!fuseConfig.layout.navbar.hidden">
@@ -99,7 +99,7 @@

 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar name="navbar" position="right"
+    <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
                  [folded]="fuseConfig.layout.navbar.folded"
                  lockedOpen="gt-md"
                  *ngIf="!fuseConfig.layout.navbar.hidden">
--- a/src/app/main/documentation/changelog/changelog.component.html
+++ b/src/app/main/documentation/changelog/changelog.component.html
@@ -19,6 +19,45 @@

        <div class="changelog">

+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v6.2.1 -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v6.2.1</span>
+                    <span class="date">(2018-07-12)</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="fixed">
+                        <span class="title">Fixed</span>
+                        <ul>
+                            <ul>
+                                <li>Added the missing 'is-mobile' check back to the AppComponent</li>
+                                <li>Scrollbar styles are being modified in some mobile devices</li>
+                                <li>(Chat Panel) Mobile scrolling and layout issues</li>
+                                <li>
+                                    (Navbar) Added classes to the Fuse Sidebar components that contains the navbar to
+                                    prevent style leak
+                                </li>
+                                <li>(Toolbar) Removed unnecessary chat panel toggle method</li>
+                            </ul>
+                        </ul>
+                    </div>
+
+                    <div class="improved">
+                        <span class="title">Improved</span>
+                        <ul>
+                            <li>(Skeleton) Removed chat panel from skeleton as it's more like an app</li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
            <!-- --------------------------------------------------------------------------------------------- -->
            <!-- @ v6.2.0 -->
            <!-- --------------------------------------------------------------------------------------------- -->
@@ -26,7 +65,7 @@

                <div class="title">
                    <span class="version">v6.2.0</span>
-                    <span class="date">(TBA)</span>
+                    <span class="date">(2018-07-11)</span>
                </div>

                <div class="groups">
Author	SHA1	Message	Date
Sercan Yemen	2c7ef4de00	Updated Fuse version and changelog	2018-07-12 11:38:02 +03:00
Sercan Yemen	fdb572fadd	(Toolbar) Removed unnecessary chat panel toggle method	2018-07-12 11:13:09 +03:00
Sercan Yemen	528c3f95e7	(Navbar) Fixed: Navbar doesn't grow if it has a small content	2018-07-12 11:04:54 +03:00
Sercan Yemen	f395046945	(Chat Panel) Removed mat-list, moved mat-tooltip to the avatar due to mobile scrolling issues	2018-07-12 10:48:31 +03:00
Sercan Yemen	b099022f5a	(FuseSidebar) Max. width & width tweaks for small screen devices	2018-07-12 10:20:34 +03:00
Sercan Yemen	25a6ca2684	(Navbar) Added classes to the navbar containing fuse-sidebar's to contain their custom styles	2018-07-12 09:25:56 +03:00
Sercan Yemen	0cd5d613e0	(AppComponent) Added missing 'is-mobile' control - Fixes: Visible scrollbars on some mobile devices	2018-07-12 09:24:54 +03:00
Sercan Yemen	f45ad11861	Updated changelog date	2018-07-11 11:03:37 +03:00