VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

continue layout, add button to close chat page

Browse Source
This commit is contained in:
marlon-erler
2024-07-20 15:49:58 +02:00
parent 256f9a4066
commit c1b7dc46dd
6 changed files with 120 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+25
View File
@@ -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 {
dist/index.js
Vendored
+45 -32
View File
@@ -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(
src/View/chatPage.css
+35
View File
@@ -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;
}
src/View/chatPage.tsx
+9 -1
View File
@@ -9,7 +9,15 @@ export function ChatPage(chatViewModel: ChatViewModel) {
return (
<article id="chat-page">
<div>
<div id="ribbon"></div>
<div id="ribbon">
<button
aria-label={translations.chatPage.closeChatAudioLabe}
on:click={chatViewModel.close}
>
<span class="icon">close</span>
</button>
<span></span>
</div>
<div id="toolbar"></div>
<div id="main"></div>
</div>
src/View/translations.ts
+2 -1
View File
@@ -74,7 +74,8 @@ const englishTranslations = {
},
chatPage: {
closeChatAudioLabe: "close chat",
chatSettingsAudioLabel: "chat settings",
}
};
src/ViewModel/chatViewModel.tsx
+4
View File
@@ -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;