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

update toolbar layout to support button groups

Browse Source
This commit is contained in:
marlon-erler
2024-07-23 14:53:00 +02:00
parent 3142112cb8
commit 7ad6a3381e
6 changed files with 52 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+12 -12
View File
@@ -236,10 +236,12 @@ body[showing-chat] #chat-page-wrapper {
}
#chat-page > div,
#chat-page > div > #ribbon,
#chat-page > div > #ribbon > span,
#chat-page > div > #main,
#chat-page > div > #main > div,
#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 > .toolbar > span,
#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
display: flex;
}
@@ -297,33 +299,30 @@ body[showing-chat] #chat-page-wrapper {
align-items: center;
}
#chat-page #ribbon > span,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
padding: var(--gap-between-tiles);
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
gap: var(--gap-between-tiles);
}
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
justify-content: start;
justify-content: space-between;
}
#chat-page > div > #ribbon {
width: var(--ribbon-size);
border-right: 1px solid var(--border);
justify-content: space-between;
padding-bottom: var(--safe-area-bottom);
}
#chat-page > div > #ribbon > span {
height: 100%;
flex: 1;
overflow-y: auto;
justify-content: flex-end;
}
#chat-page > div > #ribbon > span {
flex-direction: column;
justify-content: end;
padding: var(--gap-between-tiles);
}
#chat-page > div > #ribbon button,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
padding: 0px;
width: 100%;
width: var(--control-height);
max-width: var(--control-height);
height: var(--control-height);
min-height: var(--control-height);
@@ -332,6 +331,7 @@ body[showing-chat] #chat-page-wrapper {
}
#chat-page > div > #ribbon button.ribbon-button,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button {
width: 100%;
min-height: unset;
height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
}
@@ -350,7 +350,7 @@ body[showing-chat] #chat-page-wrapper {
padding: 0px;
border-top: 1px solid var(--border);
}
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
padding-left: var(--content-padding);
}
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar :is(input, select, button) {
dist/index.js
Vendored
+4 -4
View File
@@ -1935,7 +1935,7 @@
scrollDownIfApplicable
);
setTimeout(() => scrollDown(), 100);
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(
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", { class: "title" }, 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,
@@ -2032,7 +2032,7 @@
settingsPageViewModel.removeSecondaryChannel(secondaryChannel);
});
};
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(
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", { class: "title" }, 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,
@@ -2143,7 +2143,7 @@
// src/View/ChatPages/boardPage.tsx
function BoardPage(boardViewModel) {
return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement(
return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
"button",
{
class: "ghost",
@@ -2159,7 +2159,7 @@
"on:click": boardViewModel.showSettings
},
/* @__PURE__ */ createElement("span", { class: "icon" }, "settings")
)), /* @__PURE__ */ createElement("div", { class: "content" }), BoardSettingsModal(boardViewModel));
)), /* @__PURE__ */ createElement("span", null, "a"), /* @__PURE__ */ createElement("span", null, "b")), /* @__PURE__ */ createElement("div", { class: "content" }), BoardSettingsModal(boardViewModel));
}
// src/View/ChatPages/taskPage.tsx
src/View/ChatPages/boardPage.tsx
+18 -14
View File
@@ -8,20 +8,24 @@ export function BoardPage(boardViewModel: BoardViewModel) {
return (
<div class="pane">
<div class="toolbar">
<button
class="ghost"
aria-label={translations.chatPage.task.closeBoard}
on:click={boardViewModel.close}
>
<span class="icon">arrow_back</span>
</button>
<button
class="ghost"
aria-label={translations.chatPage.task.boardSettingsHeadline}
on:click={boardViewModel.showSettings}
>
<span class="icon">settings</span>
</button>
<span>
<button
class="ghost"
aria-label={translations.chatPage.task.closeBoard}
on:click={boardViewModel.close}
>
<span class="icon">arrow_back</span>
</button>
<button
class="ghost"
aria-label={translations.chatPage.task.boardSettingsHeadline}
on:click={boardViewModel.showSettings}
>
<span class="icon">settings</span>
</button>
</span>
<span>a</span>
<span>b</span>
</div>
<div class="content"></div>
src/View/ChatPages/messagePage.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export function MessagePage(messagePageViewModel: MessagePageViewModel) {
<div class="pane-wrapper">
<div class="pane">
<div class="toolbar">
<span>{translations.chatPage.message.messagesHeadline}</span>
<span class="title">{translations.chatPage.message.messagesHeadline}</span>
</div>
<div class="content">
{messageContainer}
src/View/ChatPages/settingsPage.tsx
+3 -1
View File
@@ -23,7 +23,9 @@ export function SettingsPage(settingsPageViewModel: SettingsPageViewModel) {
<div class="pane-wrapper">
<div class="pane">
<div class="toolbar">
<span>{translations.chatPage.settings.settingsHeadline}</span>
<span class="title">
{translations.chatPage.settings.settingsHeadline}
</span>
</div>
<div class="content">
<label class="tile flex-no">
src/View/chatPage.css
+14 -15
View File
@@ -28,10 +28,12 @@ body[showing-chat] #chat-page-wrapper {
#chat-page > div,
#chat-page > div > #ribbon,
#chat-page > div > #ribbon > span,
#chat-page > div > #main,
#chat-page > div > #main > div,
#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 > .toolbar > span,
#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
display: flex;
}
@@ -104,22 +106,19 @@ body[showing-chat] #chat-page-wrapper {
}
#chat-page #ribbon > span,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
padding: var(--gap-between-tiles);
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
gap: var(--gap-between-tiles);
}
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
justify-content: start;
justify-content: space-between;
}
#chat-page > div > #ribbon {
width: var(--ribbon-size);
border-right: 1px solid var(--border);
justify-content: space-between;
padding-bottom: var(--safe-area-bottom);
}
@@ -129,18 +128,17 @@ body[showing-chat] #chat-page-wrapper {
flex: 1;
overflow-y: auto;
justify-content: flex-end;
}
#chat-page > div > #ribbon > span {
flex-direction: column;
justify-content: end;
padding: var(--gap-between-tiles);
}
#chat-page > div > #ribbon button,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
padding: 0px;
width: 100%;
width: var(--control-height);
max-width: var(--control-height);
height: var(--control-height);
min-height: var(--control-height);
@@ -158,6 +156,7 @@ body[showing-chat] #chat-page-wrapper {
> .pane
> .toolbar
button.ribbon-button {
width: 100%;
min-height: unset;
height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
}
@@ -190,7 +189,7 @@ body[showing-chat] #chat-page-wrapper {
border-top: 1px solid var(--border);
}
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
padding-left: var(--content-padding);
}