<head>
<script src="vopamoi.js" defer="true"></script>
<link rel="stylesheet" href="vopamoi.css"/>
- <style id="viewStyle">.task:not([data-state=todo]) { display: none }</style>
+ <style id="viewStyle">
+ .task:not([data-state=todo]) { display: none }
+ :root { --view-state-indicator-color: white; }
+ </style>
</head>
<body onload="browserInit();">
- <input id="taskName" name="taskName">
- <div id="tasks"></div>
+ <div id="ui">
+ <input id="taskName" name="taskName">
+ <div id="tasks"></div>
+ </div>
</body>
</html>
.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);
+}
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();
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");
}
}
}