move translations to CoreVM, move models to CoreVM for sentralization
This commit is contained in:
marlon-erler
@@ -3,9 +3,12 @@ import * as React from "bloatless-react";
|
||||
import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
|
||||
import { ColorPicker } from "../Components/colorPicker";
|
||||
import { DangerousActionButton } from "../Components/dangerousActionButton";
|
||||
import { translations } from "../translations";
|
||||
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
|
||||
|
||||
export function BoardSettingsModal(boardViewModel: BoardViewModel) {
|
||||
export function BoardSettingsModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
boardViewModel: BoardViewModel,
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
class="modal"
|
||||
@@ -13,13 +16,21 @@ export function BoardSettingsModal(boardViewModel: BoardViewModel) {
|
||||
>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{translations.chatPage.task.boardSettingsHeadline}</h2>
|
||||
<h2>
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.boardSettingsHeadline
|
||||
}
|
||||
</h2>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">label</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.boardNameInputLabel}
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.boardNameInputLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
on:enter={boardViewModel.saveSettings}
|
||||
@@ -36,14 +47,16 @@ export function BoardSettingsModal(boardViewModel: BoardViewModel) {
|
||||
|
||||
<div class="width-input">
|
||||
{DangerousActionButton(
|
||||
translations.chatPage.task.deleteBoardButton,
|
||||
coreViewModel,
|
||||
coreViewModel.translations.chatPage.task
|
||||
.deleteBoardButton,
|
||||
"delete_forever",
|
||||
boardViewModel.deleteBoard,
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
<button on:click={boardViewModel.hideSettings}>
|
||||
{translations.general.closeButton}
|
||||
{coreViewModel.translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
|
||||
import { translations } from "../translations";
|
||||
import { MessageReactionButtonRow } from "../Components/messageReactionButtonRow";
|
||||
import { InfoTile } from "../Components/infoTile";
|
||||
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
|
||||
|
||||
export function ChatMessageInfoModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
chatMessageViewModel: ChatMessageViewModel,
|
||||
) {
|
||||
return (
|
||||
@@ -15,27 +16,34 @@ export function ChatMessageInfoModal(
|
||||
>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{translations.chatPage.message.messageInfoHeadline}</h2>
|
||||
<h2>
|
||||
{
|
||||
coreViewModel.translations.chatPage.message
|
||||
.messageInfoHeadline
|
||||
}
|
||||
</h2>
|
||||
|
||||
<div class="flex-column gap">
|
||||
{InfoTile(
|
||||
"account_circle",
|
||||
translations.chatPage.message.sentBy,
|
||||
coreViewModel.translations.chatPage.message.sentBy,
|
||||
chatMessageViewModel.sender,
|
||||
)}
|
||||
{InfoTile(
|
||||
"schedule",
|
||||
translations.chatPage.message.timeSent,
|
||||
coreViewModel.translations.chatPage.message
|
||||
.timeSent,
|
||||
chatMessageViewModel.dateSent,
|
||||
)}
|
||||
{InfoTile(
|
||||
"forum",
|
||||
translations.chatPage.message.channel,
|
||||
coreViewModel.translations.chatPage.message.channel,
|
||||
chatMessageViewModel.channel,
|
||||
)}
|
||||
{InfoTile(
|
||||
"description",
|
||||
translations.chatPage.message.messageContent,
|
||||
coreViewModel.translations.chatPage.message
|
||||
.messageContent,
|
||||
chatMessageViewModel.body,
|
||||
)}
|
||||
</div>
|
||||
@@ -44,25 +52,37 @@ export function ChatMessageInfoModal(
|
||||
|
||||
<div class="flex-column gap">
|
||||
<button on:click={chatMessageViewModel.copyMessage}>
|
||||
{translations.chatPage.message.copyMessageButton}
|
||||
{
|
||||
coreViewModel.translations.chatPage.message
|
||||
.copyMessageButton
|
||||
}
|
||||
<span class="icon">content_copy</span>
|
||||
</button>
|
||||
<button on:click={chatMessageViewModel.resendMessage}>
|
||||
{translations.chatPage.message.resendMessageButton}
|
||||
{
|
||||
coreViewModel.translations.chatPage.message
|
||||
.resendMessageButton
|
||||
}
|
||||
<span class="icon">redo</span>
|
||||
</button>
|
||||
<button on:click={chatMessageViewModel.decryptMessage}>
|
||||
{translations.chatPage.message.decryptMessageButton}
|
||||
{
|
||||
coreViewModel.translations.chatPage.message
|
||||
.decryptMessageButton
|
||||
}
|
||||
<span class="icon">key</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
{MessageReactionButtonRow(chatMessageViewModel)}
|
||||
{MessageReactionButtonRow(
|
||||
coreViewModel,
|
||||
chatMessageViewModel,
|
||||
)}
|
||||
</main>
|
||||
<button on:click={chatMessageViewModel.hideInfoModal}>
|
||||
{translations.general.closeButton}
|
||||
{coreViewModel.translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -2,9 +2,12 @@ import * as React from "bloatless-react";
|
||||
|
||||
import ConnectionViewModel from "../../ViewModel/Global/connectionViewModel";
|
||||
import { DeletableListItem } from "../Components/deletableListItem";
|
||||
import { translations } from "../translations";
|
||||
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
|
||||
|
||||
export function ConnectionModal(connectionViewModel: ConnectionViewModel) {
|
||||
export function ConnectionModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
connectionViewModel: ConnectionViewModel,
|
||||
) {
|
||||
const previousAddressConverter: React.StateItemConverter<string> = (
|
||||
address: string,
|
||||
) => {
|
||||
@@ -16,17 +19,20 @@ export function ConnectionModal(connectionViewModel: ConnectionViewModel) {
|
||||
[connectionViewModel.isConnected],
|
||||
() =>
|
||||
connectionViewModel.isConnected.value == true &&
|
||||
connectionViewModel.connectionModel.address == address,
|
||||
connectionViewModel.coreViewModel.connectionModel.address ==
|
||||
address,
|
||||
);
|
||||
|
||||
return DeletableListItem(
|
||||
coreViewModel,
|
||||
address,
|
||||
<button
|
||||
class="primary"
|
||||
on:click={connnect}
|
||||
toggle:disabled={cannotConnect}
|
||||
aria-label={
|
||||
translations.connectionModal.connectButtonAudioLabel
|
||||
coreViewModel.translations.connectionModal
|
||||
.connectButtonAudioLabel
|
||||
}
|
||||
>
|
||||
<span class="icon">link</span>
|
||||
@@ -45,7 +51,10 @@ export function ConnectionModal(connectionViewModel: ConnectionViewModel) {
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{translations.connectionModal.connectionModalHeadline}
|
||||
{
|
||||
coreViewModel.translations.connectionModal
|
||||
.connectionModalHeadline
|
||||
}
|
||||
</h2>
|
||||
|
||||
<div
|
||||
@@ -57,7 +66,7 @@ export function ConnectionModal(connectionViewModel: ConnectionViewModel) {
|
||||
></div>
|
||||
</main>
|
||||
<button on:click={connectionViewModel.hideConnectionModal}>
|
||||
{translations.general.closeButton}
|
||||
{coreViewModel.translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -9,28 +9,31 @@ import ConnectionViewModel from "../../ViewModel/Global/connectionViewModel";
|
||||
import StorageModel from "../../Model/Global/storageModel";
|
||||
import { StringToTextSpan } from "../Components/textSpan";
|
||||
import { reload } from "../utility";
|
||||
import { translations } from "../translations";
|
||||
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
|
||||
|
||||
export function DataTransferModalWrapper(
|
||||
coreViewModel: CoreViewModel,
|
||||
connectionViewModel: ConnectionViewModel,
|
||||
fileTransferViewModel: FileTransferViewModel,
|
||||
) {
|
||||
return (
|
||||
<div>
|
||||
{DirectionSelectionModal(
|
||||
coreViewModel,
|
||||
connectionViewModel,
|
||||
fileTransferViewModel,
|
||||
)}
|
||||
{FileSelectionModal(fileTransferViewModel)}
|
||||
{TransferDataDisplayModal(fileTransferViewModel)}
|
||||
{TransferDisplayModal(fileTransferViewModel)}
|
||||
{TransferDataInputModal(fileTransferViewModel)}
|
||||
{DataReceptionModal(fileTransferViewModel)}
|
||||
{FileSelectionModal(coreViewModel, fileTransferViewModel)}
|
||||
{TransferDataDisplayModal(coreViewModel, fileTransferViewModel)}
|
||||
{TransferDisplayModal(coreViewModel, fileTransferViewModel)}
|
||||
{TransferDataInputModal(coreViewModel, fileTransferViewModel)}
|
||||
{DataReceptionModal(coreViewModel, fileTransferViewModel)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DirectionSelectionModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
connectionViewModel: ConnectionViewModel,
|
||||
fileTransferViewModel: FileTransferViewModel,
|
||||
) {
|
||||
@@ -51,14 +54,20 @@ function DirectionSelectionModal(
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{translations.dataTransferModal.transferDataHeadline}
|
||||
{
|
||||
coreViewModel.translations.dataTransferModal
|
||||
.transferDataHeadline
|
||||
}
|
||||
</h2>
|
||||
|
||||
<p
|
||||
class="error"
|
||||
toggle:hidden={connectionViewModel.isConnected}
|
||||
>
|
||||
{translations.dataTransferModal.notConnectedError}
|
||||
{
|
||||
coreViewModel.translations.dataTransferModal
|
||||
.notConnectedError
|
||||
}
|
||||
</p>
|
||||
|
||||
<div
|
||||
@@ -75,7 +84,8 @@ function DirectionSelectionModal(
|
||||
<div>
|
||||
<b>
|
||||
{
|
||||
translations.dataTransferModal
|
||||
coreViewModel.translations
|
||||
.dataTransferModal
|
||||
.fromThisDeviceButton
|
||||
}
|
||||
</b>
|
||||
@@ -92,7 +102,8 @@ function DirectionSelectionModal(
|
||||
<div>
|
||||
<b>
|
||||
{
|
||||
translations.dataTransferModal
|
||||
coreViewModel.translations
|
||||
.dataTransferModal
|
||||
.toThisDeviceButton
|
||||
}
|
||||
</b>
|
||||
@@ -102,7 +113,7 @@ function DirectionSelectionModal(
|
||||
</div>
|
||||
</main>
|
||||
<button on:click={fileTransferViewModel.hideModal}>
|
||||
{translations.general.closeButton}
|
||||
{coreViewModel.translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -110,7 +121,10 @@ function DirectionSelectionModal(
|
||||
);
|
||||
}
|
||||
|
||||
function FileSelectionModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
function FileSelectionModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
fileTransferViewModel: FileTransferViewModel,
|
||||
) {
|
||||
// option
|
||||
const OptionConverter: React.StateItemConverter<FileTransferOption> = (
|
||||
fileOption: FileTransferOption,
|
||||
@@ -164,15 +178,26 @@ function FileSelectionModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{translations.dataTransferModal.transferDataHeadline}
|
||||
{
|
||||
coreViewModel.translations.dataTransferModal
|
||||
.transferDataHeadline
|
||||
}
|
||||
</h2>
|
||||
<span class="secondary">
|
||||
{translations.dataTransferModal.selectionDescription}
|
||||
{
|
||||
coreViewModel.translations.dataTransferModal
|
||||
.selectionDescription
|
||||
}
|
||||
</span>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<h3>{translations.dataTransferModal.generalHeadline}</h3>
|
||||
<h3>
|
||||
{
|
||||
coreViewModel.translations.dataTransferModal
|
||||
.generalHeadline
|
||||
}
|
||||
</h3>
|
||||
<div
|
||||
class="flex-column gap content-margin-bottom"
|
||||
children:append={[
|
||||
@@ -181,7 +206,12 @@ function FileSelectionModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
]}
|
||||
></div>
|
||||
|
||||
<h3>{translations.dataTransferModal.chatsHeadline}</h3>
|
||||
<h3>
|
||||
{
|
||||
coreViewModel.translations.dataTransferModal
|
||||
.chatsHeadline
|
||||
}
|
||||
</h3>
|
||||
<div
|
||||
class="flex-column gap"
|
||||
children:append={[
|
||||
@@ -197,7 +227,7 @@ function FileSelectionModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
fileTransferViewModel.showDirectionSelectionModal
|
||||
}
|
||||
>
|
||||
{translations.general.backButton}
|
||||
{coreViewModel.translations.general.backButton}
|
||||
</button>
|
||||
<button
|
||||
class="primary flex"
|
||||
@@ -206,7 +236,7 @@ function FileSelectionModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
fileTransferViewModel.hasNoPathsSelected
|
||||
}
|
||||
>
|
||||
{translations.general.continueButton}
|
||||
{coreViewModel.translations.general.continueButton}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -216,6 +246,7 @@ function FileSelectionModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
}
|
||||
|
||||
function TransferDataDisplayModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
fileTransferViewModel: FileTransferViewModel,
|
||||
) {
|
||||
const isPresented = React.createProxyState(
|
||||
@@ -230,11 +261,17 @@ function TransferDataDisplayModal(
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{translations.dataTransferModal.transferDataHeadline}
|
||||
{
|
||||
coreViewModel.translations.dataTransferModal
|
||||
.transferDataHeadline
|
||||
}
|
||||
</h2>
|
||||
|
||||
<span class="secondary">
|
||||
{translations.dataTransferModal.dataEntryDescription}
|
||||
{
|
||||
coreViewModel.translations.dataTransferModal
|
||||
.dataEntryDescription
|
||||
}
|
||||
</span>
|
||||
|
||||
<hr></hr>
|
||||
@@ -245,7 +282,8 @@ function TransferDataDisplayModal(
|
||||
<div>
|
||||
<span class="secondary">
|
||||
{
|
||||
translations.dataTransferModal
|
||||
coreViewModel.translations
|
||||
.dataTransferModal
|
||||
.transferChannelHeadline
|
||||
}
|
||||
</span>
|
||||
@@ -261,7 +299,8 @@ function TransferDataDisplayModal(
|
||||
<div>
|
||||
<span class="secondary">
|
||||
{
|
||||
translations.dataTransferModal
|
||||
coreViewModel.translations
|
||||
.dataTransferModal
|
||||
.transferKeyHeadline
|
||||
}
|
||||
</span>
|
||||
@@ -279,10 +318,10 @@ function TransferDataDisplayModal(
|
||||
class="flex"
|
||||
on:click={fileTransferViewModel.showFileSelectionModal}
|
||||
>
|
||||
{translations.general.backButton}
|
||||
{coreViewModel.translations.general.backButton}
|
||||
</button>
|
||||
<button disabled class="flex">
|
||||
{translations.general.waitingLabel}
|
||||
{coreViewModel.translations.general.waitingLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -290,7 +329,10 @@ function TransferDataDisplayModal(
|
||||
);
|
||||
}
|
||||
|
||||
function TransferDisplayModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
function TransferDisplayModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
fileTransferViewModel: FileTransferViewModel,
|
||||
) {
|
||||
const isPresented = React.createProxyState(
|
||||
[fileTransferViewModel.presentedModal],
|
||||
() =>
|
||||
@@ -303,7 +345,10 @@ function TransferDisplayModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{translations.dataTransferModal.transferDataHeadline}
|
||||
{
|
||||
coreViewModel.translations.dataTransferModal
|
||||
.transferDataHeadline
|
||||
}
|
||||
</h2>
|
||||
|
||||
<p
|
||||
@@ -319,7 +364,10 @@ function TransferDisplayModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
fileTransferViewModel.didNotFinishSending
|
||||
}
|
||||
>
|
||||
{translations.dataTransferModal.allFilesSent}
|
||||
{
|
||||
coreViewModel.translations.dataTransferModal
|
||||
.allFilesSent
|
||||
}
|
||||
</p>
|
||||
|
||||
<hr></hr>
|
||||
@@ -337,7 +385,10 @@ function TransferDisplayModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
class="flex"
|
||||
on:click={fileTransferViewModel.initiateTransfer}
|
||||
>
|
||||
{translations.dataTransferModal.sendAgainButton}
|
||||
{
|
||||
coreViewModel.translations.dataTransferModal
|
||||
.sendAgainButton
|
||||
}
|
||||
<span class="icon">restart_alt</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -347,7 +398,7 @@ function TransferDisplayModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
fileTransferViewModel.didNotFinishSending
|
||||
}
|
||||
>
|
||||
{translations.general.closeButton}
|
||||
{coreViewModel.translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -356,7 +407,10 @@ function TransferDisplayModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
);
|
||||
}
|
||||
|
||||
function TransferDataInputModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
function TransferDataInputModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
fileTransferViewModel: FileTransferViewModel,
|
||||
) {
|
||||
const isPresented = React.createProxyState(
|
||||
[fileTransferViewModel.presentedModal],
|
||||
() =>
|
||||
@@ -369,12 +423,15 @@ function TransferDataInputModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{translations.dataTransferModal.transferDataHeadline}
|
||||
{
|
||||
coreViewModel.translations.dataTransferModal
|
||||
.transferDataHeadline
|
||||
}
|
||||
</h2>
|
||||
|
||||
<span class="secondary">
|
||||
{
|
||||
translations.dataTransferModal
|
||||
coreViewModel.translations.dataTransferModal
|
||||
.dataEntryInputDescription
|
||||
}
|
||||
</span>
|
||||
@@ -387,7 +444,8 @@ function TransferDataInputModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
<div>
|
||||
<span class="secondary">
|
||||
{
|
||||
translations.dataTransferModal
|
||||
coreViewModel.translations
|
||||
.dataTransferModal
|
||||
.transferChannelHeadline
|
||||
}
|
||||
</span>
|
||||
@@ -403,7 +461,8 @@ function TransferDataInputModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
<div>
|
||||
<span class="secondary">
|
||||
{
|
||||
translations.dataTransferModal
|
||||
coreViewModel.translations
|
||||
.dataTransferModal
|
||||
.transferKeyHeadline
|
||||
}
|
||||
</span>
|
||||
@@ -423,7 +482,7 @@ function TransferDataInputModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
fileTransferViewModel.showDirectionSelectionModal
|
||||
}
|
||||
>
|
||||
{translations.general.backButton}
|
||||
{coreViewModel.translations.general.backButton}
|
||||
</button>
|
||||
<button
|
||||
class="primary flex"
|
||||
@@ -432,7 +491,7 @@ function TransferDataInputModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
fileTransferViewModel.cannotPrepareToReceive
|
||||
}
|
||||
>
|
||||
{translations.general.continueButton}
|
||||
{coreViewModel.translations.general.continueButton}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -441,7 +500,10 @@ function TransferDataInputModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
);
|
||||
}
|
||||
|
||||
function DataReceptionModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
function DataReceptionModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
fileTransferViewModel: FileTransferViewModel,
|
||||
) {
|
||||
const isPresented = React.createProxyState(
|
||||
[fileTransferViewModel.presentedModal],
|
||||
() =>
|
||||
@@ -454,7 +516,10 @@ function DataReceptionModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{translations.dataTransferModal.transferDataHeadline}
|
||||
{
|
||||
coreViewModel.translations.dataTransferModal
|
||||
.transferDataHeadline
|
||||
}
|
||||
</h2>
|
||||
|
||||
<p
|
||||
@@ -475,7 +540,7 @@ function DataReceptionModal(fileTransferViewModel: FileTransferViewModel) {
|
||||
></div>
|
||||
</main>
|
||||
<button on:click={reload}>
|
||||
{translations.general.reloadAppButton}
|
||||
{coreViewModel.translations.general.reloadAppButton}
|
||||
<span class="icon">refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -2,10 +2,11 @@ import * as React from "bloatless-react";
|
||||
|
||||
import SearchViewModel from "../../ViewModel/Utility/searchViewModel";
|
||||
import { StringToOption } from "../Components/option";
|
||||
import { translations } from "../translations";
|
||||
import { v4 } from "uuid";
|
||||
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
|
||||
|
||||
export function SearchModal<T>(
|
||||
coreViewModel: CoreViewModel,
|
||||
searchViewModel: SearchViewModel<T>,
|
||||
headline: string,
|
||||
converter: React.StateItemConverter<T>,
|
||||
@@ -24,7 +25,9 @@ export function SearchModal<T>(
|
||||
<h2>{headline}</h2>
|
||||
<div class="flex-row width-input">
|
||||
<input
|
||||
placeholder={translations.general.searchLabel}
|
||||
placeholder={
|
||||
coreViewModel.translations.general.searchLabel
|
||||
}
|
||||
bind:value={searchViewModel.searchInput}
|
||||
on:enter={searchViewModel.applySearch}
|
||||
list={suggestionId}
|
||||
@@ -40,7 +43,8 @@ export function SearchModal<T>(
|
||||
<button
|
||||
class="primary"
|
||||
aria-label={
|
||||
translations.general.searchButtonAudioLabel
|
||||
coreViewModel.translations.general
|
||||
.searchButtonAudioLabel
|
||||
}
|
||||
on:click={searchViewModel.applySearch}
|
||||
toggle:disabled={searchViewModel.cannotApplySearch}
|
||||
@@ -61,7 +65,7 @@ export function SearchModal<T>(
|
||||
></div>
|
||||
</main>
|
||||
<button on:click={close}>
|
||||
{translations.general.closeButton}
|
||||
{coreViewModel.translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,18 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import { translations } from "../translations";
|
||||
import { Languages } from "../translations";
|
||||
import SettingsViewModel, {
|
||||
SettingsModalPages,
|
||||
} from "../../ViewModel/Global/settingsViewModel";
|
||||
import { SplitModal } from "../Components/splitModal";
|
||||
import { InfoTile } from "../Components/infoTile";
|
||||
import { Option } from "../Components/option";
|
||||
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
|
||||
|
||||
export function SettingsModal(settingsViewModel: SettingsViewModel) {
|
||||
export function SettingsModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
settingsViewModel: SettingsViewModel,
|
||||
) {
|
||||
const detailView = React.createProxyState(
|
||||
[settingsViewModel.selectedModalPage],
|
||||
() => {
|
||||
@@ -16,9 +20,12 @@ export function SettingsModal(settingsViewModel: SettingsViewModel) {
|
||||
case SettingsModalPages.Appearance:
|
||||
return <div>Appearance</div>;
|
||||
case SettingsModalPages.Regional:
|
||||
return SettingsRegionalPane(settingsViewModel);
|
||||
return SettingsRegionalPane(
|
||||
coreViewModel,
|
||||
settingsViewModel,
|
||||
);
|
||||
case SettingsModalPages.Info:
|
||||
return SettingsInfoPane(settingsViewModel);
|
||||
return SettingsInfoPane(coreViewModel, settingsViewModel);
|
||||
}
|
||||
},
|
||||
);
|
||||
@@ -31,7 +38,9 @@ export function SettingsModal(settingsViewModel: SettingsViewModel) {
|
||||
<div>
|
||||
<main class="padding-0">
|
||||
{SplitModal(
|
||||
new React.State(SettingsLeftPane(settingsViewModel)),
|
||||
new React.State(
|
||||
SettingsLeftPane(coreViewModel, settingsViewModel),
|
||||
),
|
||||
detailView,
|
||||
new React.State(""),
|
||||
false,
|
||||
@@ -39,7 +48,7 @@ export function SettingsModal(settingsViewModel: SettingsViewModel) {
|
||||
)}
|
||||
</main>
|
||||
<button on:click={settingsViewModel.hideSettingsModal}>
|
||||
{translations.general.closeButton}
|
||||
{coreViewModel.translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -47,23 +56,26 @@ export function SettingsModal(settingsViewModel: SettingsViewModel) {
|
||||
);
|
||||
}
|
||||
|
||||
function SettingsLeftPane(settingsViewModel: SettingsViewModel) {
|
||||
function SettingsLeftPane(
|
||||
coreViewModel: CoreViewModel,
|
||||
settingsViewModel: SettingsViewModel,
|
||||
) {
|
||||
return (
|
||||
<div class="flex-column gap">
|
||||
{SettingsPaneButton(
|
||||
settingsViewModel,
|
||||
SettingsModalPages.Appearance,
|
||||
translations.settings.pages.appearance,
|
||||
coreViewModel.translations.settings.pages.appearance,
|
||||
)}
|
||||
{SettingsPaneButton(
|
||||
settingsViewModel,
|
||||
SettingsModalPages.Regional,
|
||||
translations.settings.pages.regional,
|
||||
coreViewModel.translations.settings.pages.regional,
|
||||
)}
|
||||
{SettingsPaneButton(
|
||||
settingsViewModel,
|
||||
SettingsModalPages.Info,
|
||||
translations.settings.pages.info,
|
||||
coreViewModel.translations.settings.pages.info,
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@@ -89,15 +101,18 @@ function SettingsPaneButton(
|
||||
);
|
||||
}
|
||||
|
||||
function SettingsInfoPane(settingsViewModel: SettingsViewModel) {
|
||||
function SettingsInfoPane(
|
||||
coreViewModel: CoreViewModel,
|
||||
settingsViewModel: SettingsViewModel,
|
||||
) {
|
||||
return (
|
||||
<div class="slide-up">
|
||||
<h2>{translations.homePage.appName}</h2>
|
||||
<h2>{coreViewModel.translations.homePage.appName}</h2>
|
||||
<hr></hr>
|
||||
<div class="flex-column gap">
|
||||
{InfoTile(
|
||||
"build",
|
||||
translations.settings.version,
|
||||
coreViewModel.translations.settings.version,
|
||||
settingsViewModel.coreViewModel.BUILD,
|
||||
)}
|
||||
</div>
|
||||
@@ -105,30 +120,54 @@ function SettingsInfoPane(settingsViewModel: SettingsViewModel) {
|
||||
);
|
||||
}
|
||||
|
||||
function SettingsRegionalPane(settingsViewModel: SettingsViewModel) {
|
||||
function SettingsRegionalPane(
|
||||
coreViewModel: CoreViewModel,
|
||||
settingsViewModel: SettingsViewModel,
|
||||
) {
|
||||
return (
|
||||
<div class="slide-up">
|
||||
<h2>{translations.settings.pages.regional}</h2>
|
||||
<h2>{coreViewModel.translations.settings.pages.regional}</h2>
|
||||
<hr></hr>
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">calendar_month</span>
|
||||
<div>
|
||||
<span>{translations.homePage.firstDayOfWeekLabel}</span>
|
||||
<select bind:value={settingsViewModel.firstDayOfWeekInput}>
|
||||
{...translations.regional.weekdays.full.map(
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.settings
|
||||
.firstDayOfWeekLabel
|
||||
}
|
||||
</span>
|
||||
<select bind:value={settingsViewModel.firstDayOfWeek}>
|
||||
{...coreViewModel.translations.regional.weekdays.full.map(
|
||||
(weekdayName, i) =>
|
||||
Option(
|
||||
weekdayName,
|
||||
i.toString(),
|
||||
i.toString() ==
|
||||
settingsViewModel.firstDayOfWeekInput
|
||||
.value,
|
||||
settingsViewModel.firstDayOfWeek.value,
|
||||
),
|
||||
)}
|
||||
</select>
|
||||
<span class="icon">arrow_drop_down</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">language</span>
|
||||
<div>
|
||||
<span>{coreViewModel.translations.settings.language}</span>
|
||||
<select bind:value={settingsViewModel.language}>
|
||||
{...[...Object.values(Languages)].map((language, i) =>
|
||||
Option(
|
||||
language,
|
||||
i.toString(),
|
||||
i.toString() ==
|
||||
settingsViewModel.language.value,
|
||||
),
|
||||
)}
|
||||
</select>
|
||||
<span class="icon">arrow_drop_down</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,13 +2,16 @@ import * as React from "bloatless-react";
|
||||
|
||||
import { PATH_COMPONENT_SEPARATOR } from "../../Model/Global/storageModel";
|
||||
import StorageViewModel from "../../ViewModel/Global/storageViewModel";
|
||||
import { translations } from "../translations";
|
||||
|
||||
import { SplitModal } from "../Components/splitModal";
|
||||
import { DangerousActionButton } from "../Components/dangerousActionButton";
|
||||
import { DirectoryItemList } from "../Components/directoryItemList";
|
||||
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
|
||||
|
||||
export function StorageModal(storageViewModel: StorageViewModel) {
|
||||
export function StorageModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
storageViewModel: StorageViewModel,
|
||||
) {
|
||||
const detailView = React.createProxyState(
|
||||
[storageViewModel.selectedPath],
|
||||
() => {
|
||||
@@ -16,13 +19,14 @@ export function StorageModal(storageViewModel: StorageViewModel) {
|
||||
return (
|
||||
<div>
|
||||
<span class="secondary">
|
||||
{translations.storage.noItemSelected}
|
||||
{coreViewModel.translations.storage.noItemSelected}
|
||||
</span>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
{DangerousActionButton(
|
||||
translations.storage.removeJunkButton,
|
||||
coreViewModel,
|
||||
coreViewModel.translations.storage.removeJunkButton,
|
||||
"delete_forever",
|
||||
storageViewModel.removeJunk,
|
||||
)}
|
||||
@@ -33,7 +37,7 @@ export function StorageModal(storageViewModel: StorageViewModel) {
|
||||
<div class="flex-column gap">
|
||||
<div class="tile flex-no">
|
||||
<div>
|
||||
<b>{translations.storage.path}</b>
|
||||
<b>{coreViewModel.translations.storage.path}</b>
|
||||
<span
|
||||
class="break-all"
|
||||
subscribe:innerText={
|
||||
@@ -44,7 +48,7 @@ export function StorageModal(storageViewModel: StorageViewModel) {
|
||||
</div>
|
||||
<div class="tile flex-no">
|
||||
<div>
|
||||
<b>{translations.storage.content}</b>
|
||||
<b>{coreViewModel.translations.storage.content}</b>
|
||||
<code
|
||||
subscribe:innerText={
|
||||
storageViewModel.selectedFileContent
|
||||
@@ -54,7 +58,8 @@ export function StorageModal(storageViewModel: StorageViewModel) {
|
||||
</div>
|
||||
|
||||
{DangerousActionButton(
|
||||
translations.storage.deleteItem,
|
||||
coreViewModel,
|
||||
coreViewModel.translations.storage.deleteItem,
|
||||
"delete_forever",
|
||||
storageViewModel.deleteSelectedItem,
|
||||
)}
|
||||
@@ -74,7 +79,7 @@ export function StorageModal(storageViewModel: StorageViewModel) {
|
||||
)}
|
||||
</main>
|
||||
<button on:click={storageViewModel.hideStorageModal}>
|
||||
{translations.general.closeButton}
|
||||
{coreViewModel.translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,6 @@ import * as React from "bloatless-react";
|
||||
|
||||
import {
|
||||
Entry,
|
||||
EntryToOption,
|
||||
Option,
|
||||
StringToOption,
|
||||
VersionIdToOption,
|
||||
@@ -10,10 +9,13 @@ import {
|
||||
|
||||
import { DangerousActionButton } from "../Components/dangerousActionButton";
|
||||
import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
|
||||
import { translations } from "../translations";
|
||||
import { v4 } from "uuid";
|
||||
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
|
||||
|
||||
export function TaskSettingsModal(taskViewModel: TaskViewModel) {
|
||||
export function TaskSettingsModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
taskViewModel: TaskViewModel,
|
||||
) {
|
||||
const categorySuggestionId = v4();
|
||||
const statusSuggestionId = v4();
|
||||
|
||||
@@ -28,12 +30,22 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
|
||||
<div class="modal" open keystroke:s={taskViewModel.closeAndSave}>
|
||||
<div>
|
||||
<main>
|
||||
<h2>{translations.chatPage.task.taskSettingsHeadline}</h2>
|
||||
<h2>
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskSettingsHeadline
|
||||
}
|
||||
</h2>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">history</span>
|
||||
<div>
|
||||
<span>{translations.general.fileVersionLabel}</span>
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.general
|
||||
.fileVersionLabel
|
||||
}
|
||||
</span>
|
||||
<select
|
||||
bind:value={taskViewModel.selectedVersionId}
|
||||
children:append={[
|
||||
@@ -51,7 +63,10 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
|
||||
<span class="icon">label</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.taskNameLabel}
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskNameLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
bind:value={taskViewModel.name}
|
||||
@@ -64,7 +79,10 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
|
||||
<span class="icon">category</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.taskBoardLabel}
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskBoardLabel
|
||||
}
|
||||
</span>
|
||||
<select
|
||||
bind:value={taskViewModel.boardId}
|
||||
@@ -83,7 +101,7 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
translations.chatPage.task
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskDescriptionLabel
|
||||
}
|
||||
</span>
|
||||
@@ -100,7 +118,10 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
|
||||
<span class="icon">category</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.taskCategoryLabel}
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskCategoryLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
bind:value={taskViewModel.category}
|
||||
@@ -121,7 +142,10 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
|
||||
<span class="icon">clock_loader_40</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.taskStatusLabel}
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskStatusLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
bind:value={taskViewModel.status}
|
||||
@@ -142,7 +166,10 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
|
||||
<span class="icon">priority_high</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.taskPriorityLabel}
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskPriorityLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
@@ -157,7 +184,10 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
|
||||
<span class="icon">calendar_month</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.taskDateLabel}
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskDateLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
type="date"
|
||||
@@ -170,7 +200,10 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
|
||||
<span class="icon">schedule</span>
|
||||
<div>
|
||||
<span>
|
||||
{translations.chatPage.task.taskTimeLabel}
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskTimeLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
type="time"
|
||||
@@ -183,7 +216,9 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
|
||||
|
||||
<div class="width-input">
|
||||
{DangerousActionButton(
|
||||
translations.chatPage.task.deleteTaskButton,
|
||||
coreViewModel,
|
||||
coreViewModel.translations.chatPage.task
|
||||
.deleteTaskButton,
|
||||
"delete_forever",
|
||||
taskViewModel.deleteTask,
|
||||
)}
|
||||
@@ -194,13 +229,13 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
|
||||
class="flex"
|
||||
on:click={taskViewModel.closeAndDiscard}
|
||||
>
|
||||
{translations.general.closeButton}
|
||||
{coreViewModel.translations.general.closeButton}
|
||||
</button>
|
||||
<button
|
||||
class="flex primary"
|
||||
on:click={taskViewModel.closeAndSave}
|
||||
>
|
||||
{translations.general.saveButton}
|
||||
{coreViewModel.translations.general.saveButton}
|
||||
<span class="icon">save</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user