diff --git a/dist/index.css b/dist/index.css index bf2aa6df..e35e6b5b 100644 --- a/dist/index.css +++ b/dist/index.css @@ -107,8 +107,9 @@ main { padding: 0px; overflow: hidden; display: grid; - grid-template-columns: var(--control-height) 1fr; - grid-template-rows: var(--control-height) 1fr; + --ribbon-size: calc(var(--control-height) + 2 * var(--gap-between-tiles)); + grid-template-columns: var(--ribbon-size) 1fr; + grid-template-rows: var(--ribbon-size) 1fr; border-top: 1px solid var(--border); } #chat-page #ribbon { @@ -140,12 +141,20 @@ main { flex-direction: column; padding: var(--gap-between-tiles); } +#chat-page #ribbon > span, +#chat-page #toolbar { + padding: var(--gap-between-tiles); + gap: var(--gap-between-tiles); +} #chat-page #ribbon { justify-content: space-between; + justify-content: space-between; } -#chat-page #ribbon button { +#chat-page #ribbon button, +#chat-page #toolbar button { padding: 0px; width: 100%; + max-width: var(--control-height); height: var(--control-height); align-items: center; justify-content: center; diff --git a/dist/index.js b/dist/index.js index d14b955a..a9d49812 100644 --- a/dist/index.js +++ b/dist/index.js @@ -516,6 +516,9 @@ // state primaryChannel = new State(""); primaryChannelInput = new State(""); + selectedPage = new State( + 1 /* Messages */ + ); // guards cannotSetPrimaryChannel = createProxyState( [this.primaryChannel, this.primaryChannelInput], @@ -585,6 +588,27 @@ } }; + // src/View/Components/chatViewToggleButton.tsx + function ChatViewToggleButton(label, icon, page, chatViewModel) { + function select() { + chatViewModel.selectedPage.value = page; + } + const isSelected = createProxyState( + [chatViewModel.selectedPage], + () => chatViewModel.selectedPage.value == page + ); + return /* @__PURE__ */ createElement( + "button", + { + class: "ghost", + "aria-label": label, + "toggle:selected": isSelected, + "on:click": select + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, icon) + ); + } + // src/View/translations.ts var englishTranslations = { general: { @@ -602,15 +626,7 @@ "Friday", "Saturday" ], - abbreviated: [ - "Sun", - "Mon", - "Tue", - "Wed", - "Thu", - "Fri", - "Sat" - ] + abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] } }, homePage: { @@ -646,7 +662,15 @@ }, chatPage: { closeChatAudioLabe: "close chat", - chatSettingsAudioLabel: "chat settings" + chatSettingsAudioLabel: "chat settings", + pages: { + settings: "Settings", + messages: "Messages", + allObjects: "All objects", + kanban: "Kanban", + calendar: "Calendar", + progress: "Progress" + } } }; var allTranslations = { @@ -657,14 +681,45 @@ // src/View/chatPage.tsx function ChatPage(chatViewModel) { - return /* @__PURE__ */ createElement("article", { id: "chat-page" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement( + return /* @__PURE__ */ createElement("article", { id: "chat-page" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement( "button", { + class: "ghost", "aria-label": translations.chatPage.closeChatAudioLabe, "on:click": chatViewModel.close }, /* @__PURE__ */ createElement("span", { class: "icon" }, "close") - ), /* @__PURE__ */ createElement("span", null)), /* @__PURE__ */ createElement("div", { id: "toolbar" }), /* @__PURE__ */ createElement("div", { id: "main" }))); + )), /* @__PURE__ */ createElement("span", null, ChatViewToggleButton( + translations.chatPage.pages.calendar, + "calendar_month", + 4 /* Calendar */, + chatViewModel + ), ChatViewToggleButton( + translations.chatPage.pages.progress, + "window", + 5 /* Progress */, + chatViewModel + ), ChatViewToggleButton( + translations.chatPage.pages.kanban, + "view_kanban", + 3 /* Kanban */, + chatViewModel + ), ChatViewToggleButton( + translations.chatPage.pages.allObjects, + "deployed_code", + 2 /* AllObjects */, + chatViewModel + ), ChatViewToggleButton( + translations.chatPage.pages.messages, + "forum", + 1 /* Messages */, + chatViewModel + ), ChatViewToggleButton( + translations.chatPage.pages.settings, + "settings", + 0 /* Settings */, + chatViewModel + ))), /* @__PURE__ */ createElement("div", { id: "toolbar" }), /* @__PURE__ */ createElement("div", { id: "main" }))); } // src/View/chatPageWrapper.tsx diff --git a/src/View/Components/chatViewToggleButton.tsx b/src/View/Components/chatViewToggleButton.tsx new file mode 100644 index 00000000..964f8026 --- /dev/null +++ b/src/View/Components/chatViewToggleButton.tsx @@ -0,0 +1,30 @@ +import * as React from "bloatless-react"; + +import ChatViewModel, { ChatPageType } from "../../ViewModel/chatViewModel"; + +export function ChatViewToggleButton( + label: string, + icon: string, + page: ChatPageType, + chatViewModel: ChatViewModel +) { + function select() { + chatViewModel.selectedPage.value = page; + } + + const isSelected = React.createProxyState( + [chatViewModel.selectedPage], + () => chatViewModel.selectedPage.value == page + ); + + return ( + + ); +} diff --git a/src/View/chatPage.css b/src/View/chatPage.css index ae710f7a..b2959abd 100644 --- a/src/View/chatPage.css +++ b/src/View/chatPage.css @@ -24,8 +24,9 @@ overflow: hidden; display: grid; - grid-template-columns: var(--control-height) 1fr; - grid-template-rows: var(--control-height) 1fr; + --ribbon-size: calc(var(--control-height) + 2 * var(--gap-between-tiles)); + grid-template-columns: var(--ribbon-size) 1fr; + grid-template-rows: var(--ribbon-size) 1fr; border-top: 1px solid var(--border); } @@ -67,15 +68,24 @@ padding: var(--gap-between-tiles); } -/* ribbon */ +/* ribbon, toolbar */ +#chat-page #ribbon > span, +#chat-page #toolbar { + padding: var(--gap-between-tiles); + gap: var(--gap-between-tiles); +} + #chat-page #ribbon { justify-content: space-between; + justify-content: space-between; } -#chat-page #ribbon button { +#chat-page #ribbon button, +#chat-page #toolbar button { padding: 0px; width: 100%; + max-width: var(--control-height); height: var(--control-height); align-items: center; diff --git a/src/View/chatPage.tsx b/src/View/chatPage.tsx index 26cabcef..1cd12277 100644 --- a/src/View/chatPage.tsx +++ b/src/View/chatPage.tsx @@ -2,7 +2,9 @@ import "./homePage.css"; import * as React from "bloatless-react"; -import ChatViewModel from "../ViewModel/chatViewModel"; +import ChatViewModel, { ChatPageType } from "../ViewModel/chatViewModel"; + +import { ChatViewToggleButton } from "./Components/chatViewToggleButton"; import { translations } from "./translations"; export function ChatPage(chatViewModel: ChatViewModel) { @@ -10,13 +12,54 @@ export function ChatPage(chatViewModel: ChatViewModel) {
- - + + + + + + {ChatViewToggleButton( + translations.chatPage.pages.calendar, + "calendar_month", + ChatPageType.Calendar, + chatViewModel + )} + {ChatViewToggleButton( + translations.chatPage.pages.progress, + "window", + ChatPageType.Progress, + chatViewModel + )} + {ChatViewToggleButton( + translations.chatPage.pages.kanban, + "view_kanban", + ChatPageType.Kanban, + chatViewModel + )} + {ChatViewToggleButton( + translations.chatPage.pages.allObjects, + "deployed_code", + ChatPageType.AllObjects, + chatViewModel + )} + {ChatViewToggleButton( + translations.chatPage.pages.messages, + "forum", + ChatPageType.Messages, + chatViewModel + )} + {ChatViewToggleButton( + translations.chatPage.pages.settings, + "settings", + ChatPageType.Settings, + chatViewModel + )} +
diff --git a/src/View/translations.ts b/src/View/translations.ts index 8dc33edb..777f9228 100644 --- a/src/View/translations.ts +++ b/src/View/translations.ts @@ -15,15 +15,7 @@ const englishTranslations = { "Friday", "Saturday", ], - abbreviated: [ - "Sun", - "Mon", - "Tue", - "Wed", - "Thu", - "Fri", - "Sat", - ], + abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], }, }, @@ -41,8 +33,10 @@ const englishTranslations = { manageConnectionsAudioLabel: "manage connections", mailboxHeadline: "Server Mailbox", - mailboxDisabled: "Mailbox disabled. You will miss out on messages sent while you're away", - mailboxEnabled: "Mailbox enabled. If you disconnect, the server will keep your messages temporarily", + mailboxDisabled: + "Mailbox disabled. You will miss out on messages sent while you're away", + mailboxEnabled: + "Mailbox enabled. If you disconnect, the server will keep your messages temporarily", outboxHeadline: "Outbox", outboxAllItemsSent: "All items sent", @@ -76,7 +70,16 @@ const englishTranslations = { chatPage: { closeChatAudioLabe: "close chat", chatSettingsAudioLabel: "chat settings", - } + + pages: { + settings: "Settings", + messages: "Messages", + allObjects: "All objects", + kanban: "Kanban", + calendar: "Calendar", + progress: "Progress", + }, + }, }; const allTranslations: { [language: string]: typeof englishTranslations } = { diff --git a/src/ViewModel/chatViewModel.tsx b/src/ViewModel/chatViewModel.tsx index c6884f43..fa74e59c 100644 --- a/src/ViewModel/chatViewModel.tsx +++ b/src/ViewModel/chatViewModel.tsx @@ -12,6 +12,10 @@ export default class ChatViewModel { primaryChannel: React.State = new React.State(""); primaryChannelInput: React.State = new React.State(""); + selectedPage: React.State = new React.State( + ChatPageType.Messages + ); + // guards cannotSetPrimaryChannel: React.State = React.createProxyState( [this.primaryChannel, this.primaryChannelInput], @@ -23,11 +27,11 @@ export default class ChatViewModel { // methods open = () => { this.chatListViewModel.openChat(this); - } + }; close = () => { this.chatListViewModel.closeChat(); - } + }; // init constructor(chatListViewModel: ChatListViewModel, chatModel: ChatModel) { @@ -38,3 +42,13 @@ export default class ChatViewModel { this.primaryChannelInput.value = chatModel.info.primaryChannel; } } + +// types +export enum ChatPageType { + Settings, + Messages, + AllObjects, + Kanban, + Calendar, + Progress, +}