focus task name on modal open

dist/index.css

@@ -40,22 +40,22 @@ main {
 #background-wrapper #grass-1 {
   --color-1: hsl(150, 100%, 30%);
   --color-2: hsl(150, 100%, 25%);
-    background-image: linear-gradient(
+  background-image:
+    linear-gradient(
       350deg,
       var(--color-1),
       var(--color-2) 30%,
-        transparent 40%
+      transparent 40%);
-    );
 }
 #background-wrapper #grass-2 {
   --color-1: hsl(110, 100%, 40%);
   --color-2: hsl(110, 100%, 35%);
-    background-image: linear-gradient(
+  background-image:
+    linear-gradient(
       9deg,
       var(--color-1),
       var(--color-2) 30%,
-        transparent 35%
+      transparent 35%);
-    );
 }
 @media (prefers-color-scheme: dark) {
   #background-wrapper {
@@ -76,7 +76,7 @@ main {
 }
 
 /* src/colors.css */
-[color]:not([color="standard"]) {
+[color]:not([color=standard]) {
   --primary: hsl(var(--hue), 100%, var(--accent-luma));
   --primary-hover: hsl(var(--hue), 95%, var(--accent-luma));
   --primary-active: hsl(var(--hue), 80%, var(--accent-luma));
@@ -87,7 +87,7 @@ main {
   --surface-active: hsla(var(--hue), 100%, 5%, 15%);
 }
 @media (prefers-color-scheme: dark) {
-    [color]:not([color="standard"]) {
+  [color]:not([color=standard]) {
     --accent-luma: var(--accent-luma-dark);
     --accent-text-luma: var(--accent-text-luma-dark);
     --surface: hsla(var(--hue), 100%, 95%, 5%);
@@ -95,23 +95,24 @@ main {
     --surface-active: hsla(var(--hue), 100%, 95%, 15%);
   }
 }
-[color]:not([color="standard"]).tile {
+[color]:not([color=standard]).tile {
   --gradient-luma-1: 70%;
   --gradient-luma-2: 90%;
   --hover-luma: 75%;
   --active-luma: 80%;
   --text-luma: 20%;
-    --surface: linear-gradient(
+  --surface:
+    linear-gradient(
+      
       120deg,
       hsl(var(--hue), 100%, var(--gradient-luma-1)),
-        hsla(var(--hue), 100%, var(--gradient-luma-2), 90%)
+      hsla(var(--hue), 100%, var(--gradient-luma-2), 90%) );
-    );
   --surface-hover: hsl(var(--hue), 100%, var(--hover-luma));
   --surface-active: hsl(var(--hue), 100%, var(--active-luma));
   --text-normal: hsl(var(--hue), 100%, var(--text-luma));
 }
 @media (prefers-color-scheme: dark) {
-    [color]:not([color="standard"]).tile {
+  [color]:not([color=standard]).tile {
     --gradient-luma-1: 20%;
     --gradient-luma-2: 15%;
     --hover-luma: 25%;
@@ -119,44 +120,44 @@ main {
     --text-luma: 90%;
   }
 }
-[color]:not([color="standard"]).fill-color {
+[color]:not([color=standard]).fill-color {
   color: white;
   background-color: var(--primary);
 }
-[color]:not([color="standard"])[selected].fill-color {
+[color]:not([color=standard])[selected].fill-color {
   color: var(--primary);
 }
 @media (min-width: 1024px) {
-    [color]:not([color="standard"]).background {
+  [color]:not([color=standard]).background {
     --luma: var(--background-luma);
     --sat: 80%;
     background: hsl(var(--hue), var(--sat), var(--luma));
   }
   @media (prefers-color-scheme: dark) {
-        [color]:not([color="standard"]).background {
+    [color]:not([color=standard]).background {
       --luma: var(--background-luma-dark);
       --sat: 40%;
     }
   }
-    [color="standard"].background {
+  [color=standard].background {
     background: var(--surface);
   }
 }
-[color]:not([color="standard"]).subtle-background {
+[color]:not([color=standard]).subtle-background {
   --luma: var(--subtle-luma);
   background: hsl(var(--hue), 100%, var(--luma), 50%);
 }
 @media (prefers-color-scheme: dark) {
-    [color]:not([color="standard"]).subtle-background {
+  [color]:not([color=standard]).subtle-background {
     --luma: var(--subtle-luma-dark);
   }
   @media (display-mode: standalone) {
-        [color]:not([color="standard"]).subtle-background {
+    [color]:not([color=standard]).subtle-background {
       --luma: 0%;
     }
   }
 }
-[color="coral"] {
+[color=coral] {
   --hue: 20;
   --accent-luma: 50%;
   --accent-luma-dark: 70%;
@@ -167,7 +168,7 @@ main {
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
-[color="yellow"] {
+[color=yellow] {
   --hue: 50;
   --accent-luma: 50%;
   --accent-luma-dark: 60%;
@@ -178,7 +179,7 @@ main {
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
-[color="mint"] {
+[color=mint] {
   --hue: 150;
   --accent-luma: 40%;
   --accent-luma-dark: 60%;
@@ -189,7 +190,7 @@ main {
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
-[color="lightblue"] {
+[color=lightblue] {
   --hue: 180;
   --accent-luma: 40%;
   --accent-luma-dark: 60%;
@@ -200,7 +201,7 @@ main {
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
-[color="blue"] {
+[color=blue] {
   --hue: 220;
   --accent-luma: 50%;
   --accent-luma-dark: 70%;
@@ -211,7 +212,7 @@ main {
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
-[color="purple"] {
+[color=purple] {
   --hue: 280;
   --accent-luma: 50%;
   --accent-luma-dark: 70%;
@@ -330,14 +331,7 @@ body[showing-chat] #chat-page-wrapper {
   padding-bottom: var(--safe-area-bottom);
 }
 #chat-page > div > #ribbon > span,
-#chat-page
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.ribbon {
-    > div
-    > #main
-    > div
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    > span.ribbon {
   gap: var(--gap-between-tiles);
   padding: var(--gap-between-tiles);
 }
@@ -363,14 +357,7 @@ body[showing-chat] #chat-page-wrapper {
   justify-content: center;
 }
 #chat-page > div > #ribbon button.ribbon-button,
-#chat-page
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button {
-    > div
-    > #main
-    > div
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    button.ribbon-button {
   min-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
   width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
   max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
@@ -379,15 +366,7 @@ body[showing-chat] #chat-page-wrapper {
   color: var(--primary);
 }
 #chat-page > div > #ribbon button > .icon,
-#chat-page
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button > .icon {
-    > div
-    > #main
-    > div
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    button
-    > .icon {
   font-size: 1.1rem;
 }
 #chat-page > div > #ribbon > span {
@@ -405,14 +384,7 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
   padding-left: var(--content-padding);
 }
-#chat-page
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar :is(input, select, button) {
-    > div
-    > #main
-    > div
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    :is(input, select, button) {
   height: 100%;
   flex: 1;
 }
@@ -443,9 +415,7 @@ body[showing-chat] #chat-page-wrapper {
 }
 #home-page #overview-section,
 #home-page #chat-section {
-    padding-bottom: calc(
+  padding-bottom: calc(var(--content-padding) + var(--header-height) + var(--safe-area-bottom));
-        var(--content-padding) + var(--header-height) + var(--safe-area-bottom)
-    );
 }
 #home-page #chat-grid {
   margin-top: var(--content-padding);
@@ -489,27 +459,12 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 /* src/View/ChatPages/calendarPage.css */
-#chat-page
+#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper {
-    > div
-    > #main
-    > #calendar-page
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    .input-wrapper {
   display: flex;
   padding: var(--gap-between-tiles);
   gap: var(--gap-between-tiles);
 }
-#chat-page
+#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > input {
-    > div
-    > #main
-    > #calendar-page
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    .input-wrapper
-    > input {
   min-height: unset;
   height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
   appearance: textfield;
@@ -522,26 +477,10 @@ body[showing-chat] #chat-page-wrapper {
   -webkit-appearance: none;
   margin: 0px;
 }
-#chat-page
+#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > .year-input {
-    > div
-    > #main
-    > #calendar-page
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    .input-wrapper
-    > .year-input {
   width: 4.4rem;
 }
-#chat-page
+#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > .month-input {
-    > div
-    > #main
-    > #calendar-page
-    > .pane-wrapper
-    > .pane
-    > .toolbar
-    .input-wrapper
-    > .month-input {
   width: 3.1rem;
 }
 @media (max-width: 1024px) {
@@ -766,14 +705,7 @@ body[showing-chat] #chat-page-wrapper {
   max-width: 100%;
   padding: 0px;
 }
-#chat-page
+#chat-page > div > #main > #task-page > .pane-wrapper > .pane > .main-content > div {
-    > div
-    > #main
-    > #task-page
-    > .pane-wrapper
-    > .pane
-    > .main-content
-    > div {
   animation: slide-up var(--animation-duration);
 }
 #chat-page > div > #main > #task-page .task-grid {
@@ -829,11 +761,7 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #main > #task-page .board-toggle-button {
   display: flex;
 }
-#chat-page
+#chat-page > div > #main > #task-page[isshowingboard][showingboardlist=false] #board-list {
-    > div
-    > #main
-    > #task-page[isshowingboard][showingboardlist="false"]
-    #board-list {
   display: none;
 }
 @media (min-width: 640px) {

src/View/ChatPages/boardPage.tsx

@@ -12,6 +12,7 @@ import { SearchModal } from "../Modals/searchModal";
 import { TaskSettingsModal } from "../Modals/taskSettingsModal";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { translations } from "../translations";
+import { setFocusWithDelay } from "../utility";
 
 export function BoardPage(boardViewModel: BoardViewModel) {
     boardViewModel.loadData();
@@ -49,6 +50,8 @@ export function BoardPage(boardViewModel: BoardViewModel) {
             if (boardViewModel.selectedTaskViewModel.value == undefined) {
                 return <div></div>;
             } else {
+                setFocusWithDelay();
+
                 return TaskSettingsModal(
                     boardViewModel.selectedTaskViewModel.value,
                 );

src/View/ChatPages/calendarPage.tsx

@@ -8,6 +8,7 @@ import { MonthGrid } from "../Components/monthGrid";
 import { TaskSettingsModal } from "../Modals/taskSettingsModal";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { translations } from "../translations";
+import { setFocusWithDelay } from "../utility";
 
 export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
     calendarPageViewModel.loadData();
@@ -95,6 +96,8 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
             ) {
                 return <div></div>;
             } else {
+                setFocusWithDelay();
+
                 return TaskSettingsModal(
                     calendarPageViewModel.selectedTaskViewModel.value,
                 );

src/View/Modals/taskSettingsModal.tsx

@@ -53,7 +53,7 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
                             <span>
                                 {translations.chatPage.task.taskNameLabel}
                             </span>
-                            <input bind:value={taskViewModel.name}></input>
+                            <input bind:value={taskViewModel.name} id="focused"></input>
                         </div>
                     </label>
 

src/View/utility.ts

@@ -9,3 +9,11 @@ export function allowDrag(event: DragEvent) {
 export function reload() {
     window.location.reload();
 }
+
+export function setFocus() {
+    document.getElementById("focused")?.focus();
+}
+
+export function setFocusWithDelay() {
+    setTimeout(setFocus, 100);
+}