Repository: pretix/pretix
Pull request #4959: PDF-Editor: improve UI for page-size and background PDF
Author: login: wiffbi
Labels: name: cla-signed
Created: 2025-03-28T10:41:27Z | Merged: 2025-03-31T10:11:50Z

This PR tries to improve the usability of the page-size controls in the PDF-editor and better distinguish between custom PDF background (which also defines the page-size) and manual page-size with new, empty background.

Before:

![Bildschirmfoto 2025-03-28 um 11 40 50](https://github.com/user-attachments/assets/67356c97-d155-4273-bfd4-460c6dc85598)

After:

![Bildschirmfoto 2025-03-28 um 11 39 02](https://github.com/user-attachments/assets/9eb96ee0-54cf-4007-a232-543f0c524608)



Diff:
diff --git a/src/pretix/control/templates/pretixcontrol/pdf/index.html b/src/pretix/control/templates/pretixcontrol/pdf/index.html
index 1424ca3ffa6..413bb28076a 100644
--- a/src/pretix/control/templates/pretixcontrol/pdf/index.html
+++ b/src/pretix/control/templates/pretixcontrol/pdf/index.html
@@ -182,8 +182,54 @@ <h2>{% trans "Welcome to the PDF ticket editor!" %}</h2>
                             </div>
                         </div>
                     {% endif %}
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label for="pdf-info-locale">{% trans "Preferred language" %}</label><br>
+                            <select class="form-control" id="pdf-info-locale">
+                                <option value="">{% trans "Order locale" %}</option>
+                                {% for l in locales %}
+                                    <option value="{{ l.0 }}">{{ l.1 }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+
                     <div class="row control-group pdf-info">
                         <hr/>
+                        <div class="col-sm-12">
+                            <label>{% trans "Upload PDF as background" %}</label>
+                            <p class="text-muted">
+                                {% blocktrans trimmed %}
+                                    You can upload a PDF to use as a custom background.
+                                    The paper size will match the PDF.
+                                {% endblocktrans %}
+                            </p>
+                            <p>
+                                <span class="btn btn-default fileinput-button background-button btn-block">
+                                    <i class="fa fa-upload"></i>
+                                    <span>{% trans "Upload PDF as background" %}</span>
+                                    <input id="fileupload" type="file" name="background" accept="application/pdf">
+                                </span>
+                            </p>
+                            <p class="text-center">
+                                <a class="btn btn-link background-download-button" href="{{ pdf }}" target="_blank">
+                                    <i class="fa fa-download"></i>
+                                    <span class="small">{% trans "Download current background" %}</span>
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label>{% trans "Or choose custom paper size" %}</label>
+                            <p class="text-muted">
+                                {% blocktrans trimmed %}
+                                    To manually change the paper size, you need to create a new, empty background.
+                                {% endblocktrans %}
+                            </p>
+                        </div>
+                    </div>
+                    <div class="row control-group pdf-info">
                         <div class="col-sm-6">
                             <label for="pdf-info-width">{% trans "Width (mm)" %}</label><br>
                             <input type="number" id="pdf-info-width" class="input-block-level form-control">
@@ -195,45 +241,12 @@ <h2>{% trans "Welcome to the PDF ticket editor!" %}</h2>
                     </div>
                     <div class="row control-group pdf-info">
                         <div class="col-sm-12">
-                            <label>{% trans "Background PDF" %}</label><br>
                             <p>
-                                <button class="btn btn-default background-button" id="pdf-empty">
+                                <button class="btn btn-default background-button btn-block" id="pdf-empty">
+                                    <i class="fa fa-file-o"></i>
                                     {% trans "Create empty background" %}
                                 </button>
                             </p>
-                            <span class="btn btn-default fileinput-button background-button">
-                                <i class="fa fa-upload"></i>
-                                <span>{% trans "Upload custom background" %}</span>
-                                <input id="fileupload" type="file" name="background" accept="application/pdf">
-                            </span>
-                        </div>
-                        <div class="col-sm-12 help-inline">
-                            <p>
-                                {% blocktrans trimmed %}
-                                    After you changed the page size, you need to create a new empty background. If you
-                                    want to use a custom background, it already needs to have the correct size.
-                                {% endblocktrans %}
-                            </p>
-                        </div>
-                        <div class="col-sm-12">
-                            <p>
-                                <a class="btn btn-default background-download-button" href="{{ pdf }}" target="_blank">
-                                    <i class="fa fa-download"></i>
-                                    <span>{% trans "Download current background" %}</span>
-                                </a>
-                            </p>
-                        </div>
-                    </div>
-                    <div class="row control-group pdf-info">
-                        <hr/>
-                        <div class="col-sm-12">
-                            <label for="pdf-info-locale">{% trans "Preferred language" %}</label><br>
-                            <select class="form-control" id="pdf-info-locale">
-                                <option value="">{% trans "Order locale" %}</option>
-                                {% for l in locales %}
-                                    <option value="{{ l.0 }}">{{ l.1 }}</option>
-                                {% endfor %}
-                            </select>
                         </div>
                     </div>
                     <div class="row control-group poweredby">
diff --git a/src/pretix/static/pretixcontrol/js/ui/editor.js b/src/pretix/static/pretixcontrol/js/ui/editor.js
index 5df1b3dda44..fa9914b5b30 100644
--- a/src/pretix/static/pretixcontrol/js/ui/editor.js
+++ b/src/pretix/static/pretixcontrol/js/ui/editor.js
@@ -922,7 +922,6 @@ var editor = {
             $("#toolbox-heading").text(gettext("Ticket design"));
             $("#pdf-info-width").val(editor._px2mm(editor.pdf_viewport.width).toFixed(2));
             $("#pdf-info-height").val(editor._px2mm(editor.pdf_viewport.height).toFixed(2));
-            editor._paper_size_warning();
         }
         editor._update_toolbox_values();
     },


Reviews:
user: login: leiascyr
body: wording suggestions (format vs size)
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-28T11:47:18Z
user: login: raphaelm
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-28T15:14:13Z
user: login: raphaelm
body: It is absolutely an improvement.

What I still don't like is how much space it takes. Even on a 1080p screen (minus some system toolbars), I see neither all of the object types nor the save button above the fold. I wonder if we should hide some of the actions behind buttons or an expandable area, because page size and background are important, but not something you change every day.

![Screen Shot 2025-03-28 at 16 19 52](https://github.com/user-attachments/assets/71edf60f-c526-41ea-b3db-40085b13b8a6)

state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-28T15:22:44Z

Review comments:
diff_hunk: @@ -182,8 +182,54 @@ <h2>{% trans "Welcome to the PDF ticket editor!" %}</h2>
                             </div>
                         </div>
                     {% endif %}
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label for="pdf-info-locale">{% trans "Preferred language" %}</label><br>
+                            <select class="form-control" id="pdf-info-locale">
+                                <option value="">{% trans "Order locale" %}</option>
+                                {% for l in locales %}
+                                    <option value="{{ l.0 }}">{{ l.1 }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+
                     <div class="row control-group pdf-info">
                         <hr/>
+                        <div class="col-sm-12">
+                            <label>{% trans "Upload PDF as background" %}</label>
+                            <p class="text-muted">
+                                {% blocktrans trimmed %}
+                                    You can upload a PDF to use as a custom background.
+                                    The paper format will match the PDF.
path: src/pretix/control/templates/pretixcontrol/pdf/index.html
user: login: leiascyr
body: ```suggestion
                                    The paper size will match the PDF.
```
created_at: 2025-03-28T11:41:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -182,8 +182,54 @@ <h2>{% trans "Welcome to the PDF ticket editor!" %}</h2>
                             </div>
                         </div>
                     {% endif %}
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label for="pdf-info-locale">{% trans "Preferred language" %}</label><br>
+                            <select class="form-control" id="pdf-info-locale">
+                                <option value="">{% trans "Order locale" %}</option>
+                                {% for l in locales %}
+                                    <option value="{{ l.0 }}">{{ l.1 }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+
                     <div class="row control-group pdf-info">
                         <hr/>
+                        <div class="col-sm-12">
+                            <label>{% trans "Upload PDF as background" %}</label>
+                            <p class="text-muted">
+                                {% blocktrans trimmed %}
+                                    You can upload a PDF to use as a custom background.
+                                    The paper format will match the PDF.
path: src/pretix/control/templates/pretixcontrol/pdf/index.html
user: login: leiascyr
body: ```suggestion
                                    The ticket size will match the PDF.
```
created_at: 2025-03-28T11:41:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -182,8 +182,54 @@ <h2>{% trans "Welcome to the PDF ticket editor!" %}</h2>
                             </div>
                         </div>
                     {% endif %}
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label for="pdf-info-locale">{% trans "Preferred language" %}</label><br>
+                            <select class="form-control" id="pdf-info-locale">
+                                <option value="">{% trans "Order locale" %}</option>
+                                {% for l in locales %}
+                                    <option value="{{ l.0 }}">{{ l.1 }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+
                     <div class="row control-group pdf-info">
                         <hr/>
+                        <div class="col-sm-12">
+                            <label>{% trans "Upload PDF as background" %}</label>
+                            <p class="text-muted">
+                                {% blocktrans trimmed %}
+                                    You can upload a PDF to use as a custom background.
+                                    The paper format will match the PDF.
+                                {% endblocktrans %}
+                            </p>
+                            <p>
+                                <span class="btn btn-default fileinput-button background-button btn-block">
+                                    <i class="fa fa-upload"></i>
+                                    <span>{% trans "Upload PDF as background" %}</span>
+                                    <input id="fileupload" type="file" name="background" accept="application/pdf">
+                                </span>
+                            </p>
+                            <p class="text-center">
+                                <a class="btn btn-link background-download-button" href="{{ pdf }}" target="_blank">
+                                    <i class="fa fa-download"></i>
+                                    <span class="small">{% trans "Download current background" %}</span>
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label>{% trans "Or create custom paper format" %}</label>
path: src/pretix/control/templates/pretixcontrol/pdf/index.html
user: login: leiascyr
body: ```suggestion
                            <label>{% trans "Or create custom paper size" %}</label>
```
created_at: 2025-03-28T11:42:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -182,8 +182,54 @@ <h2>{% trans "Welcome to the PDF ticket editor!" %}</h2>
                             </div>
                         </div>
                     {% endif %}
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label for="pdf-info-locale">{% trans "Preferred language" %}</label><br>
+                            <select class="form-control" id="pdf-info-locale">
+                                <option value="">{% trans "Order locale" %}</option>
+                                {% for l in locales %}
+                                    <option value="{{ l.0 }}">{{ l.1 }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+
                     <div class="row control-group pdf-info">
                         <hr/>
+                        <div class="col-sm-12">
+                            <label>{% trans "Upload PDF as background" %}</label>
+                            <p class="text-muted">
+                                {% blocktrans trimmed %}
+                                    You can upload a PDF to use as a custom background.
+                                    The paper format will match the PDF.
+                                {% endblocktrans %}
+                            </p>
+                            <p>
+                                <span class="btn btn-default fileinput-button background-button btn-block">
+                                    <i class="fa fa-upload"></i>
+                                    <span>{% trans "Upload PDF as background" %}</span>
+                                    <input id="fileupload" type="file" name="background" accept="application/pdf">
+                                </span>
+                            </p>
+                            <p class="text-center">
+                                <a class="btn btn-link background-download-button" href="{{ pdf }}" target="_blank">
+                                    <i class="fa fa-download"></i>
+                                    <span class="small">{% trans "Download current background" %}</span>
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label>{% trans "Or create custom paper format" %}</label>
+                            <p class="text-muted">
+                                {% blocktrans trimmed %}
+                                    To manually change the paper format, you must create a new, empty background.
path: src/pretix/control/templates/pretixcontrol/pdf/index.html
user: login: leiascyr
body: ```suggestion
                                    To manually change the paper format, you need to create a new, empty background.
```
created_at: 2025-03-28T11:42:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -182,8 +182,54 @@ <h2>{% trans "Welcome to the PDF ticket editor!" %}</h2>
                             </div>
                         </div>
                     {% endif %}
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label for="pdf-info-locale">{% trans "Preferred language" %}</label><br>
+                            <select class="form-control" id="pdf-info-locale">
+                                <option value="">{% trans "Order locale" %}</option>
+                                {% for l in locales %}
+                                    <option value="{{ l.0 }}">{{ l.1 }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+
                     <div class="row control-group pdf-info">
                         <hr/>
+                        <div class="col-sm-12">
+                            <label>{% trans "Upload PDF as background" %}</label>
+                            <p class="text-muted">
+                                {% blocktrans trimmed %}
+                                    You can upload a PDF to use as a custom background.
+                                    The paper format will match the PDF.
+                                {% endblocktrans %}
+                            </p>
+                            <p>
+                                <span class="btn btn-default fileinput-button background-button btn-block">
+                                    <i class="fa fa-upload"></i>
+                                    <span>{% trans "Upload PDF as background" %}</span>
+                                    <input id="fileupload" type="file" name="background" accept="application/pdf">
+                                </span>
+                            </p>
+                            <p class="text-center">
+                                <a class="btn btn-link background-download-button" href="{{ pdf }}" target="_blank">
+                                    <i class="fa fa-download"></i>
+                                    <span class="small">{% trans "Download current background" %}</span>
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label>{% trans "Or create custom paper format" %}</label>
+                            <p class="text-muted">
+                                {% blocktrans trimmed %}
+                                    To manually change the paper format, you must create a new, empty background.
path: src/pretix/control/templates/pretixcontrol/pdf/index.html
user: login: leiascyr
body: ```suggestion
                                    To manually change the paper size, you need to create a new, empty background.
```
created_at: 2025-03-28T11:43:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -182,8 +182,54 @@ <h2>{% trans "Welcome to the PDF ticket editor!" %}</h2>
                             </div>
                         </div>
                     {% endif %}
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label for="pdf-info-locale">{% trans "Preferred language" %}</label><br>
+                            <select class="form-control" id="pdf-info-locale">
+                                <option value="">{% trans "Order locale" %}</option>
+                                {% for l in locales %}
+                                    <option value="{{ l.0 }}">{{ l.1 }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+
                     <div class="row control-group pdf-info">
                         <hr/>
+                        <div class="col-sm-12">
+                            <label>{% trans "Upload PDF as background" %}</label>
+                            <p class="text-muted">
+                                {% blocktrans trimmed %}
+                                    You can upload a PDF to use as a custom background.
+                                    The paper format will match the PDF.
+                                {% endblocktrans %}
+                            </p>
+                            <p>
+                                <span class="btn btn-default fileinput-button background-button btn-block">
+                                    <i class="fa fa-upload"></i>
+                                    <span>{% trans "Upload PDF as background" %}</span>
+                                    <input id="fileupload" type="file" name="background" accept="application/pdf">
+                                </span>
+                            </p>
+                            <p class="text-center">
+                                <a class="btn btn-link background-download-button" href="{{ pdf }}" target="_blank">
+                                    <i class="fa fa-download"></i>
+                                    <span class="small">{% trans "Download current background" %}</span>
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label>{% trans "Or create custom paper format" %}</label>
path: src/pretix/control/templates/pretixcontrol/pdf/index.html
user: login: leiascyr
body: ```suggestion
                            <label>{% trans "Or create custom page size" %}</label>
```
created_at: 2025-03-28T11:46:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -182,8 +182,54 @@ <h2>{% trans "Welcome to the PDF ticket editor!" %}</h2>
                             </div>
                         </div>
                     {% endif %}
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label for="pdf-info-locale">{% trans "Preferred language" %}</label><br>
+                            <select class="form-control" id="pdf-info-locale">
+                                <option value="">{% trans "Order locale" %}</option>
+                                {% for l in locales %}
+                                    <option value="{{ l.0 }}">{{ l.1 }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+
                     <div class="row control-group pdf-info">
                         <hr/>
+                        <div class="col-sm-12">
+                            <label>{% trans "Upload PDF as background" %}</label>
+                            <p class="text-muted">
+                                {% blocktrans trimmed %}
+                                    You can upload a PDF to use as a custom background.
+                                    The paper format will match the PDF.
path: src/pretix/control/templates/pretixcontrol/pdf/index.html
user: login: raphaelm
body: "Paper size" yes, "ticket size" no – the editor is not only used for tickets, also badges, certificates, …
created_at: 2025-03-28T15:14:09Z
author_association: MEMBER
diff_hunk: @@ -182,8 +182,54 @@ <h2>{% trans "Welcome to the PDF ticket editor!" %}</h2>
                             </div>
                         </div>
                     {% endif %}
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label for="pdf-info-locale">{% trans "Preferred language" %}</label><br>
+                            <select class="form-control" id="pdf-info-locale">
+                                <option value="">{% trans "Order locale" %}</option>
+                                {% for l in locales %}
+                                    <option value="{{ l.0 }}">{{ l.1 }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+
                     <div class="row control-group pdf-info">
                         <hr/>
+                        <div class="col-sm-12">
+                            <label>{% trans "Upload PDF as background" %}</label>
+                            <p class="text-muted">
+                                {% blocktrans trimmed %}
+                                    You can upload a PDF to use as a custom background.
+                                    The paper format will match the PDF.
+                                {% endblocktrans %}
+                            </p>
+                            <p>
+                                <span class="btn btn-default fileinput-button background-button btn-block">
+                                    <i class="fa fa-upload"></i>
+                                    <span>{% trans "Upload PDF as background" %}</span>
+                                    <input id="fileupload" type="file" name="background" accept="application/pdf">
+                                </span>
+                            </p>
+                            <p class="text-center">
+                                <a class="btn btn-link background-download-button" href="{{ pdf }}" target="_blank">
+                                    <i class="fa fa-download"></i>
+                                    <span class="small">{% trans "Download current background" %}</span>
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="row control-group pdf-info">
+                        <div class="col-sm-12">
+                            <label>{% trans "Or create custom paper format" %}</label>
path: src/pretix/control/templates/pretixcontrol/pdf/index.html
user: login: raphaelm
body: I think it is weird to "create" a size, a little bit like "creating a number". The size already exists ;)

I agree that size is better than format (more specific), but would keep "paper size" not "page size", as "page size" might imply that I can choose different sizes for different pages which we theoretically support, but not through this menu. So my suggestion is:

```suggestion
                            <label>{% trans "Or choose custom paper size" %}</label>
```
created_at: 2025-03-28T15:19:00Z
author_association: MEMBER

PR comments:
user: login: codecov[bot]
created_at: 2025-03-28T10:59:22Z
body: ## [Codecov](https://app.codecov.io/gh/pretix/pretix/pull/4959?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pretix) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 78.46%. Comparing base [(`d928adf`)](https://app.codecov.io/gh/pretix/pretix/commit/d928adf7a3b106d23caaed372a8ddd59f85e79b8?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pretix) to head [(`80e3d58`)](https://app.codecov.io/gh/pretix/pretix/commit/80e3d5855ffdbc3d3f6eb02c26bf580efd97f62d?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pretix).
> Report is 5 commits behind head on master.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##           master    #4959      +/-   ##
==========================================
- Coverage   78.46%   78.46%   -0.01%     
==========================================
  Files         445      445              
  Lines       63290    63292       +2     
==========================================
+ Hits        49659    49660       +1     
- Misses      13631    13632       +1     
```

[see 1 file with indirect coverage changes](https://app.codecov.io/gh/pretix/pretix/pull/4959/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pretix)

</details>
<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE
user: login: wiffbi
created_at: 2025-03-31T07:58:24Z
body: You are absolutely right, on mid-sized screens it is not ideal. What about we change the tools into a toolbar at the top? I am not sure how complicated this will be technically to move the tools outside the `#editor-toolbox-area` as I have not tested this yet – just a quick mockup from the dev-tools (I’d remove the deprecated Textbox, group the QR-Codes into a dropdown-button as well as the images into a image-dropdown-button):

![Bildschirmfoto 2025-03-31 um 09 54 17](https://github.com/user-attachments/assets/8cc65110-b257-4804-b39d-64ec21b4e9c1)

Should I explore this idea? Of couse in a different PR.
author_association: CONTRIBUTOR
user: login: raphaelm
created_at: 2025-03-31T10:11:44Z
body: I like the idea! Yeah, let's explore that in a separate PR. 
author_association: MEMBER