GNOME.org
 

[damned-lies] Replaced legacy overlay code by bootstrap modals

commit 1952de36b720fa4f2d0e20496ca2faace2e3750e
Author: Claude Paroz <claude 2xlibre net>
Date:   Thu May 12 21:26:59 2016 +0200

    Replaced legacy overlay code by bootstrap modals
    
    Thanks Tom Tryfonidis for the initial patch.

 common/static/css/overlays.css                    |   57 -
 common/static/css/template.css                    |    1 +
 common/static/css/text.css                        |    7 +-
 common/static/js/jquery.tools.js                  | 1672 ---------------------
 common/static/js/jquery.tools.min.js              |   11 -
 common/static/js/overlayhelpers.js                |  595 --------
 common/views.py                                   |    4 +-
 damnedlies/urls.py                                |    2 +-
 stats/templatetags/stats_extras.py                |    2 +-
 templates/base.html                               |   23 +-
 templates/base_modal.html                         |   12 +
 templates/help/reduced_po.html                    |    7 +-
 templates/help/vertimus_workflow.html             |   13 +-
 templates/languages/language_release_summary.html |    2 +-
 templates/release_detail.html                     |    2 +-
 templates/vertimus/vertimus_detail.html           |    4 +-
 vertimus/forms.py                                 |    2 +-
 17 files changed, 49 insertions(+), 2367 deletions(-)
