saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-06-17 21:15:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Correct Convert Button Visuals and Make Consistent Code for EML-to-PDF (#3707)

Browse Source 
# Description of Changes
### Before:

![image](https://github.com/user-attachments/assets/cbf3b0e5-ecb4-4959-9756-cb954858e08a)
### After:

![image](https://github.com/user-attachments/assets/d7d5a1bb-9f07-474f-b180-f8b0b15bfe62)

As I was reviewing my translation I noticed that there is a problem how
Convert button is being displayed as "Convert", after further review I
realized Eml-To-pdf.html was a bit inconsistent with other HTMLs.

This PR updates the `eml-to-pdf.html`, and addresses consistency issues,
as well the visual Convert button problem.

Updated the `eml-to-pdf.html` template to improve its structure,
styling, and functionality. The changes include enhancements to the
layout, better handling of dynamic text, and minor code cleanups.

### Layout and Styling Updates:
* Added a new block (`th:block`) to include a common game fragment and
adjusted the layout by removing extra `<br>` tags and modifying the
container structure for better alignment.
* Updated the class of a `<div>` element to include `bg-card` for
improved styling.

### Functional Improvements:
* Refactored the JavaScript to use a pre-defined `submitText` variable
for dynamic button text, improving maintainability.

### Code Cleanup:
* Removed unnecessary blank lines and improved the indentation for
better readability.

---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Balázs Szücs 2025-06-16 19:03:31 +02:00 committed by GitHub
parent f9559151d8
commit 9bacebf2e9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 56 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
stirling-pdf/src/main/resources/templates/convert/eml-to-pdf.html
View File

@ -7,20 +7,22 @@
</head>
<body>
<th:block th:insert="~{fragments/common :: game}"></th:block>
<div id="page-container">
<div id="content-wrap">
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
<div class="container py-4">
<div class="mt-4"></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card shadow-sm">
<div class="card-body">
<div class="col-md-6 bg-card">
<div class="tool-header">
<span class="material-symbols-rounded tool-header-icon convertto">email</span>
<span class="tool-header-text" th:text="#{EMLToPDF.header}"></span>
</div>
<p th:text="#{processTimeWarning}"></p>
<form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/eml/pdf'}" class="mt-4">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='.eml,message/rfc822')}">
<div
th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='.eml,message/rfc822')}">
</div>
<div class="form-check mb-3">
@ -39,8 +41,6 @@
<label for="maxAttachmentSizeMB" class="form-label" th:text="#{EMLToPDF.maxAttachmentSize}"></label>
<input type="number" class="form-control" id="maxAttachmentSizeMB" name="maxAttachmentSizeMB" value="10" min="1" max="100">
</div>
</div>
<div class="mb-4">
@ -59,10 +59,12 @@
</div>
</div>
<div>
<br />
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{EMLToPDF.submit}"></button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@ -75,11 +77,13 @@
const downloadHtml = document.getElementById('downloadHtml');
const pdfOnlyOptions = document.getElementById('pdfOnlyOptions');
const submitBtn = document.getElementById('submitBtn');
const submitText = /*[[#{EMLToPDF.submit}]]*/ 'Convert to PDF';
const downloadHtmlText = 'Download HTML intermediate file instead of PDF';
function updateFormState() {
if (pdfOnlyOptions && submitBtn) {
pdfOnlyOptions.style.display = downloadHtml.checked ? 'none' : 'block';
submitBtn.textContent = downloadHtml.checked ? 'Download HTML' : '[[#{EMLToPDF.submit}]]';
submitBtn.textContent = downloadHtml.checked ? downloadHtmlText : submitText;
}
}