Fix bug 989089 - Add duration widget for rendering max age

apps/wiki/templates/wiki/edit_document.html

@@ -98,17 +98,39 @@ <h1>{{ _('<span class="action">Editing</span> <em>{title}</em>')|fe(title=revisi
 
           {% if revision_form and not section_id %}
             <ul class="metadata">
-                <li><label>{{_('Title:')}}</label> {{ revision_form.title | safe }}</li>
+                <li class="clear">
+                    <label for="id_title">{{_('Title:')}}</label>
+                    {{ revision_form.title | safe }}
+                </li>
                 {% if document.is_template %}
                   <input type="hidden" name="toc_depth" value="0" />
                 {% else %}
                   {% include 'wiki/includes/document_toc_field.html' %}
                 {% endif %}
-                <li><label>{{_('Rendering max age (in seconds):')}}</label> {{ revision_form.render_max_age | safe }}</li>
-                <li class="metadata-choose-parent">
+                <li class="clear">
+                  <legend>{{_('Rendering max age:')}}</legend>
+                  <fieldset class="duration-container">
+                    <div>
+                      <label for="days">{{_('Days')}}</label>
+                      <input type="number" name="days" id="days" placeholder="days" value="0" step="1" min="0" />
+                    </div>
+                    <div>
+                      <label for="hours">{{_('Hours')}}</label>
+                      <input type="number" name="hours" id="hours" placeholder="hours" value="0" max="60" step="1" min="0" />
+                    </div>
+                    <div>
+                      <label for="minutes">{{_('Minutes')}}</label>
+                      <input type="number" name="minutes" id="minutes" placeholder="minutes" value="0" max="60" step="1" min="0" />
+                    </div>
+                  </fieldset>
+                  <div class="offscreen" aria-hidden="true">
+                    {{ revision_form.render_max_age |  safe }}
+                  </div>
+                </li>
+                <li class="metadata-choose-parent clear">
                     {{_('Find the translation source with the lookup below and then click "Save Changes.')}}
                     <br />
-                    <strong>{{_('Lookup:')}}</strong> <input type="text" id="parent_text" />
+                    <label for="parent_text">{{_('Lookup:')}}</label> <input type="text" id="parent_text" />
                     <input type="hidden" name="parent_id" id="parent_id" value="{{ revision_form.instance.document.parent.id }}" />
                 </li>
             </ul>

apps/wiki/templates/wiki/includes/document_toc_field.html

@@ -1,4 +1,4 @@
-<li>
-  <label><dfn title="{{_('Generate table of contents')}}">{{_('TOC:')}}</dfn></label>
+<li class="clear">
+  <label for="id_toc_depth"><dfn title="{{_('Generate table of contents')}}">{{_('TOC:')}}</dfn></label>
   {{ revision_form.toc_depth }}
 </li>

apps/wiki/templates/wiki/new_document.html

@@ -30,10 +30,16 @@ <h1><span class="action">{{ ('Create a ') }}</span><em>{{ _('New Document') }}</
         </div>
 
         <ul class="metadata">
-          <li><label>{{_('Title:')}}</label> {{ document_form.title | safe }}</li>
-          <li><label><dfn title="{{_('URL segment that identifies the page')}}">{{_('Slug:')}}</dfn></label> {{ document_form.slug | safe }}</li>
+            <li class="clear">
+                <label for="id_title">{{_('Title:')}}</label>
+                {{ document_form.title | safe }}
+            </li>
+            <li class="clear">
+                <label for="id_slug"><dfn title="{{_('URL segment that identifies the page')}}">{{_('Slug:')}}</dfn></label>
+                {{ document_form.slug | safe }}
+            </li>
           {% if parent_slug and not is_template %}
-            <li><label>{{_('Parent:')}}</label>
+            <li class="clear"><label>{{_('Parent:')}}</label>
                 <a href="{{ parent_path }}" class="metadataDisplay" target="_blank">{{ parent_slug }}</a></li>
           {% endif %}
           {% if is_template %}

media/js/wiki-edit.js

@@ -79,7 +79,34 @@
       });
     })();
 
+    /*
+        Calculate rendering max age in seconds from days, minutes and seconds
+    */
+    (function() {
+        var seconds = $('#id_render_max_age').val();
+        var getValue = function(selector) {
+             return parseInt($(selector).val()) || 0; 
+        };
 
+        $('.duration-container input').on('change', function() {
+            $('#id_render_max_age').val(
+                (((getValue('.duration-container #days') * 24) +
+                getValue('.duration-container #hours')) * 60 + 
+                getValue('.duration-container #minutes')) * 60
+            );
+        });
+
+        //convert seconds to days, hours, minutes
+        var days = Math.round(seconds / (60 * 60 * 24));
+        seconds -= days * (60 * 60 * 24);
+        var hours = Math.round(seconds / (60 * 60));
+        seconds -= hours * (60 * 60);
+        var minutes = Math.round(seconds / 60);
+
+        $('.duration-container #days').val(days);
+        $('.duration-container #hours').val(hours);
+        $('.duration-container #minutes').val(minutes);
+    })();
 
   /*
     Plugin for prepopulating the slug fields

media/redesign/stylus/wiki-edit.styl

@@ -114,19 +114,21 @@ summary-padding = 5px;
             &.metadata-choose-parent {
                 display: none;
                 set-font-size(small-bump-font-size);
-
-                #parent_text {
-                    margin-top: 10px;
-                }
             }
 
             input, input#id_title {
+                float: left;
                 margin: 2px 0px;
                 padding: 6px 8px;
                 width: 70%;
             }
 
-            label {
+            select {
+                float: left;
+                margin: 5px 0;
+            }
+
+            label, legend {
                 color: #888;
                 display: block;
                 float: left;
@@ -139,6 +141,27 @@ summary-padding = 5px;
         }
     }
 
+    .metadata .duration-container {
+        display: inline-block;
+        float: left;
+        margin-left: 5px;
+
+        input {
+            display: inline-block;
+            width: 50px;
+        }
+
+        div {
+            display: inline-block;
+            margin-right: 5px;
+        }
+
+        label {
+            float: right;
+            margin-left: 5px;
+        }
+    }
+
     #ace_content {
         height: 500px;
         position: relative;