Zen mode works with bootstrap

Signed-off-by: Michal Čihař <michal@cihar.com>

TODO

@@ -2,7 +2,5 @@ TODO list for bootstrap migration
 
 - revisit all custom CSS and see what should be applied
 - revisit our JS code and check what needs to be ported
-- convert remaining pages
-    - zen mode
 - merge to master
     - copy javascript translations

weblate/html/zen-response.html

 {% load translations %}
-{% if messages %}
 {% for message in messages %}
 {% show_message message.tags message %}
 {% endfor %}
-{% else %}
-{% show_message 'info' _('Translation has been saved!') %}
-{% endif %}

weblate/html/zen-units.html

@@ -13,7 +13,6 @@
 {% endif %}
 </td>
 <td>
-<span id="messages-{{ unit.0.checksum }}" class="inline-message"></span>
 <a href="{{ unit.0.get_absolute_url }}" class="btn btn-xs btn-default pull-right" title="{% trans "Open in full editor" %}"><span class="glyphicon glyphicon-edit"></span> {% trans "Edit" %}</a>
 </td>
 </tr>
@@ -24,6 +23,7 @@
 <tr id="row-edit-{{ unit.0.checksum }}">
 <td>
 <span id="loading-{{ unit.0.checksum }}"  class="glyphicon glyphicon-refresh glyphicon-spin" style="display: none"></span>
+<span id="status-{{ unit.0.checksum }}"></span>
 </td>
 <td colspan="2" class="translator">
 <form action="{% url 'save_zen' project=object.subproject.project.slug subproject=object.subproject.slug lang=object.language.code %}" method="post">

weblate/media/loader-bootstrap.js

@@ -183,13 +183,26 @@ function zen_editor(e) {
 
     var form = $row.find('form');
     $('#loading-' + checksum).show();
-    $('#messages-' + checksum).html('');
     $.post(
         form.attr('action'),
         form.serialize(),
         function (data) {
+            var messages = $('<div>' + data + '</div>');
+            var statusdiv = $('#status-' + checksum);
             $('#loading-' + checksum).hide();
-            $('#messages-' + checksum).append(data);
+            if (messages.find('.alert-danger').length > 0) {
+                statusdiv.attr('class', 'glyphicon-remove-sign text-danger');
+            } else if (messages.find('.alert-warning').length > 0) {
+                statusdiv.attr('class', 'glyphicon-exclamation-sign text-warning');
+            } else if (messages.find('.alert-info').length > 0) {
+                statusdiv.attr('class', 'glyphicon-ok-sign text-warning');
+            } else {
+                statusdiv.attr('class', 'glyphicon-ok-sign text-success');
+            }
+            statusdiv.addClass('glyphicon').tooltip({
+                'html': true,
+                'title': data
+            });
             $row.removeClass('translation-modified').addClass('translation-saved');
         }
     );