From 8fa6318aa1583f3ac0fce0c57266976352384540 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Mon, 21 Sep 2026 20:37:55 +0200 Subject: [PATCH] implement column layout for taskSettingsModal on desktop --- dist/index.css | 16 +- dist/index.js | 24 +- .../.chatPage.css.swp} | Bin 16384 -> 16384 bytes src/View/Modals/.taskSettingsModal.tsx.swp | Bin 0 -> 24576 bytes src/View/Modals/taskSettingsModal.tsx | 414 +++++++++--------- src/View/chatPage.css | 84 ++-- 6 files changed, 288 insertions(+), 250 deletions(-) rename src/{.colors.css.swp => View/.chatPage.css.swp} (57%) create mode 100644 src/View/Modals/.taskSettingsModal.tsx.swp diff --git a/dist/index.css b/dist/index.css index 2529137d..ce3ed695 100644 --- a/dist/index.css +++ b/dist/index.css @@ -59,7 +59,7 @@ body[theme=dark] [color]:not([color=standard]).tile { [color]:not([color=standard]).background { --luma: var(--background-luma); --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 { --luma: var(--background-luma-dark); @@ -469,6 +469,20 @@ body[showing-chat] #chat-page-wrapper { height: 100%; 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 */ #chat-page > div > #main > #task-page > .pane-wrapper > .pane > .main-content { diff --git a/dist/index.js b/dist/index.js index 2dd37936..a6e93d07 100644 --- a/dist/index.js +++ b/dist/index.js @@ -5379,16 +5379,7 @@ const isSelected = entry[0] == taskViewModel.task.boardId; 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( - "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( + 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( "input", { "bind:value": taskViewModel.name, @@ -5409,7 +5400,7 @@ rows: "10", "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", { "bind:value": taskViewModel.category, @@ -5459,7 +5450,16 @@ type: "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.translations.chatPage.task.deleteTaskButton, "delete_forever", diff --git a/src/.colors.css.swp b/src/View/.chatPage.css.swp similarity index 57% rename from src/.colors.css.swp rename to src/View/.chatPage.css.swp index 7f898b83734c3f340c26d390e82f27a9ded9d997..fff4ec493bf1c1b7afb9b87d1e117bd42d089335 100644 GIT binary patch literal 16384 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 literal 16384 zcmeI2Piz!b9LFCO1^H8qUPL4gHAF#uQV0LGjouwtH zL{26Oq8Bw>G)4>;4TN|VNK}l1N;KTWghUTsAfl3Z(9fHh-I?vS-L{E<$=l?U?arIu z`}2L@_h;sHsB_1reyy*)Q}DS*h~w^wU8Olo#kR#lWGzo#ZTPXBv|;C*QlqL|JCjvE)*-1UH(vi zxMi7k-@V(XnTfhxDWDWk3Md7X0!jg;fKosypcME&E8rEI!~q)66gJ{;_&saP_Z{Ky z-tha4G3nt?^`#V03Md7X0!jg;fKosypcGIFCP$J?1aT|Km61z#7A%pM&L=92XkQ#TwF*R6v2UYFc-dCAjAbY4`<;h9Dp z>qa_l7ChZEM?Kvx=Z%!s)!F&TY9VTpWs06L+}$bdF_~JIn9^3oqH<-Ee3G53#eo0c zB5PW*u4xup2DSY{yc9;4%0r%Q`h|vBcUNSELsX9I4)=2YjMz$|U#|kZD4qFAwvz$UnThS4jCCF#5;kN2}%p86PCRU3fC$n$B z%b9s|O^dWC*#*uUOcfljwc^5(XB0@zv+_sldFoO2@>hQ*v*lj{YfzuR=((3dBfe;*dhZZ(>BwdnHg*! zwrpGXbCJ>oeHfJ#q}1mxRSAn8$yuJ+*pxNp&>HzW=0!bNHwuoMH|+Y3lCwpni>i}I zf`*E)f6BgHS%W-luQ_>qaF1_0nL}*`IcKlwP9E>yQWGBLB6DJp8xxN5tZQT}xkk#d zttT-ZOI^aRK^Qy5(5^(Hts2Jam@%`#Z#kv;N~AQ~Dwu|=SITUyNL7`O<*;TFm&*Ay zOKB^k**9u!N=wETz)HShTkvYM=GLZl5h(MU!MOG;+l*|fJmUN7=6b~MI^Sz@hZplm z@Aw|+nam@;;iT2|sxJfo;1PetZ?v?9hG72i|BB|ps`2Afz<48(Eg(y8ceKui14fTV z{={L`RiRp(KUGW^;1^RBZ|wFsSaHVPJyqwW*iNxB3&$?aeA5yiRTTwdljnFXnwfBZ z)Rc6?P;GMNVH+fSCzOq8j7NpZ_D(T9qWRpP<(xug{gUyWZCbR5j8#3hmV~Ql+(3Q bGGv!;jU2b)K(799GVTrA%I3V=U5|eOkoJpi diff --git a/src/View/Modals/.taskSettingsModal.tsx.swp b/src/View/Modals/.taskSettingsModal.tsx.swp new file mode 100644 index 0000000000000000000000000000000000000000..7a542e2b36f54cc0b283da328b20859731681715 GIT binary patch literal 24576 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 = ( - entry: Entry, + entry: Entry, ) => { - const isSelected = entry[0] == taskViewModel.task.boardId; - return Option(entry[1], entry[0], isSelected); + const isSelected = entry[0] == taskViewModel.task.boardId; + return Option(entry[1], entry[0], isSelected); }; return ( -
-
-
-

- { - coreViewModel.translations.chatPage.task - .taskSettingsHeadline - } -

+
+
+
+

+ { + coreViewModel.translations.chatPage.task + .taskSettingsHeadline + } +

- +
+
+ -
+ - + +
- +
- +
+ + -
+ + - - + - - +
- + -
+ +
+
+ +
- + - +
-
- -
- {DangerousActionButton( - coreViewModel, - coreViewModel.translations.chatPage.task - .deleteTaskButton, - "delete_forever", - taskViewModel.deleteTask, - )} -
-
-
- - -
-
-
+
+ {DangerousActionButton( + coreViewModel, + coreViewModel.translations.chatPage.task + .deleteTaskButton, + "delete_forever", + taskViewModel.deleteTask, + )} +
+
+
+ + +
+
+
); } diff --git a/src/View/chatPage.css b/src/View/chatPage.css index db56dfe5..ccfdc8fa 100644 --- a/src/View/chatPage.css +++ b/src/View/chatPage.css @@ -72,13 +72,13 @@ body[showing-chat] #chat-page-wrapper { @media (min-width: 1024px) { #chat-page > div > #main > div > .pane-wrapper { - min-width: unset; + min-width: unset; } #chat-page > div > #main > div > .pane-wrapper.side { - width: 18rem; - min-width: 18rem; - max-width: 18rem; + width: 18rem; + min-width: 18rem; + max-width: 18rem; } } @@ -108,13 +108,13 @@ body[showing-chat] #chat-page-wrapper { #chat-page > div > #ribbon > span, #chat-page - > div - > #main - > div - > .pane-wrapper - > .pane - > .toolbar - > span.ribbon { +> div +> #main +> div +> .pane-wrapper +> .pane +> .toolbar +> span.ribbon { gap: 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 - > #main - > div - > .pane-wrapper - > .pane - > .toolbar - button.ribbon-button { +> div +> #main +> div +> .pane-wrapper +> .pane +> .toolbar +button.ribbon-button { min-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)); @@ -199,14 +199,14 @@ body[showing-chat] #chat-page-wrapper { #chat-page > div > #ribbon button > .icon, #chat-page - > div - > #main - > div - > .pane-wrapper - > .pane - > .toolbar - button - > .icon { +> div +> #main +> div +> .pane-wrapper +> .pane +> .toolbar +button +> .icon { font-size: 1.1rem; } @@ -232,13 +232,31 @@ body[showing-chat] #chat-page-wrapper { } #chat-page - > div - > #main - > div - > .pane-wrapper - > .pane - > .toolbar - :is(input, select, button) { +> div +> #main +> div +> .pane-wrapper +> .pane +> .toolbar +:is(input, select, button) { height: 100%; 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; + } +}