AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve PDF reset logic and modernize UI styling

Browse Source 
Refactor PDF reset to restore original document state using a new OriginalPdfBase64 variable and async logic. Redesign app.css with a lighter color palette, CSS variables, and updated styles for buttons, overlays, modals, and inputs for a cleaner, more accessible UI. Adjust signature and text overlay colors in pdfInterop.js for better contrast and consistency.
This commit is contained in:
OlgunR
2025-12-09 10:26:01 +01:00
parent ab3e7fb4e9
commit cd85b4fffc
3 changed files with 129 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
EnvelopeGenerator.ReceiverUIBlazor/Pages/Index.razor
View File

@@ -84,6 +84,7 @@
private ElementReference OverlayRef; private ElementReference OverlayRef;
private string? PdfBase64; private string? PdfBase64;
private string? OriginalPdfBase64;
private int PageIndex; private int PageIndex;
private int PageCount; private int PageCount;
private double ViewportWidthPx = 800; private double ViewportWidthPx = 800;
@@ -143,6 +144,7 @@
using var ms = new MemoryStream(); using var ms = new MemoryStream();
await stream.CopyToAsync(ms); await stream.CopyToAsync(ms);
PdfBase64 = Convert.ToBase64String(ms.ToArray()); PdfBase64 = Convert.ToBase64String(ms.ToArray());
OriginalPdfBase64 = PdfBase64;
// Show the canvas before we start rendering // Show the canvas before we start rendering
await InvokeAsync(StateHasChanged); await InvokeAsync(StateHasChanged);
@@ -186,13 +188,28 @@
} }
} }
private void Reset() private async Task Reset()
{ {
PdfBase64 = null; ErrorMessage = null;
PageIndex = 0;
PageCount = 0;
ViewportHeightPx = 0;
CloseOverlays(); CloseOverlays();
ShowSignaturePadModal = false;
OverlayXpx = 20;
OverlayYpx = 20;
OverlayWidthPx = 200;
OverlayHeightPx = 80;
TextValue = "Text";
if (string.IsNullOrWhiteSpace(OriginalPdfBase64))
{
return;
}
PdfBase64 = OriginalPdfBase64;
PageIndex = 0;
var result = await JS.InvokeAsync<RenderResult>("pdfInterop.loadPdf", PdfBase64);
PageCount = result.Pages;
await RenderPage();
} }
private void CloseOverlays() private void CloseOverlays()

174
EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css
View File

