Skip to content

Commit bd72cf3

Browse files
AdamNatadAdamNatad
authored
Update PageSizeDialog.html
1 parent 98ac6be commit bd72cf3

1 file changed

Lines changed: 190 additions & 45 deletions

File tree

‎AppScript/PageSizeDialog.html‎

Lines changed: 190 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,9 @@
3939
background-color: rgba(255, 255, 255, 0.85);
4040
display: flex;
4141
justify-content: center;
42-
align-items: flex-end;
43-
padding-bottom: 480px;
42+
align-items: center;
43+
//align-items: flex-end;
44+
//padding-bottom: 480px;
4445
z-index: 9999;
4546
}
4647
html, body {
@@ -201,6 +202,99 @@
201202
#notebottom li {
202203
margin-bottom: 6px;
203204
}
205+
.preset-row {
206+
display: flex;
207+
gap: 12px;
208+
justify-content: space-between;
209+
flex-wrap: wrap;
210+
}
211+
.preset-wrapper,
212+
.unit-wrapper {
213+
flex: 1;
214+
}
215+
.preset-wrapper label,
216+
.unit-wrapper label {
217+
display: block;
218+
font-weight: 500;
219+
margin-bottom: 6px;
220+
}
221+
.preset-select,
222+
.unit-select {
223+
width: 100%;
224+
padding: 8px 12px;
225+
font-size: 14px;
226+
color: #202124;
227+
background-color: #fff;
228+
border: 1px solid #dadce0;
229+
border-radius: 4px;
230+
outline: none;
231+
appearance: none;
232+
-webkit-appearance: none;
233+
-moz-appearance: none;
234+
transition: border 0.2s ease, box-shadow 0.2s ease;
235+
}
236+
.preset-select:focus,
237+
.unit-select:focus {
238+
border-color: #1a73e8;
239+
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.25);
240+
}
241+
.dimension-row {
242+
display: flex;
243+
gap: 12px;
244+
justify-content: space-between;
245+
}
246+
.dimension-row .width-field,
247+
.dimension-row .height-field {
248+
flex: 1;
249+
}
250+
.dimension-row label {
251+
display: block;
252+
}
253+
.dimension-row input {
254+
width: 100%;
255+
padding: 8px;
256+
font-size: 14px;
257+
border: 1px solid #dadce0;
258+
border-radius: 4px;
259+
transition: border 0.2s ease, box-shadow 0.2s ease;
260+
}
261+
.dimension-row input:focus {
262+
border: 2px solid #1a73e8;
263+
box-shadow: 0 0 0 1px #1a73e8;
264+
outline: none;
265+
}
266+
.grid-2x2 {
267+
display: grid;
268+
grid-template-columns: 1fr 1fr;
269+
gap: 12px;
270+
}
271+
#width:disabled,
272+
#height:disabled,
273+
#unit:disabled {
274+
background-color: #f1f3f4;
275+
color: #5f6368;
276+
cursor: not-allowed;
277+
}
278+
#snackbar {
279+
display: none;
280+
position: fixed;
281+
bottom: 32px;
282+
left: 50%;
283+
transform: translateX(-50%);
284+
background-color: #d93025;
285+
color: white;
286+
padding: 12px 20px;
287+
border-radius: 4px;
288+
font-size: 14px;
289+
z-index: 9999;
290+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
291+
transition: opacity 0.3s ease;
292+
opacity: 0;
293+
white-space: nowrap;
294+
max-width: 90vw;
295+
overflow: hidden;
296+
text-overflow: ellipsis;
297+
}
204298
</style>
205299
<script>
206300
window.addEventListener('DOMContentLoaded', () => {
@@ -230,49 +324,72 @@
230324
</button>
231325
</div>
232326

233-
<label>Trim Size (Presets - Paperback & Hardcover):
234-
<select id="preset" onchange="applyPreset()">
235-
<option value="">-- Select Preset --</option>
236-
<option value="custom">Custom Size</option>
237-
<option value="8.5x11">Google Default</option>
238-
<option value="5x8">5 x 8 in</option>
239-
<option value="5.25x8">5.25 x 8 in</option>
240-
<option value="5.5x8.5">5.5 x 8.5 in</option>
241-
<option value="6x9">6 x 9 in</option>
242-
<option value="5.06x7.81">5.06 x 7.81 in</option>
243-
<option value="6.14x9.21">6.14 x 9.21 in</option>
244-
<option value="6.69x9.61">6.69 x 9.61 in</option>
245-
<option value="7x10">7 x 10 in</option>
246-
<option value="7.44x9.69">7.44 x 9.69 in</option>
247-
<option value="7.5x9.25">7.5 x 9.25 in</option>
248-
<option value="8x10">8 x 10 in</option>
249-
<option value="8.27x11.69">8.27 x 11.69 in</option>
250-
<option value="8.25x6">8.25 x 6 in</option>
251-
<option value="8.25x8.25">8.25 x 8.25 in</option>
252-
<option value="8.25x11">8.25 x 11 in</option>
253-
<option value="8.5x8.5">8.5 x 8.5 in</option>
254-
<option value="8.5x11">8.5 x 11 in</option>
255-
</select>
256-
</label>
257-
258-
<label>Width: <input type="number" step="0.01" id="width" required></label>
259-
<label>Height: <input type="number" step="0.01" id="height" required></label>
327+
<div class="preset-row">
328+
<div class="preset-wrapper">
329+
<label for="preset">Trim Size - Presets:</label>
330+
<select id="preset" class="preset-select" onchange="applyPreset()">
331+
<option value="">-- Select Preset --</option>
332+
<option value="custom">Custom Size</option>
333+
<option value="8.5x11">Google Default</option>
334+
<option value="5x8">5 x 8 in</option>
335+
<option value="5.25x8">5.25 x 8 in</option>
336+
<option value="5.5x8.5">5.5 x 8.5 in</option>
337+
<option value="6x9">6 x 9 in</option>
338+
<option value="5.06x7.81">5.06 x 7.81 in</option>
339+
<option value="6.14x9.21">6.14 x 9.21 in</option>
340+
<option value="6.69x9.61">6.69 x 9.61 in</option>
341+
<option value="7x10">7 x 10 in</option>
342+
<option value="7.44x9.69">7.44 x 9.69 in</option>
343+
<option value="7.5x9.25">7.5 x 9.25 in</option>
344+
<option value="8x10">8 x 10 in</option>
345+
<option value="8.27x11.69">8.27 x 11.69 in</option>
346+
<option value="8.25x6">8.25 x 6 in</option>
347+
<option value="8.25x8.25">8.25 x 8.25 in</option>
348+
<option value="8.25x11">8.25 x 11 in</option>
349+
<option value="8.5x8.5">8.5 x 8.5 in</option>
350+
<option value="8.5x11">8.5 x 11 in</option>
351+
</select>
352+
</div>
260353

261-
<label>Unit:
262-
<select id="unit">
263-
<option value="in">Inches</option>
264-
<option value="cm">Centimeters</option>
265-
</select>
266-
</label>
354+
<div class="unit-wrapper">
355+
<label for="unit">Unit:</label>
356+
<select id="unit" class="unit-select">
357+
<option value="in">Inches</option>
358+
<option value="cm">Centimeters</option>
359+
</select>
360+
</div>
361+
</div>
267362

363+
<div class="dimension-row">
364+
<label class="width-field">
365+
Width:
366+
<input type="number" step="0.01" id="width" required>
367+
</label>
368+
<label class="height-field">
369+
Height:
370+
<input type="number" step="0.01" id="height" required>
371+
</label>
372+
</div>
373+
268374
<hr>
269375

270-
<label>Top Margin: <input type="number" step="0.01" id="marginTop" value="1.0" required></label>
271-
<label>Bottom Margin: <input type="number" step="0.01" id="marginBottom" value="1.0" required></label>
272-
<label>Left Margin: <input type="number" step="0.01" id="marginLeft" value="1.0" required></label>
273-
<label>Right Margin: <input type="number" step="0.01" id="marginRight" value="1.0" required></label>
376+
<div class="grid-2x2">
377+
<label>Top Margin:
378+
<input type="number" step="0.01" id="marginTop" value="1.0" required>
379+
</label>
380+
<label>Bottom Margin:
381+
<input type="number" step="0.01" id="marginBottom" value="1.0" required>
382+
</label>
383+
<label>Left Margin:
384+
<input type="number" step="0.01" id="marginLeft" value="1.0" required>
385+
</label>
386+
<label>Right Margin:
387+
<input type="number" step="0.01" id="marginRight" value="1.0" required>
388+
</label>
389+
</div>
274390

275391
<button type="button" onclick="submitForm()">Apply Page Settings</button>
392+
<div id="snackbar"></div>
276393

277394
<div id="notebottom">
278395
<p><strong>EXPORT OR DOWNLOAD NOTE:</strong> Do not export or download directly to PDF from Google Docs as this may cause incorrect page dimensions. Instead, export your document as a <strong>.docx</strong> file by selecting <em>File → Download → Microsoft Word (.docx)</em>. Open the file in MS Word, verify the page size via <em>Layout → Size → More Paper Sizes…</em>, and then convert it to PDF.</p>
@@ -306,14 +423,42 @@
306423
};
307424

308425
function applyPreset() {
309-
const selected = document.getElementById('preset').value;
310-
if (presets[selected]) {
311-
document.getElementById('width').value = presets[selected].width;
312-
document.getElementById('height').value = presets[selected].height;
313-
document.getElementById('unit').value = 'in';
426+
const preset = document.getElementById('preset').value;
427+
const widthInput = document.getElementById('width');
428+
const heightInput = document.getElementById('height');
429+
const unitSelect = document.getElementById('unit');
430+
431+
if (presets[preset]) {
432+
widthInput.value = presets[preset].width;
433+
heightInput.value = presets[preset].height;
434+
unitSelect.value = 'in';
435+
436+
// Disable inputs
437+
widthInput.disabled = true;
438+
heightInput.disabled = true;
439+
unitSelect.disabled = true;
440+
} else {
441+
// Re-enable inputs for custom/manual sizes
442+
widthInput.disabled = false;
443+
heightInput.disabled = false;
444+
unitSelect.disabled = false;
314445
}
315446
}
316447

448+
function showSnackbar(message) {
449+
const bar = document.getElementById('snackbar');
450+
bar.textContent = message;
451+
bar.style.display = 'block';
452+
bar.style.opacity = '1';
453+
454+
setTimeout(() => {
455+
bar.style.opacity = '0';
456+
setTimeout(() => {
457+
bar.style.display = 'none';
458+
}, 300);
459+
}, 3000);
460+
}
461+
317462
function submitForm() {
318463
const width = parseFloat(document.getElementById('width').value);
319464
const height = parseFloat(document.getElementById('height').value);
@@ -328,7 +473,7 @@
328473
isNaN(marginTop) || isNaN(marginBottom) ||
329474
isNaN(marginLeft) || isNaN(marginRight)
330475
) {
331-
alert('Please enter valid values in all fields.');
476+
showSnackbar('⚠️ Please enter valid values in all fields.');
332477
return;
333478
}
334479

0 commit comments

Comments
 (0)