From 659bb16cb809fc4c7dbe7fbb7bdb7f1464cbf40f Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Wed, 10 Jul 2024 19:07:58 +0200 Subject: [PATCH] add basic layout --- dist/index.css | 63 ++++++++++++++++++++++++++++ dist/index.js | 31 +++++++++++++- dist/styles.css | 9 +++- src/Model/model.ts | 6 +++ src/Tabs/messageTab.tsx | 19 ++++++++- src/Views/chatToolView.tsx | 12 ++++++ src/Views/threadView.tsx | 2 +- src/styles.css | 86 ++++++++++++++++++++++++++++++++++++++ src/translations.ts | 1 + 9 files changed, 222 insertions(+), 7 deletions(-) create mode 100644 src/Views/chatToolView.tsx diff --git a/dist/index.css b/dist/index.css index bd34d2a3..02de80dc 100644 --- a/dist/index.css +++ b/dist/index.css @@ -2,3 +2,66 @@ [unread] { border-left: 10px solid var(--text-warn); } +:root { + --thread-view-height-with-tools: 8rem; + --thread-view-width-with-tools: 20rem; + --footer-top-line: calc(var(--control-height) + var(--safe-area-bottom)); +} +#message-tab { + flex-direction: column; +} +.message-tab-content-wrapper { + display: flex; + flex-direction: column; +} +.chat-tool-view { + display: none; +} +[showingchattools] :is(.thread-view, .chat-tool-view) { + overflow: scroll; + position: absolute; + padding: 0px; +} +[showingchattools] header { + border-bottom: 1px solid var(--border); +} +[showingchattools] .chat-tool-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); +} +[showingchattools] .thread-view { + display: flex; + height: var(--thread-view-height-with-tools); + top: unset; + bottom: var(--footer-top-line); + flex: 1; +} +@media (max-height: 700px) and (min-width: 640px) { + main.split:has([showingchattools]) { + display: flex; + } + main.split:has([showingchattools]) #settings-tab { + display: none; + } +} +@media (min-width: 1400px) or ((max-height: 700px) and (min-width: 640px)) { + [showingchattools] :is(.thread-view, .chat-tool-view) { + top: var(--header-height); + bottom: var(--footer-top-line); + } + [showingchattools] .chat-tool-view { + left: 0px; + right: var(--thread-view-width-with-tools); + border-bottom: none; + border-right: 1px solid var(--border); + } + [showingchattools] .thread-view { + display: flex; + left: unset; + right: 0px; + height: unset; + width: var(--thread-view-width-with-tools); + } +} diff --git a/dist/index.js b/dist/index.js index 0e7671f7..02856f05 100644 --- a/dist/index.js +++ b/dist/index.js @@ -755,6 +755,7 @@ var chats = new ListState(); var chatIds = restoreListState("chat-ids"); var selectedChat = new State(void 0); + var isShowingChatTools = new State(false); var newChatName = new State(""); var cannotCreateChat = createProxyState( [newChatName], @@ -766,6 +767,7 @@ newChatName.value = ""; } function closeChatView() { + isShowingChatTools.value = false; selectedChat.value = void 0; document.getElementById("settings-tab")?.scrollIntoView(); } @@ -774,6 +776,9 @@ chat.hasUnreadMessages.value = false; document.getElementById("message-tab")?.scrollIntoView(); } + function toggleChatTools() { + isShowingChatTools.value = !isShowingChatTools.value; + } chatIds.value.forEach((id) => chats.add(new Chat(id))); if (serverAddressInput.value != "" && didRequestConnection.value == true) { connect(); @@ -807,6 +812,7 @@ addChat: "Add", // messages showChatOptions: "show chat options", + toggleChatTools: "toggle chat tools", configureChatTitle: "Configure Chat", secondaryChannel: "Secondary channel", secondaryChannelPlaceholder: "Add secondary channel", @@ -1023,6 +1029,11 @@ ), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": deleteChat }, translation.removeChat, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("button", { "on:click": closeModal }, translation.close, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))); } + // src/Views/chatToolView.tsx + function ChatToolView(chat) { + return /* @__PURE__ */ createElement("div", { class: "chat-tool-view" }, /* @__PURE__ */ createElement("span", null, "Tools")); + } + // src/Views/messageComposer.tsx function MessageComposer(chat) { return /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, " ", /* @__PURE__ */ createElement( @@ -1108,7 +1119,7 @@ "children:append": [chat.outbox, outboxMessageConverter] } ); - const listWrapper = /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, messageList, outboxList); + const listWrapper = /* @__PURE__ */ createElement("div", { class: "thread-view flex-column gap" }, messageList, outboxList); function scrollToBottom() { const scrollFromBottom = listWrapper.scrollHeight - (listWrapper.scrollTop + listWrapper.offsetHeight); if (scrollFromBottom > 400) return; @@ -1132,6 +1143,14 @@ } return [ /* @__PURE__ */ createElement("header", { class: "padding-0" }, /* @__PURE__ */ createElement("span", { class: "flex-row align-center" }, /* @__PURE__ */ createElement("button", { "aria-label": translation.back, "on:click": closeChatView }, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back")), /* @__PURE__ */ createElement("span", { "subscribe:innerText": chat.primaryChannel })), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement( + "button", + { + "aria-label": translation.toggleChatTools, + "on:click": toggleChatTools, + "toggle:selected": isShowingChatTools + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "architecture") + ), /* @__PURE__ */ createElement( "button", { "aria-label": translation.showChatOptions, @@ -1139,12 +1158,20 @@ }, /* @__PURE__ */ createElement("span", { class: "icon" }, "tune") ))), + ChatToolView(chat), ThreadView(chat), /* @__PURE__ */ createElement("footer", null, MessageComposer(chat)), ChatOptionModal(chat, isShowingOptions) ]; }); - return /* @__PURE__ */ createElement("article", { id: "message-tab", "children:set": messageTabContent }); + return /* @__PURE__ */ createElement( + "article", + { + "toggle:showingchattools": isShowingChatTools, + id: "message-tab", + "children:set": messageTabContent + } + ); } // src/Views/chatListSection.tsx diff --git a/dist/styles.css b/dist/styles.css index 30028c98..ac93a3ef 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -140,10 +140,12 @@ select, @media (hover: hover) { button:hover, select:hover, - button.tile.ghost:hover, - [selected]:active { + button.tile.ghost:hover { background-color: var(--surface-hover); } + [selected]:hover { + background-color: var(--surface); + } } button:active, select:active, @@ -151,6 +153,9 @@ button.tile.ghost:active, [selected] { background-color: var(--surface-active); } +[selected]:active { + background-color: var(--surface-hover); +} header button { background-color: transparent; } diff --git a/src/Model/model.ts b/src/Model/model.ts index c4fdf655..d70335b5 100644 --- a/src/Model/model.ts +++ b/src/Model/model.ts @@ -139,6 +139,7 @@ export const chats = new React.ListState(); export const chatIds = React.restoreListState("chat-ids"); export const selectedChat = new React.State(undefined); +export const isShowingChatTools = new React.State(false); export const newChatName = new React.State(""); export const cannotCreateChat = React.createProxyState( @@ -154,6 +155,7 @@ export function createChat() { } export function closeChatView() { + isShowingChatTools.value = false; selectedChat.value = undefined; document.getElementById("settings-tab")?.scrollIntoView(); } @@ -164,6 +166,10 @@ export function selectChat(chat: Chat) { document.getElementById("message-tab")?.scrollIntoView(); } +export function toggleChatTools() { + isShowingChatTools.value = !isShowingChatTools.value; +} + chatIds.value.forEach((id) => chats.add(new Chat(id))); // INIT diff --git a/src/Tabs/messageTab.tsx b/src/Tabs/messageTab.tsx index 3c531d08..217088b3 100644 --- a/src/Tabs/messageTab.tsx +++ b/src/Tabs/messageTab.tsx @@ -1,8 +1,9 @@ import * as React from "bloatless-react"; -import { closeChatView, selectedChat } from "../Model/model"; +import { closeChatView, isShowingChatTools, selectedChat, toggleChatTools } from "../Model/model"; import { ChatOptionModal } from "../Views/chatOptionModal"; +import { ChatToolView } from "../Views/chatToolView"; import { MessageComposer } from "../Views/messageComposer"; import { ThreadView } from "../Views/threadView"; import { translation } from "../translations"; @@ -33,6 +34,13 @@ export function MessageTab() { +