From d67b56f623e6bb8bfd4a5b9ac2568b45e7d963bc Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Sun, 28 Jul 2024 18:33:58 +0200 Subject: [PATCH] add toggle to hide/show list of boards --- dist/index.css | 15 ++++++++++ dist/index.js | 36 +++++++++++++++++------- src/View/ChatPages/boardPage.tsx | 13 +++++++-- src/View/ChatPages/taskPage.css | 24 ++++++++++++++++ src/View/ChatPages/taskPage.tsx | 2 +- src/View/translations.ts | 9 ++++-- src/ViewModel/Pages/taskPageViewModel.ts | 6 ++++ 7 files changed, 88 insertions(+), 17 deletions(-) diff --git a/dist/index.css b/dist/index.css index f83ebffe..0d79828a 100644 --- a/dist/index.css +++ b/dist/index.css @@ -715,6 +715,15 @@ body[showing-chat] #chat-page-wrapper { content: ""; display: flex; } +#chat-page > div > #main > #task-page .board-close-button { + display: none; +} +#chat-page > div > #main > #task-page .board-toggle-button { + display: flex; +} +#chat-page > div > #main > #task-page[isshowingboard][showingboardlist=false] #board-list { + display: none; +} @media (min-width: 640px) { #chat-page > div > #main > #task-page .task-grid { display: grid; @@ -734,6 +743,12 @@ body[showing-chat] #chat-page-wrapper { #chat-page > div > #main > #task-page[isshowingboard] #board-content { display: flex; } + #chat-page > div > #main > #task-page .board-close-button { + display: flex; + } + #chat-page > div > #main > #task-page .board-toggle-button { + display: none; + } } /* src/View/Components/fileBrowser.css */ diff --git a/dist/index.js b/dist/index.js index 52e66ab0..17b955c0 100644 --- a/dist/index.js +++ b/dist/index.js @@ -2353,6 +2353,7 @@ // state newBoardNameInput = new State(""); boardViewModels = new MapState(); + isShowingBoadList = new State(true); selectedBoardId = new State( void 0 ); @@ -2380,6 +2381,9 @@ this.updateBoardIndices(); }; // view + toggleBoardList = () => { + this.isShowingBoadList.value = !this.isShowingBoadList.value; + }; showBoardInList = (boardInfo) => { const boardViewModel = new BoardViewModel( this.coreViewModel, @@ -2578,7 +2582,8 @@ noBoardSelected: "No board selected", boardNotFound: "Board not found", /// - closeBoard: "close board", + closeBoardButtonAudioLabel: "close board", + toggleBoardButtonAudioLabel: "toggle board list", showBoardSettingsButtonAudioLabel: "show board settigns", listViewButtonAudioLabel: "list view", kanbanViewButtonAudioLabel: "kanban view", @@ -2685,10 +2690,10 @@ }, dataTransferModal: { transferDataHeadline: "Daten\xFCbertragung", - selectionDescription: "W\xE4hlen Sie die Daten aus, die Sie \xFCbertragen m\xF6chten.", - dataEntryDescription: "Geben Sie diese Informationen auf dem anderen Ger\xE4t ein.", - dataEntryInputDescription: "Geben Sie die auf dem anderen Ger\xE4t angezeigten Informationen ein.", - readyToReceiveDescription: "Klicken Sie auf dem anderen Ger\xE4t auf 'Senden'.", + selectionDescription: "W\xE4hle die Daten aus, die du \xFCbertragen m\xF6chtest.", + dataEntryDescription: "Gib diese Informationen auf dem anderen Ger\xE4t ein.", + dataEntryInputDescription: "Gib die auf dem anderen Ger\xE4t angezeigten Informationen ein.", + readyToReceiveDescription: "Klicke auf dem anderen Ger\xE4t auf 'Senden'.", fromThisDeviceButton: "Von diesem Ger\xE4t", toThisDeviceButton: "An dieses Ger\xE4t", generalHeadline: "Allgemein", @@ -2752,7 +2757,8 @@ createBoardButtonAudioLabel: "board erstellen", noBoardSelected: "Kein Board ausgew\xE4hlt", boardNotFound: "Board nicht gefunden", - closeBoard: "Board schlie\xDFen", + closeBoardButtonAudioLabel: "board schlie\xDFen", + toggleBoardButtonAudioLabel: "board-liste ein/ausblenden", showBoardSettingsButtonAudioLabel: "Board-Einstellungen anzeigen", listViewButtonAudioLabel: "Listenansicht", kanbanViewButtonAudioLabel: "Kanban-Ansicht", @@ -2918,7 +2924,8 @@ createBoardButtonAudioLabel: "crear tablero", noBoardSelected: "Ning\xFAn tablero seleccionado", boardNotFound: "Tablero no encontrado", - closeBoard: "cerrar tablero", + closeBoardButtonAudioLabel: "cerrar tablero", + toggleBoardButtonAudioLabel: "mostrar o ocultar lista de tableros", showBoardSettingsButtonAudioLabel: "mostrar configuraci\xF3n del tablero", listViewButtonAudioLabel: "vista de lista", kanbanViewButtonAudioLabel: "vista kanban", @@ -4176,11 +4183,20 @@ return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement( "button", { - class: "ghost", - "aria-label": translations.chatPage.task.closeBoard, + class: "ghost board-close-button", + "aria-label": translations.chatPage.task.closeBoardButtonAudioLabel, "on:click": boardViewModel.close }, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back") + ), /* @__PURE__ */ createElement( + "button", + { + class: "ghost board-toggle-button", + "aria-label": translations.chatPage.task.toggleBoardButtonAudioLabel, + "on:click": boardViewModel.taskPageViewModel.toggleBoardList, + "toggle:selected": boardViewModel.taskPageViewModel.isShowingBoadList + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "dock_to_left") ), /* @__PURE__ */ createElement( "button", { @@ -4273,7 +4289,7 @@ return BoardPage(selectedBoard); } ); - return /* @__PURE__ */ createElement("div", { id: "task-page", "toggle:isshowingboard": isShowingBoard }, /* @__PURE__ */ createElement( + return /* @__PURE__ */ createElement("div", { id: "task-page", "toggle:isshowingboard": isShowingBoard, "set:showingboardlist": taskPageViewModel.isShowingBoadList }, /* @__PURE__ */ createElement( "div", { id: "board-list", diff --git a/src/View/ChatPages/boardPage.tsx b/src/View/ChatPages/boardPage.tsx index 23e95851..40dc1b98 100644 --- a/src/View/ChatPages/boardPage.tsx +++ b/src/View/ChatPages/boardPage.tsx @@ -10,7 +10,6 @@ import { BoardStatusGridPage } from "./boardStatusGridPage"; import { BoardViewToggleButton } from "../Components/boardViewToggleButton"; import { SearchModal } from "../Modals/searchModal"; import { TaskSettingsModal } from "../Modals/taskSettingsModal"; -import TaskViewModel from "../../ViewModel/Pages/taskViewModel"; import { TaskViewModelToEntry } from "../Components/taskEntry"; import { translations } from "../translations"; @@ -60,12 +59,20 @@ export function BoardPage(boardViewModel: BoardViewModel) {
+