prepare UI
This commit is contained in:
marlon-erler
@@ -1,116 +0,0 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import {
|
||||
Channel,
|
||||
addSecondaryChannel,
|
||||
cannotAddSecondaryChannel,
|
||||
cannotLeaveChannel,
|
||||
cannotSetChannel,
|
||||
leaveChannel,
|
||||
newSecondaryChannelName,
|
||||
primaryChannel,
|
||||
removeSecondaryChannel,
|
||||
secondaryChannels,
|
||||
senderName,
|
||||
setChannel,
|
||||
} from "../model";
|
||||
|
||||
import { translation } from "../translations";
|
||||
|
||||
const secondaryChannelConverter: React.ListItemConverter<Channel> = (
|
||||
channel
|
||||
) => {
|
||||
function remove() {
|
||||
removeSecondaryChannel(channel);
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="tile padding-0">
|
||||
<div class="flex-row justify-apart align-center">
|
||||
<b class="padding-h">{channel.channelName}</b>
|
||||
|
||||
<button
|
||||
class="danger"
|
||||
aria-label={translation.removeSecondaryChannel}
|
||||
on:click={remove}
|
||||
>
|
||||
<span class="icon">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function CommunicationSection() {
|
||||
return (
|
||||
<div>
|
||||
<h2>{translation.communication}</h2>
|
||||
|
||||
<label class="tile">
|
||||
<span class="icon">account_circle</span>
|
||||
<div>
|
||||
<span>{translation.myName}</span>
|
||||
<input
|
||||
bind:value={senderName}
|
||||
placeholder={translation.yourNamePlaceholder}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile">
|
||||
<span class="icon">forum</span>
|
||||
<div>
|
||||
<span>{translation.primaryChannel}</span>
|
||||
<input
|
||||
bind:value={primaryChannel}
|
||||
on:enter={setChannel}
|
||||
placeholder={translation.channelPlaceholder}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex-row width-input justify-end">
|
||||
<button
|
||||
class="danger width-50"
|
||||
on:click={leaveChannel}
|
||||
toggle:disabled={cannotLeaveChannel}
|
||||
>
|
||||
{translation.leaveChannel}
|
||||
</button>
|
||||
<button
|
||||
class="primary width-50"
|
||||
on:click={setChannel}
|
||||
toggle:disabled={cannotSetChannel}
|
||||
>
|
||||
{translation.setInput}
|
||||
<span class="icon">check</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<div class="flex-row width-input margin-bottom">
|
||||
<input
|
||||
bind:value={newSecondaryChannelName}
|
||||
on:enter={addSecondaryChannel}
|
||||
placeholder={translation.newSecondaryChannelPlaceholder}
|
||||
class="width-100 flex"
|
||||
></input>
|
||||
<button
|
||||
class="primary"
|
||||
on:click={addSecondaryChannel}
|
||||
toggle:disabled={cannotAddSecondaryChannel}
|
||||
aria-label={translation.addSecondaryChannel}
|
||||
>
|
||||
<span class="icon">add</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex-column gap"
|
||||
subscribe:children={[secondaryChannels, secondaryChannelConverter]}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +1,86 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import { ConnectionInputView } from "./connectionSettingsView";
|
||||
import { ConnectionStatusView } from "./connectionStatusView";
|
||||
import {
|
||||
cannotConnect,
|
||||
cannotDeleteMailbox,
|
||||
cannotDisonnect,
|
||||
cannotRequestMailbox,
|
||||
connect,
|
||||
deleteMailbox,
|
||||
disconnect,
|
||||
requestMailbox,
|
||||
serverAddressInput,
|
||||
} from "../Model/model";
|
||||
|
||||
import { translation } from "../translations";
|
||||
|
||||
export function ConnectionSection() {
|
||||
return (
|
||||
<div>
|
||||
<h2>{translation.connection}</h2>
|
||||
{ConnectionStatusView()}
|
||||
<hr></hr>
|
||||
{ConnectionInputView()}
|
||||
<div class="flex-column">
|
||||
<label class="tile">
|
||||
<span class="icon">cell_tower</span>
|
||||
<div>
|
||||
<span>{translation.serverAddress}</span>
|
||||
<input
|
||||
bind:value={serverAddressInput}
|
||||
on:enter={connect}
|
||||
placeholder={translation.serverAddressPlaceholder}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex-row width-input justify-end">
|
||||
<button
|
||||
class="danger width-100 flex-1"
|
||||
aria-label={translation.disconnect}
|
||||
on:click={disconnect}
|
||||
toggle:disabled={cannotDisonnect}
|
||||
>
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
<button
|
||||
class="width-100 flex-1"
|
||||
aria-label={translation.resetAddress}
|
||||
on:click={disconnect}
|
||||
toggle:disabled={cannotDisonnect}
|
||||
>
|
||||
<span class="icon">undo</span>
|
||||
</button>
|
||||
<button
|
||||
class="primary width-100 flex-1"
|
||||
aria-label={translation.connectToServer}
|
||||
on:click={connect}
|
||||
toggle:disabled={cannotConnect}
|
||||
>
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<div class="tile">
|
||||
<span class="icon">inbox</span>
|
||||
<div>
|
||||
<b>{translation.mailbox}</b>
|
||||
<span class="secondary">{translation.mailboxExplanation}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-row width-input justify-end">
|
||||
<button
|
||||
class="danger width-100 flex-1"
|
||||
on:click={deleteMailbox}
|
||||
toggle:disabled={cannotDeleteMailbox}
|
||||
>
|
||||
{translation.deleteMailbox}
|
||||
</button>
|
||||
<button
|
||||
class="primary width-100 flex-1"
|
||||
on:click={requestMailbox}
|
||||
toggle:disabled={cannotRequestMailbox}
|
||||
>
|
||||
{translation.requestMailbox}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,77 +0,0 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import {
|
||||
cannotConnect,
|
||||
cannotDeleteMailbox,
|
||||
cannotDisonnect,
|
||||
cannotRequestMailbox,
|
||||
connect,
|
||||
deleteMailbox,
|
||||
disconnect,
|
||||
requestMailbox,
|
||||
serverAddress,
|
||||
} from "../model";
|
||||
|
||||
import { translation } from "../translations";
|
||||
|
||||
export function ConnectionInputView() {
|
||||
return (
|
||||
<div class="flex-column">
|
||||
<label class="tile">
|
||||
<span class="icon">cell_tower</span>
|
||||
<div>
|
||||
<span>{translation.serverAddress}</span>
|
||||
<input
|
||||
bind:value={serverAddress}
|
||||
on:enter={connect}
|
||||
placeholder={translation.serverAddressPlaceholder}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex-row width-input justify-end">
|
||||
<button
|
||||
class="danger width-50"
|
||||
on:click={disconnect}
|
||||
toggle:disabled={cannotDisonnect}
|
||||
>
|
||||
{translation.disconnect}
|
||||
</button>
|
||||
<button
|
||||
class="primary width-50"
|
||||
on:click={connect}
|
||||
toggle:disabled={cannotConnect}
|
||||
>
|
||||
{translation.connectToServer}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<div class="tile">
|
||||
<span class="icon">inbox</span>
|
||||
<div>
|
||||
<b>{translation.mailbox}</b>
|
||||
<span class="secondary">{translation.mailboxExplanation}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-row width-input justify-end">
|
||||
<button
|
||||
class="danger width-50"
|
||||
on:click={deleteMailbox}
|
||||
toggle:disabled={cannotDeleteMailbox}
|
||||
>
|
||||
{translation.deleteMailbox}
|
||||
</button>
|
||||
<button
|
||||
class="primary width-50"
|
||||
on:click={requestMailbox}
|
||||
toggle:disabled={cannotRequestMailbox}
|
||||
>
|
||||
{translation.requestMailbox}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import { connectionMessage } from "../model";
|
||||
import { translation } from "../translations";
|
||||
|
||||
export function ConnectionStatusView() {
|
||||
return (
|
||||
<div class="tile width-input">
|
||||
<div>
|
||||
<b>{translation.connectionStatus}</b>
|
||||
<span
|
||||
class="success connected-only"
|
||||
subscribe:innerText={connectionMessage}
|
||||
></span>
|
||||
<span class="error disconnected-only">{translation.disconnected}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import { encryptionKey, isEncryptionUnavailable } from "../model";
|
||||
|
||||
import { translation } from "../translations";
|
||||
|
||||
const shouldShowKey = new React.State(false);
|
||||
const inputType = React.createProxyState([shouldShowKey], () =>
|
||||
shouldShowKey.value ? "text" : "password"
|
||||
);
|
||||
|
||||
export function EncryptionSection() {
|
||||
return (
|
||||
<div>
|
||||
<h2>{translation.encryption}</h2>
|
||||
<div
|
||||
class="error tile margin-bottom"
|
||||
toggle:hidden={!isEncryptionUnavailable}
|
||||
>
|
||||
<span class="icon">warning</span>
|
||||
<div>
|
||||
<b>{translation.encryptionUnavailableTitle}</b>
|
||||
<p>{translation.encryptionUnavailableMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="tile">
|
||||
<span class="icon">key</span>
|
||||
<div>
|
||||
<span>{translation.encryptionKey}</span>
|
||||
<input
|
||||
toggle:disabled={isEncryptionUnavailable}
|
||||
bind:value={encryptionKey}
|
||||
set:type={inputType}
|
||||
placeholder={translation.encryptionKeyPlaceholder}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<label class="inline">
|
||||
<input type="checkbox" bind:checked={shouldShowKey}></input>
|
||||
{translation.showEncryptionKey}
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +1,34 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import { cannotSendMessage, messageBody, sendMessage } from "../model";
|
||||
|
||||
import { Chat } from "../Model/chatModel";
|
||||
import { selectedChat } from "../Model/model";
|
||||
import { translation } from "../translations";
|
||||
|
||||
export function MessageComposer() {
|
||||
return (
|
||||
<div class="flex-row width-100">
|
||||
<input
|
||||
class="width-100 flex-1"
|
||||
style="max-width: unset"
|
||||
placeholder={translation.composerPlaceholder}
|
||||
bind:value={messageBody}
|
||||
on:enter={sendMessage}
|
||||
></input>
|
||||
<button
|
||||
class="primary"
|
||||
on:click={sendMessage}
|
||||
toggle:disabled={cannotSendMessage}
|
||||
>
|
||||
<span class="icon">send</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
const composerContent = React.createProxyState([selectedChat], () => {
|
||||
if (selectedChat.value == undefined) return <div></div>;
|
||||
|
||||
const chat = selectedChat.value;
|
||||
return (
|
||||
<div class="flex-row width-100">
|
||||
{" "}
|
||||
<input
|
||||
class="width-100 flex-1"
|
||||
style="max-width: unset"
|
||||
placeholder={translation.composerPlaceholder}
|
||||
bind:value={chat.composingMessage}
|
||||
on:enter={chat.sendMessage}
|
||||
></input>
|
||||
<button
|
||||
class="primary"
|
||||
on:click={chat.sendMessage}
|
||||
toggle:disabled={chat.cannotSendMessage}
|
||||
>
|
||||
<span class="icon">send</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return <div children:set={composerContent}></div>;
|
||||
}
|
||||
|
||||
+71
-57
@@ -1,64 +1,78 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import {
|
||||
Message,
|
||||
decryptReceivedMessage,
|
||||
deleteMessage,
|
||||
messages,
|
||||
} from "../model";
|
||||
import { Chat, ChatMessage } from "../Model/chatModel";
|
||||
|
||||
import { selectedChat } from "../Model/model";
|
||||
import { translation } from "../translations";
|
||||
|
||||
const messageConverter: React.ListItemConverter<Message> = (message) => {
|
||||
const messageBody = React.createProxyState([messages], () => message.body);
|
||||
|
||||
function copyMessage() {
|
||||
navigator.clipboard.writeText(message.body);
|
||||
}
|
||||
|
||||
function decrypt() {
|
||||
decryptReceivedMessage(message);
|
||||
}
|
||||
|
||||
function remove() {
|
||||
deleteMessage(message);
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="tile width-100 flex-no padding-0">
|
||||
<div class="flex-column">
|
||||
<div class="flex-row justify-apart align-center secondary">
|
||||
<span class="padding-h ellipsis">
|
||||
<b class="info">{message.sender}</b> - {message.channel}
|
||||
</span>
|
||||
<span class="flex-row">
|
||||
<button aria-label={translation.copyMessage} on:click={copyMessage}>
|
||||
<span class="icon">content_copy</span>
|
||||
</button>
|
||||
<button aria-label={translation.decryptMessage} on:click={decrypt}>
|
||||
<span class="icon">key</span>
|
||||
</button>
|
||||
<button aria-label={translation.deleteMessage} on:click={remove}>
|
||||
<span class="icon">delete</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-column padding-h padding-bottom">
|
||||
<b class="break-word" subscribe:innerText={messageBody}></b>
|
||||
<span class="secondary">
|
||||
{new Date(message.isoDate).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function ThreadView() {
|
||||
return (
|
||||
<div
|
||||
class="flex-column gap"
|
||||
subscribe:children={[messages, messageConverter]}
|
||||
></div>
|
||||
);
|
||||
const threadViewContent = React.createProxyState([selectedChat], () => {
|
||||
if (selectedChat.value == undefined)
|
||||
return <div>{translation.noChatSelected}</div>;
|
||||
|
||||
const chat = selectedChat.value;
|
||||
|
||||
const messageConverter: React.ListItemConverter<ChatMessage> = (
|
||||
message
|
||||
) => {
|
||||
function copyMessage() {
|
||||
navigator.clipboard.writeText(message.body);
|
||||
}
|
||||
|
||||
function decrypt() {
|
||||
chat.decryptReceivedMessage(message);
|
||||
}
|
||||
|
||||
function remove() {
|
||||
chat.deleteMessage(message);
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="tile width-100 flex-no padding-0">
|
||||
<div class="flex-column">
|
||||
<div class="flex-row justify-apart align-center secondary">
|
||||
<span class="padding-h ellipsis">
|
||||
<b class="info">{message.sender}</b> - {message.channel}
|
||||
</span>
|
||||
<span class="flex-row">
|
||||
<button
|
||||
aria-label={translation.copyMessage}
|
||||
on:click={copyMessage}
|
||||
>
|
||||
<span class="icon">content_copy</span>
|
||||
</button>
|
||||
<button
|
||||
aria-label={translation.decryptMessage}
|
||||
on:click={decrypt}
|
||||
>
|
||||
<span class="icon">key</span>
|
||||
</button>
|
||||
<button
|
||||
aria-label={translation.deleteMessage}
|
||||
on:click={remove}
|
||||
>
|
||||
<span class="icon">delete</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-column padding-h padding-bottom">
|
||||
<b class="break-word" subscribe:innerText={message.body}></b>
|
||||
<span class="secondary">
|
||||
{new Date(message.isoDate).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
class="flex-column gap"
|
||||
children:append={[chat.messages, messageConverter]}
|
||||
></div>
|
||||
);
|
||||
});
|
||||
|
||||
return <div children:set={threadViewContent}></div>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user