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

addingg toggle to split or hide chat

Browse Source
This commit is contained in:
marlon-erler
2024-07-13 15:10:54 +02:00
parent eff75660b5
commit 6516c7ab71
7 changed files with 162 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+39 -39
View File
@@ -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%;
}
}
dist/index.js
Vendored
+32 -14
View File
@@ -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
}
);
}
src/Model/model.ts
+19 -1
View File
@@ -209,7 +209,21 @@ export const chats = new React.ListState<Chat>();
export const chatIds = React.restoreListState<string>("chat-ids");
export const selectedChat = new React.State<Chat | undefined>(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
src/Tabs/messageTab.tsx
+20 -2
View File
@@ -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() {
<span>
<button
aria-label={translation.showObjects}
on:click={toggleChatTools}
on:click={toggleObjects}
toggle:selected={isShowingObjects}
>
<span class="icon">deployed_code</span>
</button>
<button
aria-label={translation.showObjects} // TODO
on:click={toggleChat}
toggle:selected={isChatVisible}
>
<span class="icon">forum</span>
</button>
<button
aria-label={translation.showChatOptions}
on:click={showOptions}
@@ -63,6 +78,9 @@ export function MessageTab() {
<article
id="message-tab"
children:set={messageTabContent}
toggle:showingobjects={isShowingObjects}
toggle:chatvisible={isChatVisible}
toggle:chatopen={isChatOpen}
></article>
);
}
src/Views/Chat/threadView.tsx
+2 -4
View File
@@ -2,6 +2,7 @@ import * as React from "bloatless-react";
import { Chat, ChatMessage } from "../../Model/chatModel";
import { MessageComposer } from "./messageComposer";
import { isShowingObjects } from "../../Model/model";
import { translation } from "../../translations";
@@ -117,10 +118,7 @@ export function ThreadView(chat: Chat) {
></div>
);
const listWrapper = (
<div
class="thread-view flex-column gap"
toggle:showingchattools={isShowingObjects}
>
<div class="thread-view flex-column gap">
{messageList}
{outboxList}
</div>
src/Views/Objects/objectPane.tsx
+2 -2
View File
@@ -61,7 +61,7 @@ export function ObjectPane(chat: Chat) {
}
return (
<div class="chat-object-view flex-column scroll-no">
<div class="chat-object-view flex-column scroll-no padding-0">
<div class="flex-row align-center border-bottom">
<button
class="primary height-100"
@@ -83,7 +83,7 @@ export function ObjectPane(chat: Chat) {
</div>
<div
class="width-100 height-100 flex scroll-no"
class="object-content width-100 height-100 flex scroll-no"
children:set={mainView}
></div>
src/styles.css
+48 -47
View File
@@ -4,9 +4,8 @@
/* OBJECTS */
: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 {
@@ -18,77 +17,79 @@
flex-direction: column;
}
.message-tab-content-wrapper {
display: flex;
flex-direction: column;
}
/* standard */
.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 {
/* objects */
[showingobjects] header {
border-bottom: 1px solid var(--border);
}
#message-tab:has([showingchattools]) .chat-object-view {
display: flex;
[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;
}
/* objects split */
[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);
right: 0px;
left: unset;
top: unset;
bottom: var(--footer-top-line);
flex: 1;
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);
[showingobjects][chatvisible][chatopen] .thread-view {
top: unset;
bottom: var(--control-height);
border-bottom: none;
border-right: 1px solid var(--border);
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%;
}
}