From 73bdecb81d5f353bb310a145eef36a5680c726a3 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Tue, 23 Jul 2024 15:25:16 +0200 Subject: [PATCH] make the UI more colorful --- dist/index.css | 44 ++++++---- dist/index.js | 118 ++++++++++++++++++++------ src/View/ChatPages/boardPage.tsx | 41 ++++++++- src/View/ChatPages/taskPage.tsx | 5 +- src/View/chatPage.css | 28 +++--- src/View/translations.ts | 7 ++ src/ViewModel/Pages/boardViewModel.ts | 18 ++++ src/colors.css | 35 ++++++-- 8 files changed, 232 insertions(+), 64 deletions(-) diff --git a/dist/index.css b/dist/index.css index 15abe386..5eaa0f4f 100644 --- a/dist/index.css +++ b/dist/index.css @@ -122,14 +122,19 @@ main { color: var(--primary); } [color]:not([color=standard]).background { - --luma: var(--subtle-luma); - background: hsl(var(--hue), 90%, var(--luma)); + --luma: var(--background-luma); + --sat: 80%; + background: hsl(var(--hue), var(--sat), var(--luma)); } @media (prefers-color-scheme: dark) { [color]:not([color=standard]).background { - --luma: var(--subtle-luma-dark); + --luma: var(--background-luma-dark); + --sat: 40%; } } +[color=standard].background { + background: var(--surface); +} [color]:not([color=standard]).subtle-background { --luma: var(--subtle-luma); background: hsl(var(--hue), 30%, var(--luma)); @@ -145,6 +150,8 @@ main { --accent-luma-dark: 70%; --accent-text-luma: 100%; --accent-text-luma-dark: 100%; + --background-luma: 90%; + --background-luma-dark: 10%; --subtle-luma: 95%; --subtle-luma-dark: 5%; } @@ -154,6 +161,8 @@ main { --accent-luma-dark: 60%; --accent-text-luma: 0%; --accent-text-luma-dark: 0%; + --background-luma: 85%; + --background-luma-dark: 10%; --subtle-luma: 95%; --subtle-luma-dark: 5%; } @@ -163,6 +172,8 @@ main { --accent-luma-dark: 60%; --accent-text-luma: 100%; --accent-text-luma-dark: 0%; + --background-luma: 85%; + --background-luma-dark: 9%; --subtle-luma: 95%; --subtle-luma-dark: 5%; } @@ -170,8 +181,10 @@ main { --hue: 180; --accent-luma: 40%; --accent-luma-dark: 60%; - --accent-text-luma: 100%; - --accent-text-luma-dark: 0%; + --accent-text-luma: 0%; + --accent-text-luma-dark: 100%; + --background-luma: 85%; + --background-luma-dark: 8%; --subtle-luma: 95%; --subtle-luma-dark: 5%; } @@ -181,6 +194,8 @@ main { --accent-luma-dark: 70%; --accent-text-luma: 100%; --accent-text-luma-dark: 100%; + --background-luma: 90%; + --background-luma-dark: 10%; --subtle-luma: 95%; --subtle-luma-dark: 5%; } @@ -190,6 +205,8 @@ main { --accent-luma-dark: 70%; --accent-text-luma: 100%; --accent-text-luma-dark: 100%; + --background-luma: 90%; + --background-luma-dark: 12%; --subtle-luma: 95%; --subtle-luma-dark: 5%; } @@ -281,9 +298,6 @@ body[showing-chat] #chat-page-wrapper { max-width: 18rem; } } -#chat-page > div > #main > div > .pane-wrapper:not(:last-child) { - border-right: 1px solid var(--border); -} #chat-page > div > #main > div > .pane-wrapper > .pane > .content { flex-direction: column; overflow: auto; @@ -298,9 +312,10 @@ body[showing-chat] #chat-page-wrapper { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar { align-items: center; } -#chat-page #ribbon > span, -#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span { +#chat-page > div > #ribbon > span, +#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.ribbon { gap: var(--gap-between-tiles); + padding: var(--gap-between-tiles); } #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar { justify-content: start; @@ -308,7 +323,6 @@ body[showing-chat] #chat-page-wrapper { } #chat-page > div > #ribbon { width: var(--ribbon-size); - border-right: 1px solid var(--border); padding-bottom: var(--safe-area-bottom); } #chat-page > div > #ribbon > span { @@ -317,7 +331,6 @@ body[showing-chat] #chat-page-wrapper { overflow-y: auto; 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 { @@ -331,7 +344,8 @@ 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%; + width: calc(var(--control-height) - 2 * var(--gap-between-tiles)); + max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles)); min-height: unset; height: calc(var(--control-height) - 2 * var(--gap-between-tiles)); } @@ -344,11 +358,9 @@ body[showing-chat] #chat-page-wrapper { } #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar { height: var(--ribbon-size); - border-bottom: 1px solid var(--border); - overflow-y: hidden; + border-top: 1px solid var(--border); overflow-x: auto; padding: 0px; - border-top: 1px solid var(--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 1b091f4d..92205a52 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1423,6 +1423,8 @@ color = new State("standard" /* Standard */); isSelected; isPresentingSettingsModal = new State(false); + isPresentingFilterModal = new State(false); + isPresentingNewTaskModal = new State(false); index = new State(0); // view select = () => { @@ -1438,6 +1440,18 @@ this.saveSettings(); this.isPresentingSettingsModal.value = false; }; + showFilterModal = () => { + this.isPresentingFilterModal.value = true; + }; + hideFilterModal = () => { + this.isPresentingFilterModal.value = false; + }; + showNewTaskModal = () => { + this.isPresentingNewTaskModal.value = true; + }; + hideNewTaskModal = () => { + this.isPresentingNewTaskModal.value = false; + }; updateIndex = () => { const index = this.taskPageViewModel.boardIndexManager.getIndex(this); this.index.value = index; @@ -1842,6 +1856,11 @@ /// closeBoard: "close board", showBoardSettingsButtonAudioLabel: "show board settigns", + listViewButtonAudioLabel: "list view", + kanbanViewButtonAudioLabel: "kanban view", + statusViewButtonAudioLabel: "status grid view", + filterTasksButtonAudioLabel: "filter tasks", + createTaskButtonAudioLabel: "create new task", /// boardSettingsHeadline: "Board Settings", boardNameInputLabel: "Board name", @@ -2159,7 +2178,47 @@ "on:click": boardViewModel.showSettings }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings") - )), /* @__PURE__ */ createElement("span", null, "a"), /* @__PURE__ */ createElement("span", null, "b")), /* @__PURE__ */ createElement("div", { class: "content" }), BoardSettingsModal(boardViewModel)); + )), /* @__PURE__ */ createElement("span", { class: "scroll-h ribbon" }, /* @__PURE__ */ createElement( + "button", + { + class: "ghost ribbon-button", + "aria-label": translations.chatPage.task.listViewButtonAudioLabel, + "on:click": boardViewModel.close + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "view_list") + ), /* @__PURE__ */ createElement( + "button", + { + class: "ghost ribbon-button", + "aria-label": translations.chatPage.task.kanbanViewButtonAudioLabel, + "on:click": boardViewModel.showSettings + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "view_kanban") + ), /* @__PURE__ */ createElement( + "button", + { + class: "ghost ribbon-button", + "aria-label": translations.chatPage.task.statusViewButtonAudioLabel, + "on:click": boardViewModel.showSettings + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "grid_view") + )), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement( + "button", + { + class: "ghost", + "aria-label": translations.chatPage.task.filterTasksButtonAudioLabel, + "on:click": boardViewModel.showFilterModal + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "filter_alt") + ), /* @__PURE__ */ createElement( + "button", + { + class: "primary", + "aria-label": translations.chatPage.task.createTaskButtonAudioLabel, + "on:click": boardViewModel.showNewTaskModal + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "add") + ))), /* @__PURE__ */ createElement("div", { class: "content" }), BoardSettingsModal(boardViewModel)); } // src/View/ChatPages/taskPage.tsx @@ -2179,33 +2238,40 @@ return BoardPage(selectedBoard); } ); - const listPaneWrapper = /* @__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, - "on:enter": taskPageViewModel.createBoard, - placeholder: translations.chatPage.task.newBoardNamePlaceholder - } - ), /* @__PURE__ */ createElement( - "button", - { - class: "primary", - "aria-label": translations.chatPage.task.createBoardButtonAudioLabel, - "on:click": taskPageViewModel.createBoard, - "toggle:disabled": taskPageViewModel.cannotCreateBoard - }, - /* @__PURE__ */ createElement("span", { class: "icon" }, "add") - ))), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement( + const listPaneWrapper = /* @__PURE__ */ createElement( "div", { - class: "grid gap", - style: "grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))", - "children:append": [ - taskPageViewModel.boardViewModels, - BoardInfoToEntry - ] - } - )))); + class: "pane-wrapper side background", + "set:color": taskPageViewModel.chatViewModel.displayedColor + }, + /* @__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, + "on:enter": taskPageViewModel.createBoard, + placeholder: translations.chatPage.task.newBoardNamePlaceholder + } + ), /* @__PURE__ */ createElement( + "button", + { + class: "primary", + "aria-label": translations.chatPage.task.createBoardButtonAudioLabel, + "on:click": taskPageViewModel.createBoard, + "toggle:disabled": taskPageViewModel.cannotCreateBoard + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "add") + ))), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement( + "div", + { + class: "grid gap", + style: "grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))", + "children:append": [ + taskPageViewModel.boardViewModels, + BoardInfoToEntry + ] + } + ))) + ); const mainPageWrapper = /* @__PURE__ */ createElement("div", { class: "pane-wrapper", "children:set": paneContent }); bulkSubscribe([taskPageViewModel.selectedBoardId], () => { const selectedBoard = taskPageViewModel.selectedBoardId.value; diff --git a/src/View/ChatPages/boardPage.tsx b/src/View/ChatPages/boardPage.tsx index 914cecd5..af15bd82 100644 --- a/src/View/ChatPages/boardPage.tsx +++ b/src/View/ChatPages/boardPage.tsx @@ -24,8 +24,45 @@ export function BoardPage(boardViewModel: BoardViewModel) { settings - a - b + + + + + + + + +
diff --git a/src/View/ChatPages/taskPage.tsx b/src/View/ChatPages/taskPage.tsx index 0d8a29be..030b85ae 100644 --- a/src/View/ChatPages/taskPage.tsx +++ b/src/View/ChatPages/taskPage.tsx @@ -38,7 +38,10 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) { ); const listPaneWrapper = ( -
+
diff --git a/src/View/chatPage.css b/src/View/chatPage.css index 2833d64f..be598d54 100644 --- a/src/View/chatPage.css +++ b/src/View/chatPage.css @@ -83,10 +83,6 @@ body[showing-chat] #chat-page-wrapper { } } -#chat-page > div > #main > div > .pane-wrapper:not(:last-child) { - border-right: 1px solid var(--border); -} - #chat-page > div > #main > div > .pane-wrapper > .pane > .content { flex-direction: column; overflow: auto; @@ -105,9 +101,17 @@ body[showing-chat] #chat-page-wrapper { align-items: center; } -#chat-page #ribbon > span, -#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span { +#chat-page > div > #ribbon > span, +#chat-page + > div + > #main + > div + > .pane-wrapper + > .pane + > .toolbar + > span.ribbon { gap: var(--gap-between-tiles); + padding: var(--gap-between-tiles); } #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar { @@ -117,7 +121,6 @@ body[showing-chat] #chat-page-wrapper { #chat-page > div > #ribbon { width: var(--ribbon-size); - border-right: 1px solid var(--border); padding-bottom: var(--safe-area-bottom); } @@ -130,8 +133,6 @@ body[showing-chat] #chat-page-wrapper { flex-direction: column; justify-content: end; - - padding: var(--gap-between-tiles); } #chat-page > div > #ribbon button, @@ -156,7 +157,9 @@ body[showing-chat] #chat-page-wrapper { > .pane > .toolbar button.ribbon-button { - width: 100%; + width: calc(var(--control-height) - 2 * var(--gap-between-tiles)); + max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles)); + min-height: unset; height: calc(var(--control-height) - 2 * var(--gap-between-tiles)); } @@ -180,13 +183,12 @@ body[showing-chat] #chat-page-wrapper { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar { height: var(--ribbon-size); - border-bottom: 1px solid var(--border); - overflow-y: hidden; + border-top: 1px solid var(--border); + overflow-x: auto; padding: 0px; - border-top: 1px solid var(--border); } #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title { diff --git a/src/View/translations.ts b/src/View/translations.ts index ee147f14..21e3857e 100644 --- a/src/View/translations.ts +++ b/src/View/translations.ts @@ -141,6 +141,13 @@ const englishTranslations = { closeBoard: "close board", showBoardSettingsButtonAudioLabel: "show board settigns", + listViewButtonAudioLabel: "list view", + kanbanViewButtonAudioLabel: "kanban view", + statusViewButtonAudioLabel: "status grid view", + + filterTasksButtonAudioLabel: "filter tasks", + createTaskButtonAudioLabel: "create new task", + /// boardSettingsHeadline: "Board Settings", diff --git a/src/ViewModel/Pages/boardViewModel.ts b/src/ViewModel/Pages/boardViewModel.ts index e2be20b5..29dfcbfe 100644 --- a/src/ViewModel/Pages/boardViewModel.ts +++ b/src/ViewModel/Pages/boardViewModel.ts @@ -16,6 +16,8 @@ export default class BoardViewModel { isSelected: React.State; isPresentingSettingsModal: React.State = new React.State(false); + isPresentingFilterModal: React.State = new React.State(false); + isPresentingNewTaskModal: React.State = new React.State(false); index: React.State = new React.State(0); @@ -37,6 +39,22 @@ export default class BoardViewModel { this.isPresentingSettingsModal.value = false; }; + showFilterModal = (): void => { + this.isPresentingFilterModal.value = true; + }; + + hideFilterModal = (): void => { + this.isPresentingFilterModal.value = false; + }; + + showNewTaskModal = (): void => { + this.isPresentingNewTaskModal.value = true; + }; + + hideNewTaskModal = (): void => { + this.isPresentingNewTaskModal.value = false; + }; + updateIndex = (): void => { const index: number = this.taskPageViewModel.boardIndexManager.getIndex(this); diff --git a/src/colors.css b/src/colors.css index 23fa8d05..c0ca2f0e 100644 --- a/src/colors.css +++ b/src/colors.css @@ -60,16 +60,22 @@ /* background */ [color]:not([color="standard"]).background { - --luma: var(--subtle-luma); - background: hsl(var(--hue), 90%, var(--luma)); + --luma: var(--background-luma); + --sat: 80%; + background: hsl(var(--hue), var(--sat), var(--luma)); } @media (prefers-color-scheme: dark) { [color]:not([color="standard"]).background { - --luma: var(--subtle-luma-dark); + --luma: var(--background-luma-dark); + --sat: 40%; } } +[color="standard"].background { + background: var(--surface); +} + /* subtle */ [color]:not([color="standard"]).subtle-background { --luma: var(--subtle-luma); @@ -92,6 +98,9 @@ --accent-text-luma: 100%; --accent-text-luma-dark: 100%; + --background-luma: 90%; + --background-luma-dark: 10%; + --subtle-luma: 95%; --subtle-luma-dark: 5%; } @@ -105,6 +114,9 @@ --accent-text-luma: 0%; --accent-text-luma-dark: 0%; + --background-luma: 85%; + --background-luma-dark: 10%; + --subtle-luma: 95%; --subtle-luma-dark: 5%; } @@ -118,6 +130,9 @@ --accent-text-luma: 100%; --accent-text-luma-dark: 0%; + --background-luma: 85%; + --background-luma-dark: 9%; + --subtle-luma: 95%; --subtle-luma-dark: 5%; } @@ -128,8 +143,11 @@ --accent-luma: 40%; --accent-luma-dark: 60%; - --accent-text-luma: 100%; - --accent-text-luma-dark: 0%; + --accent-text-luma: 0%; + --accent-text-luma-dark: 100%; + + --background-luma: 85%; + --background-luma-dark: 8%; --subtle-luma: 95%; --subtle-luma-dark: 5%; @@ -144,6 +162,9 @@ --accent-text-luma: 100%; --accent-text-luma-dark: 100%; + --background-luma: 90%; + --background-luma-dark: 10%; + --subtle-luma: 95%; --subtle-luma-dark: 5%; } @@ -157,7 +178,9 @@ --accent-text-luma: 100%; --accent-text-luma-dark: 100%; - + --background-luma: 90%; + --background-luma-dark: 12%; + --subtle-luma: 95%; --subtle-luma-dark: 5%; }