VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
marlon-erler
2026-09-26 23:32:38 +02:00
parent ce9f6d89f0
commit 9622c196cd
40 changed files with 2866 additions and 2706 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Model/Chat/chatModel.ts
+19 -10
View File
@@ -97,8 +97,11 @@ export default class ChatModel {
};
readonly getPreviousFilterPath = (): string[] => {
return [StorageModelSubPaths.Chat, ...filePaths.chat.previousFilter(this.id)];
}
return [
StorageModelSubPaths.Chat,
...filePaths.chat.previousFilter(this.id),
];
};
// handlers
readonly handleMessage = (body: string): void => {
@@ -264,15 +267,15 @@ export default class ChatModel {
readonly syncInfo = (): void => {
this.sendMessage("", undefined, this.info);
}
};
readonly storeFilter = (filter: string): void => {
this.storageModel.write(this.getPreviousFilterPath(), filter);
}
};
readonly getFilter = (): string => {
return this.storageModel.read(this.getPreviousFilterPath()) || "";
}
};
readonly delete = () => {
// untrack
@@ -285,11 +288,13 @@ export default class ChatModel {
// load
readonly loadInfo = (): void => {
let info: ChatInfoFileContent | null = this.storageModel.readStringifiable(
let info: ChatInfoFileContent | null =
this.storageModel.readStringifiable(
this.getInfoPath(),
ChatInfoReference,
);
this.info = (info || ChatModel.generateChatInfo("0", "0", Colors.Standard));
this.info =
info || ChatModel.generateChatInfo("0", "0", Colors.Standard);
this.storeInfo();
};
@@ -297,7 +302,7 @@ export default class ChatModel {
this.info = info;
this.changeHandlerManager.trigger(null);
this.storeInfo();
}
};
get messages(): ChatMessage[] {
const messageIds: string[] = this.storageModel.list(
@@ -373,7 +378,11 @@ export default class ChatModel {
return channelString.split("/");
}
static generateChatInfo = (name: string, id: string, color: Colors): ChatInfoFileContent => {
static generateChatInfo = (
name: string,
id: string,
color: Colors,
): ChatInfoFileContent => {
const file = FileModel.createFileContent(id, "chat-info");
return {
@@ -552,4 +561,4 @@ export const ChatMessageReactionReference: ChatMessageReaction = {
content: "",
isDeleting: false,
}
};
src/Model/Files/calendarModel.ts
+3 -7
View File
@@ -2,10 +2,10 @@
import FileModel, { FileModelSubPath } from "./fileModel";
import { TaskFileContent } from "./boardsAndTasksModel";
import { isoToMonthString, padZero } from "../Utility/utility";
import StorageModel from "../Global/storageModel";
import SettingsModel from "../Global/settingsModel";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import {isoToMonthString, padZero} from "../Utility/utility";
export default class CalendarModel {
readonly storageModel: StorageModel;
@@ -35,9 +35,7 @@ export default class CalendarModel {
readonly storeTaskReference = (taskFileContent: TaskFileContent): void => {
if (taskFileContent.date == undefined) return;
const monthString: string = isoToMonthString(
taskFileContent.date,
);
const monthString: string = isoToMonthString(taskFileContent.date);
const monthPath: string[] = this.getMonthPath(monthString);
const referencePath: string[] = [...monthPath, taskFileContent.fileId];
@@ -103,9 +101,7 @@ export default class CalendarModel {
};
for (let i = 0; i < daysInMonth; i++) {
const paddedDate: string = padZero(
(i + 1).toString(), 2
);
const paddedDate: string = padZero((i + 1).toString(), 2);
grid.days[paddedDate] = defaultValueCreator();
}
src/Model/Files/fileModel.ts
+15 -3
View File
@@ -8,13 +8,21 @@ import {
parseValidObject,
stringify,
} from "../Utility/utility";
import { checkIsValidObject, checkMatchesObjectStructure, DATA_VERSION, ValidObject } from "../Utility/typeSafety";
import {
checkIsValidObject,
checkMatchesObjectStructure,
DATA_VERSION,
ValidObject,
} from "../Utility/typeSafety";
import StorageModel, {
StorageModelSubPaths,
filePaths,
} from "../Global/storageModel";
import SettingsModel from "../Global/settingsModel";
import ChatModel, {ChatInfoFileContent, ChatInfoReference} from "../Chat/chatModel";
import ChatModel, {
ChatInfoFileContent,
ChatInfoReference,
} from "../Chat/chatModel";
export default class FileModel {
readonly storageModel: StorageModel;
@@ -70,7 +78,11 @@ export default class FileModel {
console.log(fileContent.type);
if (fileContent.type == "chat-info") {
if (checkMatchesObjectStructure(fileContent, ChatInfoReference) == false) return;
if (
checkMatchesObjectStructure(fileContent, ChatInfoReference) ==
false
)
return;
this.chatModel.handleInfo(fileContent as ChatInfoFileContent);
}
src/Model/Global/storageModel.ts
+12 -5
View File
@@ -1,5 +1,9 @@
import { bytesToMB, localeCompare, parseValidObject, stringify } from "../Utility/utility";
import {
bytesToMB,
localeCompare,
parseValidObject,
stringify,
} from "../Utility/utility";
import { DATA_VERSION, ValidObject } from "../Utility/typeSafety";
export const PATH_COMPONENT_SEPARATOR = "\\";
@@ -171,7 +175,7 @@ export default class StorageModel {
return capacity;
}
}
}
};
readonly calculateUsage = (): number => {
let data = JSON.stringify(localStorage);
@@ -181,7 +185,7 @@ export default class StorageModel {
const mb = bytesToMB(bytes);
const rounded = Math.round(mb * 100) / 100;
return rounded;
}
};
// tree
readonly initializeTree = (): void => {
@@ -285,7 +289,10 @@ export const filePaths = {
...filePaths.chat.chatBase(id),
"reactions",
],
previousFilter: (id: string) => [...filePaths.chat.chatBase(id), "previous-filter"],
previousFilter: (id: string) => [
...filePaths.chat.chatBase(id),
"previous-filter",
],
lastUsedPage: (id: string) => [
...filePaths.chat.chatBase(id),
"last-used-page",
src/Model/Utility/utility.ts
+42 -23
View File
@@ -1,7 +1,7 @@
import { checkIsValidObject, checkMatchesObjectStructure } from "./typeSafety";
import CalendarModel from "../Files/calendarModel";
import * as React from "../../react";
import { CalendarPage } from "../../View/ChatPages/calendarPage";
import CalendarModel from "../Files/calendarModel";
export interface Stringifiable {
toString(): string;
@@ -24,32 +24,43 @@ export function isoToDateString (dateISOString: string): string {
const [year, month, date] = dateISOString.split("-");
const paddedDate = padZero(date ?? "", 2);
return paddedDate;
};
}
export function isoToMonthString(dateISOString: string): string {
const [year, month, _] = dateISOString.split("-");
return formatMonthStringFromParts(year, month);
};
export function formatISO(date: Date): string {
return formatISOFromParts(date.getFullYear(), date.getMonth()+1, date.getDate())
}
export function formatISOFromParts(year: number|string, month: number|string, date: number|string): string {
export function formatISO(date: Date): string {
return formatISOFromParts(
date.getFullYear(),
date.getMonth() + 1,
date.getDate(),
);
}
export function formatISOFromParts(
year: number | string,
month: number | string,
date: number | string,
): string {
return [year, month, date]
.map((x, i) => i == 0 ? x : padZero(x.toString(), 2))
.map((x, i) => (i == 0 ? x : padZero(x.toString(), 2)))
.join("-");
}
export function formatMonthStringFromParts (year: string = "", month: string = ""): string {
export function formatMonthStringFromParts(
year: string = "",
month: string = "",
): string {
const paddedYear: string = padZero(year, 4);
const paddedMonth: string = padZero(month, 2);
return `${paddedYear}-${paddedMonth}`;
};
}
export function formatTime(date: Date): string {
return [date.getHours(), date.getMinutes()]
.map(x => padZero(x.toString(), 2))
.map((x) => padZero(x.toString(), 2))
.join(":");
}
@@ -141,7 +152,12 @@ export default function implementFilter<T>(
function update() {
matches.clear();
allItems.value.forEach((item: T) => {
if (!itemToString(item).toLowerCase().includes(query.value.toLowerCase())) return;
if (
!itemToString(item)
.toLowerCase()
.includes(query.value.toLowerCase())
)
return;
matches.add(item);
allItems.handleRemoval(item, () => {
matches.remove(item);
@@ -271,7 +287,10 @@ export interface PinchToZoomData {
x: number;
y: number;
}
export function implementPinchZoom(canvas: HTMLElement, data: React.State<PinchToZoomData>) {
export function implementPinchZoom(
canvas: HTMLElement,
data: React.State<PinchToZoomData>,
) {
let pinching = false;
let dragging = false;
let lastElement: HTMLElement | undefined = undefined;
@@ -318,15 +337,17 @@ export function implementPinchZoom(canvas: HTMLElement, data: React.State<PinchT
if (_offset) [x, y] = _offset;
data.value = {
zoom, x, y
}
zoom,
x,
y,
};
}
data.subscribe((data) => {
const el = element();
if (!el) return;
el.style.transform = `scale(${data.zoom.toString()}) translate(${data.x}px, ${data.y}px)`;
})
});
canvas.addEventListener("wheel", (event: WheelEvent) => {
event.preventDefault();
@@ -352,20 +373,18 @@ export function implementPinchZoom(canvas: HTMLElement, data: React.State<PinchT
initialTouchX = event.clientX;
initialTouchY = event.clientY;
dragging = true;
})
});
canvas.addEventListener("mouseup", () => {
dragging = false;
})
});
canvas.addEventListener("mousemove", (event: MouseEvent) => {
if (!dragging) return;
event.preventDefault();
apply(data.value.zoom, [
initialX +
(event.clientX - initialTouchX) / initialZoom,
initialY +
(event.clientY - initialTouchY) / initialZoom,
initialX + (event.clientX - initialTouchX) / initialZoom,
initialY + (event.clientY - initialTouchY) / initialZoom,
]);
})
});
canvas.addEventListener("touchstart", (event: TouchEvent) => {
(document.activeElement as HTMLElement)?.blur();
src/View/ChatPages/boardPage.tsx
+4 -1
View File
@@ -46,7 +46,10 @@ export function BoardPage(
);
const wrapper = (
<div class="content main-content allow-drag-move" children:set={pages}></div>
<div
class="content main-content allow-drag-move"
children:set={pages}
></div>
);
Utility.implementPinchZoom(wrapper, boardViewModel.pinchToZoomData);
src/View/ChatPages/messagePage.css
+2 -1
View File
@@ -285,7 +285,8 @@
padding: var(--gap-between-tiles);
}
#message-page[reply-view] :is(.reply-link, .inline-reply, #composer .reply-preview-wrapper) {
#message-page[reply-view]
:is(.reply-link, .inline-reply, #composer .reply-preview-wrapper) {
display: none;
}
src/View/ChatPages/messagePage.tsx
+29 -8
View File
@@ -65,20 +65,40 @@ function scrollDownIfApplicable() {
messagePageViewModel.filteredMessageViewModels.subscribeSilent(
scrollDownIfApplicable,
);
React.bulkSubscribe([messagePageViewModel.reactionFilter, messagePageViewModel.searchViewModel.appliedQuery], scrollDown)
messagePageViewModel.replyViewSelectedMessage.subscribeSilent(selectedMessage => {
React.bulkSubscribe(
[
messagePageViewModel.reactionFilter,
messagePageViewModel.searchViewModel.appliedQuery,
],
scrollDown,
);
messagePageViewModel.replyViewSelectedMessage.subscribeSilent(
(selectedMessage) => {
if (selectedMessage != undefined) return;
setTimeout(scrollDown, 100);
})
},
);
setTimeout(() => scrollDown(true), 100);
messagePageViewModel.focusSetter.subscribeSilent(() => {
ViewController.setFocusWithDelay();
});
const isInReplyView = React.createProxyState([messagePageViewModel.replyViewSelectedMessage], ()=>messagePageViewModel.replyViewSelectedMessage.value != undefined);
const isInReplyView = React.createProxyState(
[messagePageViewModel.replyViewSelectedMessage],
() => messagePageViewModel.replyViewSelectedMessage.value != undefined,
);
const title = React.createProxyState([messagePageViewModel.isReplyViewActive], ()=>messagePageViewModel.isReplyViewActive.value ? coreViewModel.translations.chatPage.message.replyHeaderLabel((messagePageViewModel.replyViewSelectedMessage.value!).body.value) : coreViewModel.translations.chatPage.message.messagesHeadline);
const title = React.createProxyState(
[messagePageViewModel.isReplyViewActive],
() =>
messagePageViewModel.isReplyViewActive.value
? coreViewModel.translations.chatPage.message.replyHeaderLabel(
messagePageViewModel.replyViewSelectedMessage.value!.body
.value,
)
: coreViewModel.translations.chatPage.message.messagesHeadline,
);
return (
<div id="message-page" toggle:reply-view={isInReplyView}>
@@ -88,15 +108,16 @@ return (
<button
class="ghost"
on:click={messagePageViewModel.resetReplyView}
toggle:hidden={messagePageViewModel.isReplyViewInactive}
toggle:hidden={
messagePageViewModel.isReplyViewInactive
}
>
<span class="icon">arrow_back</span>
</button>
<span
class="title ellipsis width-100 flex"
subscribe:innerText={title}
>
</span>
></span>
<span>
<button
class="ghost inset-outline"
src/View/ChatPages/settingsPage.tsx
+6 -13
View File
@@ -47,12 +47,8 @@ export function SettingsPage(
}
</span>
<input
bind:value={
settingsPageViewModel.nameInput
}
on:enter={
settingsPageViewModel.setName
}
bind:value={settingsPageViewModel.nameInput}
on:enter={settingsPageViewModel.setName}
></input>
</div>
</label>
@@ -63,9 +59,7 @@ export function SettingsPage(
coreViewModel.translations.chatPage.settings
.setNameButtonAudioLabel
}
on:click={
settingsPageViewModel.setName
}
on:click={settingsPageViewModel.setName}
toggle:disabled={
settingsPageViewModel.cannotSetPrimaryChannel
}
@@ -186,17 +180,16 @@ export function SettingsPage(
coreViewModel.translations.chatPage.settings
.setColorButtonAudioLabel
}
on:click={
settingsPageViewModel.applyColor
on:click={settingsPageViewModel.applyColor}
toggle:disabled={
settingsPageViewModel.cannotSetColor
}
toggle:disabled={settingsPageViewModel.cannotSetColor}
>
{coreViewModel.translations.general.setButton}
<span class="icon">check</span>
</button>
</div>
<hr></hr>
<div class="width-input">
src/View/ChatPages/taskPage.tsx
+8 -3
View File
@@ -2,11 +2,11 @@ import "./taskPage.css";
import { BoardPage } from "./boardPage";
import { ViewController } from "../viewController";
import { PlaceholderView } from "../Components/placeholderView";
import { NewItemEntry } from "../Components/newItemEntry";
import { BoardViewModelToEntry } from "../Components/boardEntry";
import * as React from "../../react";
import TaskPageViewModel from "../../ViewModel/Pages/taskPageViewModel";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import {NewItemEntry} from "../Components/newItemEntry";
export function TaskPage(
coreViewModel: CoreViewModel,
@@ -66,13 +66,18 @@ export function TaskPage(
bind:value={taskPageViewModel.boardQuery}
on:enter={taskPageViewModel.createBoard}
placeholder={
coreViewModel.translations.general.filterOrCreateLabel
coreViewModel.translations.general
.filterOrCreateLabel
}
></input>
</div>
</div>
<div class="content gap">
{NewItemEntry(coreViewModel, taskPageViewModel.boardQuery, taskPageViewModel.createBoard)}
{NewItemEntry(
coreViewModel,
taskPageViewModel.boardQuery,
taskPageViewModel.createBoard,
)}
<div
class="grid gap"
style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
src/View/Components/chatEntry.tsx
+2 -6
View File
@@ -12,14 +12,10 @@ export function ChatEntry(chatViewModel: ChatViewModel) {
>
<span
class="shadow"
subscribe:innerText={
chatViewModel.settingsPageViewModel.name
}
subscribe:innerText={chatViewModel.settingsPageViewModel.name}
></span>
<h2
subscribe:innerText={
chatViewModel.settingsPageViewModel.name
}
subscribe:innerText={chatViewModel.settingsPageViewModel.name}
></h2>
</button>
);
src/View/Components/chatMessage.tsx
+5 -2
View File
@@ -1,3 +1,4 @@
import { ReplyLink } from "./replyLink";
import { MessageReactionButtonRow } from "./messageReactionButtonRow";
import { InlineReply } from "./inlineReply";
import { ChatMessageInfoModal } from "../Modals/chatMessageInfoModal";
@@ -5,7 +6,6 @@ import * as React from "../../react";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
import { ChatMessageStatuses } from "../../Model/Chat/chatModel";
import {ReplyLink} from "./replyLink";
export function ChatMessage(
coreViewModel: CoreViewModel,
@@ -70,7 +70,10 @@ export function ChatMessage(
coreViewModel.translations.chatPage.message
.replyToMessageButton
}
toggle:hidden={chatMessageViewModel.messagePageViewModel.isReplyViewActive}
toggle:hidden={
chatMessageViewModel.messagePageViewModel
.isReplyViewActive
}
>
<span class="icon">reply</span>
</button>
src/View/Components/newItemEntry.tsx
+11 -3
View File
@@ -1,11 +1,18 @@
import * as React from "../../react";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
export function NewItemEntry(coreViewModel: CoreViewModel, query: React.State<string>, fn: ()=>void) {
export function NewItemEntry(
coreViewModel: CoreViewModel,
query: React.State<string>,
fn: () => void,
) {
const isHidden = React.createProxyState([query], () => query.value == "");
const label = React.createProxyState([query],()=>coreViewModel.translations.general.createLabel(query.value));
const label = React.createProxyState([query], () =>
coreViewModel.translations.general.createLabel(query.value),
);
return <button
return (
<button
class="standard slide-up"
toggle:hidden={isHidden}
on:click={fn}
@@ -13,4 +20,5 @@ export function NewItemEntry(coreViewModel: CoreViewModel, query: React.State<st
<span subscribe:innerText={label}></span>
<span class="icon">add</span>
</button>
);
}
src/View/Components/replyLink.tsx
+20 -11
View File
@@ -1,22 +1,31 @@
import * as React from "../../react";
import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
export function ReplyLink(coreViewModel: CoreViewModel, chatMessageViewModel: ChatMessageViewModel) {
const isHidden = React.createProxyState([chatMessageViewModel.replyCount], ()=>chatMessageViewModel.replyCount.value == 0);
export function ReplyLink(
coreViewModel: CoreViewModel,
chatMessageViewModel: ChatMessageViewModel,
) {
const isHidden = React.createProxyState(
[chatMessageViewModel.replyCount],
() => chatMessageViewModel.replyCount.value == 0,
);
function select() {
chatMessageViewModel.messagePageViewModel.setReplyView(chatMessageViewModel);
chatMessageViewModel.messagePageViewModel.setReplyView(
chatMessageViewModel,
);
}
return (
<div
class="reply-link"
toggle:hidden={isHidden}
on:click={select}
>
<span>{coreViewModel.translations.chatPage.message.replyPrefixLabel}</span>
<b class="ellipsis" subscribe:innerText={chatMessageViewModel.replyCount}></b>
<div class="reply-link" toggle:hidden={isHidden} on:click={select}>
<span>
{coreViewModel.translations.chatPage.message.replyPrefixLabel}
</span>
<b
class="ellipsis"
subscribe:innerText={chatMessageViewModel.replyCount}
></b>
</div>
);
}
src/View/Components/replyViewHeader.tsx
+32 -10
View File
@@ -1,20 +1,42 @@
import * as React from "../../react";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
export function ReplyViewHeader(coreViewModel: CoreViewModel, messagePageViewModel: MessagePageViewModel) {
const isHidden = React.createProxyState([messagePageViewModel.isReplyViewActive], ()=>!messagePageViewModel.isReplyViewActive.value);
export function ReplyViewHeader(
coreViewModel: CoreViewModel,
messagePageViewModel: MessagePageViewModel,
) {
const isHidden = React.createProxyState(
[messagePageViewModel.isReplyViewActive],
() => !messagePageViewModel.isReplyViewActive.value,
);
const label = React.createProxyState([messagePageViewModel.replyViewSelectedMessage], ()=>messagePageViewModel.replyViewSelectedMessage.value == undefined ? "" : coreViewModel.translations.chatPage.message.replyHeaderLabel(messagePageViewModel.replyViewSelectedMessage.value.sender));
const message = React.createProxyState([messagePageViewModel.replyViewSelectedMessage], ()=>messagePageViewModel.replyViewSelectedMessage.value == undefined ? "" : messagePageViewModel.replyViewSelectedMessage.value.body.value);
const label = React.createProxyState(
[messagePageViewModel.replyViewSelectedMessage],
() =>
messagePageViewModel.replyViewSelectedMessage.value == undefined
? ""
: coreViewModel.translations.chatPage.message.replyHeaderLabel(
messagePageViewModel.replyViewSelectedMessage.value
.sender,
),
);
const message = React.createProxyState(
[messagePageViewModel.replyViewSelectedMessage],
() =>
messagePageViewModel.replyViewSelectedMessage.value == undefined
? ""
: messagePageViewModel.replyViewSelectedMessage.value.body
.value,
);
return (
<div
class="reply-header"
toggle:hidden={isHidden}
>
<div class="reply-header" toggle:hidden={isHidden}>
<b class="ellipsis" subscribe:innerText={label}></b>
<span class="secondary ellipsis" subscribe:innerText={message}></span>
<span
class="secondary ellipsis"
subscribe:innerText={message}
></span>
<button
class="standard square"
on:click={messagePageViewModel.resetReplyView}
src/View/Components/taskEntry.tsx
+10 -8
View File
@@ -11,9 +11,11 @@ export function TaskEntry(taskViewModel: TaskViewModel) {
schedule: taskViewModel.time.value || "---",
};
const className = React.createProxyState([taskViewModel.isNotNext], ()=>
`${taskViewModel.isNotNext.value ? "standard" : "primary"} tile flex-no`
)
const className = React.createProxyState(
[taskViewModel.isNotNext],
() =>
`${taskViewModel.isNotNext.value ? "standard" : "primary"} tile flex-no`,
);
const view = (
<button
@@ -24,11 +26,11 @@ export function TaskEntry(taskViewModel: TaskViewModel) {
on:dragstart={taskViewModel.dragStart}
>
<div>
<span
class="secondary"
toggle:hidden={taskViewModel.isNotNext}
>
{taskViewModel.coreViewModel.translations.chatPage.calendar.eventNext}
<span class="secondary" toggle:hidden={taskViewModel.isNotNext}>
{
taskViewModel.coreViewModel.translations.chatPage
.calendar.eventNext
}
<hr></hr>
</span>
<b
src/View/Components/usageBar.tsx
+13 -13
View File
@@ -1,26 +1,26 @@
import * as React from "../../react";
export function UsageBar(label: string, valueLabel: React.State<string>, value: React.State<number>, maximum: React.State<number>) {
const style = React.createProxyState([value, maximum], ()=>`width: ${100*(value.value/maximum.value)}%`)
export function UsageBar(
label: string,
valueLabel: React.State<string>,
value: React.State<number>,
maximum: React.State<number>,
) {
const style = React.createProxyState(
[value, maximum],
() => `width: ${100 * (value.value / maximum.value)}%`,
);
return (
<div
class="surface flex-column padding gap"
>
<div class="surface flex-column padding gap">
<b>{label}</b>
<div
class="width-100 surface-alt"
style="height: 18px"
>
<div class="width-100 surface-alt" style="height: 18px">
<div
class="height-100 background-primary"
set:style={style}
></div>
</div>
<span
class="secondary"
subscribe:innerText={valueLabel}
></span>
<span class="secondary" subscribe:innerText={valueLabel}></span>
</div>
);
}
src/View/Modals/chatMessageInfoModal.tsx
+4 -1
View File
@@ -74,7 +74,10 @@ export function ChatMessageInfoModal(
</button>
<button
on:click={chatMessageViewModel.reply}
toggle:disabled={chatMessageViewModel.messagePageViewModel.isReplyViewActive}
toggle:disabled={
chatMessageViewModel.messagePageViewModel
.isReplyViewActive
}
>
{
coreViewModel.translations.chatPage.message
src/View/Modals/searchModal.tsx
+7 -4
View File
@@ -1,10 +1,10 @@
import { v4 } from "uuid";
import { ViewController } from "../viewController";
import { StringToOption } from "../Components/option";
import { DeletableListItem } from "../Components/deletableListItem";
import * as React from "../../react";
import SearchViewModel from "../../ViewModel/Utility/searchViewModel";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import {DeletableListItem} from "../Components/deletableListItem";
export function SearchModal<T>(
coreViewModel: CoreViewModel,
@@ -120,7 +120,9 @@ function SuggestionView<T>(
searchViewModel.search(suggestion);
}
return DeletableListItem(coreViewModel, suggestion,
return DeletableListItem(
coreViewModel,
suggestion,
<button
class="primary"
aria-label={coreViewModel.translations.general.applyButton}
@@ -128,6 +130,7 @@ function SuggestionView<T>(
toggle:disabled={isApplied}
>
<span class="icon">check</span>
</button>
, deleteSuggestion)
</button>,
deleteSuggestion,
);
}
src/View/Modals/settingsModal.tsx
+2 -7
View File
@@ -130,16 +130,11 @@ function SettingsInfoPane(
on:click={coreViewModel.update}
toggle:hidden={coreViewModel.noUpdateAvailable}
>
<span
subscribe:innerText={coreViewModel.updateText}
></span>
<span subscribe:innerText={coreViewModel.updateText}></span>
<span class="icon">update</span>
</button>
<button
class="standard"
on:click={coreViewModel.checkUpdates}
>
<button class="standard" on:click={coreViewModel.checkUpdates}>
{coreViewModel.translations.settings.checkUpdatesButton}
</button>
</div>
src/View/Modals/storageModal.tsx
+15 -4
View File
@@ -1,18 +1,24 @@
import { SplitModal } from "./splitModal";
import { UsageBar } from "../Components/usageBar";
import { DirectoryItemList } from "../Components/directoryItemList";
import { DangerousActionButton } from "../Components/dangerousActionButton";
import * as React from "../../react";
import StorageViewModel from "../../ViewModel/Global/storageViewModel";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import { PATH_COMPONENT_SEPARATOR } from "../../Model/Global/storageModel";
import {UsageBar} from "../Components/usageBar";
export function StorageModal(
coreViewModel: CoreViewModel,
storageViewModel: StorageViewModel,
) {
const usageValueLabel = React.createProxyState([storageViewModel.occupiedSpaceMB, storageViewModel.maximumSpaceMB], ()=>
coreViewModel.translations.storage.usageVauleLabel(storageViewModel.occupiedSpaceMB.value, storageViewModel.maximumSpaceMB.value));
const usageValueLabel = React.createProxyState(
[storageViewModel.occupiedSpaceMB, storageViewModel.maximumSpaceMB],
() =>
coreViewModel.translations.storage.usageVauleLabel(
storageViewModel.occupiedSpaceMB.value,
storageViewModel.maximumSpaceMB.value,
),
);
const detailView = React.createProxyState(
[storageViewModel.selectedPath],
@@ -26,7 +32,12 @@ export function StorageModal(
<hr></hr>
{UsageBar(coreViewModel.translations.storage.usageLabel, usageValueLabel, storageViewModel.occupiedSpaceMB, storageViewModel.maximumSpaceMB)}
{UsageBar(
coreViewModel.translations.storage.usageLabel,
usageValueLabel,
storageViewModel.occupiedSpaceMB,
storageViewModel.maximumSpaceMB,
)}
<hr></hr>
src/View/homePage.tsx
+1 -3
View File
@@ -141,9 +141,7 @@ export function HomePage(
on:click={coreViewModel.update}
toggle:hidden={coreViewModel.noUpdateAvailable}
>
<span
subscribe:innerText={coreViewModel.updateText}
></span>
<span subscribe:innerText={coreViewModel.updateText}></span>
<span class="icon">update</span>
</button>
src/View/translations.ts
+8 -4
View File
@@ -514,7 +514,8 @@ export const allTranslations: {
contentEmpty: "(leer)",
usageLabel: "Speicher",
usageVauleLabel: (used: number, max: number) => `${used} von ${max} MB belegt`,
usageVauleLabel: (used: number, max: number) =>
`${used} von ${max} MB belegt`,
path: "Pfad",
content: "Inhalt",
@@ -592,7 +593,8 @@ export const allTranslations: {
questionReaction: "Reaktion: Fragezeichen",
replyPrefixLabel: "Antworten: ",
replyHeaderLabel: (message: string) => `Antworten an "${message}"`,
replyHeaderLabel: (message: string) =>
`Antworten an "${message}"`,
},
task: {
@@ -826,7 +828,8 @@ export const allTranslations: {
contentEmpty: "(vacío)",
usageLabel: "Almacenamiento",
usageVauleLabel: (used: number, max: number) => `${used} de ${max} MB en uso`,
usageVauleLabel: (used: number, max: number) =>
`${used} de ${max} MB en uso`,
path: "Ruta",
content: "Contenido",
@@ -905,7 +908,8 @@ export const allTranslations: {
questionReaction: "Reaccion: signo de interrogación",
replyPrefixLabel: "Respuestas: ",
replyHeaderLabel: (message: string) => `Respuestas a "${message}"`,
replyHeaderLabel: (message: string) =>
`Respuestas a "${message}"`,
},
task: {
src/ViewModel/Chat/chatListViewModel.ts
+1 -1
View File
@@ -111,5 +111,5 @@ export default class ChatListViewModel {
}
return fullChannel;
}
};
}
src/ViewModel/Chat/chatMessageViewModel.ts
+22 -6
View File
@@ -17,7 +17,10 @@ export default class ChatMessageViewModel {
body: React.State<string> = new React.State("");
inlineReply: ChatMessageViewModel | undefined = undefined;
replies: React.MapState<ChatMessageViewModel> = new React.MapState();
replyCount: React.State<number> = React.createProxyState([this.replies], ()=>this.replies.value.size);
replyCount: React.State<number> = React.createProxyState(
[this.replies],
() => this.replies.value.size,
);
status: React.State<ChatMessageStatuses | any> = new React.State<any>(
undefined,
);
@@ -139,14 +142,20 @@ export default class ChatMessageViewModel {
}
// reply
const selectedMessage = this.messagePageViewModel.replyViewSelectedMessage.value;
const selectedMessage =
this.messagePageViewModel.replyViewSelectedMessage.value;
if (selectedMessage == undefined) hideForReplyView = false;
else if (selectedMessage.chatMessage.id == this.chatMessage.id) hideForReplyView = false;
else if (this.inlineReply != undefined && selectedMessage.chatMessage.id == this.inlineReply.chatMessage.id) hideForReplyView = false;
else if (selectedMessage.chatMessage.id == this.chatMessage.id)
hideForReplyView = false;
else if (
this.inlineReply != undefined &&
selectedMessage.chatMessage.id == this.inlineReply.chatMessage.id
)
hideForReplyView = false;
else hideForReplyView = true;
this.isHidden.value = hideForReactions || hideForReplyView;
}
};
// reactions
handleReaction = (reaction: ChatMessageReaction): void => {
@@ -199,7 +208,14 @@ export default class ChatMessageViewModel {
this.sentByUser = sentByUser;
this.loadData();
React.bulkSubscribe([this.messagePageViewModel.reactionFilter, this.messagePageViewModel.replyViewSelectedMessage, this.allReactions], this.toggleHiding);
React.bulkSubscribe(
[
this.messagePageViewModel.reactionFilter,
this.messagePageViewModel.replyViewSelectedMessage,
this.allReactions,
],
this.toggleHiding,
);
this.toggleHiding();
}
}
src/ViewModel/Chat/chatViewModel.ts
+4 -1
View File
@@ -189,7 +189,10 @@ export default class ChatViewModel extends ContextHost<ChatPageTypes> {
this.messagePageViewModel.handleReaction(reaction);
},
);
chatModel.changeHandlerManager.setHandler(this.chatModel.id, this.settingsPageViewModel.updateData);
chatModel.changeHandlerManager.setHandler(
this.chatModel.id,
this.settingsPageViewModel.updateData,
);
// load
this.loadPageSelection();
src/ViewModel/Global/coreViewModel.ts
+22 -12
View File
@@ -13,9 +13,15 @@ export default class CoreViewModel {
version: React.State<string> = new React.State("");
latestVersion: React.State<string> = new React.State("");
noUpdateAvailable: React.State<boolean> = React.createProxyState([this.latestVersion], () => {
return (this.latestVersion.value == "" || this.latestVersion.value == this.version.value)
})
noUpdateAvailable: React.State<boolean> = React.createProxyState(
[this.latestVersion],
() => {
return (
this.latestVersion.value == "" ||
this.latestVersion.value == this.version.value
);
},
);
updateText: React.State<string> = new React.State("");
translations: Translations;
@@ -109,16 +115,19 @@ export default class CoreViewModel {
console.error(`Could not install service worker: ${error}`);
}
}
}
};
checkUpdates = (): void => {
fetch("/version").then(async response => {
fetch("/version").then(async (response) => {
this.version.value = await response.text();
});
fetch("/latestVersion").then(async response => {
this.latestVersion.value = (await response.text()).replace("\n", "");
})
}
fetch("/latestVersion").then(async (response) => {
this.latestVersion.value = (await response.text()).replace(
"\n",
"",
);
});
};
update = async (): Promise<void> => {
if (!this.swRegistration) return;
@@ -126,7 +135,7 @@ export default class CoreViewModel {
setTimeout(() => {
window.location.reload();
}, 500);
}
};
// init
constructor(
@@ -139,8 +148,9 @@ export default class CoreViewModel {
this.translations =
allTranslations[settingsModel.language] || allTranslations.en;
this.latestVersion.subscribe(latestVersion => {
this.updateText.value = this.translations.homePage.updateButton(latestVersion);
this.latestVersion.subscribe((latestVersion) => {
this.updateText.value =
this.translations.homePage.updateButton(latestVersion);
});
document.body.addEventListener("keydown", this.handleKeyDown);
src/ViewModel/Global/fileTransferViewModel.ts
+1 -1
View File
@@ -1,13 +1,13 @@
import CoreViewModel, { Context } from "./coreViewModel";
import * as React from "../../react";
import { CommonKeys } from "../../View/keystrokes";
import { formatISO } from "../../Model/Utility/utility";
import StorageModel, {
StorageModelSubPaths,
filePaths,
} from "../../Model/Global/storageModel";
import { TransferData } from "../../Model/Global/fileTransferModel";
import ChatModel from "../../Model/Chat/chatModel";
import {formatISO} from "../../Model/Utility/utility";
export default class FileTransferViewModel extends Context {
// state
src/ViewModel/Global/notificationViewModel.ts
+3 -8
View File
@@ -16,11 +16,9 @@ export default class NotificationViewModel {
if (this.seenMessageIds.has(message.id)) return;
if (this.chatListViewModel.selectedChat.value == undefined) return;
const notification: Notification =
this.createNotification(message);
const notification: Notification = this.createNotification(message);
const currentChat =
this.chatListViewModel.selectedChat.value.chatModel
.id;
this.chatListViewModel.selectedChat.value.chatModel.id;
const currentPage =
this.chatListViewModel.selectedChat.value.selectedPage.value;
if (
@@ -39,10 +37,7 @@ export default class NotificationViewModel {
const chat = [
...this.chatListViewModel.chatViewModels.value.values(),
].find(
(chat) =>
chat.chatModel.id == notification.fullChannel,
);
].find((chat) => chat.chatModel.id == notification.fullChannel);
if (!chat) return;
chat.open();
chat.openPage(ChatPageTypes.Messages);
src/ViewModel/Global/storageViewModel.ts
+5 -3
View File
@@ -50,9 +50,11 @@ export default class StorageViewModel extends Context {
};
calculateUsage = (): void => {
this.occupiedSpaceMB.value = this.coreViewModel.storageModel.calculateUsage();
this.maximumSpaceMB.value = this.coreViewModel.storageModel.determineCapacity();
}
this.occupiedSpaceMB.value =
this.coreViewModel.storageModel.calculateUsage();
this.maximumSpaceMB.value =
this.coreViewModel.storageModel.determineCapacity();
};
// view
showStorageModal = (): void => {
src/ViewModel/Pages/boardViewModel.ts
+6 -2
View File
@@ -7,11 +7,11 @@ import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";
import * as React from "../../react";
import { Colors } from "../../colors";
import { CommonKeys } from "../../View/keystrokes";
import { PinchToZoomData } from "../../Model/Utility/utility";
import BoardsAndTasksModel, {
BoardInfoFileContent,
TaskFileContent,
} from "../../Model/Files/boardsAndTasksModel";
import {PinchToZoomData} from "../../Model/Utility/utility";
export default class BoardViewModel extends TaskContainingPageViewModel {
// state
@@ -34,7 +34,11 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
new React.ListState();
isFilterActive: React.State<boolean>;
pinchToZoomData: React.State<PinchToZoomData> = new React.State({zoom: 1, x: 0, y: 0});
pinchToZoomData: React.State<PinchToZoomData> = new React.State({
zoom: 1,
x: 0,
y: 0,
});
// paths
getBasePath = (): string[] => {
src/ViewModel/Pages/calendarPageViewModel.ts
+23 -23
View File
@@ -4,11 +4,19 @@ import CoreViewModel from "../Global/coreViewModel";
import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";
import * as React from "../../react";
import { CommonKeys } from "../../View/keystrokes";
import {
formatISO,
formatISOFromParts,
formatMonthStringFromParts,
formatTime,
isoToDateString,
isoToMonthString,
padZero,
} from "../../Model/Utility/utility";
import CalendarModel, { MonthGrid } from "../../Model/Files/calendarModel";
import BoardsAndTasksModel, {
TaskFileContent,
} from "../../Model/Files/boardsAndTasksModel";
import {formatISO, formatISOFromParts, formatMonthStringFromParts, formatTime, isoToDateString, isoToMonthString, padZero} from "../../Model/Utility/utility";
export const CALENDAR_EVENT_BOARD_ID = "events";
@@ -22,7 +30,11 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
}
get selectedDateString(): string {
return formatISOFromParts(this.selectedYear.value, this.selectedMonth.value, this.selectedDate.value);
return formatISOFromParts(
this.selectedYear.value,
this.selectedMonth.value,
this.selectedDate.value,
);
}
// paths
@@ -65,9 +77,7 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
};
getEventsForDate = (): React.MapState<TaskViewModel> | undefined => {
const paddedDate: string = padZero(
this.selectedDate.toString(), 2
);
const paddedDate: string = padZero(this.selectedDate.toString(), 2);
if (this.monthGrid.value == undefined) {
return undefined;
@@ -82,9 +92,7 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
): React.MapState<TaskViewModel> | null => {
if (this.monthGrid.value == null) return null;
const date: string = isoToDateString(
taskFileContent.date ?? "",
);
const date: string = isoToDateString(taskFileContent.date ?? "");
return this.monthGrid.value.days[date];
};
@@ -152,11 +160,7 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
};
handleDrop = (year: string, month: string, date: string): void => {
const ISOString: string = formatISOFromParts(
year,
month,
date,
);
const ISOString: string = formatISOFromParts(year, month, date);
const draggedObject: any = this.coreViewModel.draggedObject.value;
if (draggedObject instanceof TaskViewModel == false) return;
@@ -167,14 +171,11 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
handleChron = (): void => {
this.updateMonthGrid();
this.updateNextTask();
}
};
updateMonthGrid = (): void => {
const today = formatISO(this.coreViewModel.todayDate.value)
if (
this.currentTodayDate == today
)
return;
const today = formatISO(this.coreViewModel.todayDate.value);
if (this.currentTodayDate == today) return;
this.loadMonthTasks();
this.currentTodayDate = today;
this.selectedDate.callSubscriptions();
@@ -194,8 +195,8 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
if (task.time.value <= this.coreViewModel.time.value) continue;
this.nextTask.value = task;
break;
};
}
};
// load
loadMonthTasks = (): void => {
@@ -217,8 +218,7 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
}
};
loadData = (): void => {
};
loadData = (): void => {};
// init
constructor(
@@ -239,7 +239,7 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
});
this.selectedDate.subscribeSilent(() => {
this.updateNextTask();
})
});
// handlers
boardsAndTasksModel.taskHandlerManager.setHandler(
src/ViewModel/Pages/messagePageViewModel.ts
+16 -7
View File
@@ -16,9 +16,17 @@ export default class MessagePageViewModel extends Context {
new React.MapState();
filteredMessageViewModels: React.ListState<ChatMessageViewModel> =
new React.ListState();
replyViewSelectedMessage = new React.State<ChatMessageViewModel|undefined>(undefined);
isReplyViewActive: React.State<boolean> = React.createProxyState([this.replyViewSelectedMessage], ()=>this.replyViewSelectedMessage.value != undefined);
isReplyViewInactive = React.createProxyState([this.isReplyViewActive], ()=>!this.isReplyViewActive.value);
replyViewSelectedMessage = new React.State<
ChatMessageViewModel | undefined
>(undefined);
isReplyViewActive: React.State<boolean> = React.createProxyState(
[this.replyViewSelectedMessage],
() => this.replyViewSelectedMessage.value != undefined,
);
isReplyViewInactive = React.createProxyState(
[this.isReplyViewActive],
() => !this.isReplyViewActive.value,
);
searchViewModel: SearchViewModel<ChatMessageViewModel>;
isFilterModalOpen = new React.State<boolean>(false);
reactionFilter = new React.State<ReactionSymbols | undefined>(undefined);
@@ -153,13 +161,13 @@ export default class MessagePageViewModel extends Context {
this.replyViewSelectedMessage.value = message;
this.revokeReactionFilter(false);
this.setReply(message, false);
}
};
resetReplyView = (): void => {
this.replyViewSelectedMessage.value = undefined;
this.resetReply(false);
this.restoreFilter();
}
};
setFocus = (): void => {
this.focusSetter.callSubscriptions();
@@ -178,8 +186,9 @@ export default class MessagePageViewModel extends Context {
restoreFilter = (): void => {
const previousFilter = this.chatViewModel.chatModel.getFilter() as any;
if (Object.values(ReactionSymbols).includes(previousFilter)) this.setReactionFilter(previousFilter);
}
if (Object.values(ReactionSymbols).includes(previousFilter))
this.setReactionFilter(previousFilter);
};
// init
constructor(
src/ViewModel/Pages/settingsPageViewModel.ts
+5 -10
View File
@@ -30,8 +30,7 @@ export default class SettingsPageViewModel extends Context {
);
cannotSetColor: React.State<boolean> = React.createProxyState(
[this.color, this.appliedColor],
() =>
this.color.value == this.appliedColor.value,
() => this.color.value == this.appliedColor.value,
);
cannotAddSecondaryChannel: React.State<boolean> = React.createProxyState(
[this.newSecondaryChannelInput],
@@ -41,11 +40,8 @@ export default class SettingsPageViewModel extends Context {
// methods
setName = (): void => {
this.chatViewModel.chatModel.setName(
this.nameInput.value,
);
this.name.value =
this.chatViewModel.chatModel.info.name;
this.chatViewModel.chatModel.setName(this.nameInput.value);
this.name.value = this.chatViewModel.chatModel.info.name;
this.chatViewModel.chatListViewModel.updateIndices();
};
@@ -90,8 +86,7 @@ export default class SettingsPageViewModel extends Context {
// load
preloadData = (): void => {
this.name.value =
this.chatViewModel.chatModel.info.name;
this.name.value = this.chatViewModel.chatModel.info.name;
this.color.value = this.chatViewModel.chatModel.color;
this.appliedColor.value = this.color.value;
@@ -101,7 +96,7 @@ export default class SettingsPageViewModel extends Context {
this.preloadData();
this.nameInput.value = this.name.value;
this.chatViewModel.resetColor();
}
};
loadData = (): void => {
this.nameInput.value = this.name.value;
src/ViewModel/Pages/taskPageViewModel.ts
+6 -1
View File
@@ -179,7 +179,12 @@ export default class TaskPageViewModel extends ContextHost<string> {
this.chatViewModel = chatViewModel;
// filter
implementFilter(this.boardViewModels, this.boardMatches, this.boardQuery, (board) => board.name.value);
implementFilter(
this.boardViewModels,
this.boardMatches,
this.boardQuery,
(board) => board.name.value,
);
// context
this.chatViewModel.registerContext(ChatPageTypes.Tasks, this);
src/ViewModel/Pages/taskViewModel.ts
+2 -2
View File
@@ -1,4 +1,5 @@
import TaskContainingPageViewModel from "./taskContainingPageViewModel";
import CalendarPageViewModel from "./calendarPageViewModel";
import CoreViewModel, { Context } from "../Global/coreViewModel";
import ChatViewModel from "../Chat/chatViewModel";
import * as React from "../../react";
@@ -8,7 +9,6 @@ import { localeCompare, padZero } from "../../Model/Utility/utility";
import BoardsAndTasksModel, {
TaskFileContent,
} from "../../Model/Files/boardsAndTasksModel";
import CalendarPageViewModel from "./calendarPageViewModel";
export default class TaskViewModel extends Context {
// util
@@ -203,7 +203,7 @@ export default class TaskViewModel extends Context {
if (this.containingViewModel instanceof CalendarPageViewModel) {
this.containingViewModel.nextTask.subscribe((nextTask) => {
this.isNotNext.value = nextTask != this;
})
});
}
};
src/base.css
-1
View File
@@ -113,4 +113,3 @@ body[theme="dark"] #background-wrapper #grass-2 {
padding: var(--content-padding);
}
src/colors.css
+4 -2
View File
@@ -80,7 +80,8 @@ body:is([theme="dark"], [theme="black"]) [color]:not([color="standard"]).tile {
background: hsl(var(--hue), var(--sat), var(--luma), 40%);
}
body:is([theme="dark"], [theme="black"]) [color]:not([color="standard"]).background {
body:is([theme="dark"], [theme="black"])
[color]:not([color="standard"]).background {
--luma: var(--background-luma-dark);
}
@@ -100,7 +101,8 @@ body [color]:not([color="standard"]).subtle-background {
background: hsl(var(--hue), 100%, var(--luma), 40%);
}
body:is([theme="dark"], [theme="black"]) [color]:not([color="standard"]).subtle-background {
body:is([theme="dark"], [theme="black"])
[color]:not([color="standard"]).subtle-background {
--luma: var(--subtle-luma-dark);
}