obsidian-plugin/taskgenius_taskgenius-plugin
1
0
Fork 0
mirror of https://github.com/taskgenius/taskgenius-plugin.git synced 2026-07-22 06:40:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(details): restructure task details DOM hierarchy

Browse source 
- Add task-details-container wrapper element
- Separate contentContainerEl from containerEl for better styling control
- Update all CSS selectors to use new .task-details-container class
- Maintain existing functionality while improving structure
This commit is contained in:
Quorafind 2025-11-11 20:35:04 +08:00
parent f74966edf3
commit 32bb832fed
2 changed files with 31 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/features/task/view/details.ts
View file

@ -103,6 +103,7 @@ export function createTaskCheckbox(
export class TaskDetailsComponent extends Component {
public containerEl: HTMLElement;
private contentContainerEl: HTMLElement;
private contentEl: HTMLElement;
public currentTask: Task | null = null;
private isVisible = true;
@ -127,6 +128,9 @@ export class TaskDetailsComponent extends Component {
onload() {
// Create details container
this.containerEl = this.parentEl.createDiv({
cls: "task-details-container",
});
this.contentContainerEl = this.containerEl.createDiv({
cls: "task-details",
});
@ -135,9 +139,11 @@ export class TaskDetailsComponent extends Component {
}
private showEmptyState() {
this.containerEl.empty();
this.contentContainerEl.empty();
const emptyEl = this.containerEl.createDiv({ cls: "details-empty" });
const emptyEl = this.contentContainerEl.createDiv({
cls: "details-empty",
});
emptyEl.setText(t("Select a task to view details"));
}
@ -157,16 +163,18 @@ export class TaskDetailsComponent extends Component {
this.isEditing = false;
// Clear existing content
this.containerEl.empty();
this.contentContainerEl.empty();
// Create details header
const headerEl = this.containerEl.createDiv({ cls: "details-header" });
const headerEl = this.contentContainerEl.createDiv({
cls: "details-header",
});
headerEl.setText(t("Task Details"));
// Only show close button on mobile or if explicitly requested
if (
Platform.isPhone ||
this.containerEl.closest(".tg-fluent-container")
this.contentContainerEl.closest(".tg-fluent-container")
) {
headerEl.createEl(
"div",
@ -183,7 +191,9 @@ export class TaskDetailsComponent extends Component {
}
// Create content container
this.contentEl = this.containerEl.createDiv({ cls: "details-content" });
this.contentEl = this.contentContainerEl.createDiv({
cls: "details-content",
});
// Task name
const nameEl = this.contentEl.createEl("h2", { cls: "details-name" });

30
src/styles/task-details.css
View file

@ -1,9 +1,9 @@
.task-details .panel-toggle-container {
.task-details-container .panel-toggle-container {
left: 10px;
}
/* Detail Panel Styles */
.task-details {
.task-details-container {
width: 300px;
flex-shrink: 0;
border-left: 1px solid var(--background-modifier-border);
@ -20,22 +20,22 @@
}
/* Details panel visibility */
.task-genius-container.details-hidden .task-details {
.task-genius-container.details-hidden .task-details-container {
width: 0;
opacity: 0;
margin-right: -300px;
overflow: hidden;
}
.task-genius-container.details-visible .task-details {
.task-genius-container.details-visible .task-details-container {
width: 350px;
opacity: 1;
margin-right: 0;
}
/* Mobile view - slide from right */
.is-phone .task-details,
.is-mobile .task-details {
.is-phone .task-details-container,
.is-mobile .task-details-container {
position: absolute;
right: 0;
top: 0;
@ -46,17 +46,17 @@
transform: translateX(100%);
}
.is-phone .task-genius-container.details-hidden .task-details,
.is-mobile .task-genius-container.details-hidden .task-details,
.is-mobile .tg-fluent-container.details-hidden .task-details {
.is-phone .task-genius-container.details-hidden .task-details-container,
.is-mobile .task-genius-container.details-hidden .task-details-container,
.is-mobile .tg-fluent-container.details-hidden .task-details-container {
width: 100%;
margin-right: 0;
transform: translateX(100%);
}
.is-phone .task-genius-container.details-visible .task-details,
.is-mobile .task-genius-container.details-visible .task-details,
.is-mobile .tg-fluent-container.details-visible .task-details {
.is-phone .task-genius-container.details-visible .task-details-container,
.is-mobile .task-genius-container.details-visible .task-details-container,
.is-mobile .tg-fluent-container.details-visible .task-details-container {
width: calc(100% - var(--size-4-12));
transform: translateX(0);
}
@ -436,7 +436,7 @@
}
/* fluent Container specific styles for mobile */
.is-mobile .tg-fluent-container .task-details {
.is-mobile .tg-fluent-container .task-details-container {
position: fixed;
right: 0;
top: 0;
@ -449,7 +449,7 @@
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
}
.is-mobile .task-details .details-close-btn:hover {
.is-mobile .task-details-container .details-close-btn:hover {
background-color: var(--background-modifier-active-hover);
}
@ -476,7 +476,7 @@
flex: 1;
}
.task-details {
.task-details-container {
width: 100%;
max-width: 100%;
border-left: none;