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

change layout styles, move BoardPage to separate file

Browse Source
This commit is contained in:
marlon-erler
2024-07-23 12:43:30 +02:00
parent 12947f8063
commit 3aae049106
7 changed files with 277 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+22 -20
View File
@@ -238,9 +238,9 @@ body[showing-chat] #chat-page-wrapper {
#chat-page > div > #ribbon,
#chat-page > div > #main,
#chat-page > div > #main > div,
#chat-page > div > #main > div > .pane,
#chat-page > div > #main > div > .pane > .toolbar,
#chat-page > div > #main > div > .pane > .content {
#chat-page > div > #main > div > .pane-wrapper > .pane,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar,
#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
display: flex;
}
#chat-page > div {
@@ -254,33 +254,35 @@ body[showing-chat] #chat-page-wrapper {
scroll-snap-type: x mandatory;
}
#chat-page #main > div,
#chat-page > div > #main > div > .pane,
#chat-page > div > #main > div > .pane > .content {
#chat-page > div > #main > div > .pane-wrapper,
#chat-page > div > #main > div > .pane-wrapper > .pane,
#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
width: 100%;
height: 100%;
flex: 1;
}
#chat-page > div > #main > div > .pane {
#chat-page > div > #main > div > .pane-wrapper,
#chat-page > div > #main > div > .pane-wrapper > .pane {
flex-direction: column;
scroll-snap-align: center;
min-width: 100%;
}
#chat-page > div > #main > div > .pane:not(.side),
#chat-page > div > #main > div > .pane:not(.side) .content {
#chat-page > div > #main > div > .pane-wrapper > .pane:not(.side),
#chat-page > div > #main > div > .pane-wrapper > .pane:not(.side) .content {
animation: slide-up var(--animation-duration);
}
@media (min-width: 1024px) {
#chat-page > div > #main > div > .pane {
#chat-page > div > #main > div > .pane-wrapper {
min-width: unset;
}
#chat-page > div > #main > div > .pane.side {
#chat-page > div > #main > div > .pane-wrapper.side {
max-width: 18rem;
}
}
#chat-page > div > #main > div > .pane:not(:last-child) {
#chat-page > div > #main > div > .pane-wrapper:not(:last-child) {
border-right: 1px solid var(--border);
}
#chat-page > div > #main > div > .pane > .content {
#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
flex-direction: column;
overflow: auto;
padding: var(--content-padding);
@@ -291,11 +293,11 @@ body[showing-chat] #chat-page-wrapper {
flex-direction: column;
}
#chat-page > div > #ribbon,
#chat-page > div > #main > div > .pane > .toolbar {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
align-items: center;
}
#chat-page #ribbon > span,
#chat-page > div > #main > div > .pane > .toolbar {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
display: flex;
flex-direction: row;
align-items: center;
@@ -319,7 +321,7 @@ body[showing-chat] #chat-page-wrapper {
flex-direction: column;
}
#chat-page > div > #ribbon button,
#chat-page > div > #main > div > .pane > .toolbar button {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
padding: 0px;
width: 100%;
max-width: var(--control-height);
@@ -329,18 +331,18 @@ body[showing-chat] #chat-page-wrapper {
justify-content: center;
}
#chat-page > div > #ribbon button.ribbon-button,
#chat-page > div > #main > div > .pane > .toolbar button.ribbon-button {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button {
min-height: unset;
height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
}
#chat-page > div > #ribbon button.ribbon-button > .icon,
#chat-page > div > #main > div > .pane > .toolbar button.ribbon-button > .icon {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button > .icon {
font-size: 1.1rem;
}
#chat-page > div > #ribbon > span {
width: 100%;
}
#chat-page > div > #main > div > .pane > .toolbar {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
height: var(--ribbon-size);
border-bottom: 1px solid var(--border);
overflow-y: hidden;
@@ -348,10 +350,10 @@ body[showing-chat] #chat-page-wrapper {
padding: 0px;
border-top: 1px solid var(--border);
}
#chat-page > div > #main > div > .pane > .toolbar > span {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
padding-left: var(--content-padding);
}
#chat-page > div > #main > div > .pane > .toolbar :is(input, select, button) {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar :is(input, select, button) {
height: 100%;
flex: 1;
}
dist/index.js
Vendored
+13 -8
View File
@@ -1820,7 +1820,7 @@
scrollDownIfApplicable
);
setTimeout(() => scrollDown(), 100);
return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messagesHeadline)), /* @__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(
return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messagesHeadline)), /* @__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": messagePageViewModel.composingMessage,
@@ -1836,7 +1836,7 @@
"toggle:disabled": messagePageViewModel.cannotSendMessage
},
/* @__PURE__ */ createElement("span", { class: "icon" }, "send")
)))))));
))))))));
}
// src/View/Components/dangerousActionButton.tsx
@@ -1894,7 +1894,7 @@
settingsPageViewModel.removeSecondaryChannel(secondaryChannel);
});
};
return /* @__PURE__ */ createElement("div", { id: "settings-page" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.settingsHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.primaryChannelLabel), /* @__PURE__ */ createElement(
return /* @__PURE__ */ createElement("div", { id: "settings-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.settingsHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.primaryChannelLabel), /* @__PURE__ */ createElement(
"input",
{
"bind:value": settingsPageViewModel.primaryChannelInput,
@@ -1981,7 +1981,7 @@
translations.chatPage.settings.deleteChatButton,
"chat_error",
settingsPageViewModel.remove
)))));
))))));
}
// src/View/Components/boardEntry.tsx
@@ -2003,6 +2003,11 @@
return BoardEntry(boardViewModel);
};
// src/View/ChatPages/boardPage.tsx
function BoardPage(boardViewModel) {
return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }), /* @__PURE__ */ createElement("div", { class: "content" }));
}
// src/View/ChatPages/taskPage.tsx
function TaskPage(taskPageViewModel) {
taskPageViewModel.loadData();
@@ -2012,14 +2017,14 @@
const selectedBoard = taskPageViewModel.selectedBoard.value;
if (selectedBoard == void 0) {
return [
/* @__PURE__ */ createElement("div", { class: "content align-center justify-center" }, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.chatPage.task.noBoardSelected))
/* @__PURE__ */ createElement("div", { class: "pane align-center justify-center" }, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.chatPage.task.noBoardSelected))
];
} else {
return [/* @__PURE__ */ createElement("div", { class: "toolbar" }), /* @__PURE__ */ createElement("div", { class: "content" })];
return BoardPage(selectedBoard);
}
}
);
return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { "set:color": taskPageViewModel.chatViewModel.displayedColor, class: "pane side background" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper side" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
"input",
{
"bind:value": taskPageViewModel.newBoardNameInput,
@@ -2045,7 +2050,7 @@
BoardInfoToEntry
]
}
))), /* @__PURE__ */ createElement("div", { class: "pane", "children:set": paneContent }));
)))), /* @__PURE__ */ createElement("div", { class: "pane-wrapper", "children:set": paneContent }));
}
// src/View/chatPage.tsx