From a4c74f631020ca373b4a434a82f7b4bcb34dfb0e Mon Sep 17 00:00:00 2001 From: Richard Schreiber Date: Mon, 30 Jun 2025 11:19:39 +0200 Subject: [PATCH] PDF-Editor: use panel-head as topbar for common commands/tools and preview/save (#4977) --- .../templates/pretixcontrol/pdf/index.html | 179 +++++++++--------- .../static/pretixcontrol/js/ui/editor.js | 148 +++++++++------ .../static/pretixcontrol/scss/pdfeditor.css | 19 +- 3 files changed, 196 insertions(+), 150 deletions(-) diff --git a/src/pretix/control/templates/pretixcontrol/pdf/index.html b/src/pretix/control/templates/pretixcontrol/pdf/index.html index 413bb2807..f7fc78526 100644 --- a/src/pretix/control/templates/pretixcontrol/pdf/index.html +++ b/src/pretix/control/templates/pretixcontrol/pdf/index.html @@ -1,5 +1,6 @@ {% extends "pretixcontrol/event/base.html" %} {% load i18n %} +{% load icon %} {% load static %} {% load compress %} {% block title %}{% trans "PDF Editor" %}{% endblock %} @@ -25,27 +26,102 @@
-
+
+ {% csrf_token %} + + +
- - - -
+ +
+
+ +
+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ +
    +
  • + +
    • +
  • + +
    • +
+
+
+ + +
+
+ +
- {% trans "Editor" %}
    @@ -153,22 +229,6 @@
    -
    -
    - - - -
    -
    {% trans "Loading…" %} @@ -488,63 +548,6 @@
    -
    -
    - {% trans "Add a new object" %} -
    -
    - - - - - - - -
    -
    -
    -
    - {% csrf_token %} - - - - - -
    -

     

    {% blocktrans trimmed with print_version="2.18" scan_version="1.22" %} diff --git a/src/pretix/static/pretixcontrol/js/ui/editor.js b/src/pretix/static/pretixcontrol/js/ui/editor.js index fa9914b5b..cce09a738 100644 --- a/src/pretix/static/pretixcontrol/js/ui/editor.js +++ b/src/pretix/static/pretixcontrol/js/ui/editor.js @@ -898,6 +898,7 @@ var editor = { _update_toolbox: function () { var selected = editor.fabric.getActiveObjects(); + $(".object-buttons button").prop("disabled", selected.length == 0); if (selected.length > 1) { $("#toolbox").attr("data-type", "group"); $("#toolbox-heading").text(gettext("Group of objects")); @@ -1048,8 +1049,11 @@ var editor = { }, _cut: function () { - editor._history_modification_in_progress = true; var thing = editor.fabric.getActiveObject(); + if (!thing) { + return false; + } + editor._history_modification_in_progress = true; if (thing.type === "activeSelection") { editor.clipboard = editor.dump(thing._objects); thing.forEachObject(function (o) { @@ -1066,15 +1070,16 @@ var editor = { }, _copy: function () { - editor._history_modification_in_progress = true; var thing = editor.fabric.getActiveObject(); + if (!thing) { + return false; + } if (thing.type === "activeSelection") { editor.clipboard = editor.dump(thing._objects); } else { editor.clipboard = editor.dump([thing]); } - editor._history_modification_in_progress = false; - editor._create_savepoint(); + return true; }, _paste: function () { @@ -1098,8 +1103,19 @@ var editor = { editor._create_savepoint(); }, + _duplicate: function () { + var prevClipboad = editor.clipboard; + if (editor._copy()) { + editor._paste(); + editor.clipboard = prevClipboad; + } + }, + _delete: function () { var thing = editor.fabric.getActiveObject(); + if (!thing) { + return false; + } if (thing.type === "activeSelection") { thing.forEachObject(function (o) { editor.fabric.remove(o); @@ -1119,64 +1135,79 @@ var editor = { if ($("#source-container").is(':visible')) { return true; } - switch (e.keyCode) { - case 38: /* Up arrow */ - thing.set('top', thing.get('top') - step); - thing.setCoords(); - editor._create_savepoint(); - break; - case 40: /* Down arrow */ - thing.set('top', thing.get('top') + step); - thing.setCoords(); - editor._create_savepoint(); - break; - case 37: /* Left arrow */ - thing.set('left', thing.get('left') - step); - thing.setCoords(); - editor._create_savepoint(); - break; - case 39: /* Right arrow */ - thing.set('left', thing.get('left') + step); - thing.setCoords(); - editor._create_savepoint(); - break; - case 8: /* Backspace */ - case 46: /* Delete */ - editor._delete(); - break; - case 65: /* A */ - if (e.ctrlKey || e.metaKey) { + if (e.ctrlKey || e.metaKey) { + switch (e.key) { + case "a": editor._selectAll(); - } - break; - case 89: /* Y */ - if (e.ctrlKey || e.metaKey) { + break; + case "y": editor._redo(); - } - break; - case 90: /* Z */ - if (e.ctrlKey || e.metaKey) { + break; + case "z": editor._undo(); - } - break; - case 88: /* X */ - if (e.ctrlKey || e.metaKey) { + break; + case "x": editor._cut(); - } - break; - case 86: /* V */ - if (e.ctrlKey || e.metaKey) { + break; + case "v": editor._paste(); - } - break; - case 67: /* C */ - if (e.ctrlKey || e.metaKey) { + break; + case "c": editor._copy(); - } - break; - default: - return; + break; + case "d": + editor._duplicate(); + break; + default: + return; + } + } else { + switch (e.key) { + case "ArrowUp": + thing.set('top', thing.get('top') - step); + thing.setCoords(); + editor._create_savepoint(); + break; + case "ArrowDown": + thing.set('top', thing.get('top') + step); + thing.setCoords(); + editor._create_savepoint(); + break; + case "ArrowLeft": + thing.set('left', thing.get('left') - step); + thing.setCoords(); + editor._create_savepoint(); + break; + case "ArrowRight": + thing.set('left', thing.get('left') + step); + thing.setCoords(); + editor._create_savepoint(); + break; + case "Backspace": + case "Del": + case "Delete": + editor._delete(); + break; + case "Cut": + editor._cut(); + break; + case "Copy": + editor._copy(); + break; + case "Paste": + editor._paste(); + break; + case "Redo": + editor._redo(); + break; + case "Undo": + editor._undo(); + break; + default: + return; + } } + e.preventDefault(); editor.fabric.renderAll(); editor._update_toolbox_values(); @@ -1234,6 +1265,9 @@ var editor = { } else { $("#editor-save").addClass("btn-success").removeClass("btn-primary").find(".fa").attr("class", "fa fa-fw fa-check"); } + + $("#toolbox-undo").prop("disabled", editor._history_pos == editor.history.length-1); + $("#toolbox-redo").prop("disabled", editor._history_pos == 0); }, _save: function () { @@ -1417,10 +1451,8 @@ var editor = { editor._create_savepoint(); }); $("#toolbox .colorpickerfield").bind('changeColor', editor._update_values_from_toolbox); - $("#toolbox-copy").bind('click', editor._copy); - $("#toolbox-cut").bind('click', editor._cut); + $("#toolbox-duplicate").bind('click', editor._duplicate); $("#toolbox-delete").bind('click', editor._delete); - $("#toolbox-paste").bind('click', editor._paste); $("#toolbox-undo").bind('click', editor._undo); $("#toolbox-redo").bind('click', editor._redo); $("#toolbox-source").bind('click', editor._source_show); diff --git a/src/pretix/static/pretixcontrol/scss/pdfeditor.css b/src/pretix/static/pretixcontrol/scss/pdfeditor.css index 6615b74b8..78f9bf88d 100644 --- a/src/pretix/static/pretixcontrol/scss/pdfeditor.css +++ b/src/pretix/static/pretixcontrol/scss/pdfeditor.css @@ -21,8 +21,7 @@ body { #toolbox .text, #toolbox .textarea, #toolbox .textcontainer, -#toolbox .imagecontent, -#toolbox .object-buttons { +#toolbox .imagecontent { display: none; } #toolbox[data-type] .position, @@ -37,8 +36,7 @@ body { #toolbox[data-type=textcontainer] .textcontainer, #toolbox[data-type=textcontainer] .rectsize, #toolbox[data-type=textarea] .text, -#toolbox[data-type=textarea] .textarea, -#toolbox[data-type] .object-buttons { +#toolbox[data-type=textarea] .textarea { display: block; } #toolbox[data-type=text] .btn-group-justified > .btn-group.text, @@ -92,3 +90,16 @@ body { padding: 15px; background: #eee; } +.panel-pdf-editor .panel-heading { + padding: 4px; + position: sticky; + top: 0; + z-index: 1; +} +.panel-pdf-editor .panel-heading [disabled] { + box-shadow: 0px 0px 0px 1px #cccccc inset; +} +.panel-pdf-editor .panel-heading > .btn-group, +.panel-pdf-editor .panel-heading form > .btn-group { + margin-right: 1em; +}