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

implement column layout for taskSettingsModal on desktop

Browse Source
This commit is contained in:
marlon-erler
2026-09-21 20:37:55 +02:00
parent dbe859f3d1
commit 8fa6318aa1
6 changed files with 288 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+15 -1
View File
@@ -59,7 +59,7 @@ body[theme=dark] [color]:not([color=standard]).tile {
[color]:not([color=standard]).background { [color]:not([color=standard]).background {
--luma: var(--background-luma); --luma: var(--background-luma);
--sat: 100%; --sat: 100%;
background: hsl(var(--hue), var(--sat), var(--luma), 40%); background: hsl(var(--hue), var(--sat), var(--luma), 20%);
} }
body[theme=dark] [color]:not([color=standard]).background { body[theme=dark] [color]:not([color=standard]).background {
--luma: var(--background-luma-dark); --luma: var(--background-luma-dark);
@@ -469,6 +469,20 @@ body[showing-chat] #chat-page-wrapper {
height: 100%; height: 100%;
flex: 1; flex: 1;
} }
.modal.task-settings > div {
max-width: 52rem;
}
@media (min-width: 640px) {
.modal.task-settings .column-wrapper {
display: flex;
flex-direction: row;
gap: var(--content-padding);
}
.modal.task-settings .column-wrapper > .flex-column {
width: 100%;
flex: 1;
}
}
/* src/View/ChatPages/taskPage.css */ /* src/View/ChatPages/taskPage.css */
#chat-page > div > #main > #task-page > .pane-wrapper > .pane > .main-content { #chat-page > div > #main > #task-page > .pane-wrapper > .pane > .main-content {
dist/index.js
Vendored
+12 -12
View File
@@ -5379,16 +5379,7 @@
const isSelected = entry[0] == taskViewModel.task.boardId; const isSelected = entry[0] == taskViewModel.task.boardId;
return Option(entry[1], entry[0], isSelected); return Option(entry[1], entry[0], isSelected);
}; };
return /* @__PURE__ */ createElement("div", { class: "modal", open: true }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.chatPage.task.taskSettingsHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "history"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.general.fileVersionLabel), /* @__PURE__ */ createElement( return /* @__PURE__ */ createElement("div", { class: "modal task-settings", open: true }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.chatPage.task.taskSettingsHeadline), /* @__PURE__ */ createElement("div", { class: "column-wrapper" }, /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskNameLabel), /* @__PURE__ */ createElement(
"select",
{
"bind:value": taskViewModel.selectedVersionId,
"children:append": [
taskViewModel.versionIds,
VersionIdToOption
]
}
), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskNameLabel), /* @__PURE__ */ createElement(
"input", "input",
{ {
"bind:value": taskViewModel.name, "bind:value": taskViewModel.name,
@@ -5409,7 +5400,7 @@
rows: "10", rows: "10",
"bind:value": taskViewModel.description "bind:value": taskViewModel.description
} }
))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "category"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskCategoryLabel), /* @__PURE__ */ createElement( )))), /* @__PURE__ */ createElement("hr", { class: "mobile-only" }), /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "category"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskCategoryLabel), /* @__PURE__ */ createElement(
"input", "input",
{ {
"bind:value": taskViewModel.category, "bind:value": taskViewModel.category,
@@ -5459,7 +5450,16 @@
type: "time", type: "time",
"bind:value": taskViewModel.time "bind:value": taskViewModel.time
} }
))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "width-input" }, DangerousActionButton( ))))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "history"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.general.fileVersionLabel), /* @__PURE__ */ createElement(
"select",
{
"bind:value": taskViewModel.selectedVersionId,
"children:append": [
taskViewModel.versionIds,
VersionIdToOption
]
}
), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "width-input" }, DangerousActionButton(
coreViewModel2, coreViewModel2,
coreViewModel2.translations.chatPage.task.deleteTaskButton, coreViewModel2.translations.chatPage.task.deleteTaskButton,
"delete_forever", "delete_forever",
src/.colors.css.swp → src/View/.chatPage.css.swp
BIN
View File
Binary file not shown.
src/View/Modals/.taskSettingsModal.tsx.swp
BIN
View File
Binary file not shown.
src/View/Modals/taskSettingsModal.tsx
+210 -204
View File
@@ -18,226 +18,232 @@ export function TaskSettingsModal(
const statusSuggestionId = v4(); const statusSuggestionId = v4();
const BoardOptionConverter: React.StateItemConverter<Entry> = ( const BoardOptionConverter: React.StateItemConverter<Entry> = (
entry: Entry, entry: Entry,
) => { ) => {
const isSelected = entry[0] == taskViewModel.task.boardId; const isSelected = entry[0] == taskViewModel.task.boardId;
return Option(entry[1], entry[0], isSelected); return Option(entry[1], entry[0], isSelected);
}; };
return ( return (
<div class="modal" open> <div class="modal task-settings" open>
<div> <div>
<main> <main>
<h2> <h2>
{ {
coreViewModel.translations.chatPage.task coreViewModel.translations.chatPage.task
.taskSettingsHeadline .taskSettingsHeadline
} }
</h2> </h2>
<label class="tile flex-no"> <div class="column-wrapper">
<span class="icon">history</span> <div class="flex-column">
<div> <label class="tile flex-no">
<span> <span class="icon">label</span>
{ <div>
coreViewModel.translations.general <span>
.fileVersionLabel {
} coreViewModel.translations.chatPage.task
</span> .taskNameLabel
<select }
bind:value={taskViewModel.selectedVersionId} </span>
children:append={[ <input
taskViewModel.versionIds, bind:value={taskViewModel.name}
VersionIdToOption, id="focused"
]} ></input>
></select> </div>
<span class="icon">arrow_drop_down</span> </label>
</div>
</label>
<hr></hr> <label class="tile flex-no">
<span class="icon">category</span>
<div>
<span>
{
coreViewModel.translations.chatPage.task
.taskBoardLabel
}
</span>
<select
bind:value={taskViewModel.boardId}
children:append={[
taskViewModel.chatViewModel
.taskBoardSuggestions,
BoardOptionConverter,
]}
></select>
<span class="icon">arrow_drop_down</span>
</div>
</label>
<label class="tile flex-no"> <label class="tile flex-no">
<span class="icon">label</span> <span class="icon">description</span>
<div> <div>
<span> <span>
{ {
coreViewModel.translations.chatPage.task coreViewModel.translations.chatPage.task
.taskNameLabel .taskDescriptionLabel
} }
</span> </span>
<input <textarea
bind:value={taskViewModel.name} rows="10"
id="focused" bind:value={taskViewModel.description}
></input> ></textarea>
</div> </div>
</label> </label>
</div>
<label class="tile flex-no"> <hr class="mobile-only"></hr>
<span class="icon">category</span>
<div>
<span>
{
coreViewModel.translations.chatPage.task
.taskBoardLabel
}
</span>
<select
bind:value={taskViewModel.boardId}
children:append={[
taskViewModel.chatViewModel
.taskBoardSuggestions,
BoardOptionConverter,
]}
></select>
<span class="icon">arrow_drop_down</span>
</div>
</label>
<label class="tile flex-no"> <div class="flex-column">
<span class="icon">description</span> <label class="tile flex-no">
<div> <span class="icon">category</span>
<span> <div>
{ <span>
coreViewModel.translations.chatPage.task {
.taskDescriptionLabel coreViewModel.translations.chatPage.task
} .taskCategoryLabel
</span> }
<textarea </span>
rows="10" <input
bind:value={taskViewModel.description} bind:value={taskViewModel.category}
></textarea> list={categorySuggestionId}
</div> ></input>
</label> </div>
</label>
<datalist
hidden
id={categorySuggestionId}
children:append={[
taskViewModel.coreViewModel.taskCategorySuggestions,
StringToOption,
]}
></datalist>
<hr></hr> <label class="tile flex-no">
<span class="icon">clock_loader_40</span>
<div>
<span>
{
coreViewModel.translations.chatPage.task
.taskStatusLabel
}
</span>
<input
bind:value={taskViewModel.status}
list={statusSuggestionId}
></input>
</div>
</label>
<datalist
hidden
id={statusSuggestionId}
children:append={[
taskViewModel.coreViewModel.taskStatusSuggestions,
StringToOption,
]}
></datalist>
<label class="tile flex-no"> <label class="tile flex-no">
<span class="icon">category</span> <span class="icon">priority_high</span>
<div> <div>
<span> <span>
{ {
coreViewModel.translations.chatPage.task coreViewModel.translations.chatPage.task
.taskCategoryLabel .taskPriorityLabel
} }
</span> </span>
<input <input
bind:value={taskViewModel.category} type="number"
list={categorySuggestionId} bind:value={taskViewModel.priority}
></input> ></input>
</div> </div>
</label> </label>
<datalist
hidden
id={categorySuggestionId}
children:append={[
taskViewModel.coreViewModel.taskCategorySuggestions,
StringToOption,
]}
></datalist>
<label class="tile flex-no"> <hr></hr>
<span class="icon">clock_loader_40</span>
<div>
<span>
{
coreViewModel.translations.chatPage.task
.taskStatusLabel
}
</span>
<input
bind:value={taskViewModel.status}
list={statusSuggestionId}
></input>
</div>
</label>
<datalist
hidden
id={statusSuggestionId}
children:append={[
taskViewModel.coreViewModel.taskStatusSuggestions,
StringToOption,
]}
></datalist>
<label class="tile flex-no"> <label class="tile flex-no">
<span class="icon">priority_high</span> <span class="icon">calendar_month</span>
<div> <div>
<span> <span>
{ {
coreViewModel.translations.chatPage.task coreViewModel.translations.chatPage.task
.taskPriorityLabel .taskDateLabel
} }
</span> </span>
<input <input
type="number" type="date"
bind:value={taskViewModel.priority} bind:value={taskViewModel.date}
></input> ></input>
</div> </div>
</label> </label>
<hr></hr> <label class="tile flex-no">
<span class="icon">schedule</span>
<div>
<span>
{
coreViewModel.translations.chatPage.task
.taskTimeLabel
}
</span>
<input
type="time"
bind:value={taskViewModel.time}
></input>
</div>
</label>
</div>
</div>
<hr></hr>
<label class="tile flex-no"> <label class="tile flex-no">
<span class="icon">calendar_month</span> <span class="icon">history</span>
<div> <div>
<span> <span>
{ {
coreViewModel.translations.chatPage.task coreViewModel.translations.general
.taskDateLabel .fileVersionLabel
} }
</span> </span>
<input <select
type="date" bind:value={taskViewModel.selectedVersionId}
bind:value={taskViewModel.date} children:append={[
></input> taskViewModel.versionIds,
</div> VersionIdToOption,
</label> ]}
></select>
<span class="icon">arrow_drop_down</span>
</div>
</label>
<label class="tile flex-no"> <hr></hr>
<span class="icon">schedule</span>
<div>
<span>
{
coreViewModel.translations.chatPage.task
.taskTimeLabel
}
</span>
<input
type="time"
bind:value={taskViewModel.time}
></input>
</div>
</label>
<hr></hr> <div class="width-input">
{DangerousActionButton(
<div class="width-input"> coreViewModel,
{DangerousActionButton( coreViewModel.translations.chatPage.task
coreViewModel, .deleteTaskButton,
coreViewModel.translations.chatPage.task "delete_forever",
.deleteTaskButton, taskViewModel.deleteTask,
"delete_forever", )}
taskViewModel.deleteTask, </div>
)} </main>
</div> <div class="flex-row width-100">
</main> <button
<div class="flex-row width-100"> class="flex"
<button on:click={taskViewModel.closeAndDiscard}
class="flex" >
on:click={taskViewModel.closeAndDiscard} {coreViewModel.translations.general.closeButton}
> </button>
{coreViewModel.translations.general.closeButton} <button
</button> class="flex primary"
<button on:click={taskViewModel.closeAndSave}
class="flex primary" >
on:click={taskViewModel.closeAndSave} {coreViewModel.translations.general.saveButton}
> <span class="icon">save</span>
{coreViewModel.translations.general.saveButton} </button>
<span class="icon">save</span> </div>
</button> </div>
</div> </div>
</div>
</div>
); );
} }
src/View/chatPage.css
+51 -33
View File
@@ -72,13 +72,13 @@ body[showing-chat] #chat-page-wrapper {
@media (min-width: 1024px) { @media (min-width: 1024px) {
#chat-page > div > #main > div > .pane-wrapper { #chat-page > div > #main > div > .pane-wrapper {
min-width: unset; min-width: unset;
} }
#chat-page > div > #main > div > .pane-wrapper.side { #chat-page > div > #main > div > .pane-wrapper.side {
width: 18rem; width: 18rem;
min-width: 18rem; min-width: 18rem;
max-width: 18rem; max-width: 18rem;
} }
} }
@@ -108,13 +108,13 @@ body[showing-chat] #chat-page-wrapper {
#chat-page > div > #ribbon > span, #chat-page > div > #ribbon > span,
#chat-page #chat-page
> div > div
> #main > #main
> div > div
> .pane-wrapper > .pane-wrapper
> .pane > .pane
> .toolbar > .toolbar
> span.ribbon { > span.ribbon {
gap: var(--gap-between-tiles); gap: var(--gap-between-tiles);
padding: var(--gap-between-tiles); padding: var(--gap-between-tiles);
} }
@@ -180,13 +180,13 @@ body[showing-chat] #chat-page-wrapper {
#chat-page > div > #ribbon button.ribbon-button, #chat-page > div > #ribbon button.ribbon-button,
#chat-page #chat-page
> div > div
> #main > #main
> div > div
> .pane-wrapper > .pane-wrapper
> .pane > .pane
> .toolbar > .toolbar
button.ribbon-button { button.ribbon-button {
min-width: calc(var(--control-height) - 2 * var(--gap-between-tiles)); min-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
width: calc(var(--control-height) - 2 * var(--gap-between-tiles)); width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles)); max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
@@ -199,14 +199,14 @@ body[showing-chat] #chat-page-wrapper {
#chat-page > div > #ribbon button > .icon, #chat-page > div > #ribbon button > .icon,
#chat-page #chat-page
> div > div
> #main > #main
> div > div
> .pane-wrapper > .pane-wrapper
> .pane > .pane
> .toolbar > .toolbar
button button
> .icon { > .icon {
font-size: 1.1rem; font-size: 1.1rem;
} }
@@ -232,13 +232,31 @@ body[showing-chat] #chat-page-wrapper {
} }
#chat-page #chat-page
> div > div
> #main > #main
> div > div
> .pane-wrapper > .pane-wrapper
> .pane > .pane
> .toolbar > .toolbar
:is(input, select, button) { :is(input, select, button) {
height: 100%; height: 100%;
flex: 1; flex: 1;
} }
/* task settings */
.modal.task-settings > div {
max-width: 52rem;
}
@media (min-width: 640px) {
.modal.task-settings .column-wrapper {
display: flex;
flex-direction: row;
gap: var(--content-padding);
}
.modal.task-settings .column-wrapper > .flex-column{
width: 100%;
flex: 1;
}
}