implement column layout for taskSettingsModal on desktop
This commit is contained in:
marlon-erler
Vendored
+15
-1
@@ -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 {
|
||||
|
||||
Vendored
+12
-12
@@ -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",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
@@ -18,226 +18,232 @@ export function TaskSettingsModal(
|
||||
const statusSuggestionId = v4();
|
||||
|
||||
const BoardOptionConverter: React.StateItemConverter<Entry> = (
|
||||
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 (
|
||||
<div class="modal" open>
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskSettingsHeadline
|
||||
}
|
||||
</h2>
|
||||
<div class="modal task-settings" open>
|
||||
<div>
|
||||
<main>
|
||||
<h2>
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskSettingsHeadline
|
||||
}
|
||||
</h2>
|
||||
|
||||
<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>
|
||||
<div class="column-wrapper">
|
||||
<div class="flex-column">
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">label</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskNameLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
bind:value={taskViewModel.name}
|
||||
id="focused"
|
||||
></input>
|
||||
</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">
|
||||
<span class="icon">label</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskNameLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
bind:value={taskViewModel.name}
|
||||
id="focused"
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">description</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskDescriptionLabel
|
||||
}
|
||||
</span>
|
||||
<textarea
|
||||
rows="10"
|
||||
bind:value={taskViewModel.description}
|
||||
></textarea>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<hr class="mobile-only"></hr>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">description</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskDescriptionLabel
|
||||
}
|
||||
</span>
|
||||
<textarea
|
||||
rows="10"
|
||||
bind:value={taskViewModel.description}
|
||||
></textarea>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex-column">
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">category</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskCategoryLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
bind:value={taskViewModel.category}
|
||||
list={categorySuggestionId}
|
||||
></input>
|
||||
</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">
|
||||
<span class="icon">category</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskCategoryLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
bind:value={taskViewModel.category}
|
||||
list={categorySuggestionId}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<datalist
|
||||
hidden
|
||||
id={categorySuggestionId}
|
||||
children:append={[
|
||||
taskViewModel.coreViewModel.taskCategorySuggestions,
|
||||
StringToOption,
|
||||
]}
|
||||
></datalist>
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">priority_high</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskPriorityLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
bind:value={taskViewModel.priority}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<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>
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">priority_high</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskPriorityLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
bind:value={taskViewModel.priority}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">calendar_month</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskDateLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
type="date"
|
||||
bind:value={taskViewModel.date}
|
||||
></input>
|
||||
</div>
|
||||
</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">
|
||||
<span class="icon">calendar_month</span>
|
||||
<div>
|
||||
<span>
|
||||
{
|
||||
coreViewModel.translations.chatPage.task
|
||||
.taskDateLabel
|
||||
}
|
||||
</span>
|
||||
<input
|
||||
type="date"
|
||||
bind:value={taskViewModel.date}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<hr></hr>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<div class="width-input">
|
||||
{DangerousActionButton(
|
||||
coreViewModel,
|
||||
coreViewModel.translations.chatPage.task
|
||||
.deleteTaskButton,
|
||||
"delete_forever",
|
||||
taskViewModel.deleteTask,
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
<div class="flex-row width-100">
|
||||
<button
|
||||
class="flex"
|
||||
on:click={taskViewModel.closeAndDiscard}
|
||||
>
|
||||
{coreViewModel.translations.general.closeButton}
|
||||
</button>
|
||||
<button
|
||||
class="flex primary"
|
||||
on:click={taskViewModel.closeAndSave}
|
||||
>
|
||||
{coreViewModel.translations.general.saveButton}
|
||||
<span class="icon">save</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="width-input">
|
||||
{DangerousActionButton(
|
||||
coreViewModel,
|
||||
coreViewModel.translations.chatPage.task
|
||||
.deleteTaskButton,
|
||||
"delete_forever",
|
||||
taskViewModel.deleteTask,
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
<div class="flex-row width-100">
|
||||
<button
|
||||
class="flex"
|
||||
on:click={taskViewModel.closeAndDiscard}
|
||||
>
|
||||
{coreViewModel.translations.general.closeButton}
|
||||
</button>
|
||||
<button
|
||||
class="flex primary"
|
||||
on:click={taskViewModel.closeAndSave}
|
||||
>
|
||||
{coreViewModel.translations.general.saveButton}
|
||||
<span class="icon">save</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+51
-33
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user