cleanup, prepare BoardSettingsModal

This commit is contained in:
marlon-erler
2024-07-23 13:09:46 +02:00
parent 3aae049106
commit 3eb823c305
11 changed files with 222 additions and 87 deletions
+49 -33
View File
@@ -26,43 +26,59 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
}
);
return (
<div id="task-page">
<div class="pane-wrapper side">
<div class="pane">
<div class="toolbar">
<div class="flex-row width-input">
<input
bind:value={taskPageViewModel.newBoardNameInput}
on:enter={taskPageViewModel.createBoard}
placeholder={translations.chatPage.task.newBoardNamePlaceholder}
></input>
<button
class="primary"
aria-label={
translations.chatPage.task.createBoardButtonAudioLabel
}
on:click={taskPageViewModel.createBoard}
toggle:disabled={taskPageViewModel.cannotCreateBoard}
>
<span class="icon">add</span>
</button>
</div>
</div>
<div class="content">
<div
class="grid gap"
style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
children:append={[
taskPageViewModel.boardViewModels,
BoardInfoToEntry,
]}
></div>
const listPaneWrapper = (
<div class="pane-wrapper side">
<div class="pane">
<div class="toolbar">
<div class="flex-row width-input">
<input
bind:value={taskPageViewModel.newBoardNameInput}
on:enter={taskPageViewModel.createBoard}
placeholder={translations.chatPage.task.newBoardNamePlaceholder}
></input>
<button
class="primary"
aria-label={
translations.chatPage.task.createBoardButtonAudioLabel
}
on:click={taskPageViewModel.createBoard}
toggle:disabled={taskPageViewModel.cannotCreateBoard}
>
<span class="icon">add</span>
</button>
</div>
</div>
<div class="content">
<div
class="grid gap"
style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
children:append={[
taskPageViewModel.boardViewModels,
BoardInfoToEntry,
]}
></div>
</div>
</div>
</div>
);
<div class="pane-wrapper" children:set={paneContent}></div>
const mainPageWrapper = (
<div class="pane-wrapper" children:set={paneContent}></div>
);
React.bulkSubscribe([taskPageViewModel.selectedBoard], () => {
const selectedBoard = taskPageViewModel.selectedBoard.value;
if (selectedBoard == undefined) {
listPaneWrapper.scrollIntoView();
} else {
mainPageWrapper.scrollIntoView();
}
});
return (
<div id="task-page">
{listPaneWrapper}
{mainPageWrapper}
</div>
);
}