fix: merge kanban filter bar and project chips into single row
Put + icon (create project) on far left, followed by project drop chips, then a spacer, then search/filters on the right — all in one unified toolbar row. v1.47.1 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
855760e39c
commit
43f05160c5
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "my-weekly-todo-list",
|
"name": "my-weekly-todo-list",
|
||||||
"version": "1.47.0",
|
"version": "1.47.1",
|
||||||
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
|
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@ -1718,7 +1718,6 @@ h3 {
|
|||||||
background: var(--weekly-bg, #fff);
|
background: var(--weekly-bg, #fff);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.kanban-filter-search {
|
.kanban-filter-search {
|
||||||
@ -3885,16 +3884,6 @@ h3 {
|
|||||||
background: rgba(255,255,255,0.03) !important;
|
background: rgba(255,255,255,0.03) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Kanban project drop targets */
|
|
||||||
.kanban-project-targets {
|
|
||||||
display: flex;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-bottom: 1px solid var(--weekly-border, #e5e7eb);
|
|
||||||
background: var(--weekly-bg-alt, #f8f9fa);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.kanban-project-chip {
|
.kanban-project-chip {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@ -6352,8 +6352,32 @@ export default function WeeklyView() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="kanban-wrapper">
|
<div className="kanban-wrapper">
|
||||||
{/* Filter Bar */}
|
{/* Unified toolbar: projects on left, filters on right */}
|
||||||
<div className="kanban-filter-bar">
|
<div className="kanban-filter-bar">
|
||||||
|
{/* Left side: + button, project chips */}
|
||||||
|
<button
|
||||||
|
onClick={() => setShowProjectsSidebar(true)}
|
||||||
|
className="kanban-project-chip"
|
||||||
|
style={{ background: darkMode ? "#374151" : "#e5e7eb", color: darkMode ? "#9ca3af" : "#6b7280", cursor: "pointer", border: "2px dashed " + (darkMode ? "#4b5563" : "#d1d5db") }}
|
||||||
|
title={t.projects || "Projects"}
|
||||||
|
>
|
||||||
|
<Plus size={12} />
|
||||||
|
</button>
|
||||||
|
{projects.map(p => (
|
||||||
|
<div key={p.id} className="kanban-project-chip" style={{ background: (p.color || "#6366f1") + "18", color: p.color || "#6366f1" }} {...kanbanProjectDrop(p.id)}>
|
||||||
|
<ProjectIcon icon={p.icon} size={12} color={p.color || "#6366f1"} />
|
||||||
|
<span>{p.name}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{projects.length > 0 && (
|
||||||
|
<div className="kanban-project-chip" style={{ background: darkMode ? "#1f2937" : "#f3f4f6", color: "#9ca3af" }} {...kanbanProjectDrop(null)}>
|
||||||
|
<X size={12} />
|
||||||
|
<span>{language === "de" ? "Kein Projekt" : "No project"}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* Spacer pushes filters to right */}
|
||||||
|
<div style={{ flex: 1 }} />
|
||||||
|
{/* Right side: search + filters */}
|
||||||
<div className="kanban-filter-search">
|
<div className="kanban-filter-search">
|
||||||
<Search size={14} className="kanban-filter-icon" />
|
<Search size={14} className="kanban-filter-icon" />
|
||||||
<input
|
<input
|
||||||
@ -6407,29 +6431,7 @@ export default function WeeklyView() {
|
|||||||
<X size={14} />
|
<X size={14} />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<button
|
|
||||||
onClick={() => setShowProjectsSidebar(true)}
|
|
||||||
className="kanban-filter-select"
|
|
||||||
style={{ display: "flex", alignItems: "center", gap: "4px", cursor: "pointer", fontWeight: 500 }}
|
|
||||||
>
|
|
||||||
<Plus size={12} /> {t.projects || "Projects"}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
{/* Project drop targets — drag tasks here to assign */}
|
|
||||||
{projects.length > 0 && (
|
|
||||||
<div className="kanban-project-targets">
|
|
||||||
{projects.map(p => (
|
|
||||||
<div key={p.id} className="kanban-project-chip" style={{ background: (p.color || "#6366f1") + "18", color: p.color || "#6366f1" }} {...kanbanProjectDrop(p.id)}>
|
|
||||||
<ProjectIcon icon={p.icon} size={12} color={p.color || "#6366f1"} />
|
|
||||||
<span>{p.name}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<div className="kanban-project-chip" style={{ background: "#f3f4f6", color: "#9ca3af" }} {...kanbanProjectDrop(null)}>
|
|
||||||
<X size={12} />
|
|
||||||
<span>{language === "de" ? "Kein Projekt" : "No project"}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="kanban-board">
|
<div className="kanban-board">
|
||||||
{kanbanStages.map((stage) => {
|
{kanbanStages.map((stage) => {
|
||||||
const stageTasks = filteredKanbanTasks.filter(t => (t.kanbanStage || null) === stage.id);
|
const stageTasks = filteredKanbanTasks.filter(t => (t.kanbanStage || null) === stage.id);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user