From 661f1de8f6e5fba094495fca3214de2e2a152499 Mon Sep 17 00:00:00 2001
From: Thijs Kinkhorst <thijs@kinkhorst.com>
Date: Wed, 24 Apr 2019 18:19:31 +0000
Subject: [PATCH] Improve newui metadata converter
- Make textarea and code-box monospace (might be subjective)
- Jump to converted data after form submit
- Make file upload label work
Closes: #1094
---
.../admin/templates/metadata_converter.twig | 24 +++++++++++++------
src/css/default.scss | 4 ++++
templates/metadata-converter.twig | 21 ++++++++++++----
3 files changed, 37 insertions(+), 12 deletions(-)
diff --git a/modules/admin/templates/metadata_converter.twig b/modules/admin/templates/metadata_converter.twig
index c21c5fb00..785fe0f36 100644
--- a/modules/admin/templates/metadata_converter.twig
+++ b/modules/admin/templates/metadata_converter.twig
@@ -7,20 +7,19 @@
{%- include "@admin/includes/menu.twig" %}
<h2>{{ pagetitle }}</h2>
- <form method="post" class="pure-form" enctype="multipart/form-data">
+ <form method="post" class="pure-form" enctype="multipart/form-data" action="#converted">
<h3> {% trans 'XML metadata' %}</h3>
<div class="pure-control-group">
- <textarea name="xmldata" rows="20" class="text-area edge">{{ xmldata }}</textarea>
+ <textarea name="xmldata" rows="20" class="text-area edge xmldata">{{ xmldata }}</textarea>
</div>
<br>
<div class="center">
<div class="pure-button-group two-elements" role="group">
<label class="pure-button">
<span class="fa fa-folder-open"></span>{{ 'or select a file:'|trans }}
- <input type="file" name="xmlfile" class="hidden" multiple>
+ <input type="file" name="xmlfile" class="hidden" id="file-input">
</label>
- {#needs translation#}
- <label id="show-file" class="pure-button hollow show-files" disabled>No file selected.</label>
+ <label id="show-file" class="pure-button hollow show-files" disabled>{{ 'No file selected.'|trans }}</label>
</div>
<br>
<button class="pure-button pure-button-red pure-input-1-3">{{ 'Parse'|trans }}</button>
@@ -29,7 +28,7 @@
{% if output -%}
<br>
- <h2>{{ 'Converted metadata'|trans }}</h2>
+ <h2 id="converted">{{ 'Converted metadata'|trans }}</h2>
{% for type, text in output if text -%}
{# spaceless is to work around a clipboard.js bug that would add extra whitespace #}
{% spaceless %}
@@ -50,4 +49,15 @@
{%- endfor -%}
{% endif -%}
{% endblock content -%}
-
+{% block postload %}
+<script>
+ $('body').on('change', '#file-input', function () {
+ var files = this.files;
+ var fileNames = [];
+ for (var i = 0; i < files.length; i++) {
+ fileNames.push(files.item(i).name);
+ }
+ $('#show-file').html(fileNames.join(", "));
+ });
+</script>
+{% endblock postload %}
diff --git a/src/css/default.scss b/src/css/default.scss
index 77a9fb011..4e992dfc7 100644
--- a/src/css/default.scss
+++ b/src/css/default.scss
@@ -115,6 +115,9 @@ pre, code, kbd, samp, tt {
//background-color: rgba(0, 0, 0, .1);
padding: 0 .2rem;
}
+.xmldata {
+ font-family: monospace;
+}
/************************************************************
* BUTTONS
@@ -469,6 +472,7 @@ CONTENT
width: 100%;
height: 100%;
white-space: pre-wrap;
+ font-family: monospace;
&::selection {
color: black;
background: $lighYellow;
diff --git a/templates/metadata-converter.twig b/templates/metadata-converter.twig
index 3aabdebed..8c7b5291e 100644
--- a/templates/metadata-converter.twig
+++ b/templates/metadata-converter.twig
@@ -4,17 +4,17 @@
{% set i=1 %}
{% block content %}
<h1>{{ pagetitle }}</h1>
- <form method="post" class="pure-form" enctype="multipart/form-data">
+ <form method="post" class="pure-form" enctype="multipart/form-data" action="#converted">
<h3>{% trans 'XML metadata' %}</h3>
<div class="pure-control-group">
- <textarea name="xmldata" rows="20" class="text-area edge">{{ xmldata }}</textarea>
+ <textarea name="xmldata" rows="20" class="text-area edge xmldata">{{ xmldata }}</textarea>
</div>
<br>
<div class="center">
<div class="pure-button-group two-elements" role="group">
<label class="pure-button">
<span class="fa fa-folder-open"></span>{{ 'or select a file:'|trans }}
- <input type="file" name="xmlfile" class="hidden" multiple>
+ <input type="file" name="xmlfile" class="hidden" id="file-input">
</label>
<label id="show-file" class="pure-button hollow show-files" disabled>{{ 'No file selected.'|trans }}</label>
</div>
@@ -25,7 +25,7 @@
{% if output -%}
<br>
- <h2>{{ 'Converted metadata'|trans }}</h2>
+ <h2 id="converted">{{ 'Converted metadata'|trans }}</h2>
{% for type, text in output if text -%}
{# spaceless is to work around a clipboard.js bug that would add extra whitespace #}
{% spaceless %}
@@ -46,4 +46,15 @@
{%- endfor -%}
{% endif -%}
{% endblock content -%}
-
+{% block postload %}
+<script>
+ $('body').on('change', '#file-input', function () {
+ var files = this.files;
+ var fileNames = [];
+ for (var i = 0; i < files.length; i++) {
+ fileNames.push(files.item(i).name);
+ }
+ $('#show-file').html(fileNames.join(", "));
+ });
+</script>
+{% endblock postload %}
--
GitLab