diff --git a/dist/index.css b/dist/index.css index 9c336bce..c966c2a2 100644 --- a/dist/index.css +++ b/dist/index.css @@ -335,8 +335,8 @@ body[showing-chat] #chat-page-wrapper { min-height: unset; height: calc(var(--control-height) - 2 * var(--gap-between-tiles)); } -#chat-page > div > #ribbon button.ribbon-button > .icon, -#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button > .icon { +#chat-page > div > #ribbon button > .icon, +#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button > .icon { font-size: 1.1rem; } #chat-page > div > #ribbon > span { diff --git a/dist/index.js b/dist/index.js index 34b7019a..cf3641b1 100644 --- a/dist/index.js +++ b/dist/index.js @@ -175,6 +175,9 @@ ); return proxyState; } + function bulkSubscribe(statesToSubscibe, fn) { + statesToSubscibe.forEach((state) => state.subscribeSilent(fn)); + } function createElement(tagName, attributes = {}, ...children) { const element = document.createElement(tagName); if (attributes != null) @@ -1206,6 +1209,8 @@ body = new State(""); status = new State(void 0); sentByUser; + // state + isPresentingInfoModal = new State(false); // methods copyMessage = () => { navigator.clipboard.writeText(this.body.value); @@ -1216,6 +1221,13 @@ decryptMessage = () => { this.messagePageViewModel.decryptMessage(this); }; + // view + showInfoModal = () => { + this.isPresentingInfoModal.value = true; + }; + hideInfoModal = () => { + this.isPresentingInfoModal.value = false; + }; // load loadData = () => { this.channel = this.chatMessage.channel; @@ -1379,11 +1391,12 @@ // src/ViewModel/Pages/boardViewModel.ts var BoardViewModel = class { taskPageViewModel; - // data + // state boardInfo; name = new State(""); color = new State("standard" /* Standard */); isSelected; + isPresentingSettingsModal = new State(false); // view select = () => { this.taskPageViewModel.selectBoard(this); @@ -1391,6 +1404,12 @@ close = () => { this.taskPageViewModel.closeBoard(); }; + showSettings = () => { + this.isPresentingSettingsModal.value = true; + }; + hideSettings = () => { + this.isPresentingSettingsModal.value = false; + }; // load loadListRelevantData = () => { this.name.value = this.boardInfo.name; @@ -1699,8 +1718,10 @@ }, message: { messagesHeadline: "Messages", + /// composerInputPlaceholder: "Type a message...", sendMessageButtonAudioLabel: "send message", + /// showMessageInfoButtonAudioLabel: "show message info", messageInfoHeadline: "Message Info", sentBy: "Sent by", @@ -1715,7 +1736,14 @@ task: { newBoardNamePlaceholder: "Create a board", createBoardButtonAudioLabel: "create board", - noBoardSelected: "No board selected" + /// + noBoardSelected: "No board selected", + /// + closeBoard: "close board", + showBoardSettingsButtonAudioLabel: "show board settigns", + /// + boardSettingsHeadline: "Board Settings", + boardNameInputLabel: "Board name" } } }; @@ -1725,34 +1753,19 @@ var language = navigator.language.substring(0, 2); var translations = allTranslations[language] || allTranslations.en; - // src/View/Components/chatMessageInfoModal.tsx - function ChatMessageInfoModal(chatMessageViewModel, isOpen) { - function closeModal() { - isOpen.value = false; - } - return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isOpen }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.message.messageInfoHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "account_circle"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.sentBy), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.sender))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "schedule"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.timeSent), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.dateSent))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.channel), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.channel))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "description"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messageContent), /* @__PURE__ */ createElement( + // src/View/Modals/chatMessageInfoModal.tsx + function ChatMessageInfoModal(chatMessageViewModel) { + return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": chatMessageViewModel.isPresentingInfoModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.message.messageInfoHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "account_circle"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.sentBy), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.sender))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "schedule"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.timeSent), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.dateSent))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.channel), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.channel))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "description"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messageContent), /* @__PURE__ */ createElement( "b", { class: "break-word", "subscribe:innerText": chatMessageViewModel.body } - )))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.copyMessage }, translations.chatPage.message.copyMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.resendMessage }, translations.chatPage.message.resendMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "redo")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.decryptMessage }, translations.chatPage.message.decryptMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "key")))), /* @__PURE__ */ createElement( - "button", - { - "on:click": closeModal, - "aria-label": translations.general.closeButton - }, - translations.general.closeButton, - /* @__PURE__ */ createElement("span", { class: "icon" }, "close") - ))); + )))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.copyMessage }, translations.chatPage.message.copyMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.resendMessage }, translations.chatPage.message.resendMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "redo")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.decryptMessage }, translations.chatPage.message.decryptMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "key")))), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.hideInfoModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))); } // src/View/Components/chatMessage.tsx function ChatMessage(chatMessageViewModel) { - const isInfoModalOpen = new State(false); - function openModal() { - isInfoModalOpen.value = true; - } const statusIcon = createProxyState( [chatMessageViewModel.status], () => { @@ -1783,12 +1796,12 @@ ), /* @__PURE__ */ createElement("span", { class: "timestamp ellipsis" }, /* @__PURE__ */ createElement("span", { class: "icon", "subscribe:innerText": statusIcon }), chatMessageViewModel.dateSent)), /* @__PURE__ */ createElement("div", { class: "button-container" }, /* @__PURE__ */ createElement( "button", { - "on:click": openModal, + "on:click": chatMessageViewModel.showInfoModal, "aria-label": translations.chatPage.message.showMessageInfoButtonAudioLabel }, /* @__PURE__ */ createElement("span", { class: "icon" }, "info") ))), - ChatMessageInfoModal(chatMessageViewModel, isInfoModalOpen) + ChatMessageInfoModal(chatMessageViewModel) ); } var ChatMessageViewModelToView = (chatMessageViewModel) => { @@ -2003,9 +2016,37 @@ return BoardEntry(boardViewModel); }; + // src/View/Modals/boardSettingsModal.tsx + function BoardSettingsModal(boardViewModel) { + return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": boardViewModel.isPresentingSettingsModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.message.messageInfoHeadline)), /* @__PURE__ */ createElement( + "button", + { + "on:click": boardViewModel.hideSettings + }, + translations.general.closeButton, + /* @__PURE__ */ createElement("span", { class: "icon" }, "close") + ))); + } + // src/View/ChatPages/boardPage.tsx function BoardPage(boardViewModel) { - return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }), /* @__PURE__ */ createElement("div", { class: "content" })); + return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement( + "button", + { + class: "ghost", + "aria-label": translations.chatPage.task.closeBoard, + "on:click": boardViewModel.close + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back") + ), /* @__PURE__ */ createElement( + "button", + { + class: "ghost", + "aria-label": translations.chatPage.task.boardSettingsHeadline, + "on:click": boardViewModel.showSettings + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "settings") + )), /* @__PURE__ */ createElement("div", { class: "content" }), BoardSettingsModal(boardViewModel)); } // src/View/ChatPages/taskPage.tsx @@ -2024,7 +2065,7 @@ } } ); - return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__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( + 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, @@ -2050,7 +2091,17 @@ BoardInfoToEntry ] } - )))), /* @__PURE__ */ createElement("div", { class: "pane-wrapper", "children:set": paneContent })); + )))); + const mainPageWrapper = /* @__PURE__ */ createElement("div", { class: "pane-wrapper", "children:set": paneContent }); + bulkSubscribe([taskPageViewModel.selectedBoard], () => { + const selectedBoard = taskPageViewModel.selectedBoard.value; + if (selectedBoard == void 0) { + listPaneWrapper.scrollIntoView(); + } else { + mainPageWrapper.scrollIntoView(); + } + }); + return /* @__PURE__ */ createElement("div", { id: "task-page" }, listPaneWrapper, mainPageWrapper); } // src/View/chatPage.tsx diff --git a/src/View/ChatPages/boardPage.tsx b/src/View/ChatPages/boardPage.tsx index b9d8650b..4f2c8571 100644 --- a/src/View/ChatPages/boardPage.tsx +++ b/src/View/ChatPages/boardPage.tsx @@ -1,10 +1,31 @@ import * as React from "bloatless-react"; +import { BoardSettingsModal } from "../Modals/boardSettingsModal"; import BoardViewModel from "../../ViewModel/Pages/boardViewModel"; +import { translations } from "../translations"; export function BoardPage(boardViewModel: BoardViewModel) { - return
-
-
-
; + return ( +
+
+ + +
+
+ + {BoardSettingsModal(boardViewModel)} +
+ ); } diff --git a/src/View/ChatPages/taskPage.tsx b/src/View/ChatPages/taskPage.tsx index 3a620482..a20f3f20 100644 --- a/src/View/ChatPages/taskPage.tsx +++ b/src/View/ChatPages/taskPage.tsx @@ -26,43 +26,59 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) { } ); - return ( -
-
-
-
-
- - -
-
-
-
+ const listPaneWrapper = ( +
+
+
+
+ +
+
+
+
+
+ ); -
+ const mainPageWrapper = ( +
+ ); + + React.bulkSubscribe([taskPageViewModel.selectedBoard], () => { + const selectedBoard = taskPageViewModel.selectedBoard.value; + if (selectedBoard == undefined) { + listPaneWrapper.scrollIntoView(); + } else { + mainPageWrapper.scrollIntoView(); + } + }); + + return ( +
+ {listPaneWrapper} + {mainPageWrapper}
); } diff --git a/src/View/Components/chatMessage.tsx b/src/View/Components/chatMessage.tsx index 492ecb0d..13602fda 100644 --- a/src/View/Components/chatMessage.tsx +++ b/src/View/Components/chatMessage.tsx @@ -1,16 +1,11 @@ import * as React from "bloatless-react"; -import { ChatMessageInfoModal } from "./chatMessageInfoModal"; +import { ChatMessageInfoModal } from "../Modals/chatMessageInfoModal"; import { ChatMessageStatus } from "../../Model/Chat/chatModel"; import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel"; import { translations } from "../translations"; export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) { - const isInfoModalOpen = new React.State(false); - function openModal() { - isInfoModalOpen.value = true; - } - const statusIcon = React.createProxyState( [chatMessageViewModel.status], () => { @@ -49,7 +44,7 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
- {ChatMessageInfoModal(chatMessageViewModel, isInfoModalOpen)} + {ChatMessageInfoModal(chatMessageViewModel)}
); } diff --git a/src/View/Modals/boardSettingsModal.tsx b/src/View/Modals/boardSettingsModal.tsx new file mode 100644 index 00000000..2ad3ad20 --- /dev/null +++ b/src/View/Modals/boardSettingsModal.tsx @@ -0,0 +1,22 @@ +import * as React from "bloatless-react"; + +import BoardViewModel from "../../ViewModel/Pages/boardViewModel"; +import { translations } from "../translations"; + +export function BoardSettingsModal(boardViewModel: BoardViewModel) { + return ( +
+
+
+

{translations.chatPage.message.messageInfoHeadline}

+
+ +
+
+ ); +} diff --git a/src/View/Components/chatMessageInfoModal.tsx b/src/View/Modals/chatMessageInfoModal.tsx similarity index 89% rename from src/View/Components/chatMessageInfoModal.tsx rename to src/View/Modals/chatMessageInfoModal.tsx index 80d547dd..d15db4c7 100644 --- a/src/View/Components/chatMessageInfoModal.tsx +++ b/src/View/Modals/chatMessageInfoModal.tsx @@ -4,15 +4,10 @@ import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel"; import { translations } from "../translations"; export function ChatMessageInfoModal( - chatMessageViewModel: ChatMessageViewModel, - isOpen: React.State + chatMessageViewModel: ChatMessageViewModel ) { - function closeModal() { - isOpen.value = false; - } - return ( -
+

