From 37d5e097b5c8b7815129f835730aa52fd2d47664 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 17 Jul 2018 12:26:16 +0300
Subject: [PATCH] (QuickPanel) Fixed: Perfect scrollbar is not available

---
 .../quick-panel/quick-panel.component.html    | 120 +++++++++---------
 1 file changed, 62 insertions(+), 58 deletions(-)

diff --git a/src/app/layout/components/quick-panel/quick-panel.component.html b/src/app/layout/components/quick-panel/quick-panel.component.html
index af7d29c1..e0fd74f9 100644
--- a/src/app/layout/components/quick-panel/quick-panel.component.html
+++ b/src/app/layout/components/quick-panel/quick-panel.component.html
@@ -1,72 +1,76 @@
-<mat-list class="date" cdkFocusRegionStart>
+<div fusePerfectScrollbar>
 
-    <h3 matSubheader cdkFocusInit>
-        <span>Today</span>
-    </h3>
+    <mat-list class="date" cdkFocusRegionStart>
 
-    <div class="secondary-text mat-display-1 mb-0 p-16">
-        <div class="mb-12">
-            {{date | date:'EEEE'}}
+        <h3 matSubheader cdkFocusInit>
+            <span>Today</span>
+        </h3>
+
+        <div class="secondary-text mat-display-1 mb-0 p-16">
+            <div class="mb-12">
+                {{date | date:'EEEE'}}
+            </div>
+            <div fxLayout="row" fxLayoutAlign="start start">
+                <span> {{date | date:'d'}}</span>
+                <span class="mat-subheading-1">th</span>
+                <span> {{date | date:'MMMM'}}</span>
+            </div>
         </div>
-        <div fxLayout="row" fxLayoutAlign="start start">
-            <span> {{date | date:'d'}}</span>
-            <span class="mat-subheading-1">th</span>
-            <span> {{date | date:'MMMM'}}</span>
-        </div>
-    </div>
-</mat-list>
+    </mat-list>
 
-<mat-divider cdkFocusRegionEnd></mat-divider>
+    <mat-divider cdkFocusRegionEnd></mat-divider>
 
-<mat-list>
-    <h3 matSubheader>
-        <span>Events</span>
-    </h3>
+    <mat-list>
+        <h3 matSubheader>
+            <span>Events</span>
+        </h3>
 
-    <mat-list-item *ngFor="let event of events">
-        <h3 matLine>{{event.title}}</h3>
-        <p matLine class="secondary-text">{{event.detail}}</p>
-    </mat-list-item>
-</mat-list>
+        <mat-list-item *ngFor="let event of events">
+            <h3 matLine>{{event.title}}</h3>
+            <p matLine class="secondary-text">{{event.detail}}</p>
+        </mat-list-item>
+    </mat-list>
 
-<mat-divider></mat-divider>
+    <mat-divider></mat-divider>
 
-<mat-list>
-    <h3 matSubheader>
-        <span>Notes</span>
-    </h3>
+    <mat-list>
+        <h3 matSubheader>
+            <span>Notes</span>
+        </h3>
 
-    <mat-list-item *ngFor="let note of notes">
-        <h3 matLine>{{note.title}}</h3>
-        <p matLine class="secondary-text">{{note.detail}}</p>
-    </mat-list-item>
-</mat-list>
+        <mat-list-item *ngFor="let note of notes">
+            <h3 matLine>{{note.title}}</h3>
+            <p matLine class="secondary-text">{{note.detail}}</p>
+        </mat-list-item>
+    </mat-list>
 
-<mat-divider></mat-divider>
+    <mat-divider></mat-divider>
 
-<mat-list>
-    <h3 matSubheader>
-        <span>Quick Settings</span>
-    </h3>
+    <mat-list>
+        <h3 matSubheader>
+            <span>Quick Settings</span>
+        </h3>
 
-    <mat-list-item>
-        <mat-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications"
-                          labelPosition="before">
-            <h3>Notifications</h3>
-        </mat-slide-toggle>
-    </mat-list-item>
+        <mat-list-item>
+            <mat-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications"
+                              labelPosition="before">
+                <h3>Notifications</h3>
+            </mat-slide-toggle>
+        </mat-list-item>
 
-    <mat-list-item>
-        <mat-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud"
-                          labelPosition="before">
-            <h3>Cloud Sync</h3>
-        </mat-slide-toggle>
-    </mat-list-item>
+        <mat-list-item>
+            <mat-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud"
+                              labelPosition="before">
+                <h3>Cloud Sync</h3>
+            </mat-slide-toggle>
+        </mat-list-item>
 
-    <mat-list-item>
-        <mat-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters"
-                          labelPosition="before">
-            <h3>Retro Thrusters</h3>
-        </mat-slide-toggle>
-    </mat-list-item>
-</mat-list>
+        <mat-list-item>
+            <mat-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters"
+                              labelPosition="before">
+                <h3>Retro Thrusters</h3>
+            </mat-slide-toggle>
+        </mat-list-item>
+    </mat-list>
+
+</div>
\ No newline at end of file