70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
import * as React from "bloatless-react";
|
|
|
|
import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
|
|
import { ColorPicker } from "../Components/colorPicker";
|
|
import { DangerousActionButton } from "../Components/dangerousActionButton";
|
|
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
|
|
import { setFocusWithDelay } from "../utility";
|
|
|
|
export function BoardSettingsModal(
|
|
coreViewModel: CoreViewModel,
|
|
boardViewModel: BoardViewModel,
|
|
) {
|
|
boardViewModel.isPresentingSettingsModal.subscribe(setFocusWithDelay);
|
|
|
|
return (
|
|
<div
|
|
class="modal"
|
|
toggle:open={boardViewModel.isPresentingSettingsModal}
|
|
>
|
|
<div>
|
|
<main>
|
|
<h2>
|
|
{
|
|
coreViewModel.translations.chatPage.task
|
|
.boardSettingsHeadline
|
|
}
|
|
</h2>
|
|
|
|
<label class="tile flex-no">
|
|
<span class="icon">label</span>
|
|
<div>
|
|
<span>
|
|
{
|
|
coreViewModel.translations.chatPage.task
|
|
.boardNameInputLabel
|
|
}
|
|
</span>
|
|
<input
|
|
id="focused"
|
|
on:enter={boardViewModel.saveSettings}
|
|
bind:value={boardViewModel.name}
|
|
></input>
|
|
</div>
|
|
</label>
|
|
|
|
<hr></hr>
|
|
|
|
{ColorPicker(boardViewModel.color)}
|
|
|
|
<hr></hr>
|
|
|
|
<div class="width-input">
|
|
{DangerousActionButton(
|
|
coreViewModel,
|
|
coreViewModel.translations.chatPage.task
|
|
.deleteBoardButton,
|
|
"delete_forever",
|
|
boardViewModel.deleteBoard,
|
|
)}
|
|
</div>
|
|
</main>
|
|
<button on:click={boardViewModel.hideSettings}>
|
|
{coreViewModel.translations.general.closeButton}
|
|
<span class="icon">close</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|