add method for filtering
This commit is contained in:
Binary file not shown.
@@ -1,5 +1,5 @@
|
||||
import * as React from "../../react";
|
||||
import CoreViewModel from "./coreViewModel";
|
||||
import * as React from "../../react";
|
||||
|
||||
export default class ConnectionViewModel {
|
||||
// state
|
||||
@@ -48,7 +48,7 @@ export default class ConnectionViewModel {
|
||||
);
|
||||
}
|
||||
|
||||
this.hideConnectionModal();
|
||||
this.hideConnectionModal();
|
||||
};
|
||||
|
||||
// methods
|
||||
@@ -69,8 +69,8 @@ export default class ConnectionViewModel {
|
||||
this.coreViewModel.connectionModel.removeAddress(address);
|
||||
this.updatePreviousAddresses();
|
||||
|
||||
if (this.previousAddresses.value.size > 0) return;
|
||||
this.hideConnectionModal();
|
||||
if (this.previousAddresses.value.size > 0) return;
|
||||
this.hideConnectionModal();
|
||||
};
|
||||
|
||||
// view
|
||||
|
||||
@@ -40,8 +40,8 @@ export default class CoreViewModel {
|
||||
return;
|
||||
|
||||
while (this.contexts.length > 0) {
|
||||
const currentContext: Context|undefined= this.context;
|
||||
if (!currentContext) return;
|
||||
const currentContext: Context | undefined = this.context;
|
||||
if (!currentContext) return;
|
||||
currentContext.handleContextClose(fromHistoryEvent);
|
||||
this.contextStack.delete(currentContext.contextId);
|
||||
if (currentContext.contextId == contextId) break;
|
||||
@@ -49,9 +49,10 @@ export default class CoreViewModel {
|
||||
};
|
||||
|
||||
handleKeyDown = (e: KeyboardEvent): void => {
|
||||
if (!(e instanceof KeyboardEvent)) return console.trace("NOT A KEY EVENT");
|
||||
if (!(e instanceof KeyboardEvent))
|
||||
return console.trace("NOT A KEY EVENT");
|
||||
if (CoreViewModel.checkIsKeystroke(e) == false) return;
|
||||
console.log(e.key);
|
||||
console.log(e.key);
|
||||
e.preventDefault();
|
||||
const contexts: Context[] = this.contexts;
|
||||
while (contexts.length > 0) {
|
||||
@@ -97,7 +98,7 @@ export default class CoreViewModel {
|
||||
document.body.addEventListener("keydown", this.handleKeyDown);
|
||||
|
||||
window.onpopstate = () => {
|
||||
if (!this.context) return;
|
||||
if (!this.context) return;
|
||||
this.closeContext(this.context.contextId, true);
|
||||
};
|
||||
|
||||
@@ -164,11 +165,10 @@ export class ContextHost<T> extends Context {
|
||||
updateContexts = (): void => {
|
||||
if (this.isOpen == false) return;
|
||||
|
||||
const selection = this.contextSelection;
|
||||
if (!selection) return;
|
||||
const selectedContext: Context | undefined = this.contexts.get(
|
||||
selection
|
||||
);
|
||||
const selection = this.contextSelection;
|
||||
if (!selection) return;
|
||||
const selectedContext: Context | undefined =
|
||||
this.contexts.get(selection);
|
||||
if (!selectedContext) return;
|
||||
if (selectedContext != this.currentContext.value) {
|
||||
this.closeCurrentContext();
|
||||
@@ -178,7 +178,10 @@ export class ContextHost<T> extends Context {
|
||||
this.currentContext.value = selectedContext;
|
||||
};
|
||||
|
||||
constructor(contextDebugDescription: string, public coreViewModel: CoreViewModel) {
|
||||
super(contextDebugDescription);
|
||||
constructor(
|
||||
contextDebugDescription: string,
|
||||
public coreViewModel: CoreViewModel,
|
||||
) {
|
||||
super(contextDebugDescription);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as React from "../../react";
|
||||
import CoreViewModel, { Context } from "./coreViewModel";
|
||||
import * as React from "../../react";
|
||||
import { CommonKeys } from "../../View/keystrokes";
|
||||
import StorageModel, {
|
||||
StorageModelSubPaths,
|
||||
@@ -54,7 +54,9 @@ export default class FileTransferViewModel extends Context {
|
||||
exportKey: React.State<string> = new React.State("");
|
||||
exportKeyConfirmation: React.State<string> = new React.State("");
|
||||
|
||||
importedFile: React.State<File | undefined> = new React.State<File | undefined>(undefined);
|
||||
importedFile: React.State<File | undefined> = new React.State<
|
||||
File | undefined
|
||||
>(undefined);
|
||||
importedFileString: React.State<string> = new React.State("");
|
||||
importKey: React.State<string> = new React.State("");
|
||||
isImportKeyCorrect: React.State<boolean> = new React.State(true);
|
||||
@@ -139,7 +141,7 @@ export default class FileTransferViewModel extends Context {
|
||||
};
|
||||
|
||||
downloadFile = async (): Promise<void> => {
|
||||
if (this.cannotExport.value == true) return;
|
||||
if (this.cannotExport.value == true) return;
|
||||
const date = new Date().toISOString().split("T")[0];
|
||||
|
||||
const backup: Blob =
|
||||
@@ -158,7 +160,7 @@ export default class FileTransferViewModel extends Context {
|
||||
if (!input) return;
|
||||
if (!(input instanceof HTMLInputElement)) return;
|
||||
|
||||
if (!input.files) return;
|
||||
if (!input.files) return;
|
||||
const file = input.files[0];
|
||||
this.importedFile.value = file;
|
||||
};
|
||||
@@ -171,7 +173,7 @@ export default class FileTransferViewModel extends Context {
|
||||
reader.readAsText(file, "utf8");
|
||||
reader.onload = () => {
|
||||
const result = reader.result;
|
||||
if (!result) return;
|
||||
if (!result) return;
|
||||
this.importedFileString.value = result.toString();
|
||||
this.showImportDecryptDataModal();
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import * as React from "../../react";
|
||||
import { ChatPageTypes } from "../Chat/chatViewModel";
|
||||
import ChatListViewModel from "../Chat/chatListViewModel";
|
||||
import * as React from "../../react";
|
||||
import ChatModel, { ChatMessage } from "../../Model/Chat/chatModel";
|
||||
|
||||
export default class NotificationViewModel {
|
||||
@@ -35,7 +35,7 @@ export default class NotificationViewModel {
|
||||
};
|
||||
|
||||
openNotification = () => {
|
||||
const notification: Notification|undefined = this.marquee.value;
|
||||
const notification: Notification | undefined = this.marquee.value;
|
||||
if (notification == undefined) return;
|
||||
|
||||
const chat = [
|
||||
@@ -44,7 +44,7 @@ export default class NotificationViewModel {
|
||||
(chat) =>
|
||||
chat.chatModel.unwrappedPrimaryChannel == notification.chat,
|
||||
);
|
||||
if (!chat) return;
|
||||
if (!chat) return;
|
||||
chat.open();
|
||||
chat.openPage(ChatPageTypes.Messages);
|
||||
};
|
||||
@@ -56,8 +56,9 @@ export default class NotificationViewModel {
|
||||
return this.stopLoop();
|
||||
}
|
||||
|
||||
const notification: Notification|undefined = this.messagesInMarquee.shift();
|
||||
if (!notification) return;
|
||||
const notification: Notification | undefined =
|
||||
this.messagesInMarquee.shift();
|
||||
if (!notification) return;
|
||||
this.seenMessageIds.delete(notification.messageId);
|
||||
this.marquee.value = notification;
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as React from "../../react";
|
||||
import CoreViewModel, { Context } from "./coreViewModel";
|
||||
import * as React from "../../react";
|
||||
import { CommonKeys } from "../../View/keystrokes";
|
||||
import { Languages, ThemeSettings } from "../../Model/Global/settingsModel";
|
||||
|
||||
@@ -13,12 +13,12 @@ export default class SettingsViewModel extends Context {
|
||||
requiresReload = new React.State<boolean>(false);
|
||||
|
||||
firstDayOfWeek: React.State<string> = new React.State("0");
|
||||
language: React.State<Languages | string> = new React.State<Languages | string>(
|
||||
Languages.English,
|
||||
);
|
||||
theme: React.State<ThemeSettings | string> = new React.State<ThemeSettings | string>(
|
||||
ThemeSettings.System,
|
||||
);
|
||||
language: React.State<Languages | string> = new React.State<
|
||||
Languages | string
|
||||
>(Languages.English);
|
||||
theme: React.State<ThemeSettings | string> = new React.State<
|
||||
ThemeSettings | string
|
||||
>(ThemeSettings.System);
|
||||
|
||||
// guards
|
||||
cannotSetName: React.State<boolean> = React.createProxyState(
|
||||
@@ -48,121 +48,132 @@ export default class SettingsViewModel extends Context {
|
||||
};
|
||||
|
||||
showModalPage = (page: SettingsModalPages): void => {
|
||||
this.selectedModalPage.value = page;
|
||||
this.selectedModalPage.value = page;
|
||||
};
|
||||
|
||||
// view
|
||||
applyTheme = (): void => {
|
||||
let theme: string = this.theme.value;
|
||||
let theme: string = this.theme.value;
|
||||
|
||||
if (theme == ThemeSettings.Dynamic) {
|
||||
const scene = this.selectDynamicScene();
|
||||
this.setScene(scene);
|
||||
return;
|
||||
}
|
||||
if (theme == ThemeSettings.Dynamic) {
|
||||
const scene = this.selectDynamicScene();
|
||||
this.setScene(scene);
|
||||
return;
|
||||
}
|
||||
|
||||
if (theme == ThemeSettings.System) {
|
||||
theme = SettingsViewModel.getSystemTheme();
|
||||
}
|
||||
if (theme == ThemeSettings.System) {
|
||||
theme = SettingsViewModel.getSystemTheme();
|
||||
}
|
||||
|
||||
if (theme == ThemeSettings.Dark) {
|
||||
this.setScene(DynamicSceneNight);
|
||||
} else {
|
||||
this.setScene(DynamicSceneDay);
|
||||
}
|
||||
if (theme == ThemeSettings.Dark) {
|
||||
this.setScene(DynamicSceneNight);
|
||||
} else {
|
||||
this.setScene(DynamicSceneDay);
|
||||
}
|
||||
};
|
||||
|
||||
selectDynamicScene = (): DynamicScene => {
|
||||
let hour = new Date().getHours();
|
||||
let hour = new Date().getHours();
|
||||
|
||||
if (hour >= 21 || hour <= 6) {
|
||||
return DynamicSceneNight;
|
||||
} else if (hour > 6 && hour < 10) {
|
||||
return DynamicSceneSunrise;
|
||||
} else if (hour < 14) {
|
||||
return DynamicSceneDay;
|
||||
} else if (hour < 17) {
|
||||
return DynamicSceneAfternoon
|
||||
} else {
|
||||
return DynamicSceneSunset
|
||||
}
|
||||
}
|
||||
if (hour >= 21 || hour <= 6) {
|
||||
return DynamicSceneNight;
|
||||
} else if (hour > 6 && hour < 10) {
|
||||
return DynamicSceneSunrise;
|
||||
} else if (hour < 14) {
|
||||
return DynamicSceneDay;
|
||||
} else if (hour < 17) {
|
||||
return DynamicSceneAfternoon;
|
||||
} else {
|
||||
return DynamicSceneSunset;
|
||||
}
|
||||
};
|
||||
|
||||
setScene = (scene: DynamicScene): void => {
|
||||
document.body.style.setProperty("--backdrop-grass-filter", `brightness(${scene.brightness})`);
|
||||
document.body.style.setProperty(
|
||||
"--backdrop-grass-filter",
|
||||
`brightness(${scene.brightness})`,
|
||||
);
|
||||
|
||||
function setSkyColor(tone: 1|2, hue: number, saturation: number, luma: number) {
|
||||
document.body.style.setProperty(`--sky-${tone}`, `hsl(${hue}, ${saturation}%, ${luma}%)`);
|
||||
}
|
||||
setSkyColor(1, scene.hue1, scene.saturation, scene.luma);
|
||||
setSkyColor(2, scene.hue2, scene.saturation - 10, scene.luma-10);
|
||||
function setSkyColor(
|
||||
tone: 1 | 2,
|
||||
hue: number,
|
||||
saturation: number,
|
||||
luma: number,
|
||||
) {
|
||||
document.body.style.setProperty(
|
||||
`--sky-${tone}`,
|
||||
`hsl(${hue}, ${saturation}%, ${luma}%)`,
|
||||
);
|
||||
}
|
||||
setSkyColor(1, scene.hue1, scene.saturation, scene.luma);
|
||||
setSkyColor(2, scene.hue2, scene.saturation - 10, scene.luma - 10);
|
||||
|
||||
document.body.setAttribute("theme", scene.baseTheme);
|
||||
}
|
||||
document.body.setAttribute("theme", scene.baseTheme);
|
||||
};
|
||||
|
||||
// exit
|
||||
close = (): void => {
|
||||
this.coreViewModel.closeContext(this.contextId);
|
||||
this.coreViewModel.closeContext(this.contextId);
|
||||
};
|
||||
|
||||
handleContextClose = (): void => {
|
||||
this.isShowingSettingsModal.value = false;
|
||||
if (this.requiresReload.value == true) {
|
||||
window.location.reload();
|
||||
}
|
||||
this.isShowingSettingsModal.value = false;
|
||||
if (this.requiresReload.value == true) {
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
// init
|
||||
constructor(public readonly coreViewModel: CoreViewModel) {
|
||||
super("settings");
|
||||
super("settings");
|
||||
|
||||
this.username.value = coreViewModel.settingsModel.username;
|
||||
this.usernameInput.value = coreViewModel.settingsModel.username;
|
||||
this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
|
||||
this.language.value = coreViewModel.settingsModel.language;
|
||||
this.theme.value = coreViewModel.settingsModel.theme;
|
||||
this.username.value = coreViewModel.settingsModel.username;
|
||||
this.usernameInput.value = coreViewModel.settingsModel.username;
|
||||
this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
|
||||
this.language.value = coreViewModel.settingsModel.language;
|
||||
this.theme.value = coreViewModel.settingsModel.theme;
|
||||
|
||||
// subscriptions
|
||||
this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
|
||||
this.language.subscribeSilent((newValue) => {
|
||||
this.coreViewModel.settingsModel.setLanguage(newValue);
|
||||
this.requiresReload.value = true;
|
||||
});
|
||||
this.theme.subscribeSilent((newValue) => {
|
||||
this.coreViewModel.settingsModel.setTheme(newValue);
|
||||
});
|
||||
// subscriptions
|
||||
this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
|
||||
this.language.subscribeSilent((newValue) => {
|
||||
this.coreViewModel.settingsModel.setLanguage(newValue);
|
||||
this.requiresReload.value = true;
|
||||
});
|
||||
this.theme.subscribeSilent((newValue) => {
|
||||
this.coreViewModel.settingsModel.setTheme(newValue);
|
||||
});
|
||||
|
||||
// set theme
|
||||
this.theme.subscribe(() => {
|
||||
this.applyTheme();
|
||||
});
|
||||
SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
|
||||
this.applyTheme(),
|
||||
);
|
||||
const seconds = new Date().getSeconds();
|
||||
const secondsUntilNewMinute = 60-seconds;
|
||||
setTimeout(() => {
|
||||
setInterval(this.applyTheme, 1000*60);
|
||||
}, secondsUntilNewMinute);
|
||||
// set theme
|
||||
this.theme.subscribe(() => {
|
||||
this.applyTheme();
|
||||
});
|
||||
SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
|
||||
this.applyTheme(),
|
||||
);
|
||||
const seconds = new Date().getSeconds();
|
||||
const secondsUntilNewMinute = 60 - seconds;
|
||||
setTimeout(() => {
|
||||
setInterval(this.applyTheme, 1000 * 60);
|
||||
}, secondsUntilNewMinute);
|
||||
|
||||
// keystrokes
|
||||
this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
|
||||
// keystrokes
|
||||
this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
|
||||
}
|
||||
|
||||
static generateThemeMedia(): MediaQueryList {
|
||||
return window.matchMedia("(prefers-color-scheme: dark)");
|
||||
return window.matchMedia("(prefers-color-scheme: dark)");
|
||||
}
|
||||
|
||||
static getSystemTheme(): string {
|
||||
const media = SettingsViewModel.generateThemeMedia();
|
||||
return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light;
|
||||
const media = SettingsViewModel.generateThemeMedia();
|
||||
return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light;
|
||||
}
|
||||
}
|
||||
|
||||
export enum SettingsModalPages {
|
||||
Appearance,
|
||||
Regional,
|
||||
Info,
|
||||
Regional,
|
||||
Info,
|
||||
}
|
||||
|
||||
export interface DynamicScene {
|
||||
@@ -176,40 +187,40 @@ export interface DynamicScene {
|
||||
export const DynamicSceneNight: DynamicScene = {
|
||||
hue1: 215,
|
||||
hue2: 220,
|
||||
saturation : 50,
|
||||
saturation: 50,
|
||||
luma: 25,
|
||||
brightness: 0.4,
|
||||
baseTheme: ThemeSettings.Dark,
|
||||
}
|
||||
};
|
||||
export const DynamicSceneSunrise: DynamicScene = {
|
||||
hue1: 45,
|
||||
hue2: 190,
|
||||
saturation : 100,
|
||||
saturation: 100,
|
||||
luma: 50,
|
||||
brightness: 1.2,
|
||||
baseTheme: ThemeSettings.Light,
|
||||
}
|
||||
};
|
||||
export const DynamicSceneDay: DynamicScene = {
|
||||
hue1: 190,
|
||||
hue2: 180,
|
||||
saturation : 100,
|
||||
saturation: 100,
|
||||
luma: 70,
|
||||
brightness: 1.4,
|
||||
baseTheme: ThemeSettings.Light,
|
||||
}
|
||||
};
|
||||
export const DynamicSceneAfternoon: DynamicScene = {
|
||||
hue1: 195,
|
||||
hue2: 220,
|
||||
saturation : 100,
|
||||
saturation: 100,
|
||||
luma: 50,
|
||||
brightness: 0.8,
|
||||
baseTheme: ThemeSettings.Light,
|
||||
}
|
||||
};
|
||||
export const DynamicSceneSunset: DynamicScene = {
|
||||
hue1: 20,
|
||||
hue2: 260,
|
||||
saturation : 100,
|
||||
saturation: 100,
|
||||
luma: 50,
|
||||
brightness: 0.4,
|
||||
baseTheme: ThemeSettings.Dark,
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as React from "../../react";
|
||||
import CoreViewModel, { Context } from "./coreViewModel";
|
||||
import * as React from "../../react";
|
||||
import { CommonKeys } from "../../View/keystrokes";
|
||||
import StorageModel, {
|
||||
PATH_COMPONENT_SEPARATOR,
|
||||
|
||||
Reference in New Issue
Block a user