]> git.scottworley.com Git - vopamoi/commitdiff
projects / vopamoi / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 73ffc3d)
Provide a visual indicator of the current view-state
authorScott Worley <scottworley@scottworley.com>
Thu, 27 Jan 2022 23:27:19 +0000 (15:27 -0800)
committerScott Worley <scottworley@scottworley.com>
Thu, 27 Jan 2022 23:27:19 +0000 (15:27 -0800)
h/t https://css-tricks.com/body-border/

index.html patch | blob | blame | history
vopamoi.css patch | blob | blame | history
vopamoi.ts patch | blob | blame | history

diff --git a/index.html b/index.html
index 845300711280e786ea81280896edbb2f2a321406..2714223581e82150203234890861605c37cb9e70 100644 (file)
--- a/index.html
+++ b/index.html
@@ -3,10 +3,15 @@
   <head>
     <script src="vopamoi.js" defer="true"></script>
     <link rel="stylesheet" href="vopamoi.css"/>
   <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();">
   </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>
   </body>
 </html>
diff --git a/vopamoi.css b/vopamoi.css
index 8483797b979abab1b033359b25073761129fc324..31d439da1a2cb138ecd08b01e7f49bb6d8eff584 100644 (file)
--- a/vopamoi.css
+++ b/vopamoi.css
@@ -18,3 +18,26 @@ input.tag {
 .task {
   clear: right;
 }
 .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 31a4cdcd858a56b7f72fe75dd1ccecbe756cb881..e99777c6e986c91235060b22630b74b007808efc 100644 (file)
--- a/vopamoi.ts
+++ b/vopamoi.ts
@@ -397,10 +397,12 @@ function BrowserUI() {
       return ui.setState(createTimestamp, newState, oldState);
     },
 
       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 }`);
       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();
       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 == "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");
     }
   }
 }
     }
   }
 }
TODO organizer