diff --git a/dist/index.css b/dist/index.css index feccd0e4..b7530475 100644 --- a/dist/index.css +++ b/dist/index.css @@ -131,6 +131,7 @@ main { } #chat-page #main .content { overflow: auto; + padding: var(--content-padding); } #chat-page #ribbon, #chat-page #main, diff --git a/dist/index.js b/dist/index.js index c8af072a..334fbfe2 100644 --- a/dist/index.js +++ b/dist/index.js @@ -391,6 +391,7 @@ setPrimaryChannel = (primaryChannel) => { this.info.primaryChannel = primaryChannel; this.storeInfo(); + this.chatListModel.updateIndices(); }; setSecondaryChannels = (secondaryChannels) => { this.info.secondaryChannels = secondaryChannels; @@ -551,6 +552,11 @@ close = () => { this.chatListViewModel.closeChat(); }; + setPrimaryChannel = () => { + this.chatModel.setPrimaryChannel(this.primaryChannelInput.value); + this.primaryChannel.value = this.chatModel.info.primaryChannel; + this.chatListViewModel.updateIndices(); + }; // restore restorePageSelection = () => { const path = storageKeys.chatLastUsedPage(this.chatModel.id); @@ -594,6 +600,11 @@ getIndexOfChat(chat) { return this.sortedPrimaryChannels.indexOf(chat.primaryChannel.value); } + updateIndices = () => { + for (const chatViewModel of this.chatViewModels.value) { + chatViewModel.updateIndex(); + } + }; // methods createChat = () => { const chatModel = this.chatListModel.createChat( @@ -659,7 +670,8 @@ var englishTranslations = { general: { closeButtonAudioLabel: "close", - deleteItemButtonAudioLabel: "delete item" + deleteItemButtonAudioLabel: "delete item", + setButton: "Set" }, regional: { weekdays: { @@ -691,7 +703,7 @@ outboxAllItemsSent: "All items sent", yourNameLabel: "Your name", yourNamePlaceholder: "Jane Doe", - setNameButton: "Set", + setNameButtonAudioLabel: "set name", firstDayOfWeekLabel: "First day of week", scrollToChatButton: "Chats", /// @@ -718,7 +730,9 @@ progress: "Progress" }, settings: { - settingsHeadline: "Settings" + settingsHeadline: "Settings", + primaryChannelLabel: "Primary channel", + setPrimaryChannelButtonAudioLabel: "set primary channel" } } }; @@ -730,7 +744,23 @@ // src/View/ChatPages/settingsPage.tsx function SettingsPage(chatViewModel) { - return /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.settingsHeadline))); + return /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.settingsHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.primaryChannelLabel), /* @__PURE__ */ createElement( + "input", + { + "bind:value": chatViewModel.primaryChannelInput, + "on:enter": chatViewModel.setPrimaryChannel + } + ))), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end width-input" }, /* @__PURE__ */ createElement( + "button", + { + class: "width-50", + "aria-label": translations.chatPage.settings.setPrimaryChannelButtonAudioLabel, + "on:click": chatViewModel.setPrimaryChannel, + "toggle:disabled": chatViewModel.cannotSetPrimaryChannel + }, + translations.general.setButton, + /* @__PURE__ */ createElement("span", { class: "icon" }, "check") + )))); } // src/View/chatPage.tsx @@ -1201,9 +1231,10 @@ { class: "width-50", "on:click": settingsViewModel2.setName, - "toggle:disabled": settingsViewModel2.cannotSetName + "toggle:disabled": settingsViewModel2.cannotSetName, + "aria-label": translations.homePage.setNameButtonAudioLabel }, - translations.homePage.setNameButton, + translations.general.setButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "check") )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "calendar_month"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.firstDayOfWeekLabel), /* @__PURE__ */ createElement("select", { "bind:value": settingsViewModel2.firstDayOfWeekInput }, ...translations.regional.weekdays.full.map( (weekdayName, i) => Option( diff --git a/src/Model/chatModel.ts b/src/Model/chatModel.ts index 731609cf..5a60e584 100644 --- a/src/Model/chatModel.ts +++ b/src/Model/chatModel.ts @@ -47,6 +47,7 @@ export class ChatModel { setPrimaryChannel = (primaryChannel: string): void => { this.info.primaryChannel = primaryChannel; this.storeInfo(); + this.chatListModel.updateIndices(); }; setSecondaryChannels = (secondaryChannels: string[]): void => { diff --git a/src/View/ChatPages/settingsPage.tsx b/src/View/ChatPages/settingsPage.tsx index 48218424..849f2a0f 100644 --- a/src/View/ChatPages/settingsPage.tsx +++ b/src/View/ChatPages/settingsPage.tsx @@ -9,6 +9,30 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
{translations.chatPage.settings.settingsHeadline}
+
+ +
+ +
+
); } diff --git a/src/View/chatPage.css b/src/View/chatPage.css index 24c4ddf5..69b5f0d2 100644 --- a/src/View/chatPage.css +++ b/src/View/chatPage.css @@ -53,6 +53,8 @@ #chat-page #main .content { overflow: auto; + + padding: var(--content-padding); } #chat-page #ribbon, diff --git a/src/View/homePage.tsx b/src/View/homePage.tsx index 8c99421b..2d28d69b 100644 --- a/src/View/homePage.tsx +++ b/src/View/homePage.tsx @@ -106,8 +106,9 @@ export function HomePage( class="width-50" on:click={settingsViewModel.setName} toggle:disabled={settingsViewModel.cannotSetName} + aria-label={translations.homePage.setNameButtonAudioLabel} > - {translations.homePage.setNameButton} + {translations.general.setButton} check diff --git a/src/View/translations.ts b/src/View/translations.ts index 2ad25e87..e19b3132 100644 --- a/src/View/translations.ts +++ b/src/View/translations.ts @@ -2,6 +2,8 @@ const englishTranslations = { general: { closeButtonAudioLabel: "close", deleteItemButtonAudioLabel: "delete item", + + setButton: "Set", }, regional: { @@ -43,7 +45,7 @@ const englishTranslations = { yourNameLabel: "Your name", yourNamePlaceholder: "Jane Doe", - setNameButton: "Set", + setNameButtonAudioLabel: "set name", firstDayOfWeekLabel: "First day of week", @@ -82,6 +84,9 @@ const englishTranslations = { settings: { settingsHeadline: "Settings", + + primaryChannelLabel: "Primary channel", + setPrimaryChannelButtonAudioLabel: "set primary channel", } }, }; diff --git a/src/ViewModel/chatListViewModel.tsx b/src/ViewModel/chatListViewModel.tsx index d41a4411..4d8a02ae 100644 --- a/src/ViewModel/chatListViewModel.tsx +++ b/src/ViewModel/chatListViewModel.tsx @@ -32,6 +32,12 @@ export default class ChatListViewModel { return this.sortedPrimaryChannels.indexOf(chat.primaryChannel.value); } + updateIndices = (): void => { + for (const chatViewModel of this.chatViewModels.value) { + chatViewModel.updateIndex(); + } + } + // methods createChat = (): void => { const chatModel: ChatModel = this.chatListModel.createChat( diff --git a/src/ViewModel/chatViewModel.tsx b/src/ViewModel/chatViewModel.tsx index 0081553b..3c99aef5 100644 --- a/src/ViewModel/chatViewModel.tsx +++ b/src/ViewModel/chatViewModel.tsx @@ -43,6 +43,12 @@ export default class ChatViewModel { this.chatListViewModel.closeChat(); }; + setPrimaryChannel = (): void => { + this.chatModel.setPrimaryChannel(this.primaryChannelInput.value); + this.primaryChannel.value = this.chatModel.info.primaryChannel; + this.chatListViewModel.updateIndices(); + } + // restore restorePageSelection = (): void => { const path: string[] = storageKeys.chatLastUsedPage(this.chatModel.id);