diff --git a/Changelog.md b/Changelog.md index 567df8bc..5114589c 100644 --- a/Changelog.md +++ b/Changelog.md @@ -2,6 +2,12 @@ The change log describes what is "Added", "Removed", "Changed" or "Fixed" between each release. +## 0.3.6 + +### Added + +- Improve UI/UX in Profiler (loader during AJAX requests, select/deselect all messages) + ## 0.3.5 ### Fixed diff --git a/Resources/public/css/images/loader.svg b/Resources/public/css/images/loader.svg new file mode 100755 index 00000000..7c713340 --- /dev/null +++ b/Resources/public/css/images/loader.svg @@ -0,0 +1,33 @@ + + diff --git a/Resources/public/js/symfonyProfiler.js b/Resources/public/js/symfonyProfiler.js index 4f5069b9..7067bc8d 100644 --- a/Resources/public/js/symfonyProfiler.js +++ b/Resources/public/js/symfonyProfiler.js @@ -16,11 +16,13 @@ function clearState(key) { } function syncMessage(key) { + var el = document.getElementById(key).getElementsByClassName("translation"); + el[0].innerHTML = getLoaderHTML(); + Sfjs.request( translationSyncUrl, function(xhr) { // Success - var el = document.getElementById(key).getElementsByClassName("translation"); el[0].innerHTML = xhr.responseText; if (xhr.responseText !== "") { @@ -29,23 +31,26 @@ function syncMessage(key) { }, function(xhr) { // Error - console.log("Syncing message "+key + " - Error"); + el[0].innerHTML = "Error - Syncing message " + key + ""; }, serializeQueryString({message_id: key}), { method: 'POST' } ); } + function syncAll() { + var el = document.getElementById("top-result-area"); + el[0].innerHTML = getLoaderHTML(); + Sfjs.request( translationSyncAllUrl, function(xhr) { // Success - var el = document.getElementById("top-result-area"); el.innerHTML = xhr.responseText; }, function(xhr) { // Error - console.log("Syncing message "+key + " - Error"); + el[0].innerHTML = "Error - Syncing all messages"; }, {}, { method: 'POST' } @@ -53,29 +58,31 @@ function syncAll() { } function getEditForm(key) { + var el = document.getElementById(key).getElementsByClassName("translation"); + el[0].innerHTML = getLoaderHTML(); Sfjs.request( translationEditUrl + "?" + serializeQueryString({message_id: key}), function(xhr) { // Success - var el = document.getElementById(key).getElementsByClassName("translation"); el[0].innerHTML = xhr.responseText; }, function(xhr) { // Error - console.log("Getting edit form "+key+" - Error"); + el[0].innerHTML = "Error - Getting edit form " + key + ""; }, { method: 'GET' } ); } function saveEditForm(key, translation) { + var el = document.getElementById(key).getElementsByClassName("translation"); + el[0].innerHTML = getLoaderHTML(); Sfjs.request( translationEditUrl, function(xhr) { // Success - var el = document.getElementById(key).getElementsByClassName("translation"); el[0].innerHTML = xhr.responseText; if (xhr.responseText !== "") { @@ -84,7 +91,7 @@ function saveEditForm(key, translation) { }, function(xhr) { // Error - console.log("Saving edit form "+key +" - Error"); + el[0].innerHTML = "Error - Saving edit form " + key + ""; }, serializeQueryString({message_id: key, translation:translation}), { method: 'POST' } @@ -98,6 +105,20 @@ function cancelEditForm(key, orgMessage) { el[0].innerHTML = orgMessage; } +function toggleCheckAll(controller) { + var checkboxes = document.querySelectorAll('.translation-key-checkbox'); + + for (var i = 0; i < checkboxes.length; i++) { + checkboxes[i].checked = controller.checked; + } +} + +function getLoaderHTML() { + var loader = document.getElementById('svg-loader'); + + return loader.outerHTML; +} + var serializeQueryString = function(obj, prefix) { var str = []; for(var p in obj) { @@ -122,11 +143,14 @@ var serializeQueryString = function(obj, prefix) { var saveTranslations = function(form) { "use strict"; + if (typeof(form.translationKey) === 'undefined') { return false; } + var inputs = form.translationKey; var selected = []; + if (!inputs.value) { for (var val in inputs) { if (inputs.hasOwnProperty(val) && inputs[val].value) { @@ -138,15 +162,26 @@ var saveTranslations = function(form) { } else if (inputs.checked) { selected.push(inputs.value); } + + var el = document.getElementById('translationResult'); + el.innerHTML = getLoaderHTML(); + el.classList.remove('label'); + el.classList.remove('status-error'); + el.classList.remove('status-success'); + Sfjs.request( form.action, function(xhr) { // Success - document.getElementById('translationResult').innerHTML = xhr.responseText; + el.classList.add('label'); + el.classList.add('status-success'); + el.innerHTML = xhr.responseText; }, function(xhr) { // Error - document.getElementById('translationResult').innerHTML = xhr.responseText; + el.classList.add('label'); + el.classList.add('status-error'); + el.innerHTML = xhr.responseText; }, serializeQueryString({selected: selected}), { method: 'POST' } diff --git a/Resources/views/SymfonyProfiler/translation.html.twig b/Resources/views/SymfonyProfiler/translation.html.twig index bf22703a..1177b7a4 100644 --- a/Resources/views/SymfonyProfiler/translation.html.twig +++ b/Resources/views/SymfonyProfiler/translation.html.twig @@ -47,6 +47,9 @@
{% include "@Translation/SymfonyProfiler/javascripts.html.twig" %} {% endblock %} -{% macro render_table(messages) %} +{% macro render_table(messages, checkedByDefault = false) %}+ | + + | Locale | Domain | Times used | @@ -135,7 +140,7 @@
---|---|---|---|---|
{% if message.state == constant('Symfony\\Component\\Translation\\DataCollectorTranslator::MESSAGE_MISSING') %} - + {% else %} {% endif %} @@ -161,7 +166,9 @@ {% endif %} | -{{ message.translation }} | ++ {{ message.translation }} + | {% spaceless %} Edit |