focus task name on modal open
This commit is contained in:
marlon-erler
Vendored
+39
-111
@@ -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
|
||||
> div
|
||||
> #main
|
||||
> div
|
||||
> .pane-wrapper
|
||||
> .pane
|
||||
> .toolbar
|
||||
> span.ribbon {
|
||||
#chat-page > 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
|
||||
> div
|
||||
> #main
|
||||
> div
|
||||
> .pane-wrapper
|
||||
> .pane
|
||||
> .toolbar
|
||||
button.ribbon-button {
|
||||
#chat-page > 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
|
||||
> div
|
||||
> #main
|
||||
> div
|
||||
> .pane-wrapper
|
||||
> .pane
|
||||
> .toolbar
|
||||
button
|
||||
> .icon {
|
||||
#chat-page > 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
|
||||
> div
|
||||
> #main
|
||||
> div
|
||||
> .pane-wrapper
|
||||
> .pane
|
||||
> .toolbar
|
||||
:is(input, select, button) {
|
||||
#chat-page > 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(
|
||||
var(--content-padding) + var(--header-height) + var(--safe-area-bottom)
|
||||
);
|
||||
padding-bottom: calc(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
|
||||
> div
|
||||
> #main
|
||||
> #calendar-page
|
||||
> .pane-wrapper
|
||||
> .pane
|
||||
> .toolbar
|
||||
.input-wrapper {
|
||||
#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper {
|
||||
display: flex;
|
||||
padding: var(--gap-between-tiles);
|
||||
gap: var(--gap-between-tiles);
|
||||
}
|
||||
#chat-page
|
||||
> div
|
||||
> #main
|
||||
> #calendar-page
|
||||
> .pane-wrapper
|
||||
> .pane
|
||||
> .toolbar
|
||||
.input-wrapper
|
||||
> input {
|
||||
#chat-page > 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
|
||||
> div
|
||||
> #main
|
||||
> #calendar-page
|
||||
> .pane-wrapper
|
||||
> .pane
|
||||
> .toolbar
|
||||
.input-wrapper
|
||||
> .year-input {
|
||||
#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > .year-input {
|
||||
width: 4.4rem;
|
||||
}
|
||||
#chat-page
|
||||
> div
|
||||
> #main
|
||||
> #calendar-page
|
||||
> .pane-wrapper
|
||||
> .pane
|
||||
> .toolbar
|
||||
.input-wrapper
|
||||
> .month-input {
|
||||
#chat-page > 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
|
||||
> div
|
||||
> #main
|
||||
> #task-page
|
||||
> .pane-wrapper
|
||||
> .pane
|
||||
> .main-content
|
||||
> div {
|
||||
#chat-page > 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
|
||||
> div
|
||||
> #main
|
||||
> #task-page[isshowingboard][showingboardlist="false"]
|
||||
#board-list {
|
||||
#chat-page > div > #main > #task-page[isshowingboard][showingboardlist=false] #board-list {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
|
||||
Vendored
+1250
-3233
File diff suppressed because it is too large
Load Diff
@@ -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,
|
||||
);
|
||||
|
||||
@@ -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,
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user