From cb73e388a649bbcc0f1afd8fc04dc6dcfd62e4be Mon Sep 17 00:00:00 2001
From: jb-alvarado <jb@pixelcrusher.de>
Date: Thu, 28 Jan 2021 17:19:00 +0100
Subject: [PATCH] add perfect scrollbar to logging, fix #16

---
 assets/scss/globals.scss |  3 ++-
 layouts/default.vue      |  1 +
 pages/logging.vue        | 40 +++++++++++++++++++++++++++++++++++-----
 pages/media.vue          |  9 ++++++---
 4 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/assets/scss/globals.scss b/assets/scss/globals.scss
index 1608e177..0ce1c742 100644
--- a/assets/scss/globals.scss
+++ b/assets/scss/globals.scss
@@ -1,5 +1,6 @@
 #__nuxt, #__layout, #__layout > div, #__layout > div > div {
-    height: 100%
+    height: 100%;
+    width: 100%;
 }
 
 @font-face{
diff --git a/layouts/default.vue b/layouts/default.vue
index 67e11afe..6d2ef419 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -44,6 +44,7 @@ html, body {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     box-sizing: border-box;
+    width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;
diff --git a/pages/logging.vue b/pages/logging.vue
index 6f21f9b4..7d143787 100644
--- a/pages/logging.vue
+++ b/pages/logging.vue
@@ -6,12 +6,12 @@
                 <b-datepicker v-model="listDate" size="sm" class="date-div" offset="-35px" />
             </b-col>
         </b-row>
-        <b-card no-body>
+        <b-card no-body class="card-container">
             <b-tabs pills card vertical>
                 <b-tab title="Playout" active @click="getLog('ffplayout')">
                     <b-container class="log-container">
                         <!-- eslint-disable-next-line -->
-                        <pre v-if="currentLog" :inner-html.prop="currentLog | formatStr" class="log-content" />
+                        <perfect-scrollbar :options="scrollOP" class="scroll-container log-content" v-if="currentLog" :inner-html.prop="currentLog | formatStr" />
                     </b-container>
                 </b-tab>
                 <b-tab title="Decoder" @click="getLog('decoder')">
@@ -63,7 +63,10 @@ export default {
         return {
             logName: 'ffplayout',
             currentLog: null,
-            listDate: this.$dayjs().format('YYYY-MM-DD')
+            listDate: this.$dayjs().format('YYYY-MM-DD'),
+            scrollOP: {
+                wheelSpeed: 5
+            }
         }
     },
 
@@ -96,18 +99,45 @@ export default {
 </script>
 
 <style>
+.ps__thumb-x {
+    display: inherit !important;
+}
+
 .col-auto {
     width: 122px;
+    height: 100%;
+}
+
+.card-container {
+    height: calc(100% - 90px);
+    width: 100%;
+}
+
+.card-container > div, .tab-content > .active {
+    height: 100%;
+    width: 100%;
 }
 
 .tab-content {
-    max-width: calc(100% - 122px);
+    width: calc(100% - 122px);
+    height: 100%;
 }
 
 .log-container {
     background: #1d2024;
-    max-width: 95%;
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
     padding: 1em;
+    overflow: hidden
+}
+
+.scroll-container {
+    width: 100%;
+    height: 100%;
+    font-family: monospace;
+    font-size: 13px;
+    white-space: pre;
 }
 
 .log-content {
diff --git a/pages/media.vue b/pages/media.vue
index c73e9c4b..e9a5d290 100644
--- a/pages/media.vue
+++ b/pages/media.vue
@@ -31,7 +31,7 @@
                 <splitpanes class="browser-row default-theme pane-row">
                     <pane min-size="20" size="24">
                         <div class="browser-div">
-                            <perfect-scrollbar>
+                            <perfect-scrollbar :options="scrollOP">
                                 <b-list-group class="folder-list">
                                     <b-list-group-item
                                         v-for="folder in folderTree.tree[1]"
@@ -67,7 +67,7 @@
                             color="#ff9c36"
                         />
                         <div class="browser-div">
-                            <perfect-scrollbar>
+                            <perfect-scrollbar :options="scrollOP">
                                 <b-list-group class="files-list">
                                     <b-list-group-item
                                         v-for="file in folderTree.tree[2]"
@@ -289,7 +289,10 @@ export default {
             overallProgress: 0,
             currentProgress: 0,
             cancelTokenSource: this.$axios.CancelToken.source(),
-            lastPath: ''
+            lastPath: '',
+            scrollOP: {
+                suppressScrollX: true
+            }
         }
     },