From 11940231cab5f47cc903b76e8e7cd1984b6d1381 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Sat, 20 Jul 2024 18:58:25 +0200 Subject: [PATCH] improve ui --- dist/index.css | 14 ++++++++++++++ dist/index.js | 16 ++++++++++++---- dist/styles.css | 2 +- src/Model/Utility/utility.ts | 5 +++++ src/Model/chatListModel.ts | 3 ++- src/ViewModel/chatViewModel.tsx | 16 +++++++++++----- src/colors.css | 26 ++++++++++++++++++++++++++ 7 files changed, 71 insertions(+), 11 deletions(-) diff --git a/dist/index.css b/dist/index.css index 02533552..a1520ec2 100644 --- a/dist/index.css +++ b/dist/index.css @@ -92,11 +92,13 @@ main { /* src/colors.css */ [color]:not([color=standard]) { --primary: hsl(var(--hue), 100%, var(--accent-luma)); + --text-on-color: hsl(0, 0%, var(--accent-text-luma)); --link: hsl(var(--hue), 100%, var(--accent-luma)); } @media (prefers-color-scheme: dark) { [color]:not([color=standard]) { --accent-luma: var(--accent-luma-dark); + --accent-text-luma: var(--accent-text-luma-dark); } } [color]:not([color=standard]).tile { @@ -136,31 +138,43 @@ main { --hue: 20; --accent-luma: 50%; --accent-luma-dark: 70%; + --accent-text-luma: 100%; + --accent-text-luma-dark: 100%; } [color=yellow] { --hue: 50; --accent-luma: 50%; --accent-luma-dark: 60%; + --accent-text-luma: 100%; + --accent-text-luma-dark: 0%; } [color=mint] { --hue: 150; --accent-luma: 40%; --accent-luma-dark: 60%; + --accent-text-luma: 100%; + --accent-text-luma-dark: 0%; } [color=lightblue] { --hue: 180; --accent-luma: 40%; --accent-luma-dark: 60%; + --accent-text-luma: 100%; + --accent-text-luma-dark: 0%; } [color=blue] { --hue: 220; --accent-luma: 50%; --accent-luma-dark: 70%; + --accent-text-luma: 100%; + --accent-text-luma-dark: 100%; } [color=purple] { --hue: 280; --accent-luma: 50%; --accent-luma-dark: 70%; + --accent-text-luma: 100%; + --accent-text-luma-dark: 100%; } /* src/View/chatPage.css */ diff --git a/dist/index.js b/dist/index.js index 751f32fe..8739ec63 100644 --- a/dist/index.js +++ b/dist/index.js @@ -239,6 +239,9 @@ function parse(string) { return JSON.parse(string); } + function localeCompare(a, b) { + return a.localeCompare(b); + } // src/Model/Utility/typeSafety.ts var DATA_VERSION = "v2"; @@ -539,7 +542,7 @@ for (const chatModel of this.chatModels) { allChannels.push(chatModel.info.primaryChannel); } - this.sortedPrimaryChannels = allChannels.sort((a, b) => a.localeCompare(b)); + this.sortedPrimaryChannels = allChannels.sort(localeCompare); }; // restore loadChats = () => { @@ -598,6 +601,7 @@ this.secondaryChannels.add(this.newSecondaryChannelInput.value); this.newSecondaryChannelInput.value = ""; this.storeSecondaryChannels(); + this.restoreSecondaryChannels(); }; removeSecondaryChannel = (secondaryChannel) => { this.secondaryChannels.remove(secondaryChannel); @@ -623,6 +627,12 @@ this.storageModel.store(path, newPage); }); }; + restoreSecondaryChannels = () => { + this.secondaryChannels.clear(); + for (const secondaryChannel of this.chatModel.info.secondaryChannels.sort(localeCompare)) { + this.secondaryChannels.add(secondaryChannel); + } + }; // init constructor(chatListViewModel2, chatModel) { this.chatModel = chatModel; @@ -630,10 +640,8 @@ this.chatListViewModel = chatListViewModel2; this.primaryChannel.value = chatModel.info.primaryChannel; this.primaryChannelInput.value = chatModel.info.primaryChannel; - for (const secondaryChannel of chatModel.info.secondaryChannels) { - this.secondaryChannels.add(secondaryChannel); - } this.color.value = chatModel.color; + this.restoreSecondaryChannels(); this.restorePageSelection(); this.updateIndex(); } diff --git a/dist/styles.css b/dist/styles.css index 86dbefa5..187f9ff6 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -215,7 +215,7 @@ button.ghost:active { /* danger button */ button.danger { background: var(--danger); - color: var(--text-on-color); + color: white; } @media (hover: hover) { button.danger:hover { diff --git a/src/Model/Utility/utility.ts b/src/Model/Utility/utility.ts index abce4e7d..277818df 100644 --- a/src/Model/Utility/utility.ts +++ b/src/Model/Utility/utility.ts @@ -11,3 +11,8 @@ export function stringify(data: any): string { export function parse(string: string): any { return JSON.parse(string); } + +// sort +export function localeCompare(a: string, b: string): number { + return a.localeCompare(b); +} \ No newline at end of file diff --git a/src/Model/chatListModel.ts b/src/Model/chatListModel.ts index 75c285c3..efb8971f 100644 --- a/src/Model/chatListModel.ts +++ b/src/Model/chatListModel.ts @@ -1,6 +1,7 @@ import StorageModel, { storageKeys } from "./storageModel"; import { ChatModel } from "./chatModel"; +import { localeCompare } from "./Utility/utility"; import { v4 } from "uuid"; export default class ChatListModel { @@ -40,7 +41,7 @@ export default class ChatListModel { allChannels.push(chatModel.info.primaryChannel); } - this.sortedPrimaryChannels = allChannels.sort((a, b) => a.localeCompare(b)); + this.sortedPrimaryChannels = allChannels.sort(localeCompare); }; // restore diff --git a/src/ViewModel/chatViewModel.tsx b/src/ViewModel/chatViewModel.tsx index 3cde365f..a1ecda4c 100644 --- a/src/ViewModel/chatViewModel.tsx +++ b/src/ViewModel/chatViewModel.tsx @@ -5,6 +5,7 @@ import StorageModel, { storageKeys } from "../Model/storageModel"; import ChatListViewModel from "./chatListViewModel"; import { ChatModel } from "../Model/chatModel"; import { Color } from "./colors"; +import { localeCompare } from "../Model/Utility/utility"; export default class ChatViewModel { chatModel: ChatModel; @@ -59,6 +60,7 @@ export default class ChatViewModel { this.secondaryChannels.add(this.newSecondaryChannelInput.value); this.newSecondaryChannelInput.value = ""; this.storeSecondaryChannels(); + this.restoreSecondaryChannels(); }; removeSecondaryChannel = (secondaryChannel: string): void => { @@ -70,7 +72,7 @@ export default class ChatViewModel { this.chatModel.setSecondaryChannels([ ...this.secondaryChannels.value.values(), ]); - } + }; setColor = (newColor: Color): void => { this.color.value = newColor; @@ -90,6 +92,13 @@ export default class ChatViewModel { }); }; + restoreSecondaryChannels = (): void => { + this.secondaryChannels.clear(); + for (const secondaryChannel of this.chatModel.info.secondaryChannels.sort(localeCompare)) { + this.secondaryChannels.add(secondaryChannel); + } + }; + // init constructor(chatListViewModel: ChatListViewModel, chatModel: ChatModel) { this.chatModel = chatModel; @@ -99,12 +108,9 @@ export default class ChatViewModel { this.primaryChannel.value = chatModel.info.primaryChannel; this.primaryChannelInput.value = chatModel.info.primaryChannel; - for (const secondaryChannel of chatModel.info.secondaryChannels) { - this.secondaryChannels.add(secondaryChannel); - } - this.color.value = chatModel.color; + this.restoreSecondaryChannels(); this.restorePageSelection(); this.updateIndex(); } diff --git a/src/colors.css b/src/colors.css index 2494cfcf..b4eeb9b9 100644 --- a/src/colors.css +++ b/src/colors.css @@ -1,12 +1,14 @@ /* basic */ [color]:not([color="standard"]) { --primary: hsl(var(--hue), 100%, var(--accent-luma)); + --text-on-color: hsl(0, 0%, var(--accent-text-luma)); --link: hsl(var(--hue), 100%, var(--accent-luma)); } @media (prefers-color-scheme: dark) { [color]:not([color="standard"]) { --accent-luma: var(--accent-luma-dark); + --accent-text-luma: var(--accent-text-luma-dark); } } @@ -57,36 +59,60 @@ /* definitions */ [color="coral"] { --hue: 20; + --accent-luma: 50%; --accent-luma-dark: 70%; + + --accent-text-luma: 100%; + --accent-text-luma-dark: 100%; } [color="yellow"] { --hue: 50; + --accent-luma: 50%; --accent-luma-dark: 60%; + + --accent-text-luma: 100%; + --accent-text-luma-dark: 0%; } [color="mint"] { --hue: 150; + --accent-luma: 40%; --accent-luma-dark: 60%; + + --accent-text-luma: 100%; + --accent-text-luma-dark: 0%; } [color="lightblue"] { --hue: 180; + --accent-luma: 40%; --accent-luma-dark: 60%; + + --accent-text-luma: 100%; + --accent-text-luma-dark: 0%; } [color="blue"] { --hue: 220; + --accent-luma: 50%; --accent-luma-dark: 70%; + + --accent-text-luma: 100%; + --accent-text-luma-dark: 100%; } [color="purple"] { --hue: 280; + --accent-luma: 50%; --accent-luma-dark: 70%; + + --accent-text-luma: 100%; + --accent-text-luma-dark: 100%; }