From 6516c7ab711f8597a7797efc695d0433a9e921a6 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Sat, 13 Jul 2024 15:10:54 +0200 Subject: [PATCH] addingg toggle to split or hide chat --- dist/index.css | 78 +++++++++++++------------- dist/index.js | 46 +++++++++++----- src/Model/model.ts | 20 ++++++- src/Tabs/messageTab.tsx | 22 +++++++- src/Views/Chat/threadView.tsx | 6 +- src/Views/Objects/objectPane.tsx | 4 +- src/styles.css | 95 ++++++++++++++++---------------- 7 files changed, 162 insertions(+), 109 deletions(-) diff --git a/dist/index.css b/dist/index.css index a708588d..5c429a0d 100644 --- a/dist/index.css +++ b/dist/index.css @@ -3,9 +3,8 @@ border-left: 10px solid var(--text-warning); } :root { - --thread-view-height-with-tools: 8rem; - --thread-view-width-with-tools: 20rem; - --footer-top-line: calc(var(--control-height) + var(--safe-area-bottom)); + --split-thread-height: 8rem; + --split-thread-width: 20rem; } .object-entry-wide { width: 320px; @@ -14,58 +13,59 @@ #message-tab { flex-direction: column; } -.message-tab-content-wrapper { - display: flex; - flex-direction: column; -} .chat-object-view { display: none; } -#message-tab:has([showingchattools]) :is(.thread-view, .chat-object-view) { - overflow: scroll; - position: absolute; - padding: 0px; -} -#message-tab:has([showingchattools]) header { +[showingobjects] header { border-bottom: 1px solid var(--border); } -#message-tab:has([showingchattools]) .chat-object-view { +[showingobjects] footer { + display: none; +} +[showingobjects] .chat-object-view { display: flex; top: var(--header-height); - bottom: calc(var(--thread-view-height-with-tools) + var(--footer-top-line)); - border-bottom: 1px solid var(--border); } -#message-tab:has([showingchattools]) .thread-view { +[showingobjects] .thread-view { + display: none; +} +[showingobjects][chatvisible] .chat-object-view { + right: var(--split-thread-width); + border-right: 1px solid var(--border); +} +[showingobjects][chatvisible] .thread-view { + top: var(--header-height); + padding-top: var(--content-padding); +} +[showingobjects][chatvisible] :is(.thread-view, footer) { display: flex; - height: var(--thread-view-height-with-tools); - top: unset; - bottom: var(--footer-top-line); - flex: 1; + right: 0px; + left: unset; + width: var(--split-thread-width); } -@media (min-width: 640px) and (max-width: 1400px) { - main.split:has(#message-tab [showingchattools]) { +@media (max-width: 1300px) { + main:has([showingobjects][chatopen]) { display: flex; } - main.split:has(#message-tab [showingchattools]) #settings-tab { + main:has([showingobjects][chatopen]) #settings-tab { display: none; } } -@media (min-width: 640px) { - #message-tab:has([showingchattools]) :is(.thread-view, .chat-object-view) { - top: var(--header-height); - bottom: var(--footer-top-line); +@media (max-width: 640px) { + [showingobjects][chatvisible][chatopen] .chat-object-view { + width: 100%; + bottom: calc(var(--split-thread-height) + var(--control-height)); + border-right: none; + border-bottom: 1px solid var(--border); } - #message-tab:has([showingchattools]) .chat-object-view { - left: 0px; - right: var(--thread-view-width-with-tools); - border-bottom: none; - border-right: 1px solid var(--border); + [showingobjects][chatvisible][chatopen] .thread-view { + top: unset; + bottom: var(--control-height); + width: 100%; + height: var(--split-thread-height); + padding: 0px; } - #message-tab:has([showingchattools]) .thread-view { - display: flex; - left: unset; - right: 0px; - height: unset; - width: var(--thread-view-width-with-tools); + [showingobjects][chatvisible][chatopen] footer { + width: 100%; } } diff --git a/dist/index.js b/dist/index.js index 1a3a292f..2c1a7df3 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1319,6 +1319,18 @@ var chatIds = restoreListState("chat-ids"); var selectedChat = new State(void 0); var isShowingObjects = restoreState("showing-objects", false); + var isShowingChatInSplit = restoreState( + "showing-chat-split", + false + ); + var isChatOpen = createProxyState( + [selectedChat], + () => selectedChat.value != void 0 + ); + var isChatVisible = createProxyState( + [isShowingObjects, isShowingChatInSplit], + () => isShowingObjects.value == false || isShowingChatInSplit.value == true + ); var newChatName = new State(""); var cannotCreateChat = createProxyState( [newChatName], @@ -1338,9 +1350,12 @@ chat.hasUnreadMessages.value = false; document.getElementById("message-tab")?.scrollIntoView(); } - function toggleChatTools() { + function toggleObjects() { isShowingObjects.value = !isShowingObjects.value; } + function toggleChat() { + isShowingChatInSplit.value = !isShowingChatInSplit.value; + } chatIds.value.forEach((id) => chats.add(new Chat(id))); if (serverAddressInput.value != "" && didRequestConnection.value == true) { connect(); @@ -2049,7 +2064,7 @@ selectedObject.value = newObject; isShowingObjectModal.value = true; } - return /* @__PURE__ */ createElement("div", { class: "chat-object-view flex-column scroll-no" }, /* @__PURE__ */ createElement("div", { class: "flex-row align-center border-bottom" }, /* @__PURE__ */ createElement( + return /* @__PURE__ */ createElement("div", { class: "chat-object-view flex-column scroll-no padding-0" }, /* @__PURE__ */ createElement("div", { class: "flex-row align-center border-bottom" }, /* @__PURE__ */ createElement( "button", { class: "primary height-100", @@ -2062,7 +2077,7 @@ )), /* @__PURE__ */ createElement("button", { class: "height-100", disabled: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "visibility"))), /* @__PURE__ */ createElement( "div", { - class: "width-100 height-100 flex scroll-no", + class: "object-content width-100 height-100 flex scroll-no", "children:set": mainView } ), /* @__PURE__ */ createElement("div", { "children:set": objectModal })); @@ -2142,15 +2157,7 @@ "children:append": [chat.outbox, outboxMessageConverter] } ); - const listWrapper = /* @__PURE__ */ createElement( - "div", - { - class: "thread-view flex-column gap", - "toggle:showingchattools": isShowingObjects - }, - messageList, - outboxList - ); + const listWrapper = /* @__PURE__ */ createElement("div", { class: "thread-view flex-column gap" }, messageList, outboxList); function scrollToBottom() { listWrapper.scrollTop = listWrapper.scrollHeight; } @@ -2181,10 +2188,18 @@ "button", { "aria-label": translation.showObjects, - "on:click": toggleChatTools, + "on:click": toggleObjects, "toggle:selected": isShowingObjects }, /* @__PURE__ */ createElement("span", { class: "icon" }, "deployed_code") + ), /* @__PURE__ */ createElement( + "button", + { + "aria-label": translation.showObjects, + "on:click": toggleChat, + "toggle:selected": isChatVisible + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "forum") ), /* @__PURE__ */ createElement( "button", { @@ -2203,7 +2218,10 @@ "article", { id: "message-tab", - "children:set": messageTabContent + "children:set": messageTabContent, + "toggle:showingobjects": isShowingObjects, + "toggle:chatvisible": isChatVisible, + "toggle:chatopen": isChatOpen } ); } diff --git a/src/Model/model.ts b/src/Model/model.ts index 542d3539..c2e43e36 100644 --- a/src/Model/model.ts +++ b/src/Model/model.ts @@ -209,7 +209,21 @@ export const chats = new React.ListState(); export const chatIds = React.restoreListState("chat-ids"); export const selectedChat = new React.State(undefined); + export const isShowingObjects = React.restoreState("showing-objects", false); +export const isShowingChatInSplit = React.restoreState( + "showing-chat-split", + false +); +export const isChatOpen = React.createProxyState( + [selectedChat], + () => selectedChat.value != undefined +); +export const isChatVisible = React.createProxyState( + [isShowingObjects, isShowingChatInSplit], + () => isShowingObjects.value == false || isShowingChatInSplit.value == true +); + export const newChatName = new React.State(""); export const cannotCreateChat = React.createProxyState( @@ -235,10 +249,14 @@ export function selectChat(chat: Chat) { document.getElementById("message-tab")?.scrollIntoView(); } -export function toggleChatTools() { +export function toggleObjects() { isShowingObjects.value = !isShowingObjects.value; } +export function toggleChat() { + isShowingChatInSplit.value = !isShowingChatInSplit.value; +} + chatIds.value.forEach((id) => chats.add(new Chat(id))); // INIT diff --git a/src/Tabs/messageTab.tsx b/src/Tabs/messageTab.tsx index 8ec5961d..648c202f 100644 --- a/src/Tabs/messageTab.tsx +++ b/src/Tabs/messageTab.tsx @@ -1,6 +1,14 @@ import * as React from "bloatless-react"; -import { closeChatView, isShowingObjects, selectedChat, toggleChatTools } from "../Model/model"; +import { + closeChatView, + isChatOpen, + isChatVisible, + isShowingObjects, + selectedChat, + toggleChat, + toggleObjects, +} from "../Model/model"; import { ChatOptionModal } from "../Views/Chat/chatOptionModal"; import { MessageComposer } from "../Views/Chat/messageComposer"; @@ -36,11 +44,18 @@ export function MessageTab() { +