From 4c532769ab489589eeb7ece02dbbc798d13c47f2 Mon Sep 17 00:00:00 2001 From: Scott Worley Date: Thu, 27 Jan 2022 15:27:19 -0800 Subject: [PATCH] Provide a visual indicator of the current view-state h/t https://css-tricks.com/body-border/ --- index.html | 11 ++++++++--- vopamoi.css | 23 +++++++++++++++++++++++ vopamoi.ts | 18 ++++++++++-------- 3 files changed, 41 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 8453007..2714223 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,15 @@ - + - -

+ +

diff --git a/vopamoi.css b/vopamoi.css index 8483797..31d439d 100644 --- a/vopamoi.css +++ b/vopamoi.css @@ -18,3 +18,26 @@ input.tag { .task { clear: right; } +#ui { + padding: 15px 10px; +} +body:before, body:after { + content: ""; + position: fixed; + background: var(--view-state-indicator-color); + left: 0; + right: 0; + height: 5px; +} +body:before { + top: 0; +} +body:after { + bottom: 0; +} +body { + margin: 0; + min-height: 100vh; + border-left: 5px solid var(--view-state-indicator-color); + border-right: 5px solid var(--view-state-indicator-color); +} diff --git a/vopamoi.ts b/vopamoi.ts index 31a4cdc..e99777c 100644 --- a/vopamoi.ts +++ b/vopamoi.ts @@ -397,10 +397,12 @@ function BrowserUI() { return ui.setState(createTimestamp, newState, oldState); }, - setView: function (state: string) { + setView: function (state: string, color: string) { const sheet = (document.getElementById("viewStyle") as HTMLStyleElement).sheet!; sheet.insertRule(`.task:not([data-state=${state}]) { display: none }`); - sheet.removeRule(1); + sheet.insertRule(`:root { --view-state-indicator-color: ${color}; }`); + sheet.removeRule(2); + sheet.removeRule(2); currentViewState = state; if (document.activeElement?.getAttribute("data-state") !== state) { this.firstVisibleTask()?.focus(); @@ -452,12 +454,12 @@ function handleKey(event: any) { if (event.key == "v") return (inputState = InputState.View); } else if (inputState === InputState.View) { inputState = InputState.Command; - if (event.key == "c") return browserUI.setView("cancelled"); - if (event.key == "d") return browserUI.setView("done"); - if (event.key == "q") return browserUI.setView("todo"); - if (event.key == "s") return browserUI.setView("someday-maybe"); - if (event.key == "w") return browserUI.setView("waiting"); - if (event.key == "x") return browserUI.setView("deleted"); + if (event.key == "c") return browserUI.setView("cancelled", "Red"); + if (event.key == "d") return browserUI.setView("done", "LawnGreen"); + if (event.key == "q") return browserUI.setView("todo", "White"); + if (event.key == "s") return browserUI.setView("someday-maybe", "DeepSkyBlue"); + if (event.key == "w") return browserUI.setView("waiting", "MediumOrchid"); + if (event.key == "x") return browserUI.setView("deleted", "Black"); } } } -- 2.44.1