From 8ac71e87d44002abd421406cb8df50008dc23200 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Tue, 23 Jul 2024 23:28:22 +0200 Subject: [PATCH] improve UI --- dist/index.css | 25 ++++++++++++++----------- dist/index.js | 16 +++++++++++++--- dist/styles.css | 6 ++++-- src/View/ChatPages/boardPage.tsx | 2 +- src/View/Components/ribbonButton.tsx | 2 +- src/View/chatPage.css | 24 ++++++++++-------------- src/colors.css | 8 ++++++++ 7 files changed, 51 insertions(+), 32 deletions(-) diff --git a/dist/index.css b/dist/index.css index fc0d2349..7148817f 100644 --- a/dist/index.css +++ b/dist/index.css @@ -82,11 +82,17 @@ main { --primary-active: hsl(var(--hue), 80%, var(--accent-luma)); --text-on-color: hsl(0, 0%, var(--accent-text-luma)); --link: hsl(var(--hue), 100%, var(--accent-luma)); + --surface: hsla(var(--hue), 80%, 30%, 5%); + --surface-hover: hsla(var(--hue), 100%, 5%, 10%); + --surface-active: hsla(var(--hue), 100%, 5%, 15%); } @media (prefers-color-scheme: dark) { [color]:not([color=standard]) { --accent-luma: var(--accent-luma-dark); --accent-text-luma: var(--accent-text-luma-dark); + --surface: hsla(var(--hue), 100%, 95%, 5%); + --surface-hover: hsla(var(--hue), 100%, 95%, 10%); + --surface-active: hsla(var(--hue), 100%, 95%, 15%); } } [color]:not([color=standard]).tile { @@ -269,7 +275,7 @@ body[showing-chat] #chat-page-wrapper { overflow: hidden; } #chat-page > div > #main { - width: calc(100% - var(--ribbon-size)); + width: calc(100% - var(--ribbon-size) - 1px); overflow-x: scroll; scroll-behavior: smooth; scroll-snap-type: x mandatory; @@ -314,19 +320,20 @@ body[showing-chat] #chat-page-wrapper { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar { align-items: center; } +#chat-page > div > #ribbon { + width: calc(var(--ribbon-size) + 1px); + border-right: 1px solid var(--border); + padding-bottom: var(--safe-area-bottom); +} #chat-page > div > #ribbon > span, #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.ribbon { - gap: calc(var(--gap-between-tiles) * 2); + gap: var(--gap-between-tiles); padding: 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); - padding-bottom: var(--safe-area-bottom); -} #chat-page > div > #ribbon > span { height: 100%; flex: 1; @@ -350,6 +357,7 @@ body[showing-chat] #chat-page-wrapper { max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles)); min-height: unset; height: calc(var(--control-height) - 2 * var(--gap-between-tiles)); + color: var(--primary); } #chat-page > div > #ribbon button > .icon, #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button > .icon { @@ -363,11 +371,6 @@ body[showing-chat] #chat-page-wrapper { overflow-x: auto; padding: 0px; } -@media (max-width: 1024px) { - #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar input { - border-left: 1px solid var(--surface-border); - } -} #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title { padding-left: var(--content-padding); } diff --git a/dist/index.js b/dist/index.js index 827b6a6e..aaa5543d 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1792,7 +1792,7 @@ return /* @__PURE__ */ createElement( "button", { - class: "ghost ribbon-button", + class: "ribbon-button", "aria-label": label, "toggle:selected": isSelected, "on:click": select @@ -2237,6 +2237,16 @@ // src/View/ChatPages/boardPage.tsx function BoardPage(boardViewModel) { boardViewModel.loadData(); + const mainContent = createProxyState( + [boardViewModel.selectedPage], + () => { + switch (boardViewModel.selectedPage.value) { + default: { + return /* @__PURE__ */ createElement("div", null); + } + } + } + ); return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement( "button", { @@ -2279,12 +2289,12 @@ ), /* @__PURE__ */ createElement( "button", { - class: "primary", + class: "ghost", "aria-label": translations.chatPage.task.createTaskButtonAudioLabel, "on:click": boardViewModel.showNewTaskModal }, /* @__PURE__ */ createElement("span", { class: "icon" }, "add") - ))), /* @__PURE__ */ createElement("div", { class: "content" }), BoardSettingsModal(boardViewModel)); + ))), /* @__PURE__ */ createElement("div", { class: "content", "children:set": mainContent }), BoardSettingsModal(boardViewModel)); } // src/View/ChatPages/taskPage.tsx diff --git a/dist/styles.css b/dist/styles.css index d97562e6..a1c3a2c8 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -167,6 +167,9 @@ select:not(.tile *), .tile { background: var(--surface); } +[selected] { + background: var(--background); +} @media (hover: hover) { button:hover, select:hover, @@ -179,8 +182,7 @@ select:not(.tile *), } button:active, select:active, -button.tile.ghost:active, -[selected] { +button.tile.ghost:active { background: var(--surface-active); } [selected]:active { diff --git a/src/View/ChatPages/boardPage.tsx b/src/View/ChatPages/boardPage.tsx index 03b993cb..c80f629a 100644 --- a/src/View/ChatPages/boardPage.tsx +++ b/src/View/ChatPages/boardPage.tsx @@ -70,7 +70,7 @@ export function BoardPage(boardViewModel: BoardViewModel) { filter_alt