PDF-Editor: improve UI for page-size and background PDF (#4959)

* PDF-Editor: improve UI for page-size and background PDF

* Update src/pretix/control/templates/pretixcontrol/pdf/index.html

Co-authored-by: leiascyr <156191181+leiascyr@users.noreply.github.com>

* Update src/pretix/control/templates/pretixcontrol/pdf/index.html

Co-authored-by: leiascyr <156191181+leiascyr@users.noreply.github.com>

* Update label text

Co-authored-by: Raphael Michel <michel@rami.io>

---------

Co-authored-by: Raphael Michel <michel@rami.io>
Co-authored-by: leiascyr <156191181+leiascyr@users.noreply.github.com>
This commit is contained in:
Richard Schreiber
2025-03-31 12:11:49 +02:00
committed by GitHub
parent e5fc7144e4
commit 9447e5802d
2 changed files with 48 additions and 36 deletions

View File

@@ -182,8 +182,54 @@
</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 @@
</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">

View File

@@ -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();
},