{translations.chatPage.message.messageInfoHeadline}

@@ -71,10 +66,7 @@ export function ChatMessageInfoModal(
- diff --git a/src/View/chatPage.css b/src/View/chatPage.css index 8ea9d88a..46784f18 100644 --- a/src/View/chatPage.css +++ b/src/View/chatPage.css @@ -162,7 +162,7 @@ body[showing-chat] #chat-page-wrapper { height: calc(var(--control-height) - 2 * var(--gap-between-tiles)); } -#chat-page > div > #ribbon button.ribbon-button > .icon, +#chat-page > div > #ribbon button > .icon, #chat-page > div > #main @@ -170,7 +170,7 @@ body[showing-chat] #chat-page-wrapper { > .pane-wrapper > .pane > .toolbar - button.ribbon-button + button > .icon { font-size: 1.1rem; } diff --git a/src/View/translations.ts b/src/View/translations.ts index 3b34f112..c97bf8a6 100644 --- a/src/View/translations.ts +++ b/src/View/translations.ts @@ -106,9 +106,13 @@ const englishTranslations = { message: { messagesHeadline: "Messages", + /// + composerInputPlaceholder: "Type a message...", sendMessageButtonAudioLabel: "send message", + /// + showMessageInfoButtonAudioLabel: "show message info", messageInfoHeadline: "Message Info", @@ -127,7 +131,20 @@ const englishTranslations = { newBoardNamePlaceholder: "Create a board", createBoardButtonAudioLabel: "create board", + /// + noBoardSelected: "No board selected", + + /// + + closeBoard: "close board", + showBoardSettingsButtonAudioLabel: "show board settigns", + + /// + + boardSettingsHeadline: "Board Settings", + + boardNameInputLabel: "Board name", }, }, }; diff --git a/src/ViewModel/Chat/chatMessageViewModel.ts b/src/ViewModel/Chat/chatMessageViewModel.ts index 0848ffe6..0fe503ee 100644 --- a/src/ViewModel/Chat/chatMessageViewModel.ts +++ b/src/ViewModel/Chat/chatMessageViewModel.ts @@ -17,6 +17,9 @@ export default class ChatMessageViewModel { ChatMessageStatus | undefined >(undefined); sentByUser: boolean; + + // state + isPresentingInfoModal: React.State = new React.State(false); // methods copyMessage = (): void => { @@ -29,6 +32,15 @@ export default class ChatMessageViewModel { this.messagePageViewModel.decryptMessage(this); }; + // view + showInfoModal = (): void => { + this.isPresentingInfoModal.value = true; + } + + hideInfoModal = (): void => { + this.isPresentingInfoModal.value = false; + } + // load loadData = (): void => { this.channel = this.chatMessage.channel; diff --git a/src/ViewModel/Pages/boardViewModel.ts b/src/ViewModel/Pages/boardViewModel.ts index 52f69f63..7f99523e 100644 --- a/src/ViewModel/Pages/boardViewModel.ts +++ b/src/ViewModel/Pages/boardViewModel.ts @@ -7,13 +7,14 @@ import TaskPageViewModel from "./taskPageViewModel"; export default class BoardViewModel { taskPageViewModel: TaskPageViewModel; - // data + // state boardInfo: BoardInfoFileContent; name: React.State = new React.State(""); color: React.State = new React.State(Color.Standard); isSelected: React.State; + isPresentingSettingsModal: React.State = new React.State(false); // view select = (): void => { @@ -24,6 +25,14 @@ export default class BoardViewModel { this.taskPageViewModel.closeBoard(); }; + showSettings = (): void => { + this.isPresentingSettingsModal.value = true; + }; + + hideSettings = (): void => { + this.isPresentingSettingsModal.value = false; + }; + // load loadListRelevantData = (): void => { this.name.value = this.boardInfo.name;