From c1b7dc46ddd6897728d99eadaeab664d6d08f6fb Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Sat, 20 Jul 2024 15:49:58 +0200 Subject: [PATCH] continue layout, add button to close chat page --- dist/index.css | 25 +++++++++++ dist/index.js | 77 +++++++++++++++++++-------------- src/View/chatPage.css | 35 +++++++++++++++ src/View/chatPage.tsx | 10 ++++- src/View/translations.ts | 3 +- src/ViewModel/chatViewModel.tsx | 4 ++ 6 files changed, 120 insertions(+), 34 deletions(-) diff --git a/dist/index.css b/dist/index.css index ad315342..bf2aa6df 100644 --- a/dist/index.css +++ b/dist/index.css @@ -125,6 +125,31 @@ main { grid-column: 2 / 3; grid-row: 2 / 3; } +#chat-page #ribbon, +#chat-page #toolbar, +#chat-page #main { + display: flex; +} +#chat-page #ribbon, +#chat-page #main { + flex-direction: column; +} +#chat-page #ribbon > span, +#chat-page #toolbar > span { + display: flex; + flex-direction: column; + padding: var(--gap-between-tiles); +} +#chat-page #ribbon { + justify-content: space-between; +} +#chat-page #ribbon button { + padding: 0px; + width: 100%; + height: var(--control-height); + align-items: center; + justify-content: center; +} /* src/View/homePage.css */ #home-page > div { diff --git a/dist/index.js b/dist/index.js index 1aa1f14c..d14b955a 100644 --- a/dist/index.js +++ b/dist/index.js @@ -525,6 +525,9 @@ open = () => { this.chatListViewModel.openChat(this); }; + close = () => { + this.chatListViewModel.closeChat(); + }; // init constructor(chatListViewModel2, chatModel) { this.chatModel = chatModel; @@ -582,37 +585,6 @@ } }; - // src/View/chatPage.tsx - function ChatPage(chatViewModel) { - return /* @__PURE__ */ createElement("article", { id: "chat-page" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }), /* @__PURE__ */ createElement("div", { id: "toolbar" }), /* @__PURE__ */ createElement("div", { id: "main" }))); - } - - // src/View/chatPageWrapper.tsx - function ChatPageWrapper(chatListViewModel2) { - const chatPageContent = createProxyState( - [chatListViewModel2.selectedChat], - () => { - if (chatListViewModel2.selectedChat.value == void 0) { - return /* @__PURE__ */ createElement("div", null); - } else { - return ChatPage(chatListViewModel2.selectedChat.value); - } - } - ); - const isShowingChat = createProxyState( - [chatListViewModel2.selectedChat], - () => chatListViewModel2.selectedChat.value != void 0 - ); - return /* @__PURE__ */ createElement( - "div", - { - id: "chat-page-wrapper", - "toggle:open": isShowingChat, - "children:set": chatPageContent - } - ); - } - // src/View/translations.ts var englishTranslations = { general: { @@ -672,7 +644,10 @@ /// connectButtonAudioLabel: "connect" }, - chatPage: {} + chatPage: { + closeChatAudioLabe: "close chat", + chatSettingsAudioLabel: "chat settings" + } }; var allTranslations = { en: englishTranslations @@ -680,6 +655,44 @@ var language = navigator.language.substring(0, 2); var translations = allTranslations[language] || allTranslations.en; + // src/View/chatPage.tsx + function ChatPage(chatViewModel) { + return /* @__PURE__ */ createElement("article", { id: "chat-page" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement( + "button", + { + "aria-label": translations.chatPage.closeChatAudioLabe, + "on:click": chatViewModel.close + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "close") + ), /* @__PURE__ */ createElement("span", null)), /* @__PURE__ */ createElement("div", { id: "toolbar" }), /* @__PURE__ */ createElement("div", { id: "main" }))); + } + + // src/View/chatPageWrapper.tsx + function ChatPageWrapper(chatListViewModel2) { + const chatPageContent = createProxyState( + [chatListViewModel2.selectedChat], + () => { + if (chatListViewModel2.selectedChat.value == void 0) { + return /* @__PURE__ */ createElement("div", null); + } else { + return ChatPage(chatListViewModel2.selectedChat.value); + } + } + ); + const isShowingChat = createProxyState( + [chatListViewModel2.selectedChat], + () => chatListViewModel2.selectedChat.value != void 0 + ); + return /* @__PURE__ */ createElement( + "div", + { + id: "chat-page-wrapper", + "toggle:open": isShowingChat, + "children:set": chatPageContent + } + ); + } + // 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( diff --git a/src/View/chatPage.css b/src/View/chatPage.css index f43e1680..ae710f7a 100644 --- a/src/View/chatPage.css +++ b/src/View/chatPage.css @@ -1,3 +1,4 @@ +/* show/hide */ #chat-page-wrapper { display: none; } @@ -16,6 +17,7 @@ z-index: 2; } +/* layout */ #chat-page > div { padding: 0px; @@ -46,3 +48,36 @@ grid-column: 2 / 3; grid-row: 2 / 3; } + +#chat-page #ribbon, +#chat-page #toolbar, +#chat-page #main { + display: flex; +} + +#chat-page #ribbon, +#chat-page #main { + flex-direction: column; +} + +#chat-page #ribbon > span, +#chat-page #toolbar > span { + display: flex; + flex-direction: column; + padding: var(--gap-between-tiles); +} + +/* ribbon */ +#chat-page #ribbon { + justify-content: space-between; +} + +#chat-page #ribbon button { + padding: 0px; + + width: 100%; + height: var(--control-height); + + align-items: center; + justify-content: center; +} diff --git a/src/View/chatPage.tsx b/src/View/chatPage.tsx index ffe30780..26cabcef 100644 --- a/src/View/chatPage.tsx +++ b/src/View/chatPage.tsx @@ -9,7 +9,15 @@ export function ChatPage(chatViewModel: ChatViewModel) { return (
-
+
+ + +
diff --git a/src/View/translations.ts b/src/View/translations.ts index 2127af2c..8dc33edb 100644 --- a/src/View/translations.ts +++ b/src/View/translations.ts @@ -74,7 +74,8 @@ const englishTranslations = { }, chatPage: { - + closeChatAudioLabe: "close chat", + chatSettingsAudioLabel: "chat settings", } }; diff --git a/src/ViewModel/chatViewModel.tsx b/src/ViewModel/chatViewModel.tsx index 83522e9b..c6884f43 100644 --- a/src/ViewModel/chatViewModel.tsx +++ b/src/ViewModel/chatViewModel.tsx @@ -25,6 +25,10 @@ export default class ChatViewModel { this.chatListViewModel.openChat(this); } + close = () => { + this.chatListViewModel.closeChat(); + } + // init constructor(chatListViewModel: ChatListViewModel, chatModel: ChatModel) { this.chatModel = chatModel;