From ea18fb4abafcb369ba6661925e358c8ea4317e74 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Sat, 20 Jul 2024 18:49:05 +0200 Subject: [PATCH] add setting for secondary channels --- dist/index.js | 118 +++++++++++++++++++--------- src/View/ChatPages/settingsPage.tsx | 43 +++++++++- src/View/chatPage.css | 2 +- src/View/translations.ts | 4 + src/ViewModel/chatViewModel.tsx | 28 ++++++- 5 files changed, 154 insertions(+), 41 deletions(-) diff --git a/dist/index.js b/dist/index.js index 5899ece8..751f32fe 100644 --- a/dist/index.js +++ b/dist/index.js @@ -566,6 +566,8 @@ index = new State(0); primaryChannel = new State(""); primaryChannelInput = new State(""); + secondaryChannels = new ListState(); + newSecondaryChannelInput = new State(""); color = new State("standard" /* Standard */); selectedPage = new State( "messages" /* Messages */ @@ -592,6 +594,20 @@ this.primaryChannel.value = this.chatModel.info.primaryChannel; this.chatListViewModel.updateIndices(); }; + addSecondaryChannel = () => { + this.secondaryChannels.add(this.newSecondaryChannelInput.value); + this.newSecondaryChannelInput.value = ""; + this.storeSecondaryChannels(); + }; + removeSecondaryChannel = (secondaryChannel) => { + this.secondaryChannels.remove(secondaryChannel); + this.storeSecondaryChannels(); + }; + storeSecondaryChannels = () => { + this.chatModel.setSecondaryChannels([ + ...this.secondaryChannels.value.values() + ]); + }; setColor = (newColor) => { this.color.value = newColor; this.chatModel.setColor(newColor); @@ -614,6 +630,9 @@ 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.restorePageSelection(); this.updateIndex(); @@ -772,7 +791,10 @@ settings: { settingsHeadline: "Settings", primaryChannelLabel: "Primary channel", - setPrimaryChannelButtonAudioLabel: "set primary channel" + setPrimaryChannelButtonAudioLabel: "set primary channel", + newSecondaryChannelPlaceholder: "Add secondary channel", + newSecondaryChannelAudioLabel: "name of new secondary channel", + addSecondaryChannelButtonAudioLabel: "add secondary channel" } } }; @@ -782,8 +804,26 @@ var language = navigator.language.substring(0, 2); var translations = allTranslations[language] || allTranslations.en; + // src/View/Components/deletableListItem.tsx + function DeletableListItem(text, primaryButton, ondelete) { + return /* @__PURE__ */ createElement("div", { class: "tile flex-row justify-apart align-center padding-0" }, /* @__PURE__ */ createElement("span", { class: "padding-h" }, text), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, primaryButton, /* @__PURE__ */ createElement( + "button", + { + class: "danger", + "aria-label": translations.general.deleteItemButtonAudioLabel, + "on:click": ondelete + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "delete") + ))); + } + // src/View/ChatPages/settingsPage.tsx function SettingsPage(chatViewModel) { + const secondaryChannelConverter = (secondaryChannel) => { + return DeletableListItem(secondaryChannel, /* @__PURE__ */ createElement("span", null), () => { + chatViewModel.removeSecondaryChannel(secondaryChannel); + }); + }; return /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.settingsHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.primaryChannelLabel), /* @__PURE__ */ createElement( "input", { @@ -800,31 +840,50 @@ }, translations.general.setButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "check") - )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement( + )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row width-input margin-bottom" }, /* @__PURE__ */ createElement( + "input", + { + "aria-label": translations.chatPage.settings.newSecondaryChannelAudioLabel, + placeholder: translations.chatPage.settings.newSecondaryChannelPlaceholder, + "bind:value": chatViewModel.newSecondaryChannelInput, + "on:enter": chatViewModel.addSecondaryChannel + } + ), /* @__PURE__ */ createElement( + "button", + { + class: "primary", + "aria-label": translations.chatPage.settings.addSecondaryChannelButtonAudioLabel, + "on:click": chatViewModel.addSecondaryChannel + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "add") + )), /* @__PURE__ */ createElement( "div", { - class: "flex-row gap width-input" - }, - ...Object.values(Color).map((color) => { - const isSelected = createProxyState( - [chatViewModel.color], - () => chatViewModel.color.value == color - ); - function setColor() { - chatViewModel.setColor(color); + class: "flex-column gap width-input", + "children:append": [ + chatViewModel.secondaryChannels, + secondaryChannelConverter + ] + } + ), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row gap width-input" }, ...Object.values(Color).map((color) => { + const isSelected = createProxyState( + [chatViewModel.color], + () => chatViewModel.color.value == color + ); + function setColor() { + chatViewModel.setColor(color); + } + return /* @__PURE__ */ createElement( + "button", + { + color, + class: "fill-color width-100 flex", + style: "height: 2rem", + "toggle:selected": isSelected, + "on:click": setColor } - return /* @__PURE__ */ createElement( - "button", - { - color, - class: "fill-color width-100 flex", - style: "height: 2rem", - "toggle:selected": isSelected, - "on:click": setColor - } - ); - }) - ))); + ); + })))); } // src/View/chatPage.tsx @@ -905,19 +964,6 @@ ); } - // src/View/Components/deletableListItem.tsx - function DeletableListItem(text, primaryButton, ondelete) { - return /* @__PURE__ */ createElement("div", { class: "tile flex-row justify-apart align-center padding-0" }, /* @__PURE__ */ createElement("span", { class: "padding-h" }, text), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, primaryButton, /* @__PURE__ */ createElement( - "button", - { - class: "danger", - "aria-label": translations.general.deleteItemButtonAudioLabel, - "on:click": ondelete - }, - /* @__PURE__ */ createElement("span", { class: "icon" }, "delete") - ))); - } - // src/View/Modals/connectionModal.tsx function ConnectionModal(connectionViewModel2) { const previousAddressConverter = (address) => { diff --git a/src/View/ChatPages/settingsPage.tsx b/src/View/ChatPages/settingsPage.tsx index caf28a4d..ce91a176 100644 --- a/src/View/ChatPages/settingsPage.tsx +++ b/src/View/ChatPages/settingsPage.tsx @@ -2,9 +2,18 @@ import * as React from "bloatless-react"; import ChatViewModel from "../../ViewModel/chatViewModel"; import { Color } from "../../ViewModel/colors"; +import { DeletableListItem } from "../Components/deletableListItem"; import { translations } from "../translations"; export function SettingsPage(chatViewModel: ChatViewModel) { + const secondaryChannelConverter: React.StateItemConverter = ( + secondaryChannel: string + ) => { + return DeletableListItem(secondaryChannel, , () => { + chatViewModel.removeSecondaryChannel(secondaryChannel); + }); + }; + return (
@@ -36,9 +45,39 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
+
+ + +
+
+ class="flex-column gap width-input" + children:append={[ + chatViewModel.secondaryChannels, + secondaryChannelConverter, + ]} + >
+ +
+ +
{...Object.values(Color).map((color) => { const isSelected = React.createProxyState( [chatViewModel.color], diff --git a/src/View/chatPage.css b/src/View/chatPage.css index f4974fbf..2bc04cc8 100644 --- a/src/View/chatPage.css +++ b/src/View/chatPage.css @@ -100,7 +100,7 @@ } #chat-page #ribbon > span { - width: 100%; + width: 100%; } #chat-page #ribbon button, diff --git a/src/View/translations.ts b/src/View/translations.ts index e19b3132..569f97f5 100644 --- a/src/View/translations.ts +++ b/src/View/translations.ts @@ -87,6 +87,10 @@ const englishTranslations = { primaryChannelLabel: "Primary channel", setPrimaryChannelButtonAudioLabel: "set primary channel", + + newSecondaryChannelPlaceholder: "Add secondary channel", + newSecondaryChannelAudioLabel: "name of new secondary channel", + addSecondaryChannelButtonAudioLabel: "add secondary channel", } }, }; diff --git a/src/ViewModel/chatViewModel.tsx b/src/ViewModel/chatViewModel.tsx index d6aa3720..3cde365f 100644 --- a/src/ViewModel/chatViewModel.tsx +++ b/src/ViewModel/chatViewModel.tsx @@ -17,6 +17,9 @@ export default class ChatViewModel { primaryChannel: React.State = new React.State(""); primaryChannelInput: React.State = new React.State(""); + secondaryChannels: React.ListState = new React.ListState(); + newSecondaryChannelInput: React.State = new React.State(""); + color: React.State = new React.State(Color.Standard); selectedPage: React.State = new React.State( @@ -50,12 +53,29 @@ export default class ChatViewModel { this.chatModel.setPrimaryChannel(this.primaryChannelInput.value); this.primaryChannel.value = this.chatModel.info.primaryChannel; this.chatListViewModel.updateIndices(); + }; + + addSecondaryChannel = (): void => { + this.secondaryChannels.add(this.newSecondaryChannelInput.value); + this.newSecondaryChannelInput.value = ""; + this.storeSecondaryChannels(); + }; + + removeSecondaryChannel = (secondaryChannel: string): void => { + this.secondaryChannels.remove(secondaryChannel); + this.storeSecondaryChannels(); + }; + + storeSecondaryChannels = (): void => { + this.chatModel.setSecondaryChannels([ + ...this.secondaryChannels.value.values(), + ]); } setColor = (newColor: Color): void => { this.color.value = newColor; this.chatModel.setColor(newColor); - } + }; // restore restorePageSelection = (): void => { @@ -78,7 +98,11 @@ 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.restorePageSelection();