From 45e3ed31eec25b3159ae4e91a990397ecb6025d7 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Sat, 11 Apr 2026 20:37:19 +0000 Subject: [PATCH] add separate message filter modal, clean styles --- dist/index.js | 98 +++++++++++++-------- src/View/ChatPages/messagePage.tsx | 9 +- src/View/Modals/messageFilterModal.tsx | 49 +++++++++++ src/View/Modals/searchModal.tsx | 4 +- src/ViewModel/Pages/messagePageViewModel.ts | 4 + 5 files changed, 118 insertions(+), 46 deletions(-) create mode 100644 src/View/Modals/messageFilterModal.tsx diff --git a/dist/index.js b/dist/index.js index 231ff9d5..fff4bc87 100644 --- a/dist/index.js +++ b/dist/index.js @@ -2221,6 +2221,9 @@ this.openFilterModal = () => { this.isFilterModalOpen.value = true; }; + this.closeFilterModal = () => { + this.isFilterModalOpen.value = false; + }; // load this.loadData = () => { this.chatMessageViewModels.clear(); @@ -3607,50 +3610,25 @@ ); } - // src/View/Modals/searchModal.tsx - function SearchModal(coreViewModel2, searchViewModel, headline, converter, isOpen) { - function close() { - isOpen.value = false; - } - const suggestionId = v4_default(); - return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isOpen }, /* @__PURE__ */ createElement("div", { style: "max-width: 64rem" }, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, headline), /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement( + // src/View/Modals/messageFilterModal.tsx + function MessageFilterModal(coreViewModel2, messagePageViewModel, converter) { + return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": messagePageViewModel.isFilterModalOpen }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.chatPage.message.messageFilterHeadline), /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement( "input", { placeholder: coreViewModel2.translations.general.searchLabel, - "bind:value": searchViewModel.searchInput, - "on:enter": searchViewModel.applySearch, - list: suggestionId - } - ), /* @__PURE__ */ createElement( - "datalist", - { - hidden: true, - id: suggestionId, - "children:append": [ - searchViewModel.suggestions, - StringToOption - ] + "bind:value": messagePageViewModel.searchViewModel.searchInput, + "on:enter": messagePageViewModel.searchViewModel.applySearch } ), /* @__PURE__ */ createElement( "button", { class: "primary", "aria-label": coreViewModel2.translations.general.searchButtonAudioLabel, - "on:click": searchViewModel.applySearch, - "toggle:disabled": searchViewModel.cannotApplySearch + "on:click": messagePageViewModel.searchViewModel.applySearch, + "toggle:disabled": messagePageViewModel.searchViewModel.cannotApplySearch }, /* @__PURE__ */ createElement("span", { class: "icon" }, "search") - )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement( - "div", - { - class: "grid gap", - style: "grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))", - "children:append": [ - searchViewModel.matchingObjects, - converter - ] - } - )), /* @__PURE__ */ createElement("button", { "on:click": close }, coreViewModel2.translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))); + )), /* @__PURE__ */ createElement("hr", null)), /* @__PURE__ */ createElement("button", { "on:click": messagePageViewModel.closeFilterModal }, coreViewModel2.translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))); } // src/View/ChatPages/messagePage.tsx @@ -3709,12 +3687,10 @@ "toggle:disabled": messagePageViewModel.cannotSendMessage }, /* @__PURE__ */ createElement("span", { class: "icon" }, "send") - ))))))), SearchModal( + ))))))), MessageFilterModal( coreViewModel2, - messagePageViewModel.searchViewModel, - coreViewModel2.translations.chatPage.message.messageFilterHeadline, - ChatMessageViewModelToView, - messagePageViewModel.isFilterModalOpen + messagePageViewModel, + ChatMessageViewModelToView )); } @@ -4235,6 +4211,52 @@ return RibbonButton(label, icon, isSelected, select); } + // src/View/Modals/searchModal.tsx + function SearchModal(coreViewModel2, searchViewModel, headline, converter, isOpen) { + function close() { + isOpen.value = false; + } + const suggestionId = v4_default(); + return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isOpen, extended: true }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, headline), /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement( + "input", + { + placeholder: coreViewModel2.translations.general.searchLabel, + "bind:value": searchViewModel.searchInput, + "on:enter": searchViewModel.applySearch, + list: suggestionId + } + ), /* @__PURE__ */ createElement( + "datalist", + { + hidden: true, + id: suggestionId, + "children:append": [ + searchViewModel.suggestions, + StringToOption + ] + } + ), /* @__PURE__ */ createElement( + "button", + { + class: "primary", + "aria-label": coreViewModel2.translations.general.searchButtonAudioLabel, + "on:click": searchViewModel.applySearch, + "toggle:disabled": searchViewModel.cannotApplySearch + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "search") + )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement( + "div", + { + class: "grid gap", + style: "grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr))", + "children:append": [ + searchViewModel.matchingObjects, + converter + ] + } + )), /* @__PURE__ */ createElement("button", { "on:click": close }, coreViewModel2.translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))); + } + // src/View/ChatPages/boardPage.tsx function BoardPage(coreViewModel2, boardViewModel) { boardViewModel.loadData(); diff --git a/src/View/ChatPages/messagePage.tsx b/src/View/ChatPages/messagePage.tsx index f9d73f05..3834a7e6 100644 --- a/src/View/ChatPages/messagePage.tsx +++ b/src/View/ChatPages/messagePage.tsx @@ -6,7 +6,7 @@ import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel"; import CoreViewModel from "../../ViewModel/Global/coreViewModel"; import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel"; import { ChatMessage } from "../Components/chatMessage"; -import { SearchModal } from "../Modals/searchModal"; +import { MessageFilterModal } from "../Modals/messageFilterModal"; export function MessagePage( coreViewModel: CoreViewModel, @@ -114,13 +114,10 @@ export function MessagePage( - {SearchModal( + {MessageFilterModal( coreViewModel, - messagePageViewModel.searchViewModel, - coreViewModel.translations.chatPage.message - .messageFilterHeadline, + messagePageViewModel, ChatMessageViewModelToView, - messagePageViewModel.isFilterModalOpen, )} ); diff --git a/src/View/Modals/messageFilterModal.tsx b/src/View/Modals/messageFilterModal.tsx new file mode 100644 index 00000000..7ac32d37 --- /dev/null +++ b/src/View/Modals/messageFilterModal.tsx @@ -0,0 +1,49 @@ +import * as React from "bloatless-react"; + +import SearchViewModel from "../../ViewModel/Utility/searchViewModel"; +import { StringToOption } from "../Components/option"; +import { v4 } from "uuid"; +import CoreViewModel from "../../ViewModel/Global/coreViewModel"; +import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel"; + +export function MessageFilterModal( + coreViewModel: CoreViewModel, + messagePageViewModel: MessagePageViewModel, + converter: React.StateItemConverter, +) { + return ( +
+
+
+

{coreViewModel.translations.chatPage.message.messageFilterHeadline}

+
+ + +
+ +
+
+ +
+
+ ); +} diff --git a/src/View/Modals/searchModal.tsx b/src/View/Modals/searchModal.tsx index aed9ab1d..9672e2e9 100644 --- a/src/View/Modals/searchModal.tsx +++ b/src/View/Modals/searchModal.tsx @@ -19,8 +19,8 @@ export function SearchModal( const suggestionId = v4(); return ( -
-
+
+

{headline}

diff --git a/src/ViewModel/Pages/messagePageViewModel.ts b/src/ViewModel/Pages/messagePageViewModel.ts index fada131a..f7856d65 100644 --- a/src/ViewModel/Pages/messagePageViewModel.ts +++ b/src/ViewModel/Pages/messagePageViewModel.ts @@ -90,6 +90,10 @@ export default class MessagePageViewModel { this.isFilterModalOpen.value = true; }; + closeFilterModal = (): void => { + this.isFilterModalOpen.value = false; + }; + // load loadData = (): void => { this.chatMessageViewModels.clear();