use a different pretty JSON library

laravel · Nov 22, 2018 · fef7099 · fef7099
1 parent 85c28ad
commit fef7099
Show file tree

Hide file tree

Showing 14 changed files with 109 additions and 134 deletions.
diff --git a/package.json b/package.json
@@ -22,10 +22,8 @@
         "popper.js": "^1.12",
         "sql-formatter": "^2.3.1",
         "vue": "^2.5.7",
-        "vue-json-tree-view": "^2.1.4",
-        "vue-router": "^3.0.1"
-    },
-    "dependencies": {
-        "md5": "^2.2.1"
+        "vue-router": "^3.0.1",
+        "md5": "^2.2.1",
+        "vue-json-pretty": "^1.4.1"
     }
 }
diff --git a/public/app-dark.css b/public/app-dark.css
@@ -1,29 +1,31 @@
-.tree-view-wrapper .tree-view-item {
-  margin-left: 30px;
+.vjs__tree .vjs__tree__content {
+  border-left: 1px dotted rgba(204, 204, 204, 0.28) !important;
 }
 
-.tree-view-wrapper .tree-view-item-key {
-  color: #8bd72f;
+.vjs__tree .vjs__tree__node {
+  cursor: pointer;
 }
 
-.tree-view-wrapper .tree-view-item-key-with-chevron[data-v-efc5bae2]::before {
-  color: #fff !important;
+.vjs__tree .vjs__tree__node:hover {
+  color: #20a0ff;
 }
 
-.tree-view-wrapper .tree-view-item-value-string {
-  color: #DACB4D !important;
+.vjs__tree .vjs-checkbox {
+  position: absolute;
+  left: -30px;
 }
 
-.tree-view-wrapper .tree-view-item-value-null {
+.vjs__tree .vjs__value__null {
   color: #A291F5 !important;
 }
 
-.tree-view-wrapper .tree-view-item-value-boolean {
+.vjs__tree .vjs__value__number,
+.vjs__tree .vjs__value__boolean {
   color: #A291F5 !important;
 }
 
-.tree-view-wrapper .tree-view-item-value-number {
-  color: #A291F5 !important;
+.vjs__tree .vjs__value__string {
+  color: #DACB4D !important;
 }
 
 .hljs-keyword,
@@ -2307,6 +2309,11 @@ pre code {
   opacity: 1;
 }
 
+.form-control:-ms-input-placeholder {
+  color: #6c757d;
+  opacity: 1;
+}
+
 .form-control::-ms-input-placeholder {
   color: #6c757d;
   opacity: 1;

diff --git a/public/app.css b/public/app.css
@@ -1,29 +1,31 @@
-.tree-view-wrapper .tree-view-item {
-  margin-left: 30px;
+.vjs__tree .vjs__tree__content {
+  border-left: 1px dotted rgba(204, 204, 204, 0.28) !important;
 }
 
-.tree-view-wrapper .tree-view-item-key {
-  color: #8bd72f;
+.vjs__tree .vjs__tree__node {
+  cursor: pointer;
 }
 
-.tree-view-wrapper .tree-view-item-key-with-chevron[data-v-efc5bae2]::before {
-  color: #fff !important;
+.vjs__tree .vjs__tree__node:hover {
+  color: #20a0ff;
 }
 
-.tree-view-wrapper .tree-view-item-value-string {
-  color: #DACB4D !important;
+.vjs__tree .vjs-checkbox {
+  position: absolute;
+  left: -30px;
 }
 
-.tree-view-wrapper .tree-view-item-value-null {
+.vjs__tree .vjs__value__null {
   color: #A291F5 !important;
 }
 
-.tree-view-wrapper .tree-view-item-value-boolean {
+.vjs__tree .vjs__value__number,
+.vjs__tree .vjs__value__boolean {
   color: #A291F5 !important;
 }
 
-.tree-view-wrapper .tree-view-item-value-number {
-  color: #A291F5 !important;
+.vjs__tree .vjs__value__string {
+  color: #DACB4D !important;
 }
 
 .hljs-keyword,
@@ -2307,6 +2309,11 @@ pre code {
   opacity: 1;
 }
 
+.form-control:-ms-input-placeholder {
+  color: #6c757d;
+  opacity: 1;
+}
+
 .form-control::-ms-input-placeholder {
   color: #6c757d;
   opacity: 1;

diff --git a/public/app.js b/public/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=cdb69d8b0c9f88e86c10",
-    "/app.css": "/app.css?id=734c985d83dddc3fb6a5",
-    "/app-dark.css": "/app-dark.css?id=8ea36ebc51c38b5c35c9"
+    "/app.js": "/app.js?id=cbaa84f183262df2778e",
+    "/app.css": "/app.css?id=c097a04c12c993b0b389",
+    "/app-dark.css": "/app-dark.css?id=1afefefbd103a662cdcf"
 }
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1,9 +1,9 @@
-import Vue from 'vue'
-import Base from './base'
+import Vue from 'vue';
+import Base from './base';
 import axios from 'axios';
-import Routes from './routes'
-import VueRouter from 'vue-router'
-import TreeView from 'vue-json-tree-view'
+import Routes from './routes';
+import VueRouter from 'vue-router';
+import VueJsonPretty from 'vue-json-pretty';
 import moment from 'moment-timezone';
 
 require('bootstrap');
@@ -15,7 +15,6 @@ if (token) {
 }
 
 Vue.use(VueRouter);
-Vue.use(TreeView);
 
 window.Popper = require('popper.js').default;
 
@@ -27,6 +26,7 @@ const router = new VueRouter({
     base: '/' + window.Telescope.path + '/',
 });
 
+Vue.component('vue-json-pretty', VueJsonPretty);
 Vue.component('related-entries', require('./components/RelatedEntries.vue'));
 Vue.component('index-screen', require('./components/IndexScreen.vue'));
 Vue.component('preview-screen', require('./components/PreviewScreen.vue'));

diff --git a/resources/js/screens/commands/preview.vue b/resources/js/screens/commands/preview.vue
@@ -42,10 +42,10 @@
                 </ul>
                 <div>
                     <div class="code-bg p-4 mb-0 text-white" v-show="currentTab=='arguments'">
-                        <tree-view :data="slotProps.entry.content.arguments" :options="{maxDepth: 3}"></tree-view>
+                        <vue-json-pretty :data="slotProps.entry.content.arguments"></vue-json-pretty>
                     </div>
                     <div class="code-bg p-4 mb-0 text-white" v-show="currentTab=='options'">
-                        <tree-view :data="slotProps.entry.content.options" :options="{maxDepth: 3}"></tree-view>
+                        <vue-json-pretty :data="slotProps.entry.content.options"></vue-json-pretty>
                     </div>
                 </div>
             </div>

diff --git a/resources/js/screens/events/preview.vue b/resources/js/screens/events/preview.vue
@@ -38,7 +38,7 @@
                 <div>
                     <!-- Event Payload -->
                     <div class="code-bg p-4 mb-0 text-white" v-show="currentTab=='data'">
-                        <tree-view :data="slotProps.entry.content.payload" :options="{maxDepth: 3}"></tree-view>
+                        <vue-json-pretty :data="slotProps.entry.content.payload"></vue-json-pretty>
                     </div>
 
                     <!-- Event Listeners -->

diff --git a/resources/js/screens/jobs/preview.vue b/resources/js/screens/jobs/preview.vue
@@ -91,7 +91,7 @@
                 </ul>
                 <div>
                     <div class="code-bg p-4 mb-0 text-white" v-show="currentTab=='data'">
-                        <tree-view :data="slotProps.entry.content.data" :options="{maxDepth: 3}"></tree-view>
+                        <vue-json-pretty :data="slotProps.entry.content.data"></vue-json-pretty>
                     </div>
                     <pre class="code-bg p-4 mb-0 text-white" v-if="slotProps.entry.content.exception" v-show="currentTab=='exception'">{{slotProps.entry.content.exception.message}}</pre>
                     <stack-trace :trace="slotProps.entry.content.exception.trace" v-if="slotProps.entry.content.exception" v-show="currentTab=='trace'"></stack-trace>

diff --git a/resources/js/screens/logs/preview.vue b/resources/js/screens/logs/preview.vue
@@ -52,7 +52,7 @@
 
                     <!-- Context -->
                     <div class="code-bg p-4 mb-0 text-white" v-show="currentTab=='context'">
-                        <tree-view :data="slotProps.entry.content.context" :options="{maxDepth: 3}"></tree-view>
+                        <vue-json-pretty :data="slotProps.entry.content.context"></vue-json-pretty>
                     </div>
                 </div>
             </div>

diff --git a/resources/js/screens/models/preview.vue b/resources/js/screens/models/preview.vue
@@ -42,7 +42,7 @@
                 <div class="card-header"><h5>Changes</h5></div>
 
                 <div class="code-bg p-4 mb-0 text-white">
-                    <tree-view :data="slotProps.entry.content.changes" :options="{maxDepth: 3}"></tree-view>
+                    <vue-json-pretty :data="slotProps.entry.content.changes"></vue-json-pretty>
                 </div>
             </div>
         </div>

diff --git a/resources/js/screens/requests/preview.vue b/resources/js/screens/requests/preview.vue
@@ -75,10 +75,10 @@
                     </li>
                 </ul>
                 <div class="code-bg p-4 mb-0 text-white">
-                    <tree-view :data="slotProps.entry.content.payload" :options="{maxDepth: 3}" v-if="currentTab=='payload'"></tree-view>
-                    <tree-view :data="slotProps.entry.content.headers" :options="{maxDepth: 3}" v-if="currentTab=='headers'"></tree-view>
-                    <tree-view :data="slotProps.entry.content.session" :options="{maxDepth: 3}" v-if="currentTab=='session'"></tree-view>
-                    <tree-view :data="slotProps.entry.content.response" :options="{maxDepth: 3}" v-if="currentTab=='response'"></tree-view>
+                    <vue-json-pretty :data="slotProps.entry.content.payload" v-if="currentTab=='payload'"></vue-json-pretty>
+                    <vue-json-pretty :data="slotProps.entry.content.headers" v-if="currentTab=='headers'"></vue-json-pretty>
+                    <vue-json-pretty :data="slotProps.entry.content.session" v-if="currentTab=='session'"></vue-json-pretty>
+                    <vue-json-pretty :data="slotProps.entry.content.response" v-if="currentTab=='response'"></vue-json-pretty>
                 </div>
             </div>
 

diff --git a/resources/sass/syntaxhighlight.scss b/resources/sass/syntaxhighlight.scss
@@ -1,30 +1,26 @@
-.tree-view-wrapper {
-  .tree-view-item{
-    margin-left: 30px;
+.vjs__tree {
+  .vjs__tree__content {
+    border-left: 1px dotted rgba(204, 204, 204, 0.28) !important;
   }
-
-  .tree-view-item-key {
-    color: #8bd72f;
+  .vjs__tree__node {
+    cursor: pointer;
+    &:hover {
+      color: #20a0ff;
+    }
   }
-
-  .tree-view-item-key-with-chevron[data-v-efc5bae2]::before {
-    color: #fff !important;
+  .vjs-checkbox {
+    position: absolute;
+    left: -30px;
   }
-
-  .tree-view-item-value-string {
-    color: #DACB4D !important;
+  .vjs__value__null {
+    color: #A291F5 !important;;
   }
-
-  .tree-view-item-value-null {
-    color: #A291F5 !important;
+  .vjs__value__number,
+  .vjs__value__boolean {
+    color: #A291F5 !important;;
   }
-
-  .tree-view-item-value-boolean {
-    color: #A291F5 !important;
-  }
-
-  .tree-view-item-value-number{
-    color: #A291F5 !important;
+  .vjs__value__string {
+    color: #DACB4D !important;
   }
 }
 
@@ -41,6 +37,6 @@
   color: #DACB4D;
 }
 
-.hljs-number, .hljs-literal{
+.hljs-number, .hljs-literal {
   color: #A291F5 !important;
 }
diff --git a/yarn.lock b/yarn.lock
@@ -7411,12 +7411,9 @@ vue-hot-reload-api@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"
 
-vue-json-tree-view@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/vue-json-tree-view/-/vue-json-tree-view-2.1.4.tgz#b6f8ae2ba2eec4eec5b6f53b90fa187054cad79b"
-  dependencies:
-    lodash "^4.17.4"
-    vue "^2.5.16"
+vue-json-pretty@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/vue-json-pretty/-/vue-json-pretty-1.4.1.tgz#11599cc8f0beaaf2ba1653010535a5b6071867f9"
 
 vue-loader@^13.7.1:
   version "13.7.2"
@@ -7458,7 +7455,7 @@ vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue@^2.5.16, vue@^2.5.7:
+vue@^2.5.7:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"