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

start object view layout

Browse Source
This commit is contained in:
marlon-erler
2024-07-11 17:07:06 +02:00
parent 4cc9201bc5
commit fec04b6d2d
8 changed files with 176 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+5 -5
View File
@@ -14,10 +14,10 @@
display: flex;
flex-direction: column;
}
.chat-tool-view {
.chat-object-view {
display: none;
}
[showingchattools] :is(.thread-view, .chat-tool-view) {
[showingchattools] :is(.thread-view, .chat-object-view) {
overflow: scroll;
position: absolute;
padding: 0px;
@@ -25,7 +25,7 @@
[showingchattools] header {
border-bottom: 1px solid var(--border);
}
[showingchattools] .chat-tool-view {
[showingchattools] .chat-object-view {
display: flex;
top: var(--header-height);
bottom: calc(var(--thread-view-height-with-tools) + var(--footer-top-line));
@@ -47,11 +47,11 @@
}
}
@media (min-width: 640px) {
[showingchattools] :is(.thread-view, .chat-tool-view) {
[showingchattools] :is(.thread-view, .chat-object-view) {
top: var(--header-height);
bottom: var(--footer-top-line);
}
[showingchattools] .chat-tool-view {
[showingchattools] .chat-object-view {
left: 0px;
right: var(--thread-view-width-with-tools);
border-bottom: none;
dist/index.js
Vendored
+121 -102
View File
@@ -1006,7 +1006,9 @@
copyMessage: "Copy message",
deleteMessage: "Delete message",
// objects
toggleChatTools: "toggle chat tools",
showObjects: "show objects",
createObject: "create object",
untitledObject: "Untitled Object",
objectTitle: "Object title",
objectTitlePlaceholder: "My object",
objectVersion: "Object version",
@@ -1113,6 +1115,122 @@
var language = navigator.language.substring(0, 2);
var translation = allTranslations[language] ?? allTranslations.en;
// src/Views/Objects/objectDetailModal.tsx
function ObjectDetailModal(chat, messageObject, isPresented) {
const editingTitle = new State(messageObject.title);
const selectedMessageObjectId = new State(
chat.getMostRecentContentId(messageObject)
);
const selectedMessageObject = createProxyState(
[selectedMessageObjectId],
() => chat.getObjectContentFromId(messageObject, selectedMessageObjectId.value)
);
const didEditContent = new State(false);
const editingNoteContent = createProxyState(
[selectedMessageObject],
() => selectedMessageObject.value.noteContent ?? ""
);
bulkSubscribe(
[editingNoteContent],
() => didEditContent.value = true
);
function handleKeyDown(e) {
if (!e.metaKey && !e.ctrlKey) return;
switch (e.key) {
case "s":
e.preventDefault();
saveAndClose();
break;
}
}
function closeModal() {
isPresented.value = false;
}
function saveAndClose() {
messageObject.title = editingTitle.value;
if (didEditContent.value == true) {
chat.addObjectContent(messageObject, {
isoDateVersionCreated: (/* @__PURE__ */ new Date()).toISOString(),
id: UUID(),
noteContent: editingNoteContent.value
});
}
chat.addObjectAndSend(messageObject);
closeModal();
}
function deleteAndClose() {
chat.deleteObject(messageObject);
closeModal();
}
return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented, "on:keydown": handleKeyDown }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, messageObject.title), /* @__PURE__ */ createElement("span", { class: "secondary" }, messageObject.id), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectTitle), /* @__PURE__ */ createElement(
"input",
{
"bind:value": editingTitle,
placeholder: translation.objectTitlePlaceholder
}
))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "history"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectVersion), /* @__PURE__ */ createElement("select", { "bind:value": selectedMessageObjectId }, ...chat.getSortedContents(messageObject).map((content) => /* @__PURE__ */ createElement("option", { value: content.id }, new Date(
content.isoDateVersionCreated
).toLocaleString()))), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "sticky_note_2"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.noteContent), /* @__PURE__ */ createElement(
"textarea",
{
rows: "5",
"bind:value": editingNoteContent,
placeholder: translation.noteContentPlaceholder
}
))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("button", { class: "danger width-input", "on:click": deleteAndClose }, translation.deleteObject, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("div", { class: "flex-row" }, /* @__PURE__ */ createElement("button", { class: "flex-1 width-100 danger", "on:click": closeModal }, translation.discard), /* @__PURE__ */ createElement("button", { class: "flex-1 width-100 primary", "on:click": saveAndClose }, translation.save, /* @__PURE__ */ createElement("span", { class: "icon" }, "save")))));
}
// src/Views/Objects/objectListEntry.tsx
function ObjectListEntry(messageObject, onclick) {
return /* @__PURE__ */ createElement("button", { class: "tile", "on:click": onclick }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, messageObject.title), /* @__PURE__ */ createElement("span", { class: "secondary" }, messageObject.id)));
}
// src/Views/Objects/chatObjectView.tsx
function ChatObjectView(chat) {
const isShowingObjectModal = new State(false);
const selectedObject = new State(void 0);
const objectModal = createProxyState(
[chat.objects, selectedObject],
() => {
if (selectedObject.value == void 0) return /* @__PURE__ */ createElement("div", null);
return ObjectDetailModal(
chat,
selectedObject.value,
isShowingObjectModal
);
}
);
function createObject() {
const newObject = chat.createObjectFromTitle(translation.untitledObject);
chat.addObjectAndSend(newObject);
selectedObject.value = newObject;
isShowingObjectModal.value = true;
}
const objectConverter = (messageObject) => {
function select() {
selectedObject.value = messageObject;
isShowingObjectModal.value = true;
}
return ObjectListEntry(messageObject, select);
};
return /* @__PURE__ */ createElement("div", { class: "chat-object-view flex-column" }, /* @__PURE__ */ createElement("div", { class: "flex-row align-center scroll-h border-bottom" }, /* @__PURE__ */ createElement(
"button",
{
class: "primary",
"on:click": createObject,
"aria-label": translation.createObject
},
/* @__PURE__ */ createElement("span", { class: "icon" }, "add")
)), /* @__PURE__ */ createElement(
"div",
{
class: "grid gap padding",
style: "grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))",
"children:prepend": [chat.objects, objectConverter]
}
), /* @__PURE__ */ createElement("div", { "children:set": objectModal }));
}
// src/Views/Chat/chatOptionModal.tsx
function ChatOptionModal(chat, isPresented) {
function closeModal() {
@@ -1221,105 +1339,6 @@
), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": deleteChat }, translation.removeChat, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete_forever")))), /* @__PURE__ */ createElement("button", { "on:click": closeModal }, translation.close, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
}
// src/Views/Objects/objectDetailModal.tsx
function ObjectDetailModal(chat, messageObject, isPresented) {
const editingTitle = new State(messageObject.title);
const selectedMessageObjectId = new State(
chat.getMostRecentContentId(messageObject)
);
const selectedMessageObject = createProxyState(
[selectedMessageObjectId],
() => chat.getObjectContentFromId(messageObject, selectedMessageObjectId.value)
);
const didEditContent = new State(false);
const editingNoteContent = createProxyState(
[selectedMessageObject],
() => selectedMessageObject.value.noteContent ?? ""
);
bulkSubscribe(
[editingNoteContent],
() => didEditContent.value = true
);
function handleKeyDown(e) {
if (!e.metaKey && !e.ctrlKey) return;
switch (e.key) {
case "s":
e.preventDefault();
saveAndClose();
break;
}
}
function closeModal() {
isPresented.value = false;
}
function saveAndClose() {
messageObject.title = editingTitle.value;
if (didEditContent.value == true) {
chat.addObjectContent(messageObject, {
isoDateVersionCreated: (/* @__PURE__ */ new Date()).toISOString(),
id: UUID(),
noteContent: editingNoteContent.value
});
}
chat.addObjectAndSend(messageObject);
closeModal();
}
function deleteAndClose() {
chat.deleteObject(messageObject);
closeModal();
}
return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented, "on:keydown": handleKeyDown }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, messageObject.title), /* @__PURE__ */ createElement("span", { class: "secondary" }, messageObject.id), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectTitle), /* @__PURE__ */ createElement(
"input",
{
"bind:value": editingTitle,
placeholder: translation.objectTitlePlaceholder
}
))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "history"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectVersion), /* @__PURE__ */ createElement("select", { "bind:value": selectedMessageObjectId }, ...chat.getSortedContents(messageObject).map((content) => /* @__PURE__ */ createElement("option", { value: content.id }, new Date(
content.isoDateVersionCreated
).toLocaleString()))), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "sticky_note_2"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.noteContent), /* @__PURE__ */ createElement(
"textarea",
{
rows: "5",
"bind:value": editingNoteContent,
placeholder: translation.noteContentPlaceholder
}
))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("button", { class: "danger width-input", "on:click": deleteAndClose }, translation.deleteObject, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("div", { class: "flex-row" }, /* @__PURE__ */ createElement("button", { class: "flex-1 width-100 danger", "on:click": closeModal }, translation.discard), /* @__PURE__ */ createElement("button", { class: "flex-1 width-100 primary", "on:click": saveAndClose }, translation.save, /* @__PURE__ */ createElement("span", { class: "icon" }, "save")))));
}
// src/Views/Objects/objectListEntry.tsx
function ObjectListEntry(messageObject, onclick) {
return /* @__PURE__ */ createElement("button", { class: "tile", "on:click": onclick }, /* @__PURE__ */ createElement("b", null, messageObject.title));
}
// src/Views/Objects/objectListView.tsx
function ChatToolView(chat) {
const isShowingObjectModal = new State(false);
const selectedObject = new State(void 0);
const objectModal = createProxyState(
[chat.objects, selectedObject],
() => {
if (selectedObject.value == void 0) return /* @__PURE__ */ createElement("div", null);
return ObjectDetailModal(
chat,
selectedObject.value,
isShowingObjectModal
);
}
);
function createItem() {
const newObject = chat.createObjectFromTitle("New item");
chat.addObjectAndSend(newObject);
}
const itemConverter = (messageObject) => {
function select() {
selectedObject.value = messageObject;
isShowingObjectModal.value = true;
}
return ObjectListEntry(messageObject, select);
};
return /* @__PURE__ */ createElement("div", { class: "chat-tool-view" }, /* @__PURE__ */ createElement("button", { "on:click": createItem }, "+"), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { "children:prepend": [chat.objects, itemConverter] }), /* @__PURE__ */ createElement("div", { "children:set": objectModal }));
}
// src/Views/Chat/messageComposer.tsx
function MessageComposer(chat) {
return /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, " ", /* @__PURE__ */ createElement(
@@ -1435,7 +1454,7 @@
/* @__PURE__ */ createElement("header", { class: "padding-0" }, /* @__PURE__ */ createElement("span", { class: "flex-row align-center" }, /* @__PURE__ */ createElement("button", { "aria-label": translation.back, "on:click": closeChatView }, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back")), /* @__PURE__ */ createElement("span", { "subscribe:innerText": chat.primaryChannel })), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
"button",
{
"aria-label": translation.toggleChatTools,
"aria-label": translation.showObjects,
"on:click": toggleChatTools,
"toggle:selected": isShowingChatTools
},
@@ -1448,7 +1467,7 @@
},
/* @__PURE__ */ createElement("span", { class: "icon" }, "tune")
))),
ChatToolView(chat),
ChatObjectView(chat),
ThreadView(chat),
/* @__PURE__ */ createElement("footer", null, MessageComposer(chat)),
ChatOptionModal(chat, isShowingOptions)
dist/styles.css
Vendored
+13
View File
@@ -323,6 +323,10 @@ hr {
border-bottom: 1px solid var(--border);
}
.border-bottom {
border-bottom: 1px solid var(--border) !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not(
label.tile *
),
@@ -960,6 +964,15 @@ main {
overflow-x: scroll;
}
.scroll-h {
overflow-x: scroll !important;
}
.scroll-v {
overflow-y: scroll !important;
}
.ellipsis {
text-overflow: ellipsis;
}
src/Tabs/messageTab.tsx
+3 -3
View File
@@ -2,8 +2,8 @@ import * as React from "bloatless-react";
import { closeChatView, isShowingChatTools, selectedChat, toggleChatTools } from "../Model/model";
import { ChatObjectView } from "../Views/Objects/chatObjectView";
import { ChatOptionModal } from "../Views/Chat/chatOptionModal";
import { ChatToolView } from "../Views/Objects/objectListView";
import { MessageComposer } from "../Views/Chat/messageComposer";
import { ThreadView } from "../Views/Chat/threadView";
import { translation } from "../translations";
@@ -35,7 +35,7 @@ export function MessageTab() {
</span>
<span>
<button
aria-label={translation.toggleChatTools}
aria-label={translation.showObjects}
on:click={toggleChatTools}
toggle:selected={isShowingChatTools}
>
@@ -50,7 +50,7 @@ export function MessageTab() {
</span>
</header>,
ChatToolView(chat),
ChatObjectView(chat),
ThreadView(chat),
<footer>{MessageComposer(chat)}</footer>,
src/Views/Objects/objectListView.tsx → src/Views/Objects/chatObjectView.tsx
+22 -8
View File
@@ -6,7 +6,7 @@ import { ObjectDetailModal } from "./objectDetailModal";
import { ObjectListEntry } from "./objectListEntry";
import { translation } from "../../translations";
export function ChatToolView(chat: Chat) {
export function ChatObjectView(chat: Chat) {
const isShowingObjectModal = new React.State(false);
const selectedObject = new React.State<MessageObject | undefined>(undefined);
const objectModal = React.createProxyState(
@@ -22,12 +22,14 @@ export function ChatToolView(chat: Chat) {
}
);
function createItem() {
const newObject = chat.createObjectFromTitle("New item");
function createObject() {
const newObject = chat.createObjectFromTitle(translation.untitledObject);
chat.addObjectAndSend(newObject);
selectedObject.value = newObject;
isShowingObjectModal.value = true;
}
const itemConverter: React.StateItemConverter<MessageObject> = (
const objectConverter: React.StateItemConverter<MessageObject> = (
messageObject
) => {
function select() {
@@ -39,10 +41,22 @@ export function ChatToolView(chat: Chat) {
};
return (
<div class="chat-tool-view">
<button on:click={createItem}>+</button>
<hr></hr>
<div children:prepend={[chat.objects, itemConverter]}></div>
<div class="chat-object-view flex-column">
<div class="flex-row align-center scroll-h border-bottom">
<button
class="primary"
on:click={createObject}
aria-label={translation.createObject}
>
<span class="icon">add</span>
</button>
</div>
<div
class="grid gap padding"
style="grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))"
children:prepend={[chat.objects, objectConverter]}
></div>
<div children:set={objectModal}></div>
</div>
src/Views/Objects/objectListEntry.tsx
+4 -1
View File
@@ -8,7 +8,10 @@ export function ObjectListEntry(
) {
return (
<button class="tile" on:click={onclick}>
<b>{messageObject.title}</b>
<div>
<b>{messageObject.title}</b>
<span class="secondary">{messageObject.id}</span>
</div>
</button>
);
}
src/styles.css
+5 -5
View File
@@ -18,11 +18,11 @@
flex-direction: column;
}
.chat-tool-view {
.chat-object-view {
display: none;
}
[showingchattools] :is(.thread-view, .chat-tool-view) {
[showingchattools] :is(.thread-view, .chat-object-view) {
overflow: scroll;
position: absolute;
@@ -33,7 +33,7 @@
border-bottom: 1px solid var(--border);
}
[showingchattools] .chat-tool-view {
[showingchattools] .chat-object-view {
display: flex;
top: var(--header-height);
@@ -64,12 +64,12 @@
}
@media (min-width: 640px) {
[showingchattools] :is(.thread-view, .chat-tool-view) {
[showingchattools] :is(.thread-view, .chat-object-view) {
top: var(--header-height);
bottom: var(--footer-top-line);
}
[showingchattools] .chat-tool-view {
[showingchattools] .chat-object-view {
left: 0px;
right: var(--thread-view-width-with-tools);
src/translations.ts
+3 -1
View File
@@ -67,7 +67,9 @@ const englishTranslations = {
deleteMessage: "Delete message",
// objects
toggleChatTools: "toggle chat tools",
showObjects: "show objects",
createObject: "create object",
untitledObject: "Untitled Object",
objectTitle: "Object title",
objectTitlePlaceholder: "My object",