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,
#chat-page > div > #ribbon, #chat-page > div > #ribbon,
#chat-page > div > #ribbon > span,
#chat-page > div > #main, #chat-page > div > #main,
#chat-page > div > #main > div, #chat-page > div > #main > div,
#chat-page > div > #main > div > .pane-wrapper > .pane, #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,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span,
#chat-page > div > #main > div > .pane-wrapper > .pane > .content { #chat-page > div > #main > div > .pane-wrapper > .pane > .content {
display: flex; display: flex;
} }
@@ -297,33 +299,30 @@ body[showing-chat] #chat-page-wrapper {
align-items: center; align-items: center;
} }
#chat-page #ribbon > span, #chat-page #ribbon > span,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
padding: var(--gap-between-tiles);
gap: var(--gap-between-tiles); 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 { #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;
padding-bottom: var(--safe-area-bottom); padding-bottom: var(--safe-area-bottom);
} }
#chat-page > div > #ribbon > span { #chat-page > div > #ribbon > span {
height: 100%; height: 100%;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
justify-content: flex-end;
}
#chat-page > div > #ribbon > span {
flex-direction: column; flex-direction: column;
justify-content: end;
padding: var(--gap-between-tiles);
} }
#chat-page > div > #ribbon button, #chat-page > div > #ribbon button,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
padding: 0px; padding: 0px;
width: 100%; width: var(--control-height);
max-width: var(--control-height); max-width: var(--control-height);
height: var(--control-height); height: var(--control-height);
min-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 > #ribbon button.ribbon-button,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button {
width: 100%;
min-height: unset; min-height: unset;
height: calc(var(--control-height) - 2 * var(--gap-between-tiles)); height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
} }
@@ -350,7 +350,7 @@ body[showing-chat] #chat-page-wrapper {
padding: 0px; padding: 0px;
border-top: 1px solid var(--border); 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); padding-left: var(--content-padding);
} }
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar :is(input, select, button) { #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 scrollDownIfApplicable
); );
setTimeout(() => scrollDown(), 100); 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", "input",
{ {
"bind:value": messagePageViewModel.composingMessage, "bind:value": messagePageViewModel.composingMessage,
@@ -2032,7 +2032,7 @@
settingsPageViewModel.removeSecondaryChannel(secondaryChannel); 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", "input",
{ {
"bind:value": settingsPageViewModel.primaryChannelInput, "bind:value": settingsPageViewModel.primaryChannelInput,
@@ -2143,7 +2143,7 @@
// src/View/ChatPages/boardPage.tsx // src/View/ChatPages/boardPage.tsx
function BoardPage(boardViewModel) { 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", "button",
{ {
class: "ghost", class: "ghost",
@@ -2159,7 +2159,7 @@
"on:click": boardViewModel.showSettings "on:click": boardViewModel.showSettings
}, },
/* @__PURE__ */ createElement("span", { class: "icon" }, "settings") /* @__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/taskPage.tsx
src/View/ChatPages/boardPage.tsx
+18 -14
View File
@@ -8,20 +8,24 @@ export function BoardPage(boardViewModel: BoardViewModel) {
return ( return (
<div class="pane"> <div class="pane">
<div class="toolbar"> <div class="toolbar">
<button <span>
class="ghost" <button
aria-label={translations.chatPage.task.closeBoard} class="ghost"
on:click={boardViewModel.close} aria-label={translations.chatPage.task.closeBoard}
> on:click={boardViewModel.close}
<span class="icon">arrow_back</span> >
</button> <span class="icon">arrow_back</span>
<button </button>
class="ghost" <button
aria-label={translations.chatPage.task.boardSettingsHeadline} class="ghost"
on:click={boardViewModel.showSettings} aria-label={translations.chatPage.task.boardSettingsHeadline}
> on:click={boardViewModel.showSettings}
<span class="icon">settings</span> >
</button> <span class="icon">settings</span>
</button>
</span>
<span>a</span>
<span>b</span>
</div> </div>
<div class="content"></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-wrapper">
<div class="pane"> <div class="pane">
<div class="toolbar"> <div class="toolbar">
<span>{translations.chatPage.message.messagesHeadline}</span> <span class="title">{translations.chatPage.message.messagesHeadline}</span>
</div> </div>
<div class="content"> <div class="content">
{messageContainer} {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-wrapper">
<div class="pane"> <div class="pane">
<div class="toolbar"> <div class="toolbar">
<span>{translations.chatPage.settings.settingsHeadline}</span> <span class="title">
{translations.chatPage.settings.settingsHeadline}
</span>
</div> </div>
<div class="content"> <div class="content">
<label class="tile flex-no"> <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,
#chat-page > div > #ribbon, #chat-page > div > #ribbon,
#chat-page > div > #ribbon > span,
#chat-page > div > #main, #chat-page > div > #main,
#chat-page > div > #main > div, #chat-page > div > #main > div,
#chat-page > div > #main > div > .pane-wrapper > .pane, #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,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span,
#chat-page > div > #main > div > .pane-wrapper > .pane > .content { #chat-page > div > #main > div > .pane-wrapper > .pane > .content {
display: flex; display: flex;
} }
@@ -104,22 +106,19 @@ body[showing-chat] #chat-page-wrapper {
} }
#chat-page #ribbon > span, #chat-page #ribbon > span,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
padding: var(--gap-between-tiles);
gap: var(--gap-between-tiles); 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 { #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;
padding-bottom: var(--safe-area-bottom); padding-bottom: var(--safe-area-bottom);
} }
@@ -129,18 +128,17 @@ body[showing-chat] #chat-page-wrapper {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
justify-content: flex-end;
}
#chat-page > div > #ribbon > span {
flex-direction: column; flex-direction: column;
justify-content: end;
padding: var(--gap-between-tiles);
} }
#chat-page > div > #ribbon button, #chat-page > div > #ribbon button,
#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
padding: 0px; padding: 0px;
width: 100%; width: var(--control-height);
max-width: var(--control-height); max-width: var(--control-height);
height: var(--control-height); height: var(--control-height);
min-height: var(--control-height); min-height: var(--control-height);
@@ -158,6 +156,7 @@ body[showing-chat] #chat-page-wrapper {
> .pane > .pane
> .toolbar > .toolbar
button.ribbon-button { button.ribbon-button {
width: 100%;
min-height: unset; min-height: unset;
height: calc(var(--control-height) - 2 * var(--gap-between-tiles)); 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); 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); padding-left: var(--content-padding);
} }