---
diff --git a/common/static/css/template.css b/common/static/css/template.css
index c115f2a..f486796 100644
--- a/common/static/css/template.css
+++ b/common/static/css/template.css
@@ -502,6 +502,7 @@ pre.stats {
     color: #333;
     display: inline;
     white-space: pre;
+    font-family: monospace;
     font-size: 11px;
 }
 pre.stats .num1 {
diff --git a/common/static/css/text.css b/common/static/css/text.css
index a3f809c..6d81028 100644
--- a/common/static/css/text.css
+++ b/common/static/css/text.css
@@ -15,9 +15,11 @@ h1, h2, h3, h4, h5, h6, dt {
 }
 h1 {
     font-size: 42px;
+    font-weight: bold;
 }
 h2 {
     font-size: 25px;
+    font-weight: bold;
 }
 h3, dt {
     font-size: 18px;
@@ -26,6 +28,7 @@ h3, dt {
 }
 dt {
     color: #E36615;
+    font-weight: normal;
 }
 dt a:hover {
     color: #fa7721;
@@ -60,7 +63,9 @@ code {
     background: rgba(0,0,0,0.1);
     padding: 1px;
 }
-
+a {
+  text-decoration: underline;
+}
 
 /* Text classes */
 /* ========================================================================== */
diff --git a/common/views.py b/common/views.py
index 4cecb39..ca63f62 100644
--- a/common/views.py
+++ b/common/views.py
@@ -129,10 +129,10 @@ def activate_account(request, key):
     messages.success(request, _("Your account has been activated."))
     return site_login(request)
 
-def help(request, topic):
+def help(request, topic, modal):
     template = 'help/%s.html' % topic
     try:
         t = get_template(template)
     except TemplateDoesNotExist:
         raise Http404
-    return render(request, template, {})
+    return render(request, template, {'base': 'base_modal.html' if int(modal) else 'base.html'})
diff --git a/damnedlies/urls.py b/damnedlies/urls.py
index 4aa56ca..935ab86 100644
--- a/damnedlies/urls.py
+++ b/damnedlies/urls.py
@@ -23,7 +23,7 @@ urlpatterns = [
     url(r'^register/$',
         common_views.site_register,
         name='register'),
-    url(r'^help/(?P<topic>\w+)/$',
+    url(r'^help/(?P<topic>\w+)/(?P<modal>[0-1])/$',
         common_views.help,
         name='help'),
     url(r'^register/success$',
diff --git a/stats/templatetags/stats_extras.py b/stats/templatetags/stats_extras.py
index cf66c4e..fc63985 100644
--- a/stats/templatetags/stats_extras.py
+++ b/stats/templatetags/stats_extras.py
@@ -225,7 +225,7 @@ def as_tr(field):
     # This is a custom attribute possibly set in forms.py
     if hasattr(field.field, 'help_link'):
         help_link = '<span class="help_link">'
-        help_link += '<a class="show-overlay" href="%s">'
+        help_link += '<a href="%s" data-target="#modal-container" role="button" data-toggle="modal">'
         help_link += '<img src="%simg/help.png" alt="help icon">'
         help_link += '</a></span>'
         help_link = help_link % (field.field.help_link, settings.STATIC_URL)
diff --git a/templates/base.html b/templates/base.html
index 54291c2..9ebe764 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,24 +8,20 @@
   <link rel="icon" type="image/png" href="{{ STATIC_URL }}img/foot-16.png">
   <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/template.css">
-  <link rel="stylesheet" href="{{ STATIC_URL }}css/overlays.css">
 {% if LANGUAGE_BIDI %}
   <link rel="stylesheet" href="{{ STATIC_URL }}css/rtl.css">
 {% endif %}
   <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.min.js"></script>
-  <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.tools.min.js"></script>
   <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.cookie.js"></script>
-  <script type="text/javascript" src="{{ STATIC_URL }}js/overlayhelpers.js"></script>
   <script type="text/javascript" src="{{ STATIC_URL }}js/main.js"></script>
   <script type="text/javascript" src="{{ STATIC_URL }}js/modal.js"></script>
   <script type="text/javascript" src="{{ STATIC_URL }}js/login.js"></script>
 
   <script type="text/javascript">
     $(document).ready(function () {
-      $('.show-overlay').prepOverlay({subtype:'ajax',
-                                      filter: '#content > *',
-                                      config: {expose:{color:'#ccc' }}
-                                     });
+      $(document).on('hidden.bs.modal', function (e) {
+        $(e.target).removeData('bs.modal');
+      });
     });
   </script>
 
@@ -76,9 +72,8 @@
         {% endfor %}
     {% endif %}
 
-    {% block content %}
-
-    {% endblock %}
+    {% block content-title %}{% endblock %}
+    {% block content %}{% endblock %}
     </div>
 
   <div id="footer_art">
@@ -141,6 +136,14 @@
   </div>
 
 </div> <!-- end of div.body -->
+
+<div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria-labelledby="DamnedliesModal">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+        </div>
+    </div>
+</div>
+
 <script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
 </body>
 </html>
diff --git a/templates/base_modal.html b/templates/base_modal.html
new file mode 100644
index 0000000..80b0ace
--- /dev/null
+++ b/templates/base_modal.html
@@ -0,0 +1,12 @@
+{% load i18n %}
+
+<div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3 class="modal-title">{% block content-title %}{% endblock %}</h3>
+</div>
+<div class="modal-body">
+    {% block content %}{% endblock %}
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
+</div>
diff --git a/templates/help/reduced_po.html b/templates/help/reduced_po.html
index db95ef5..87249e2 100644
--- a/templates/help/reduced_po.html
+++ b/templates/help/reduced_po.html
@@ -1,10 +1,11 @@
-{% extends "base.html" %}
+{% extends base %}
 {% load i18n %}
 
 {% block title %}{% trans "Help" %}{% endblock %}
 
+{% block content-title %}{% trans "Reduced po files" %}{% endblock %}
+
 {% block content %}
-<div class="mainpage">
 <h1>{% trans "Reduced po files" %}</h1>
 
 <p>{% blocktrans %}Damned Lies is able to filter strings which are seldom visible in user interfaces, so as 
translation teams can concentrate on most visible strings.{% endblocktrans %}</p>
@@ -14,6 +15,4 @@
 <p>{% blocktrans %}When you see a po file or a table header containing "(red.)" or "(reduced)", it means 
that the target files have been filtered as stated above.{% endblocktrans %}</p>
 
 <p>{% blocktrans %}If you think you found a better filter for a specific module, please <a href="{{ bug_url 
}}">submit a bug report</a> with your proposal.{% endblocktrans %}</p>
-
-</div>
 {% endblock %}
diff --git a/templates/help/vertimus_workflow.html b/templates/help/vertimus_workflow.html
index d918398..42ee225 100644
--- a/templates/help/vertimus_workflow.html
+++ b/templates/help/vertimus_workflow.html
@@ -1,14 +1,11 @@
-{% extends "base.html" %}
+{% extends base %}
 {% load i18n %}
 
 {% block title %}{% trans "Help" %}{% endblock %}
 
-{% block content %}
-<div class="mainpage">
-<p>
-{% trans "The figure below describes the various states and actions available during the translation process 
of a module." %}
-</p>
+{% block content-title %}{% trans "Vertimus Workflow" %}{% endblock %}
 
-<img src="{{ STATIC_URL }}img/workflow-translation.png">
-</div>
+{% block content %}
+<p>{% trans "The figure below describes the various states and actions available during the translation 
process of a module." %}</p>
+<img class="img-responsive" src="{{ STATIC_URL }}img/workflow-translation.png">
 {% endblock %}
diff --git a/templates/languages/language_release_summary.html 
b/templates/languages/language_release_summary.html
index 5252d70..e4cd6ab 100644
--- a/templates/languages/language_release_summary.html
+++ b/templates/languages/language_release_summary.html
@@ -11,7 +11,7 @@ Following variables should be set:
     <th>{% trans "User Interface" %}</th>
     <th>{% trans "Graph" %}</th>
     <th>{% trans "User Interface (red.)" %}
-        <a href="{% url 'help' 'reduced_po' %}" class="show-overlay"><img src="{{ STATIC_URL }}img/help.png" 
alt="help icon"></a>
+        <a href="{% url 'help' 'reduced_po' 1 %}" data-target="#modal-container" role="button" 
data-toggle="modal"><img src="{{ STATIC_URL }}img/help.png" alt="help icon"></a>
     </th>
     <th>{% trans "Documentation" %}</th>
     <th>{% trans "Graph" %}</th>
diff --git a/templates/release_detail.html b/templates/release_detail.html
index a65dd5d..25a899e 100644
--- a/templates/release_detail.html
+++ b/templates/release_detail.html
@@ -21,7 +21,7 @@
       <th>{% trans "User Interface" %}</th>
       <th>{% trans "Graph" %}</th>
       <th>{% trans "User Interface (red.)" %}
-          <a href="{% url 'help' 'reduced_po' %}" class="show-overlay"><img src="{{ STATIC_URL 
}}img/help.png" alt="help icon"></a>
+          <a href="{% url 'help' 'reduced_po' 1 %}" data-target="#modal-container" role="button" 
data-toggle="modal"><img src="{{ STATIC_URL }}img/help.png" alt="help icon"></a>
       </th>
       <th>{% trans "Documentation" %}</th>
       <th>{% trans "Graph" %}</th>
diff --git a/templates/vertimus/vertimus_detail.html b/templates/vertimus/vertimus_detail.html
index b19d88a..178e4a2 100644
--- a/templates/vertimus/vertimus_detail.html
+++ b/templates/vertimus/vertimus_detail.html
@@ -103,13 +103,13 @@ $(document).ready(function() {
     <a class="icon_button" href="{{ po_url_reduced }}" title="{% trans "Download PO file" %}"><img src="{{ 
STATIC_URL }}img/download.png" alt="{% trans "Download PO file" %}" /></a>
     {% trans "PO file statistics (reduced):" %}
     <div style="display: inline-block;">
-      <span class="help_link"><a href="{% url 'help' 'reduced_po' %}" class="show-overlay">
+      <span class="help_link"><a href="{% url 'help' 'reduced_po' 1 %}" data-target="#modal-container" 
role="button" data-toggle="modal">
         <img src="{{ STATIC_URL }}img/help.png" alt="help icon" />
       </a></span>
     </div>
     <br />
        <div id="stats_po">
-    <div title="{% trans "Translated/Fuzzy/Untranslated" %}">
+    <div title="{% trans 'Translated/Fuzzy/Untranslated' %}">
                <span>{% trans "Strings:" %} {{ stats|num_stats:"part,zeros" }}</span>&nbsp;
       <div class="graph graphinline">
         {{ stats|vis_stats:"full" }}
diff --git a/vertimus/forms.py b/vertimus/forms.py
index fa36050..c9bebd9 100644
--- a/vertimus/forms.py
+++ b/vertimus/forms.py
@@ -87,7 +87,7 @@ class ActionForm(forms.Form):
         self.fields['action'].choices = [
             (act.name, act.description) for act in actions
         ]
-        self.fields['action'].help_link = reverse('help', args=['vertimus_workflow'])
+        self.fields['action'].help_link = reverse('help', args=['vertimus_workflow', 1])
         if state and ActionCI in map(type, self.actions):
             self.fields['author'].queryset = state.involved_persons()
             self.fields['author'].initial = state.get_latest_po_file_action().person
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]