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

update layout styles to support multiple panes

Browse Source
This commit is contained in:
marlon-erler
2024-07-22 13:29:08 +02:00
parent e8ab217be3
commit 343bd7ef01
5 changed files with 200 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+24 -21
View File
@@ -205,31 +205,34 @@ body[showing-chat] #chat-page-wrapper {
#chat-page { #chat-page {
--ribbon-size: calc(var(--control-height) + 2 * var(--gap-between-tiles)); --ribbon-size: calc(var(--control-height) + 2 * var(--gap-between-tiles));
} }
#chat-page #ribbon, #chat-page > div,
#chat-page .toolbar, #chat-page > div > #ribbon,
#chat-page #main, #chat-page > div > #main,
#chat-page #main .content { #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 {
display: flex; display: flex;
} }
#chat-page > div { #chat-page > div {
padding: 0px; padding: 0px;
overflow: hidden; overflow: hidden;
display: flex;
} }
#chat-page #main { #chat-page > div > #main {
width: calc(100% - var(--ribbon-size)); width: calc(100% - var(--ribbon-size));
display: flex;
flex-direction: column;
} }
#chat-page #main > div, #chat-page #main > div,
#chat-page #main .content { #chat-page > div > #main > div > .pane,
#chat-page > div > #main > div > .pane > .content {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex: 1; flex: 1;
display: flex; }
#chat-page > div > #main > div > .pane {
flex-direction: column; flex-direction: column;
} }
#chat-page #main .content { #chat-page > div > #main > div > .pane > .content {
flex-direction: column;
overflow: auto; overflow: auto;
padding: var(--content-padding); padding: var(--content-padding);
} }
@@ -238,41 +241,41 @@ body[showing-chat] #chat-page-wrapper {
#chat-page #main .content { #chat-page #main .content {
flex-direction: column; flex-direction: column;
} }
#chat-page #ribbon { #chat-page > div > #ribbon {
width: var(--ribbon-size); width: var(--ribbon-size);
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
justify-content: space-between; justify-content: space-between;
padding-bottom: var(--safe-area-bottom); padding-bottom: var(--safe-area-bottom);
} }
#chat-page #ribbon > span { #chat-page > div > #ribbon > span {
height: 100%; height: 100%;
flex: 1; flex: 1;
overflow: auto; overflow: auto;
justify-content: flex-end; justify-content: flex-end;
} }
#chat-page #main .toolbar { #chat-page > div > #main > div > .pane > .toolbar {
height: var(--ribbon-size); height: var(--ribbon-size);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
overflow-x: auto; overflow-x: auto;
padding-left: var(--content-padding); padding-left: var(--content-padding);
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
#chat-page #ribbon, #chat-page > div > #ribbon,
#chat-page .toolbar { #chat-page > div > #main > div > .pane > .toolbar {
align-items: center; align-items: center;
} }
#chat-page #ribbon > span, #chat-page #ribbon > span,
#chat-page .toolbar > span { #chat-page > div > #main > div > .pane > .toolbar > span {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--gap-between-tiles); padding: var(--gap-between-tiles);
gap: var(--gap-between-tiles); gap: var(--gap-between-tiles);
} }
#chat-page #ribbon > span { #chat-page > div > #ribbon > span {
width: 100%; width: 100%;
} }
#chat-page #ribbon button, #chat-page > div > #ribbon button,
#chat-page .toolbar button { #chat-page > div > #main > div > .pane > .toolbar button {
padding: 0px; padding: 0px;
width: 100%; width: 100%;
max-width: var(--control-height); max-width: var(--control-height);
@@ -281,7 +284,7 @@ body[showing-chat] #chat-page-wrapper {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
#chat-page #ribbon > button { #chat-page > div > #ribbon > button {
margin-top: var(--gap-between-tiles); margin-top: var(--gap-between-tiles);
} }
dist/index.js
Vendored
+4 -4
View File
@@ -1604,7 +1604,7 @@
} }
chatViewModel.chatMessageViewModels.subscribeSilent(scrollDownIfApplicable); chatViewModel.chatMessageViewModels.subscribeSilent(scrollDownIfApplicable);
setTimeout(() => scrollDown(), 100); setTimeout(() => scrollDown(), 100);
return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__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" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__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", "input",
{ {
"bind:value": chatViewModel.composingMessage, "bind:value": chatViewModel.composingMessage,
@@ -1620,7 +1620,7 @@
"toggle:disabled": chatViewModel.cannotSendMessage "toggle:disabled": chatViewModel.cannotSendMessage
}, },
/* @__PURE__ */ createElement("span", { class: "icon" }, "send") /* @__PURE__ */ createElement("span", { class: "icon" }, "send")
)))))); )))))));
} }
// src/View/Components/dangerousActionButton.tsx // src/View/Components/dangerousActionButton.tsx
@@ -1677,7 +1677,7 @@
chatViewModel.removeSecondaryChannel(secondaryChannel); chatViewModel.removeSecondaryChannel(secondaryChannel);
}); });
}; };
return /* @__PURE__ */ createElement("div", null, /* @__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" }, /* @__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", "input",
{ {
"bind:value": chatViewModel.primaryChannelInput, "bind:value": chatViewModel.primaryChannelInput,
@@ -1764,7 +1764,7 @@
translations.chatPage.settings.deleteChatButton, translations.chatPage.settings.deleteChatButton,
"chat_error", "chat_error",
chatViewModel.remove chatViewModel.remove
)))); )))));
} }
// src/View/ChatPages/taskPage.tsx // src/View/ChatPages/taskPage.tsx
src/View/ChatPages/messagePage.tsx
+2
View File
@@ -33,6 +33,7 @@ export function MessagePage(chatViewModel: ChatViewModel) {
return ( return (
<div id="message-page"> <div id="message-page">
<div class="pane">
<div class="toolbar"> <div class="toolbar">
<span subscribe:innerText={chatViewModel.primaryChannel}></span> <span subscribe:innerText={chatViewModel.primaryChannel}></span>
</div> </div>
@@ -63,5 +64,6 @@ export function MessagePage(chatViewModel: ChatViewModel) {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }
src/View/ChatPages/settingsPage.tsx
+5 -2
View File
@@ -16,7 +16,8 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
}; };
return ( return (
<div> <div id="settings-page">
<div class="pane">
<div class="toolbar"> <div class="toolbar">
<span>{translations.chatPage.settings.settingsHeadline}</span> <span>{translations.chatPage.settings.settingsHeadline}</span>
</div> </div>
@@ -61,7 +62,8 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
<button <button
class="primary" class="primary"
aria-label={ aria-label={
translations.chatPage.settings.addSecondaryChannelButtonAudioLabel translations.chatPage.settings
.addSecondaryChannelButtonAudioLabel
} }
on:click={chatViewModel.addSecondaryChannel} on:click={chatViewModel.addSecondaryChannel}
toggle:disabled={chatViewModel.cannotAddSecondaryChannel} toggle:disabled={chatViewModel.cannotAddSecondaryChannel}
@@ -149,5 +151,6 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }
src/View/chatPage.css
+24 -23
View File
@@ -26,39 +26,40 @@ body[showing-chat] #chat-page-wrapper {
--ribbon-size: calc(var(--control-height) + 2 * var(--gap-between-tiles)); --ribbon-size: calc(var(--control-height) + 2 * var(--gap-between-tiles));
} }
#chat-page #ribbon, #chat-page > div,
#chat-page .toolbar, #chat-page > div > #ribbon,
#chat-page #main, #chat-page > div > #main,
#chat-page #main .content { #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 {
display: flex; display: flex;
} }
#chat-page > div { #chat-page > div {
padding: 0px; padding: 0px;
overflow: hidden; overflow: hidden;
display: flex;
} }
#chat-page #main { #chat-page > div > #main {
width: calc(100% - var(--ribbon-size)); width: calc(100% - var(--ribbon-size));
display: flex;
flex-direction: column;
} }
#chat-page #main > div, #chat-page #main > div,
#chat-page #main .content { #chat-page > div > #main > div > .pane,
#chat-page > div > #main > div > .pane > .content {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex: 1; flex: 1;
}
display: flex; #chat-page > div > #main > div > .pane {
flex-direction: column; flex-direction: column;
} }
#chat-page #main .content { #chat-page > div > #main > div > .pane > .content {
flex-direction: column;
overflow: auto; overflow: auto;
padding: var(--content-padding); padding: var(--content-padding);
} }
@@ -69,7 +70,7 @@ body[showing-chat] #chat-page-wrapper {
} }
/* ribbon, toolbar */ /* ribbon, toolbar */
#chat-page #ribbon { #chat-page > div > #ribbon {
width: var(--ribbon-size); width: var(--ribbon-size);
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
@@ -78,7 +79,7 @@ body[showing-chat] #chat-page-wrapper {
padding-bottom: var(--safe-area-bottom); padding-bottom: var(--safe-area-bottom);
} }
#chat-page #ribbon > span { #chat-page > div > #ribbon > span {
height: 100%; height: 100%;
flex: 1; flex: 1;
@@ -87,7 +88,7 @@ body[showing-chat] #chat-page-wrapper {
justify-content: flex-end; justify-content: flex-end;
} }
#chat-page #main .toolbar { #chat-page > div > #main > div > .pane > .toolbar {
height: var(--ribbon-size); height: var(--ribbon-size);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
@@ -97,13 +98,13 @@ body[showing-chat] #chat-page-wrapper {
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
#chat-page #ribbon, #chat-page > div > #ribbon,
#chat-page .toolbar { #chat-page > div > #main > div > .pane > .toolbar {
align-items: center; align-items: center;
} }
#chat-page #ribbon > span, #chat-page #ribbon > span,
#chat-page .toolbar > span { #chat-page > div > #main > div > .pane > .toolbar > span {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -111,12 +112,12 @@ body[showing-chat] #chat-page-wrapper {
gap: var(--gap-between-tiles); gap: var(--gap-between-tiles);
} }
#chat-page #ribbon > span { #chat-page > div > #ribbon > span {
width: 100%; width: 100%;
} }
#chat-page #ribbon button, #chat-page > div > #ribbon button,
#chat-page .toolbar button { #chat-page > div > #main > div > .pane > .toolbar button {
padding: 0px; padding: 0px;
width: 100%; width: 100%;
@@ -128,6 +129,6 @@ body[showing-chat] #chat-page-wrapper {
justify-content: center; justify-content: center;
} }
#chat-page #ribbon > button { #chat-page > div > #ribbon > button {
margin-top: var(--gap-between-tiles); margin-top: var(--gap-between-tiles);
} }