diff options
| -rw-r--r-- | Pages/ViewMedia.razor | 12 | ||||
| -rw-r--r-- | wwwroot/js/keyboard.js | 23 | ||||
| -rw-r--r-- | wwwroot/styles/global.css | 3 |
3 files changed, 30 insertions, 8 deletions
diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor index e8914a0..26b7988 100644 --- a/Pages/ViewMedia.razor +++ b/Pages/ViewMedia.razor @@ -83,19 +83,19 @@ </div> <div id="button-container"> <ButtonContainer> - <button @onclick=@(() => deleteDialog.Show()) class="warning">Delete</button> - <button @onclick=@(() => tagDialog.Show()) class="secondary">Add Tag</button> - <button @onclick=@(() => ocrDialog.Show()) class="secondary">View OCR</button> + <button @onclick=@(() => deleteDialog.Show()) class="warning" data-keyboard-shortcut="d">Delete</button> + <button @onclick=@(() => tagDialog.Show()) class="secondary" data-keyboard-shortcut="t">Add Tag</button> + <button @onclick=@(() => ocrDialog.Show()) class="secondary" data-keyboard-shortcut="o">View OCR</button> @if(infoEditMode) { <button @onclick=@(() => ApplyInfoEdit(false)) class="secondary">Cancel</button> <button @onclick=@(() => ApplyInfoEdit(true))>Apply</button> } else { - <button @onclick=@(() => InfoEditMode = true) class="secondary">Edit Info</button> + <button @onclick=@(() => InfoEditMode = true) class="secondary" data-keyboard-shortcut="e">Edit Info</button> } @if(media.IsIngest) { - <button @onclick=@(() => SetIngest(false))>Mark Tagging Complete</button> + <button @onclick=@(() => SetIngest(false)) data-keyboard-shortcut="c">Mark Tagging Complete</button> } else { - <button class="secondary" @onclick=@(() => SetIngest(true))>Mark Tagging Incomplete</button> + <button class="secondary" @onclick=@(() => SetIngest(true)) data-keyboard-shortcut="c">Mark Tagging Incomplete</button> } </ButtonContainer> </div> diff --git a/wwwroot/js/keyboard.js b/wwwroot/js/keyboard.js index 9d06b75..5669637 100644 --- a/wwwroot/js/keyboard.js +++ b/wwwroot/js/keyboard.js @@ -1,5 +1,13 @@ async function keyDownHandler(e) { - e.preventDefault(); + function isDialogChild(e) { + while (e = e.parentElement) + if (e.tagName == 'DIV' && e.classList.contains('dialog')) + return true; + return false; + } + + if(document.activeElement.tagName == 'INPUT') + return; var element = Array.from(document.querySelectorAll('div.dialog')) .filter(e => e.style.visibility == 'visible') @@ -12,6 +20,19 @@ async function keyDownHandler(e) { .find(d => d.element == element) .dialogObject .invokeMethodAsync('KeyHandler', e.key); + e.preventDefault(); + return; + } + + var button = Array.from(document.getElementsByTagName('button')) + .filter(b => typeof(b.dataset.keyboardShortcut) == 'string') + .filter(b => !isDialogChild(b)) + .find(b => b.dataset.keyboardShortcut == e.key); + + if(button) { + button.click(); + e.preventDefault(); + return; } } diff --git a/wwwroot/styles/global.css b/wwwroot/styles/global.css index 6c1df53..ebcda47 100644 --- a/wwwroot/styles/global.css +++ b/wwwroot/styles/global.css @@ -75,11 +75,12 @@ code { } button, input[type=submit] { - color: white; background: var(--col-button-pri); border-radius: 10px; border: none; box-sizing: border-box; + color: white; + cursor: pointer; height: 30px; margin: 10px 5px 0 5px; padding: 0 9px 0 9px; |