Cardoza_Construction/TasGrid
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

description fixes and delete button location improvements

Browse Source
This commit is contained in:
Timothy Cardoza
2026-03-04 10:01:54 -06:00
parent 738b6aad34
commit e9c380c35c
3 changed files with 60 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TaskDetail.tsx
+45 -44
View File
@@ -417,58 +417,59 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
/>
</Suspense>
{/* Tags at the bottom */}
<div class="mt-auto pt-6 border-t border-border/50">
<div class="flex flex-wrap items-center gap-3">
<span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/60 shrink-0">Tags</span>
<div class="flex flex-wrap items-center gap-1.5 min-w-0 flex-1">
<TagPicker
selectedTags={visibleTags()}
onTagsChange={updateTags}
/>
<div class="flex flex-wrap items-center gap-1.5">
<For each={visibleTags()}>
{(tag) => (
<Badge
variant="secondary"
class="h-7 px-2 text-xs gap-1.5 bg-muted/30 border-border/50 hover:bg-destructive/10 hover:border-destructive/30 cursor-pointer group/tag transition-all whitespace-nowrap shrink-0"
</div>
{/* Sticky Tags Area */}
<div class="px-6 py-3 border-t border-border/50 shrink-0 bg-card/80 backdrop-blur-sm z-10 w-full overflow-hidden">
<div class="flex flex-wrap items-center gap-3">
<span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/60 shrink-0">Tags</span>
<div class="flex flex-nowrap overflow-x-auto no-scrollbar items-center gap-1.5 min-w-0 flex-1 pb-1">
<TagPicker
selectedTags={visibleTags()}
onTagsChange={updateTags}
/>
<div class="flex flex-nowrap items-center gap-1.5 shrink-0 pr-2">
<For each={visibleTags()}>
{(tag) => (
<Badge
variant="secondary"
class="h-7 px-2 text-xs gap-1.5 bg-muted/30 border-border/50 hover:bg-destructive/10 hover:border-destructive/30 cursor-pointer group/tag transition-all whitespace-nowrap shrink-0"
style={{
"background-color": (() => {
const def = store.tagDefinitions.find(d => d.name === tag);
const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme());
return color ? `${color}15` : undefined;
})(),
"border-color": (() => {
const def = store.tagDefinitions.find(d => d.name === tag);
const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme());
return color ? `${color}30` : undefined;
})(),
"color": (() => {
const def = store.tagDefinitions.find(d => d.name === tag);
return getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme()) || "inherit";
})()
}}
onClick={() => updateTags(visibleTags().filter(t => t !== tag))}
>
<div
class="w-1.5 h-1.5 rounded-full"
style={{
"background-color": (() => {
const def = store.tagDefinitions.find(d => d.name === tag);
const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme());
return color ? `${color}15` : undefined;
})(),
"border-color": (() => {
const def = store.tagDefinitions.find(d => d.name === tag);
const color = getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme());
return color ? `${color}30` : undefined;
})(),
"color": (() => {
const def = store.tagDefinitions.find(d => d.name === tag);
return getThemeAdjustedColor(def?.color, def?.theme, resolvedTheme()) || "inherit";
})()
"background-color": (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) > 5 ? "#22c55e" : (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) < 5 ? "#ef4444" : "#94a3b8"
}}
onClick={() => updateTags(visibleTags().filter(t => t !== tag))}
>
<div
class="w-1.5 h-1.5 rounded-full"
style={{
"background-color": (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) > 5 ? "#22c55e" : (store.tagDefinitions.find(d => d.name === tag)?.value ?? 5) < 5 ? "#ef4444" : "#94a3b8"
}}
/>
{tag}
<X size={12} class="opacity-0 group-hover/tag:opacity-50 transition-opacity" />
</Badge>
)}
</For>
</div>
/>
{tag}
<X size={12} class="opacity-0 group-hover/tag:opacity-50 transition-opacity" />
</Badge>
)}
</For>
</div>
</div>
</div>
</div>
{/* Sticky Footer Actions */}
<div class="px-6 py-4 border-t border-border/50 flex items-center justify-between shrink-0 bg-background/80 backdrop-blur-sm">
<div class="px-6 py-4 border-t border-border/50 flex items-center justify-between shrink-0 bg-background/80 backdrop-blur-sm z-20 w-full relative">
{/* Delete button (persistent) */}
<Button
variant="ghost"
src/components/TaskEditor.tsx
+1 -1
View File
@@ -239,7 +239,7 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
// Handle full screen images as before
return (
<div class="relative w-full h-full flex flex-col">
<div class="relative w-full flex flex-col flex-1">
<div
class="absolute -top-6 -left-4 -right-4 h-8 cursor-pointer group flex items-center justify-center z-10"
onClick={() => {
src/views/NotepadView.tsx
+14 -16
View File
@@ -224,21 +224,6 @@ export const NotepadView: Component<{
editable={canEdit}
/>
</div>
{/* Close button (Mobile only) */}
<Show when={!props.hideNavigation}>
<div class="md:hidden flex justify-end pb-4 pt-2">
<Button
variant="ghost"
size="sm"
class="h-9 px-3 gap-2 hover:bg-muted text-muted-foreground transition-all rounded-xl border border-border/40"
onClick={() => props.setSelectedNoteId(null)}
>
<X size={16} />
<span class="text-xs font-bold uppercase tracking-wider">Close</span>
</Button>
</div>
</Show>
</div>
{/* Linked Tasks Sidebar */}
@@ -369,10 +354,23 @@ export const NotepadView: Component<{
</div>
</Show>
</div>
<Show when={!props.hideNavigation}>
{/* Sticky Full-Width Mobile Close Footer */}
<div class="md:hidden sticky bottom-0 z-[60] p-4 bg-background/95 backdrop-blur-sm border-t border-border flex justify-end shrink-0 w-full shadow-[0_-10px_40px_-5px_hsl(var(--background))]">
<Button
variant="secondary"
class="w-full h-11 rounded-xl text-sm font-bold shadow-sm"
onClick={() => props.setSelectedNoteId(null)}
>
<X size={16} class="mr-2" />
Close Note
</Button>
</div>
</Show>
</>
);
}}
</Show>
</Show >
</div>
</div >
);