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

improve ribbon

Browse Source
This commit is contained in:
marlon-erler
2024-07-20 16:28:00 +02:00
parent c1b7dc46dd
commit e27c360395
7 changed files with 205 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+12 -3
View File
@@ -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;
dist/index.js
Vendored
+67 -12
View File
@@ -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
src/View/Components/chatViewToggleButton.tsx
+30
View File
@@ -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 (
<button
class="ghost"
aria-label={label}
toggle:selected={isSelected}
on:click={select}
>
<span class="icon">{icon}</span>
</button>
);
}
src/View/chatPage.css
+14 -4
View File
@@ -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;
src/View/chatPage.tsx
+45 -2
View File
@@ -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) {
<article id="chat-page">
<div>
<div id="ribbon">
<span>
<button
class="ghost"
aria-label={translations.chatPage.closeChatAudioLabe}
on:click={chatViewModel.close}
>
<span class="icon">close</span>
</button>
<span></span>
</span>
<span>
{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
)}
</span>
</div>
<div id="toolbar"></div>
<div id="main"></div>
src/View/translations.ts
+15 -12
View File
@@ -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 } = {
src/ViewModel/chatViewModel.tsx
+16 -2
View File
@@ -12,6 +12,10 @@ export default class ChatViewModel {
primaryChannel: React.State<string> = new React.State("");
primaryChannelInput: React.State<string> = new React.State("");
selectedPage: React.State<ChatPageType> = new React.State<ChatPageType>(
ChatPageType.Messages
);
// guards
cannotSetPrimaryChannel: React.State<boolean> = 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,
}