diff options
| -rw-r--r-- | Pages/TagDefinitions.razor | 2 | ||||
| -rw-r--r-- | Pages/ViewMedia.razor | 33 | ||||
| -rw-r--r-- | wwwroot/js/keyboard.js | 35 | ||||
| -rw-r--r-- | wwwroot/styles/global.css | 3 |
4 files changed, 52 insertions, 21 deletions
diff --git a/Pages/TagDefinitions.razor b/Pages/TagDefinitions.razor index 95253b7..1a29b40 100644 --- a/Pages/TagDefinitions.razor +++ b/Pages/TagDefinitions.razor @@ -8,7 +8,7 @@ <div style="padding:var(--size-default-gap);"> <ButtonContainer> - <button @onclick=PromptTagCreate>Create</button> + <button @onclick=PromptTagCreate data-keyboard-shortcut="c"><u>C</u>reate</button> </ButtonContainer> <TabContainer @ref=tabContainer> diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor index e8914a0..7823c75 100644 --- a/Pages/ViewMedia.razor +++ b/Pages/ViewMedia.razor @@ -4,7 +4,6 @@ @inject IDbContextFactory<HBContext> dbFactory @inject ITagService tagService @inject IMediaService mediaService -@implements IDisposable <PageTitle>@title</PageTitle> @@ -30,7 +29,7 @@ <table id="edit-metadata"> <tr> <td>Title:</td> - <td><input type="text" @bind=shortDescription/></td> + <td><input type="text" @bind=shortDescription @ref=shortDescriptionInput/></td> </tr> <tr> <td>Description:</td> @@ -83,19 +82,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"><u>D</u>elete</button> + <button @onclick=@(() => tagDialog.Show()) class="secondary" data-keyboard-shortcut="t">Add <u>T</u>ag</button> + <button @onclick=@(() => ocrDialog.Show()) class="secondary" data-keyboard-shortcut="o">View <u>O</u>CR</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"><u>E</u>dit Info</button> } @if(media.IsIngest) { - <button @onclick=@(() => SetIngest(false))>Mark Tagging Complete</button> + <button @onclick=@(() => SetIngest(false)) data-keyboard-shortcut="c">Mark Tagging <u>C</u>omplete</button> } else { - <button class="secondary" @onclick=@(() => SetIngest(true))>Mark Tagging Incomplete</button> + <button class="secondary" @onclick=@(() => SetIngest(true)) data-keyboard-shortcut="c">Mark Tagging In<u>c</u>omplete</button> } </ButtonContainer> </div> @@ -143,14 +142,18 @@ private Dialog ocrDialog; private TagSelectDialog tagDialog; - private HBContext db; + private ElementReference shortDescriptionInput; - protected override void OnInitialized() { - db = dbFactory.CreateDbContext(); + protected override void OnInitialized() => LoadMedia(); + + protected override async void OnAfterRender(bool firstRender) { + if(infoEditMode) + await shortDescriptionInput.FocusAsync(); } private void LoadMedia() { + using var db = dbFactory.CreateDbContext(); media = db.Media .Include(m => m.Tags) .ThenInclude(t => t.TagDefinition) @@ -170,7 +173,6 @@ private async void SetIngest(bool ingest) { mediaService.SetIngest(media, ingest); - db.Entry(media).State = EntityState.Detached; LoadMedia(); if(ingest) @@ -191,11 +193,8 @@ private void ApplyInfoEdit(bool apply) { if(apply) { - if(string.IsNullOrEmpty(shortDescription)) shortDescription = null; - if(string.IsNullOrEmpty(longDescription)) longDescription = null; - media.ShortDescription = shortDescription; - media.LongDescription = longDescription; mediaService.SetDescription(media, shortDescription, longDescription); + LoadMedia(); } infoEditMode = false; @@ -205,6 +204,4 @@ mediaService.Delete(media); await jsRuntime.InvokeVoidAsync("history.back"); } - - public void Dispose() => db.Dispose(); } diff --git a/wwwroot/js/keyboard.js b/wwwroot/js/keyboard.js index 9d06b75..e3854f9 100644 --- a/wwwroot/js/keyboard.js +++ b/wwwroot/js/keyboard.js @@ -1,5 +1,25 @@ 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; + } + + var tag = document.activeElement.tagName; + if((tag == 'INPUT' || (tag == 'TEXTAREA' && e.ctrlKey)) && e.key == 'Enter') { + var element = document.activeElement; + while(element = element.parentElement) { + if(element.tagName == 'FORM') { + element.submit(); + e.preventDefault(); + return; + } + } + } + + if((tag == 'INPUT' || tag == 'TEXTAREA') && e.key != 'Escape') + return; var element = Array.from(document.querySelectorAll('div.dialog')) .filter(e => e.style.visibility == 'visible') @@ -12,6 +32,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; |