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

add toggle to hide/show list of boards

Browse Source
This commit is contained in:
marlon-erler
2024-07-28 18:33:58 +02:00
parent 5cd790e86e
commit d67b56f623
7 changed files with 88 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+15
View File
@@ -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 */
dist/index.js
Vendored
+26 -10
View File
@@ -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",
src/View/ChatPages/boardPage.tsx
+10 -3
View File
@@ -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) {
<div class="toolbar">
<span>
<button
class="ghost"
aria-label={translations.chatPage.task.closeBoard}
class="ghost board-close-button"
aria-label={translations.chatPage.task.closeBoardButtonAudioLabel}
on:click={boardViewModel.close}
>
<span class="icon">arrow_back</span>
</button>
<button
class="ghost board-toggle-button"
aria-label={translations.chatPage.task.toggleBoardButtonAudioLabel}
on:click={boardViewModel.taskPageViewModel.toggleBoardList}
toggle:selected={boardViewModel.taskPageViewModel.isShowingBoadList}
>
<span class="icon">dock_to_left</span>
</button>
<button
class="ghost"
aria-label={translations.chatPage.task.boardSettingsHeadline}
src/View/ChatPages/taskPage.css
+24
View File
@@ -76,6 +76,22 @@
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;
@@ -99,4 +115,12 @@
#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/ChatPages/taskPage.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
);
return (
<div id="task-page" toggle:isshowingboard={isShowingBoard}>
<div id="task-page" toggle:isshowingboard={isShowingBoard} set:showingboardlist={taskPageViewModel.isShowingBoadList}>
<div
id="board-list"
class="pane-wrapper side background"
src/View/translations.ts
+6 -3
View File
@@ -193,7 +193,8 @@ const englishTranslations = {
///
closeBoard: "close board",
closeBoardButtonAudioLabel: "close board",
toggleBoardButtonAudioLabel: "toggle board list",
showBoardSettingsButtonAudioLabel: "show board settigns",
listViewButtonAudioLabel: "list view",
@@ -444,7 +445,8 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
noBoardSelected: "Kein Board ausgewählt",
boardNotFound: "Board nicht gefunden",
closeBoard: "Board schließen",
closeBoardButtonAudioLabel: "board schließen",
toggleBoardButtonAudioLabel: "board-liste ein/ausblenden",
showBoardSettingsButtonAudioLabel: "Board-Einstellungen anzeigen",
listViewButtonAudioLabel: "Listenansicht",
@@ -676,7 +678,8 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
noBoardSelected: "Ningún tablero seleccionado",
boardNotFound: "Tablero no encontrado",
closeBoard: "cerrar tablero",
closeBoardButtonAudioLabel: "cerrar tablero",
toggleBoardButtonAudioLabel: "mostrar o ocultar lista de tableros",
showBoardSettingsButtonAudioLabel: "mostrar configuración del tablero",
listViewButtonAudioLabel: "vista de lista",
src/ViewModel/Pages/taskPageViewModel.ts
+6
View File
@@ -37,6 +37,8 @@ export default class TaskPageViewModel {
boardViewModels: React.MapState<BoardViewModel> = new React.MapState();
isShowingBoadList: React.State<boolean> = new React.State(true);
selectedBoardId: React.State<string | undefined> = new React.State<any>(
undefined
);
@@ -72,6 +74,10 @@ export default class TaskPageViewModel {
};
// view
toggleBoardList = (): void => {
this.isShowingBoadList.value = !this.isShowingBoadList.value;
};
showBoardInList = (boardInfo: BoardInfoFileContent): void => {
const boardViewModel: BoardViewModel = new BoardViewModel(
this.coreViewModel,