addingg toggle to split or hide chat
This commit is contained in:
marlon-erler
Vendored
+39
-39
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
+32
-14
@@ -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
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user