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
+31 -25
View File
@@ -25,7 +25,7 @@ export function TaskSettingsModal(
}; };
return ( return (
<div class="modal" open> <div class="modal task-settings" open>
<div> <div>
<main> <main>
<h2> <h2>
@@ -35,28 +35,8 @@ export function TaskSettingsModal(
} }
</h2> </h2>
<label class="tile flex-no"> <div class="column-wrapper">
<span class="icon">history</span> <div class="flex-column">
<div>
<span>
{
coreViewModel.translations.general
.fileVersionLabel
}
</span>
<select
bind:value={taskViewModel.selectedVersionId}
children:append={[
taskViewModel.versionIds,
VersionIdToOption,
]}
></select>
<span class="icon">arrow_drop_down</span>
</div>
</label>
<hr></hr>
<label class="tile flex-no"> <label class="tile flex-no">
<span class="icon">label</span> <span class="icon">label</span>
<div> <div>
@@ -109,9 +89,11 @@ export function TaskSettingsModal(
></textarea> ></textarea>
</div> </div>
</label> </label>
</div>
<hr></hr> <hr class="mobile-only"></hr>
<div class="flex-column">
<label class="tile flex-no"> <label class="tile flex-no">
<span class="icon">category</span> <span class="icon">category</span>
<div> <div>
@@ -209,6 +191,30 @@ export function TaskSettingsModal(
></input> ></input>
</div> </div>
</label> </label>
</div>
</div>
<hr></hr>
<label class="tile flex-no">
<span class="icon">history</span>
<div>
<span>
{
coreViewModel.translations.general
.fileVersionLabel
}
</span>
<select
bind:value={taskViewModel.selectedVersionId}
children:append={[
taskViewModel.versionIds,
VersionIdToOption,
]}
></select>
<span class="icon">arrow_drop_down</span>
</div>
</label>
<hr></hr> <hr></hr>
@@ -238,6 +244,6 @@ export function TaskSettingsModal(
</button> </button>
</div> </div>
</div> </div>
</div> </div>
); );
} }
src/View/chatPage.css
+47 -29
View File
@@ -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;
}
}