@@ -1,114 +1,143 @@
:root {
--bg: #f6f7fb;
--bg-strong: #eef2fb;
--text: #0f172a;
--muted: #475569;
--border: #e2e8f0;
--shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
--card: #ffffff;
--accent: #2563eb;
--accent-strong: #1d4ed8;
--accent-soft: #e8efff;
--danger: #dc2626;
}
body { body {
margin: 0; margin: 0;
font-family: "Segoe UI", Arial, sans-serif; font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
background: #0f172a; background: radial-gradient(120% 120% at 10% 20%, #ffffff 0%, #f3f6ff 45%, #eef2fb 80%);
color: #e2e8f0; color: var(--text);
line-height: 1.5;
} }
.main-layout { .main-layout {
min-height: 100vh; min-height: 100vh;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0b1220 100%);
} }
.top-bar { .top-bar {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 12px 20px; padding: 14px 24px;
background: rgba(255, 255, 255, 0.04); background: var(--card);
border-bottom: 1px solid rgba(226, 232, 240, 0.08); border-bottom: 1px solid var(--border);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
} }
.top-bar .brand { .top-bar .brand {
font-weight: 700; font-weight: 800;
letter-spacing: 0.5px; letter-spacing: 0.4px;
} }
.content { .content {
padding: 24px 32px; padding: 28px 32px 40px;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
} }
h1 { h1 {
margin-top: 0; margin: 0 0 10px;
margin-bottom: 8px; letter-spacing: 0.2px;
letter-spacing: 0.3px;
} }
.controls { .controls {
display: flex; display: flex;
gap: 8px; gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
margin-bottom: 12px; margin-bottom: 14px;
justify-content: center;
} }
.btn { .btn {
background: #22d3ee; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
color: #0f172a; color: #ffffff;
border: none; border: none;
padding: 10px 14px; padding: 10px 14px;
border-radius: 8px; border-radius: 10px;
font-weight: 600; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: transform 120ms ease, box-shadow 120ms ease; transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.22);
} }
.btn:hover:not(:disabled) { .btn:hover:not(:disabled) {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(34, 211, 238, 0.25); filter: brightness(1.02);
} }
.btn:disabled { .btn:disabled {
opacity: 0.4; opacity: 0.45;
cursor: not-allowed; cursor: not-allowed;
box-shadow: none;
} }
.btn.secondary { .btn.secondary {
background: rgba(226, 232, 240, 0.12); background: var(--accent-soft);
color: #e2e8f0; color: var(--accent-strong);
border: 1px solid rgba(226, 232, 240, 0.2); border: 1px solid var(--border);
box-shadow: none;
} }
.drop-hint { .drop-hint {
padding: 24px; padding: 26px;
border: 1px dashed rgba(226, 232, 240, 0.3); border: 1px dashed var(--border);
border-radius: 12px; border-radius: 14px;
text-align: center; text-align: center;
color: rgba(226, 232, 240, 0.8); color: var(--muted);
background: #ffffff;
width: min(1100px, 100%);
margin: 0 auto;
} }
.error-banner { .error-banner {
margin-top: 8px; margin-top: 10px;
padding: 10px 12px; padding: 12px 14px;
border-radius: 8px; border-radius: 10px;
background: rgba(239, 68, 68, 0.12); background: #fff1f2;
border: 1px solid rgba(239, 68, 68, 0.3); border: 1px solid #fecdd3;
color: #fecdd3; color: #b91c1c;
} }
.document-shell { .document-shell {
position: relative; position: relative;
margin-top: 12px; margin-top: 14px;
border-radius: 12px; border-radius: 14px;
overflow: hidden; overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); box-shadow: var(--shadow);
background: #0b1220; background: var(--card);
border: 1px solid rgba(226, 232, 240, 0.08); border: 1px solid var(--border);
margin-left: auto;
margin-right: auto;
} }
canvas { canvas {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
background: #111827; background: #ffffff;
} }
.overlay { .overlay {
position: absolute; position: absolute;
border: 2px solid #22d3ee; border: 1px dashed var(--accent);
border-radius: 8px; border-radius: 10px;
padding: 6px; padding: 8px;
background: rgba(15, 23, 42, 0.9); background: rgba(255, 255, 255, 0.96);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); box-shadow: 0 12px 30px rgba(37, 99, 235, 0.15);
user-select: none; user-select: none;
touch-action: none; touch-action: none;
} }
@@ -121,36 +150,39 @@ canvas {
.overlay-controls { .overlay-controls {
position: absolute; position: absolute;
top: -36px; top: -44px;
right: 0; right: 0;
display: flex; display: flex;
gap: 4px; gap: 6px;
} }
.overlay-btn { .overlay-btn {
background: #0f172a; background: #ffffff;
color: #22d3ee; color: var(--accent-strong);
border: 1px solid rgba(34, 211, 238, 0.4); border: 1px solid var(--accent);
border-radius: 6px; border-radius: 8px;
padding: 4px 8px; padding: 6px 10px;
cursor: pointer; cursor: pointer;
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.15);
} }
.overlay-input { .overlay-input {
border: none; border: 1px solid var(--border);
background: transparent; background: #ffffff;
color: #e2e8f0; color: var(--text);
font-size: 18px; font-size: 18px;
padding: 4px; padding: 6px 8px;
min-width: 160px; min-width: 180px;
border-radius: 8px;
outline: none; outline: none;
} }
.paging { .paging {
margin-top: 12px; margin-top: 14px;
display: flex; display: flex;
gap: 10px; gap: 10px;
align-items: center; align-items: center;
color: var(--muted);
} }
.modal-backdrop { .modal-backdrop {
@@ -159,7 +191,8 @@ canvas {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.65); background: rgba(15, 23, 42, 0.35);
backdrop-filter: blur(3px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -167,25 +200,26 @@ canvas {
} }
.modal { .modal {
background: #0f172a; background: var(--card);
border: 1px solid rgba(226, 232, 240, 0.08); border: 1px solid var(--border);
border-radius: 12px; border-radius: 14px;
padding: 16px; padding: 18px;
min-width: 760px; min-width: 760px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); box-shadow: var(--shadow);
} }
.modal-row { .modal-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 12px;
margin-top: 10px; margin-top: 12px;
color: var(--muted);
} }
.modal canvas { .modal canvas {
background: #0b1220; background: #ffffff;
border: 1px solid rgba(226, 232, 240, 0.1); border: 1px solid var(--border);
border-radius: 8px; border-radius: 10px;
} }
.spacer { .spacer {

6
EnvelopeGenerator.ReceiverUIBlazor/wwwroot/js/pdfInterop.js
View File

@@ -175,7 +175,7 @@
x, x,
y: y - 14 * scaleY, y: y - 14 * scaleY,
size: 14 * scaleX, size: 14 * scaleX,
color: PDFLib.rgb(0.07, 0.54, 0.26), color: PDFLib.rgb(0.11, 0.25, 0.56),
}); });
} }
@@ -209,7 +209,7 @@
x, x,
y, y,
size: fontSize * scaleX, size: fontSize * scaleX,
color: PDFLib.rgb(0.9, 0.9, 0.9), color: PDFLib.rgb(0.2, 0.23, 0.28),
}); });
const updatedBase64 = await pdfDoc.saveAsBase64({ dataUri: false }); const updatedBase64 = await pdfDoc.saveAsBase64({ dataUri: false });
@@ -225,7 +225,7 @@
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
ctx.lineWidth = 2; ctx.lineWidth = 2;
ctx.lineCap = 'round'; ctx.lineCap = 'round';
ctx.strokeStyle = '#22d3ee'; ctx.strokeStyle = '#1c3d8f';
const padState = { const padState = {
drawing: false, drawing: false,