Skip to content

Commit

Permalink
Adds JSON preview dark mode as well as dark mode persistence
Browse files Browse the repository at this point in the history 
Fixes other style inconsistencies
  • Loading branch information
@Hornet-Wing
Hornet-Wing committed Sep 16, 2021
1 parent 9799331 commit 0bc2100
Showing 1 changed file with 41 additions and 25 deletions.
66 changes: 41 additions & 25 deletions resources/views/client/dashboard.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,16 @@
::selection {
@apply bg-pink-500 bg-opacity-50;
}
.dark {
color-scheme: dark;
}
#app .hljs {
background: transparent;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/github.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.0/build/highlight.min.js" async></script>
<link id="hljs-theme" rel="stylesheet">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/highlight.min.js" async></script>
<script>
!function (a, b) {
"function" == typeof define && define.amd ? define([], b) : "undefined" != typeof module && module.exports ? module.exports = b() : a.ReconnectingWebSocket = b()
Expand Down Expand Up @@ -290,21 +296,26 @@
</h3>
<div class="mt-1 max-w-2xl text-sm leading-5 text-gray-500 flex items-center">
<div class="mr-4" v-if="currentLog.response">
<span
v-if="currentLog.response.status >= 200 && currentLog.response.status < 300"
class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-green-100 text-green-800">
@{ currentLog.response.status } - @{ currentLog.response.reason }
</span>
<span
v-if="currentLog.response.status >= 200 && currentLog.response.status < 300"
class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-green-100 text-green-800">
@{ currentLog.response.status } - @{ currentLog.response.reason }
</span>
<span
v-if="currentLog.response.status >= 300 && currentLog.response.status < 400"
class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-blue-100 text-blue-800">
@{ currentLog.response.status } - @{ currentLog.response.reason }
</span>
<span
v-if="currentLog.response.status >= 400 && currentLog.response.status < 500"
class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-yellow-100 text-yellow-800">
@{ currentLog.response.status } - @{ currentLog.response.reason }
</span>
@{ currentLog.response.status } - @{ currentLog.response.reason }
</span>
<span
v-if="currentLog.response.status >= 500"
class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-red-100 text-red-800">
@{ currentLog.response.status } - @{ currentLog.response.reason }
</span>
@{ currentLog.response.status } - @{ currentLog.response.reason }
</span>
</div>
<span class="text-xs text-gray-600 dark:text-gray-200">Received at: @{ currentLog.performed_at }</span>
</div>
Expand Down Expand Up @@ -351,7 +362,7 @@
</div>
<div v-for="(value, name) in currentLog.request.query"
:key="'query_' + name"
class="even:bg-gray-50 odd:bg-gray-50 dark:even:bg-gray-700 dark:odd:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
class="even:bg-gray-50 odd:bg-gray-100 dark:even:bg-gray-700 dark:odd:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium dark:text-gray-200 text-gray-700">
@{ name }
</dt>
Expand All @@ -361,7 +372,7 @@
</div>

<div class="px-4 py-5 border-b border-t dark:border-gray-700 border-gray-200 sm:px-6 flex justify-between" v-if="Object.keys(currentLog.request.post).length > 0">
<h3 class="text-lg leading-6 font-medium text-gray-900">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
Post Parameters
</h3>
<span class="inline-flex rounded-md shadow-sm ml-4">
Expand All @@ -374,11 +385,11 @@
</div>
<div v-for="parameter in currentLog.request.post"
:key="'post_' + parameter.name"
class="even:bg-gray-100 bg-gray-50 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-700">
class="even:bg-gray-50 bg-gray-100 dark:even:bg-gray-700 dark:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium dark:text-gray-200 text-gray-700">
@{ parameter.name }
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2 break-all">
<dd class="mt-1 text-sm leading-5 dark:text-gray-200 text-gray-900 sm:mt-0 sm:col-span-2 break-all">
<span
v-if="parameter.is_file">File: @{ parameter.filename } (@{ parameter.mime_type })</span>
<span v-else>@{ parameter.value }</span>
Expand All @@ -399,7 +410,7 @@
</div>
<div v-for="(value, header) in currentLog.request.headers"
:key="header"
class="even:bg-gray-50 bg-gray-50 dark:even:bg-gray-700 dark:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
class="even:bg-gray-50 bg-gray-100 dark:even:bg-gray-700 dark:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium dark:text-gray-200 text-gray-700">
@{ header }
</dt>
Expand All @@ -426,7 +437,7 @@
</div>
<div v-for="(value, header) in currentLog.response.headers"
:key="header"
class="even:bg-gray-50 odd:bg-gray-50 dark:even:bg-gray-700 dark:odd:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
class="even:bg-gray-50 odd:bg-gray-100 dark:even:bg-gray-700 dark:odd:bg-gray-800 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium dark:text-gray-200 text-gray-700">
@{ header }
</dt>
Expand All @@ -442,7 +453,7 @@
</div>
<div v-for="(value, key) in currentLog.request.additional_data"
:key="'debug'+key"
class="even:bg-gray-50 odd:bg-gray-50 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
class="even:bg-gray-50 odd:bg-gray-100 px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-700">
@{ key }
</dt>
Expand All @@ -459,13 +470,13 @@
<a href="#"
@click.prevent="setActiveTab('raw')"
:class="{'outline-none text-white bg-pink-500': activeTab === 'raw'}"
class="px-3 py-2 font-medium text-sm leading-5 rounded-md text-gray-500 hover:text-gray-700 dark:hover:text-gray-100">
class="px-3 py-2 font-medium text-sm leading-5 rounded-md text-gray-500 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300">
Raw
</a>
<a href="#"
@click.prevent="setActiveTab('preview')"
:class="{'outline-none text-white bg-pink-500': activeTab === 'preview'}"
class="ml-4 px-3 py-2 font-medium text-sm leading-5 rounded-md text-gray-500 hover:text-gray-100 focus:outline-nonedark:hover:text-gray-100">
class="ml-4 px-3 py-2 font-medium text-sm leading-5 rounded-md text-gray-500 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300">
Preview
</a>
</nav>
Expand All @@ -476,7 +487,7 @@
</div>
<div v-if="activeTab === 'preview'">
<div v-if="responseIsJson()">
<pre><span id="jsonResponseBody" class="json"></span></pre>
<pre class="p-6 overflow-x-auto"><span id="jsonResponseBody" class="json"></span></pre>
</div>
<iframe v-else :srcdoc="currentLog.response.body" style="height: 500px;" class="w-full h-full"></iframe>
</div>
Expand Down Expand Up @@ -506,16 +517,21 @@
maxLogs: {{ max_logs }},
highlightNextLog: false,
followLogs: true,
useDarkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
useDarkMode: localStorage.theme === 'dark' || window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
},
watch: {
useDarkMode: {
handler: function(value) {
const themeUrl = '//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles';
if (value) {
document.getElementById('hljs-theme').href = `${themeUrl}/github-dark.min.css`;
document.querySelector('html').classList.add('dark')
localStorage.theme = 'dark';
} else {
document.getElementById('hljs-theme').href = `${themeUrl}/github.min.css`;
document.querySelector('html').classList.remove('dark')
localStorage.theme = 'light';
}
},
immediate: true,
Expand Down Expand Up @@ -553,8 +569,8 @@
formatJsonResponse: function () {
if (this.view === 'response' && this.activeTab === 'preview' && this.responseIsJson()) {
const target = document.getElementById('jsonResponseBody');
target.innerText = JSON.stringify(JSON.parse(this.currentLog.response.body), null, 2)
hljs.highlightBlock(target);
target.textContent = JSON.stringify(JSON.parse(this.currentLog.response.body), null, 2)
hljs.highlightElement(target);
}
},
responseIsJson: function() {
Expand Down

0 comments on commit 0bc2100

Please sign in to comment.