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

make side pane toggle placeholder dynamically

Browse Source
This commit is contained in:
marlon-erler
2024-07-26 16:56:29 +02:00
parent 51bc40d8b1
commit 1a1649bbb9
3 changed files with 41 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.js
Vendored
+17 -6
View File
@@ -2790,7 +2790,7 @@
}
}
);
const sidePaneContent = createProxyState(
const sidePaneContentWrapper = createProxyState(
[
calendarPageViewModel.selectedYear,
calendarPageViewModel.selectedMonth,
@@ -2800,14 +2800,25 @@
const listState = calendarPageViewModel.getEventsForDate();
if (listState == void 0) {
return /* @__PURE__ */ createElement("div", null);
} else if (listState.value.size == 0) {
return /* @__PURE__ */ createElement("div", { class: "width-100 height-100 flex-column justify-center align-center" }, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.chatPage.calendar.noEvents));
} else {
const sidePaneContent = createProxyState([listState], () => {
if (listState.value.size == 0) {
return /* @__PURE__ */ createElement("div", { class: "width-100 height-100 flex-column justify-center align-center" }, /* @__PURE__ */ createElement("span", { class: "secondary slide-up" }, translations.chatPage.calendar.noEvents));
} else {
return /* @__PURE__ */ createElement(
"div",
{
class: "flex-column gap slide-up padding-bottom",
"children:append": [listState, TaskViewModelToEntry]
}
);
}
});
return /* @__PURE__ */ createElement(
"div",
{
class: "flex-column gap slide-up",
"children:append": [listState, TaskViewModelToEntry]
class: "width-100 height-100",
"children:set": sidePaneContent
}
);
}
@@ -2881,7 +2892,7 @@
class: "pane-wrapper side background",
"set:color": calendarPageViewModel.chatViewModel.displayedColor
},
/* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "content", "children:set": sidePaneContent }))
/* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "content", "children:set": sidePaneContentWrapper }))
), /* @__PURE__ */ createElement("div", { "children:set": taskSettingsModal }));
}
src/View/ChatPages/calendarPage.css
+1
View File
@@ -60,6 +60,7 @@
width: 3.1rem;
}
@media (max-width: 1024px) {
#chat-page > div > #main > #calendar-page {
flex-direction: column;
src/View/ChatPages/calendarPage.tsx
+23 -12
View File
@@ -33,7 +33,7 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
}
);
const sidePaneContent = React.createProxyState(
const sidePaneContentWrapper = React.createProxyState(
[
calendarPageViewModel.selectedYear,
calendarPageViewModel.selectedMonth,
@@ -44,19 +44,30 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
if (listState == undefined) {
return <div></div>;
} else if (listState.value.size == 0) {
return (
<div class="width-100 height-100 flex-column justify-center align-center">
<span class="secondary">
{translations.chatPage.calendar.noEvents}
</span>
</div>
);
} else {
const sidePaneContent = React.createProxyState([listState], () => {
if (listState.value.size == 0) {
return (
<div class="width-100 height-100 flex-column justify-center align-center">
<span class="secondary slide-up">
{translations.chatPage.calendar.noEvents}
</span>
</div>
);
} else {
return (
<div
class="flex-column gap slide-up padding-bottom"
children:append={[listState, TaskViewModelToEntry]}
></div>
);
}
});
return (
<div
class="flex-column gap slide-up"
children:append={[listState, TaskViewModelToEntry]}
class="width-100 height-100"
children:set={sidePaneContent}
></div>
);
}
@@ -156,7 +167,7 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
set:color={calendarPageViewModel.chatViewModel.displayedColor}
>
<div class="pane">
<div class="content" children:set={sidePaneContent}></div>
<div class="content" children:set={sidePaneContentWrapper}></div>
</div>
</div>