Skip to content

Commit 2bcbd4f

Browse files
arukompasarukompas
authored
Merge pull request #209 from opcodesio/keyboard-shortcuts
Global keyboard shortcuts
2 parents 0ad6bff + d70bfab commit 2bcbd4f

22 files changed

+366
-152
lines changed

‎composer.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "opcodesio/log-viewer",
3-
"version": "v2.2.2",
3+
"version": "v2.3.0",
44
"description": "Fast and easy-to-use log viewer for your Laravel application",
55
"keywords": [
66
"arukompas",

‎public/app.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/app.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/mix-manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"/app.js": "/app.js?id=0a86201e9df0581ee79ae5c9d8b31d46",
3-
"/app.css": "/app.css?id=635adfebadcc6643a1986f894f844f14",
2+
"/app.js": "/app.js?id=5f2e3e9280cb7939d9722d68f7f6a31d",
3+
"/app.css": "/app.css?id=636999bbc37d8915793602de59407238",
44
"/img/log-viewer-128.png": "/img/log-viewer-128.png?id=d576c6d2e16074d3f064e60fe4f35166",
55
"/img/log-viewer-32.png": "/img/log-viewer-32.png?id=f8ec67d10f996aa8baf00df3b61eea6d",
66
"/img/log-viewer-64.png": "/img/log-viewer-64.png?id=8902d596fc883ca9eb8105bb683568c6"

‎resources/css/app.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -628,3 +628,11 @@ button.button:hover, a.button:hover {
628628
.select:focus {
629629
@apply ring-2 ring-brand-500 dark:ring-brand-700;
630630
}
631+
632+
.keyboard-shortcut {
633+
@apply text-sm flex items-center justify-start mb-3 w-full text-gray-600 dark:text-gray-400;
634+
635+
.shortcut {
636+
@apply font-mono text-base inline-flex w-6 h-6 mr-2 items-center justify-center rounded border border-gray-400 dark:border-gray-600 ring-1 ring-gray-100 dark:ring-gray-900;
637+
}
638+
}

‎resources/js/components/FileList.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,13 @@
1818
</span>
1919
</h1>
2020

21-
<a v-if="LogViewer.back_to_system_url" :href="LogViewer.back_to_system_url"
22-
class="rounded inline-flex items-center text-sm text-gray-500 dark:text-gray-400 hover:text-brand-800 dark:hover:text-brand-600 focus:outline-none focus:ring-2 focus:ring-brand-500 dark:focus:ring-brand-700 mt-0">
23-
<ArrowLeftIcon class="h-3 w-3 mr-1.5" />
24-
{{ LogViewer.back_to_system_label || `Back to ${LogViewer.app_name}` }}
25-
</a>
21+
<div v-if="LogViewer.back_to_system_url">
22+
<a :href="LogViewer.back_to_system_url"
23+
class="rounded shrink inline-flex items-center text-sm text-gray-500 dark:text-gray-400 hover:text-brand-800 dark:hover:text-brand-600 focus:outline-none focus:ring-2 focus:ring-brand-500 dark:focus:ring-brand-700 mt-0">
24+
<ArrowLeftIcon class="h-3 w-3 mr-1.5" />
25+
{{ LogViewer.back_to_system_label || `Back to ${LogViewer.app_name}` }}
26+
</a>
27+
</div>
2628
</div>
2729

2830
<div v-if="LogViewer.assets_outdated" class="bg-yellow-100 dark:bg-yellow-900 bg-opacity-75 dark:bg-opacity-40 border border-yellow-300 dark:border-yellow-800 rounded-md px-2 py-1 mt-2 text-xs leading-5 text-yellow-700 dark:text-yellow-400">
@@ -212,7 +214,7 @@ import FileListItem from './FileListItem.vue';
212214
import SpinnerIcon from './SpinnerIcon.vue';
213215
import SiteSettingsDropdown from './SiteSettingsDropdown.vue';
214216
import HostSelector from './HostSelector.vue';
215-
import { handleKeyboardFileNavigation, handleKeyboardFileSettingsNavigation } from '../keyboardNavigation.js';
217+
import { handleKeyboardFileNavigation, handleKeyboardFileSettingsNavigation } from '../keyboardNavigation';
216218
217219
const router = useRouter();
218220
const route = useRoute();

‎resources/js/components/FileListItem.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ import { useFileStore } from '../stores/files.js';
8383
import SpinnerIcon from './SpinnerIcon.vue';
8484
import { replaceQuery, useDropdownDirection } from '../helpers.js';
8585
import { useRouter } from 'vue-router';
86-
import { handleKeyboardFileNavigation, handleKeyboardFileSettingsNavigation } from '../keyboardNavigation.js';
86+
import { handleKeyboardFileNavigation, handleKeyboardFileSettingsNavigation } from '../keyboardNavigation';
8787
8888
const props = defineProps({
8989
logFile: {

‎resources/js/components/HostSelector.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<Listbox as="div" v-model="hostStore.selectedHostIdentifier">
3-
<ListboxLabel class="ml-1 block text-sm text-gray-500 dark:text-gray-400">Select server</ListboxLabel>
3+
<ListboxLabel class="ml-1 block text-sm text-gray-500 dark:text-gray-400">Select host</ListboxLabel>
44

55
<div class="relative mt-1">
6-
<ListboxButton class="cursor-pointer relative text-gray-800 dark:text-gray-200 w-full cursor-default rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-2 pl-4 pr-10 text-left hover:border-brand-600 hover:dark:border-brand-800 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 text-sm">
6+
<ListboxButton id="hosts-toggle-button" class="cursor-pointer relative text-gray-800 dark:text-gray-200 w-full cursor-default rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-2 pl-4 pr-10 text-left hover:border-brand-600 hover:dark:border-brand-800 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 text-sm">
77
<span class="block truncate">{{ hostStore.selectedHost?.name || 'Please select a server' }}</span>
88
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
99
<ChevronDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />

‎resources/js/components/KeyboardShortcutsOverlay.vue‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<TransitionRoot as="template" :show="logViewerStore.helpSlideOverOpen">
3+
<Dialog as="div" class="relative z-20" @close="logViewerStore.helpSlideOverOpen = false">
4+
<div class="fixed inset-0" />
5+
6+
<div class="fixed inset-0 overflow-hidden">
7+
<div class="absolute inset-0 overflow-hidden">
8+
<div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
9+
<TransitionChild
10+
as="template"
11+
enter="transform transition ease-in-out duration-200 sm:duration-300"
12+
enter-from="translate-x-full"
13+
enter-to="translate-x-0"
14+
leave="transform transition ease-in-out duration-200 sm:duration-300"
15+
leave-from="translate-x-0"
16+
leave-to="translate-x-full"
17+
>
18+
<DialogPanel class="pointer-events-auto w-screen max-w-md">
19+
<div class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl">
20+
<div class="px-4 sm:px-6">
21+
<div class="flex items-start justify-between">
22+
<DialogTitle class="text-base font-semibold leading-6 text-gray-900">Keyboard Shortcuts</DialogTitle>
23+
<div class="ml-3 flex h-7 items-center">
24+
<button type="button" class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2" @click="logViewerStore.helpSlideOverOpen = false">
25+
<span class="sr-only">Close panel</span>
26+
<XMarkIcon class="h-6 w-6" aria-hidden="true" />
27+
</button>
28+
</div>
29+
</div>
30+
</div>
31+
<div class="relative mt-6 flex-1 px-4 sm:px-6">
32+
<div class="keyboard-shortcut">
33+
<span class="shortcut">{{ KeyShortcuts.Hosts }}</span>
34+
<span class="description">Select a host</span>
35+
</div>
36+
<div class="keyboard-shortcut">
37+
<span class="shortcut">{{ KeyShortcuts.Files }}</span>
38+
<span class="description">Jump to file selection</span>
39+
</div>
40+
<div class="keyboard-shortcut">
41+
<span class="shortcut">{{ KeyShortcuts.Logs }}</span>
42+
<span class="description">Jump to logs</span>
43+
</div>
44+
<div class="keyboard-shortcut">
45+
<span class="shortcut">{{ KeyShortcuts.Severity }}</span>
46+
<span class="description">Severity selection</span>
47+
</div>
48+
<div class="keyboard-shortcut">
49+
<span class="shortcut">{{ KeyShortcuts.Settings }}</span>
50+
<span class="description">Settings</span>
51+
</div>
52+
<div class="keyboard-shortcut">
53+
<span class="shortcut">{{ KeyShortcuts.Search }}</span>
54+
<span class="description">Search</span>
55+
</div>
56+
<div class="keyboard-shortcut">
57+
<span class="shortcut">{{ KeyShortcuts.Refresh }}</span>
58+
<span class="description">Refresh logs</span>
59+
</div>
60+
<div class="keyboard-shortcut">
61+
<span class="shortcut">{{ KeyShortcuts.ShortcutHelp }}</span>
62+
<span class="description">Keyboard shortcuts help</span>
63+
</div>
64+
</div>
65+
</div>
66+
</DialogPanel>
67+
</TransitionChild>
68+
</div>
69+
</div>
70+
</div>
71+
</Dialog>
72+
</TransitionRoot>
73+
</template>
74+
75+
<script setup>
76+
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
77+
import { XMarkIcon } from '@heroicons/vue/24/outline'
78+
import { useLogViewerStore } from '../stores/logViewer.js';
79+
import { KeyShortcuts } from '../keyboardNavigation/shared.js';
80+
81+
const logViewerStore = useLogViewerStore();
82+
</script>

‎resources/js/components/LevelButtons.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="flex items-center">
33
<Menu as="div" class="mr-5 relative log-levels-selector">
44

5-
<MenuButton as="button" class="dropdown-toggle badge none" :class="severityStore.levelsSelected.length > 0 ? 'active' : ''">
5+
<MenuButton as="button" id="severity-dropdown-toggle" class="dropdown-toggle badge none" :class="severityStore.levelsSelected.length > 0 ? 'active' : ''">
66
<template v-if="severityStore.levelsSelected.length > 2">
77
<span class="opacity-90 mr-1">{{ severityStore.totalResultsSelected.toLocaleString() + (logViewerStore.hasMoreResults ? '+' : '') }} entries in</span>
88
<strong class="font-semibold">{{ severityStore.levelsSelected[0].level_name }} + {{ severityStore.levelsSelected.length - 1 }} more</strong>

0 commit comments

Comments
 (0)