fix: improve QuickAddTask and TagInput components
- Added `min-w-0` class to the title input in `QuickAddTask` for better layout handling. - Updated priority select to use `flex-shrink-0` and `w-10` for consistent sizing and added title tooltip for better UX. - Enhanced `TagInput` to support `compactSuggestions` prop, adjusting suggestion display based on available space. - Modified suggestion container to conditionally apply grid classes based on `compactSuggestions`, improving responsiveness.
This commit is contained in:
@@ -131,7 +131,7 @@ export function QuickAddTask({ status, onSubmit, onCancel, swimlaneContext }: Qu
|
|||||||
<div onBlur={handleBlur}>
|
<div onBlur={handleBlur}>
|
||||||
<Card className="p-3 border-dashed border-[var(--primary)]/30 bg-[var(--card)]/50 hover:border-[var(--primary)]/50 transition-all duration-300">
|
<Card className="p-3 border-dashed border-[var(--primary)]/30 bg-[var(--card)]/50 hover:border-[var(--primary)]/50 transition-all duration-300">
|
||||||
{/* Header avec titre et priorité */}
|
{/* Header avec titre et priorité */}
|
||||||
<div className="flex items-start gap-2 mb-2">
|
<div className="flex items-start gap-2 mb-2 min-w-0">
|
||||||
<input
|
<input
|
||||||
ref={titleRef}
|
ref={titleRef}
|
||||||
type="text"
|
type="text"
|
||||||
@@ -141,7 +141,7 @@ export function QuickAddTask({ status, onSubmit, onCancel, swimlaneContext }: Qu
|
|||||||
onFocus={() => setActiveField('title')}
|
onFocus={() => setActiveField('title')}
|
||||||
placeholder="Titre de la tâche..."
|
placeholder="Titre de la tâche..."
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
className="flex-1 bg-transparent border-none outline-none text-[var(--foreground)] font-mono text-sm font-medium placeholder-[var(--muted-foreground)] leading-tight"
|
className="flex-1 min-w-0 bg-transparent border-none outline-none text-[var(--foreground)] font-mono text-sm font-medium placeholder-[var(--muted-foreground)] leading-tight"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Indicateur de priorité */}
|
{/* Indicateur de priorité */}
|
||||||
@@ -149,11 +149,12 @@ export function QuickAddTask({ status, onSubmit, onCancel, swimlaneContext }: Qu
|
|||||||
value={formData.priority}
|
value={formData.priority}
|
||||||
onChange={(e) => setFormData(prev => ({ ...prev, priority: e.target.value as TaskPriority }))}
|
onChange={(e) => setFormData(prev => ({ ...prev, priority: e.target.value as TaskPriority }))}
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
className="bg-transparent border-none outline-none text-xs font-mono text-[var(--muted-foreground)]"
|
className="flex-shrink-0 w-10 bg-transparent border-none outline-none text-lg text-[var(--muted-foreground)] cursor-pointer text-center"
|
||||||
|
title={getAllPriorities().find(p => p.key === formData.priority)?.label}
|
||||||
>
|
>
|
||||||
{getAllPriorities().map(priorityConfig => (
|
{getAllPriorities().map(priorityConfig => (
|
||||||
<option key={priorityConfig.key} value={priorityConfig.key}>
|
<option key={priorityConfig.key} value={priorityConfig.key}>
|
||||||
{priorityConfig.icon} {priorityConfig.label}
|
{priorityConfig.icon}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
@@ -179,6 +180,7 @@ export function QuickAddTask({ status, onSubmit, onCancel, swimlaneContext }: Qu
|
|||||||
placeholder="Tags..."
|
placeholder="Tags..."
|
||||||
maxTags={5}
|
maxTags={5}
|
||||||
className="text-xs"
|
className="text-xs"
|
||||||
|
compactSuggestions={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ interface TagInputProps {
|
|||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
maxTags?: number;
|
maxTags?: number;
|
||||||
className?: string;
|
className?: string;
|
||||||
|
compactSuggestions?: boolean; // Pour adapter selon l'espace
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TagInput({
|
export function TagInput({
|
||||||
@@ -18,7 +19,8 @@ export function TagInput({
|
|||||||
onChange,
|
onChange,
|
||||||
placeholder = "Ajouter des tags...",
|
placeholder = "Ajouter des tags...",
|
||||||
maxTags = 10,
|
maxTags = 10,
|
||||||
className = ""
|
className = "",
|
||||||
|
compactSuggestions = false
|
||||||
}: TagInputProps) {
|
}: TagInputProps) {
|
||||||
const [inputValue, setInputValue] = useState('');
|
const [inputValue, setInputValue] = useState('');
|
||||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||||
@@ -150,14 +152,14 @@ export function TagInput({
|
|||||||
{showSuggestions && (suggestions.length > 0 || loading) && (
|
{showSuggestions && (suggestions.length > 0 || loading) && (
|
||||||
<div
|
<div
|
||||||
ref={suggestionsRef}
|
ref={suggestionsRef}
|
||||||
className="absolute top-full left-0 right-0 mt-1 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg z-50 max-h-64 overflow-y-auto"
|
className="absolute top-full left-0 right-0 mt-1 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg z-[9999] max-h-64 overflow-y-auto"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<div className="p-3 text-center text-[var(--muted-foreground)] text-sm">
|
<div className="p-3 text-center text-[var(--muted-foreground)] text-sm">
|
||||||
Recherche...
|
Recherche...
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2 p-3">
|
<div className={`gap-2 p-3 ${compactSuggestions ? 'grid grid-cols-1' : 'grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'}`}>
|
||||||
{suggestions.map((tag, index) => (
|
{suggestions.map((tag, index) => (
|
||||||
<button
|
<button
|
||||||
key={tag.id}
|
key={tag.id}
|
||||||
|
|||||||
Reference in New Issue
Block a user