mirror of
https://github.com/taskgenius/taskgenius-plugin.git
synced 2026-07-22 06:40:25 +00:00
1814877969
Breaking down the Fluent UI onboarding process into smaller, focused steps for better user guidance and comprehension: - Split monolithic Fluent components step into 6 progressive steps - Add individual step components for each UI section (Overview, Workspace Selector, Main Navigation, Projects, Other Views, Top Navigation) - Enhance preview components with interactive selection and focus/dim modes - Improve visual hierarchy with targeted highlighting for each step - Add keyboard support and accessibility attributes to preview components - Fix transition timing to show config check only at appropriate steps This change provides a more guided and digestible onboarding experience by presenting UI concepts progressively rather than all at once.
49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import { t } from "@/translations/helper";
|
|
import { OnboardingController } from "../OnboardingController";
|
|
import { ComponentPreviewFactory } from "../previews/ComponentPreviewFactory";
|
|
import "@/styles/onboarding-components.css";
|
|
|
|
export class FluentProjectSectionStep {
|
|
static render(
|
|
headerEl: HTMLElement,
|
|
contentEl: HTMLElement,
|
|
controller: OnboardingController
|
|
) {
|
|
headerEl.empty();
|
|
contentEl.empty();
|
|
|
|
headerEl.createEl("h1", { text: t("Projects Section") });
|
|
headerEl.createEl("p", {
|
|
text: t("Organize your work with projects and hierarchies"),
|
|
cls: "onboarding-subtitle",
|
|
});
|
|
|
|
const showcase = contentEl.createDiv({ cls: "component-showcase" });
|
|
const preview = showcase.createDiv({ cls: "component-showcase-preview focus-mode" });
|
|
const desc = showcase.createDiv({ cls: "component-showcase-description" });
|
|
|
|
ComponentPreviewFactory.createSidebarPreview(preview);
|
|
|
|
const projects = preview.querySelector<HTMLElement>(".v2-sidebar-section-projects");
|
|
projects?.classList.add("is-focused");
|
|
|
|
const dimTargets = preview.querySelectorAll<HTMLElement>(
|
|
".v2-sidebar-section-primary, .v2-sidebar-section-other"
|
|
);
|
|
dimTargets.forEach((el) => el.classList.add("is-dimmed"));
|
|
|
|
desc.createEl("h3", { text: t("Project organization") });
|
|
desc.createEl("p", {
|
|
text: t(
|
|
"Group related tasks under projects. Build nested hierarchies and get quick stats."
|
|
),
|
|
});
|
|
const ul = desc.createEl("ul", { cls: "component-feature-list" });
|
|
[
|
|
t("Color-coded projects with counts"),
|
|
t("Supports nested structures for complex work"),
|
|
t("Quick actions via project popover (preview)"),
|
|
].forEach((txt) => ul.createEl("li", { text: txt }));
|
|
}
|
|
}
|
|
|