Add 17 features: My Work view, card copy/numbering, calendar, bulk ops, custom fields, automations, webhooks, invites, import/export, and more
Features implemented across 6 batches: - Batch A: Fix ColorPicker gradient sync, tenant custom logo, unarchive cards, board backgrounds - Batch B: My Work view, card copy/duplicate, card numbering (BOARD-123) - Batch C: Due date reminders (cron), card watching with notifications - Batch D: Bulk card operations, column sorting, calendar view - Batch E: Invite by link, board import/export (Pounce + Trello JSON) - Batch F: Webhooks with HMAC signing, custom fields, automation rules engine Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Catherine Renelle
@@ -0,0 +1,145 @@
|
||||
<script lang="ts">
|
||||
import { api } from '$lib/utils/api.js';
|
||||
import { toast } from '$lib/stores/toasts.svelte.js';
|
||||
import ColorPicker from './ColorPicker.svelte';
|
||||
|
||||
let { boardId, currentBackground = null }: { boardId: string; currentBackground: string | null } = $props();
|
||||
|
||||
let open = $state(false);
|
||||
let customMode = $state(false);
|
||||
let customValue = $state(currentBackground || '');
|
||||
|
||||
const PRESET_SOLIDS = [
|
||||
'#0079bf', '#d29034', '#519839', '#b04632',
|
||||
'#89609e', '#cd5a91', '#4bbf6b', '#00aecc',
|
||||
'#838c91', '#172b4d'
|
||||
];
|
||||
|
||||
const PRESET_GRADIENTS = [
|
||||
'linear-gradient(to right, #0079bf, #6366f1)',
|
||||
'linear-gradient(to right, #f97316, #ef4444)',
|
||||
'linear-gradient(to right, #22c55e, #14b8a6)',
|
||||
'linear-gradient(to right, #8b5cf6, #ec4899)',
|
||||
'linear-gradient(135deg, #667eea, #764ba2)',
|
||||
'linear-gradient(to right, #0ea5e9, #6366f1)'
|
||||
];
|
||||
|
||||
async function setBackground(value: string | null) {
|
||||
const { ok } = await api(`/api/boards/${boardId}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({ background: value })
|
||||
});
|
||||
if (ok) {
|
||||
currentBackground = value;
|
||||
toast.success(value ? 'Background updated' : 'Background removed');
|
||||
}
|
||||
open = false;
|
||||
customMode = false;
|
||||
}
|
||||
|
||||
function handleCustomChange(value: string) {
|
||||
customValue = value;
|
||||
}
|
||||
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
if (open && !(e.target as HTMLElement).closest('.bg-picker-dropdown')) {
|
||||
open = false;
|
||||
customMode = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onclick={handleClickOutside} />
|
||||
|
||||
<div class="relative bg-picker-dropdown">
|
||||
<button
|
||||
onclick={(e) => { e.stopPropagation(); open = !open; }}
|
||||
class="rounded px-2 py-1 text-sm text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 transition flex items-center gap-1"
|
||||
title="Board background"
|
||||
aria-label="Board background"
|
||||
>
|
||||
{#if currentBackground}
|
||||
<div class="w-4 h-4 rounded" style="background: {currentBackground};"></div>
|
||||
{:else}
|
||||
<svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v11a3 3 0 106 0V4a2 2 0 00-2-2H4zm1 14a1 1 0 100-2 1 1 0 000 2zm5-1.757l4.9-4.9a2 2 0 000-2.828L13.485 5.1a2 2 0 00-2.828 0L10 5.757v8.486zM16 18H9.071l6-6H16a2 2 0 012 2v2a2 2 0 01-2 2z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
{/if}
|
||||
Background
|
||||
</button>
|
||||
|
||||
{#if open}
|
||||
<div
|
||||
class="absolute top-full left-0 mt-1 z-50 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-xl p-3 space-y-3"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{#if !customMode}
|
||||
<div>
|
||||
<div class="text-[10px] text-gray-400 dark:text-gray-500 uppercase tracking-wide mb-1.5">Solid Colors</div>
|
||||
<div class="grid grid-cols-5 gap-1.5">
|
||||
{#each PRESET_SOLIDS as color}
|
||||
<button
|
||||
onclick={() => setBackground(color)}
|
||||
class="w-full aspect-square rounded-lg border-2 transition hover:scale-110 {currentBackground === color ? 'border-white ring-2 ring-[var(--color-primary)]' : 'border-transparent'}"
|
||||
style="background: {color};"
|
||||
title={color}
|
||||
></button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-[10px] text-gray-400 dark:text-gray-500 uppercase tracking-wide mb-1.5">Gradients</div>
|
||||
<div class="grid grid-cols-3 gap-1.5">
|
||||
{#each PRESET_GRADIENTS as grad}
|
||||
<button
|
||||
onclick={() => setBackground(grad)}
|
||||
class="w-full h-8 rounded-lg border-2 transition hover:scale-105 {currentBackground === grad ? 'border-white ring-2 ring-[var(--color-primary)]' : 'border-transparent'}"
|
||||
style="background: {grad};"
|
||||
></button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
onclick={() => (customMode = true)}
|
||||
class="flex-1 rounded-lg border border-gray-300 dark:border-gray-600 px-2 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition"
|
||||
>
|
||||
Custom...
|
||||
</button>
|
||||
{#if currentBackground}
|
||||
<button
|
||||
onclick={() => setBackground(null)}
|
||||
class="rounded-lg border border-gray-300 dark:border-gray-600 px-2 py-1.5 text-xs text-[var(--color-danger)] hover:bg-red-50 dark:hover:bg-red-900/30 transition"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<ColorPicker
|
||||
label="Custom background"
|
||||
value={customValue}
|
||||
gradient={true}
|
||||
onchange={handleCustomChange}
|
||||
/>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
onclick={() => setBackground(customValue)}
|
||||
disabled={!customValue}
|
||||
class="flex-1 rounded-lg bg-[var(--color-primary)] px-2 py-1.5 text-xs text-white hover:opacity-90 transition disabled:opacity-50"
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
<button
|
||||
onclick={() => (customMode = false)}
|
||||
class="rounded-lg border border-gray-300 dark:border-gray-600 px-2 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user