mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-26 14:19:24 +00:00
Make icon more attractive
This commit is contained in:
parent
7db0e89798
commit
01a1629aeb
@ -53,14 +53,14 @@ function generateEncryptedPDFThumbnail(file: File): string {
|
|||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
ctx.setLineDash([]); // Reset dash pattern
|
ctx.setLineDash([]); // Reset dash pattern
|
||||||
|
|
||||||
// Modern document icon
|
// Large lock icon as main element
|
||||||
drawModernDocumentIcon(ctx, canvas.width / 2, 35, colorScheme.icon);
|
drawLargeLockIcon(ctx, canvas.width / 2, canvas.height / 2 - 10, colorScheme);
|
||||||
|
|
||||||
// Large lock icon overlay
|
// "PDF" text under the lock
|
||||||
drawLockIcon(ctx, canvas.width / 2, canvas.height / 2, colorScheme);
|
ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
|
||||||
|
ctx.fillStyle = colorScheme.icon;
|
||||||
// "ENCRYPTED" badge
|
ctx.textAlign = 'center';
|
||||||
drawEncryptionBadge(ctx, canvas.width / 2, canvas.height / 2 + 25, colorScheme);
|
ctx.fillText('PDF', canvas.width / 2, canvas.height / 2 + 35);
|
||||||
|
|
||||||
// File size with subtle styling
|
// File size with subtle styling
|
||||||
const sizeText = formatFileSize(file.size);
|
const sizeText = formatFileSize(file.size);
|
||||||
@ -189,57 +189,39 @@ function drawModernDocumentIcon(ctx: CanvasRenderingContext2D, centerX: number,
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Draw lock icon for encrypted PDFs
|
* Draw large lock icon for encrypted PDFs
|
||||||
*/
|
*/
|
||||||
function drawLockIcon(ctx: CanvasRenderingContext2D, centerX: number, centerY: number, colorScheme: ColorScheme) {
|
function drawLargeLockIcon(ctx: CanvasRenderingContext2D, centerX: number, centerY: number, colorScheme: ColorScheme) {
|
||||||
const size = 16;
|
const size = 48;
|
||||||
ctx.fillStyle = colorScheme.icon;
|
ctx.fillStyle = colorScheme.icon;
|
||||||
ctx.strokeStyle = colorScheme.icon;
|
ctx.strokeStyle = colorScheme.icon;
|
||||||
ctx.lineWidth = 2;
|
ctx.lineWidth = 3;
|
||||||
|
|
||||||
// Lock body (rectangle)
|
// Lock body (rectangle)
|
||||||
const bodyWidth = size;
|
const bodyWidth = size;
|
||||||
const bodyHeight = size * 0.6;
|
const bodyHeight = size * 0.75;
|
||||||
const bodyX = centerX - bodyWidth / 2;
|
const bodyX = centerX - bodyWidth / 2;
|
||||||
const bodyY = centerY - bodyHeight / 4;
|
const bodyY = centerY - bodyHeight / 4;
|
||||||
|
|
||||||
drawRoundedRect(ctx, bodyX, bodyY, bodyWidth, bodyHeight, 2);
|
drawRoundedRect(ctx, bodyX, bodyY, bodyWidth, bodyHeight, 4);
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
|
|
||||||
// Lock shackle (semicircle)
|
// Lock shackle (semicircle)
|
||||||
const shackleRadius = size * 0.35;
|
const shackleRadius = size * 0.32;
|
||||||
const shackleY = centerY - size * 0.4;
|
const shackleY = centerY - size * 0.25;
|
||||||
|
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.arc(centerX, shackleY, shackleRadius, Math.PI, 2 * Math.PI);
|
ctx.arc(centerX, shackleY, shackleRadius, Math.PI, 2 * Math.PI);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
|
|
||||||
// Keyhole
|
// Keyhole
|
||||||
|
const keyholeX = centerX;
|
||||||
|
const keyholeY = bodyY + bodyHeight * 0.4;
|
||||||
ctx.fillStyle = colorScheme.textPrimary;
|
ctx.fillStyle = colorScheme.textPrimary;
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.arc(centerX, centerY - 2, 2, 0, 2 * Math.PI);
|
ctx.arc(keyholeX, keyholeY, 4, 0, 2 * Math.PI);
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
ctx.fillRect(centerX - 1, centerY - 2, 2, 4);
|
ctx.fillRect(keyholeX - 2, keyholeY, 4, 8);
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Draw encryption badge
|
|
||||||
*/
|
|
||||||
function drawEncryptionBadge(ctx: CanvasRenderingContext2D, centerX: number, centerY: number, colorScheme: ColorScheme) {
|
|
||||||
const extension = "ENCRYPTED";
|
|
||||||
const badgeWidth = extension.length * 6 + 12;
|
|
||||||
const badgeHeight = 18;
|
|
||||||
|
|
||||||
// Badge background
|
|
||||||
drawRoundedRect(ctx, centerX - badgeWidth/2, centerY - badgeHeight/2, badgeWidth, badgeHeight, 9);
|
|
||||||
ctx.fillStyle = colorScheme.badge;
|
|
||||||
ctx.fill();
|
|
||||||
|
|
||||||
// Badge text
|
|
||||||
ctx.font = 'bold 9px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
|
|
||||||
ctx.fillStyle = colorScheme.textPrimary;
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.fillText(extension, centerX, centerY + 3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
Loading…
x
Reference in New Issue
Block a user