diff --git a/dist/index.css b/dist/index.css index 9c4c7eb6..605d6214 100644 --- a/dist/index.css +++ b/dist/index.css @@ -360,8 +360,8 @@ body[showing-chat] #chat-page-wrapper { overflow: auto; } #message-page #composer { - border-top: 1px solid var(--border); display: flex; + justify-content: center; } #message-page #composer input { margin: 0px; @@ -369,13 +369,71 @@ body[showing-chat] #chat-page-wrapper { max-width: unset; flex: 1; } +@media (max-width: 700px) { + #message-page #composer { + border-top: 1px solid var(--border); + } + #message-page #composer div { + width: 100%; + max-width: unset; + display: flex; + } +} +@media (min-width: 700px) { + #message-page #composer .content-width-constraint, + #message-page #composer .input-width-constraint { + display: flex; + justify-content: flex-end; + width: 100%; + max-width: var(--max-content-width); + } + #message-page #composer .content-width-constraint { + max-width: var(--max-content-width); + } + #message-page #composer .input-width-constraint { + max-width: var(--max-input-width); + } +} #message-page #message-container { display: flex; flex-direction: column; + align-items: center; padding: var(--content-padding); gap: var(--gap-between-tiles); + height: auto; + max-height: unset; scroll-behavior: smooth; } +.message-bubble { + display: flex; + width: 100%; + max-width: var(--max-content-width); +} +.message-bubble > div { + display: flex; + flex-direction: column; + background-color: var(--surface); + padding: var(--control-padding); + width: 100%; + max-width: var(--max-input-width); +} +.message-bubble .timestamp, +.message-bubble .sender-name { + font-size: 0.8rem; + opacity: 0.6; +} +.message-bubble .sender-name { + font-weight: bold; +} +.message-bubble[sentbyuser] { + justify-content: flex-end; +} +.message-bubble[sentbyuser] { + align-items: flex-end; +} +.message-bubble[sentbyuser] span { + text-align: right; +} /* src/View/Components/chatEntry.css */ .chat-entry { diff --git a/dist/index.js b/dist/index.js index c6d4acb6..64f7db27 100644 --- a/dist/index.js +++ b/dist/index.js @@ -664,12 +664,14 @@ sender; dateSent; body = new State(""); - constructor(chatModel, chatMessage) { + sentByUser; + constructor(chatModel, chatMessage, sentByUser) { this.chatModel = chatModel; this.channel = chatMessage.channel; this.sender = chatMessage.sender; this.dateSent = new Date(chatMessage.dateSent).toLocaleString(); this.body.value = chatMessage.body; + this.sentByUser = sentByUser; } }; @@ -721,7 +723,11 @@ }; // add addChatMessage = (chatMessage) => { - const chatMessageModel = new ChatMessageViewModel(this.chatModel, chatMessage); + const chatMessageModel = new ChatMessageViewModel( + this.chatModel, + chatMessage, + chatMessage.sender == this.settingsViewModel.username.value + ); this.chatMessageViewModels.add(chatMessageModel); }; // settings @@ -901,7 +907,20 @@ // src/View/Components/chatMessage.tsx function ChatMessage(chatMessageViewModel) { - return /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, chatMessageViewModel.sender), /* @__PURE__ */ createElement("b", { "subscribe:innerText": chatMessageViewModel.body }), /* @__PURE__ */ createElement("span", null, chatMessageViewModel.dateSent))); + return /* @__PURE__ */ createElement( + "div", + { + class: "message-bubble", + "toggle:sentbyuser": chatMessageViewModel.sentByUser + }, + /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "sender-name" }, chatMessageViewModel.sender), /* @__PURE__ */ createElement( + "span", + { + class: "body", + "subscribe:innerText": chatMessageViewModel.body + } + ), /* @__PURE__ */ createElement("span", { class: "timestamp" }, chatMessageViewModel.dateSent)) + ); } var ChatMessageViewModelToView = (chatMessageViewModel) => { console.log(chatMessageViewModel); @@ -1018,7 +1037,7 @@ } chatViewModel.chatMessageViewModels.subscribeSilent(scrollDownIfApplicable); setTimeout(() => scrollDown(), 100); - return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__PURE__ */ createElement("div", { class: "content" }, messageContainer, /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement( + return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__PURE__ */ createElement("div", { class: "content" }, messageContainer, /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement("div", { class: "content-width-constraint" }, /* @__PURE__ */ createElement("div", { class: "input-width-constraint" }, /* @__PURE__ */ createElement( "input", { "bind:value": chatViewModel.composingMessage, @@ -1034,7 +1053,7 @@ "toggle:disabled": chatViewModel.cannotSendMessage }, /* @__PURE__ */ createElement("span", { class: "icon" }, "send") - )))); + )))))); } // src/View/Components/deletableListItem.tsx diff --git a/src/Model/chatMessageViewModel.ts b/src/Model/chatMessageViewModel.ts index 02bd52f4..15f0e256 100644 --- a/src/Model/chatMessageViewModel.ts +++ b/src/Model/chatMessageViewModel.ts @@ -12,13 +12,19 @@ export default class ChatMessageViewModel { sender: string; dateSent: string; body: React.State = new React.State(""); + sentByUser: boolean; - constructor(chatModel: ChatModel, chatMessage: ChatMessage) { + constructor( + chatModel: ChatModel, + chatMessage: ChatMessage, + sentByUser: boolean + ) { this.chatModel = chatModel; this.channel = chatMessage.channel; this.sender = chatMessage.sender; this.dateSent = new Date(chatMessage.dateSent).toLocaleString(); this.body.value = chatMessage.body; + this.sentByUser = sentByUser; } } diff --git a/src/View/ChatPages/messagePage.css b/src/View/ChatPages/messagePage.css index 52707c65..b6cc7b9f 100644 --- a/src/View/ChatPages/messagePage.css +++ b/src/View/ChatPages/messagePage.css @@ -14,9 +14,8 @@ /* composer */ #message-page #composer { - border-top: 1px solid var(--border); - display: flex; + justify-content: center; } #message-page #composer input { @@ -28,12 +27,88 @@ flex: 1; } +@media (max-width: 700px) { + #message-page #composer { + border-top: 1px solid var(--border); + } + + #message-page #composer div { + width: 100%; + max-width: unset; + + display: flex; + } +} + +@media (min-width: 700px) { + #message-page #composer .content-width-constraint, + #message-page #composer .input-width-constraint { + display: flex; + justify-content: flex-end; + + width: 100%; + max-width: var(--max-content-width); + } + + #message-page #composer .content-width-constraint { + max-width: var(--max-content-width); + } + + #message-page #composer .input-width-constraint { + max-width: var(--max-input-width); + } +} + +/* message */ #message-page #message-container { display: flex; flex-direction: column; + align-items: center; padding: var(--content-padding); gap: var(--gap-between-tiles); + height: auto; + max-height: unset; + scroll-behavior: smooth; } + +.message-bubble { + display: flex; + width: 100%; + max-width: var(--max-content-width); +} + +.message-bubble > div { + display: flex; + flex-direction: column; + + background-color: var(--surface); + padding: var(--control-padding); + + width: 100%; + max-width: var(--max-input-width); +} + +.message-bubble .timestamp, +.message-bubble .sender-name { + font-size: 0.8rem; + opacity: 0.6; +} + +.message-bubble .sender-name { + font-weight: bold; +} + +.message-bubble[sentbyuser] { + justify-content: flex-end; +} + +.message-bubble[sentbyuser] { + align-items: flex-end; +} + +.message-bubble[sentbyuser] span { + text-align: right; +} diff --git a/src/View/ChatPages/messagePage.tsx b/src/View/ChatPages/messagePage.tsx index 1038cb51..8bf4d69c 100644 --- a/src/View/ChatPages/messagePage.tsx +++ b/src/View/ChatPages/messagePage.tsx @@ -30,7 +30,7 @@ export function MessagePage(chatViewModel: ChatViewModel) { scrollDown(); } chatViewModel.chatMessageViewModels.subscribeSilent(scrollDownIfApplicable); - setTimeout(() => scrollDown(), 100) + setTimeout(() => scrollDown(), 100); return (
@@ -40,21 +40,27 @@ export function MessagePage(chatViewModel: ChatViewModel) {
{messageContainer}
- - +
+
+ + +
+
diff --git a/src/View/Components/chatMessage.tsx b/src/View/Components/chatMessage.tsx index 4360e721..76e653ae 100644 --- a/src/View/Components/chatMessage.tsx +++ b/src/View/Components/chatMessage.tsx @@ -4,11 +4,17 @@ import ChatMessageViewModel from "../../Model/chatMessageViewModel"; export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) { return ( -
+
- {chatMessageViewModel.sender} - - {chatMessageViewModel.dateSent} + {chatMessageViewModel.sender} + + {chatMessageViewModel.dateSent}
); diff --git a/src/ViewModel/chatViewModel.ts b/src/ViewModel/chatViewModel.ts index 4b449920..a01adcac 100644 --- a/src/ViewModel/chatViewModel.ts +++ b/src/ViewModel/chatViewModel.ts @@ -6,6 +6,7 @@ import StorageModel, { storageKeys } from "../Model/storageModel"; import ChatListViewModel from "./chatListViewModel"; import ChatMessageViewModel from "../Model/chatMessageViewModel"; import { Color } from "./colors"; +import SettingsModel from "../Model/settingsModel"; import SettingsViewModel from "./settingsViewModel"; import { localeCompare } from "../Model/Utility/utility"; @@ -37,7 +38,8 @@ export default class ChatViewModel { ChatPageType.Messages ); - chatMessageViewModels: React.ListState = new React.ListState(); + chatMessageViewModels: React.ListState = + new React.ListState(); composingMessage: React.State = new React.State(""); // guards @@ -70,7 +72,11 @@ export default class ChatViewModel { // add addChatMessage = (chatMessage: ChatMessage): void => { - const chatMessageModel = new ChatMessageViewModel(this.chatModel, chatMessage); + const chatMessageModel = new ChatMessageViewModel( + this.chatModel, + chatMessage, + chatMessage.sender == this.settingsViewModel.username.value + ); this.chatMessageViewModels.add(chatMessageModel); };