[bug 790789][bug 790794] Improve translate page.

* No sidebar. * Make page width fluid to allow full use of window width. * Add "Toggle diff" for toggling between en-US content and diff next to the editor.
mozilla · Nov 8, 2012 · d0d6c7d · d0d6c7d
1 parent 4608d71
commit d0d6c7d
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 63 deletions.
diff --git a/apps/wiki/templates/wiki/includes/document_macros.html b/apps/wiki/templates/wiki/includes/document_macros.html
@@ -157,7 +157,7 @@ <h4>{{ _('Search results summary:') }}</h4>
         <div class="output"></div>
       </div>
       <h4>{{ _('Content:') }}</h4>
-      <div class="diff-this">
+      <div id="content-diff" class="diff-this">
         <div class="from">{{ revision_from.content }}</div>
         <div class="to">{{ revision_to.content }}</div>
         <div class="output"></div>

diff --git a/apps/wiki/templates/wiki/translate.html b/apps/wiki/templates/wiki/translate.html
@@ -13,7 +13,9 @@
 
 {% block content %}
   {% set language = settings.LANGUAGES[locale.lower()] %}
-  <div class="grid_9">
+  <div>
+    {{ document_tools(document, parent, user, 'edit', settings) }}
+
     {{ edit_messages(document, show_revision_warning) }}
     {{ document_lock_warning() }}
 
@@ -137,7 +139,9 @@ <h3><label for="{{ revision_form.summary.auto_id }}" title="{{ revision_form.sum
           <div id="content-fields">
             <div class="approved">
               <h3>{{ _('Approved {default_locale} version:')|f(default_locale=settings.LANGUAGES[settings.WIKI_DEFAULT_LANGUAGE.lower()]) }}</h3>
-              <textarea readonly="readonly">{{ based_on.content }}</textarea>
+              <div id="content-or-diff" class="content">
+                <textarea readonly="readonly">{{ based_on.content }}</textarea>
+              </div>
             </div>
             <div class="localized">
               <h3>{{ _('{locale} translation:')|f(locale=language) }}</h3>
@@ -172,8 +176,4 @@ <h3>{{ _('{locale} translation:')|f(locale=language) }}</h3>
   </div>
 {% endblock %}
 
-{% block side_top %}
-  {{ document_tools(document, parent, user, 'localize', settings) }}
-{% endblock %}
-
 {% block side_promos %}{% endblock %}
diff --git a/media/js/wiki.js b/media/js/wiki.js
@@ -13,8 +13,6 @@
         initDetailsTags();
 
         if ($body.is('.document')) {  // Document page
-
-
             // Put last search query into search box
             $('#support-search input[name=q]')
                 .val(k.unquote($.cookie('last_search')));
@@ -60,9 +58,12 @@
             $('.submit input').removeAttr('disabled');
         }
 
+        if ($body.is('.translate')) {  // Translate page
+            initToggleDiff();
+        }
+
         initEditingTools();
 
-        initL10nTest();
         initDiffPicker();
 
         Marky.createFullToolbar('.editor-tools', '#id_content');
@@ -404,42 +405,6 @@
         });
     }
 
-    // Add ability to move translation next to the diff.
-    function initL10nTest($container) {
-        if (!$('body').is('.translate')) {
-            return;
-        }
-
-        $('table.diff', $container).each(function() {
-            var $table = $(this),
-                $l10n = $('#content-fields .localized'),
-                position = $table.position(),
-                $link = $table.before('<a class="toggle-l10n" style="float: right;" href="#"></a>').prev(),
-                moved = false;
-            $link.text(gettext('Toggle L10n'));
-
-            $link.click(function(ev){
-                var top;
-                ev.preventDefault();
-                if (moved) {
-                    $l10n.css({
-                        position: 'static'
-                    });
-                } else {
-                    $l10n.css({
-                        position: 'absolute',
-                        top: position.top - 110,
-                        left: position.left + $table.width() + 15
-                    });
-
-                    $l10n.find('textarea').height($table.height());
-                }
-                moved = !moved;
-            });
-        });
-    }
-
-
     function initReadyForL10n() {
         var $watchDiv = $("#revision-list div.l10n"),
             post_url, checkbox_id;
@@ -535,10 +500,10 @@
             }
         });
     }
-    
+
     function initAceEditor() {
         window.highlighting = {};
-        
+
         var editor = $("<div id='editor'></div>");
         var editor_wrapper = $("<div id='editor_wrapper'></div>");
 
@@ -571,15 +536,15 @@
 
         editor_wrapper.append(editor);
         $("#id_content").after(switch_link).after(editor_wrapper).hide();
-        
+
         window.addEventListener("load", function() {
             var ace_editor = ace.edit("editor");
             window.highlighting.editor = ace_editor;
             var session = ace_editor.getSession();
             window.highlighting.session = session;
             session.setMode("ace/mode/sumo");
             session.setUseWrapMode(true);
-            
+
             $("#id_content").bind("keyup", updateHighlightingEditor);
             updateHighlightingEditor();
 
@@ -616,6 +581,23 @@
         });
     }
 
+    function initToggleDiff() {
+        var $diff = $('#content-diff');
+        var $contentOrDiff = $('#content-or-diff');
+
+        if ($diff.length > 0) {
+            $contentOrDiff
+                .append($diff.clone())
+                .append(
+                    $('<a/>')
+                        .text(gettext('Toggle Diff'))
+                        .click(function(e) {
+                            e.preventDefault();
+                            $contentOrDiff.toggleClass('content diff');
+                        }));
+        }
+    }
+
     $(document).ready(init);
 
 }(jQuery));

diff --git a/media/less/wiki.less b/media/less/wiki.less
@@ -543,8 +543,9 @@ article {
 
   div.col {
     display: inline-block;
+    padding-right: 1%;
     vertical-align: top;
-    width: 315px;
+    width: 48%;
   }
 
   div.picker {
@@ -774,17 +775,18 @@ ul.description {
   h3 {
     color: #333;
     font-size: 13px;
+    font-weight: bold;
     margin: 0 0 5px;
   }
 
   input[type="text"] {
-      width: 300px;
+    width: 98%;
   }
 
   textarea {
     height: 100px;
     padding: 2px;
-    width: 300px;
+    width: 98%;
   }
 }
 
@@ -809,6 +811,7 @@ div.localized {
   h3 {
     color: #333;
     font-size: 13px;
+    font-weight: bold;
     margin: 0 0 5px;
   }
 
@@ -817,30 +820,63 @@ div.localized {
     height: 500px;
     overflow: auto;
     padding: 2px;
-    width: 400px;
+    width: 100%;
   }
 
   textarea {
-    height: 500px;
+    height: 495px;
+    margin: 0 0 15px;
     padding: 2px;
-    width: 300px;
+    width: 98%;
   }
 
-  div.approved {
+  .approved {
     textarea {
-      margin: 96px 0 0;
+      resize: none;
     }
   }
 
   .editor {
     margin: 10px 0 0;
     padding: 0;
-    width: 345px;
+    width: 100%;
+  }
+
+  #content-or-diff {
+    margin-top: 96px;
+
+    &.content {
+      .diff-this {
+        display: none;
+      }
+    }
+
+    &.diff {
+      textarea {
+        display: none;
+      }
+    }
+
+    a {
+      cursor: pointer;
+      float: right;
+      margin: 0 0 15px;
+    }
+  }
+
+  .diff-this {
+    height: 500px;
+    overflow: auto;
+    width: 99%;
   }
 }
 
-body.translate div.significance {
-  padding: 15px 0;
+body.translate {
+  /* Override the translate page to have fluid width */
+  .container_12 {
+    margin: 0 25px;
+    width: auto;
+  }
 }
 
 /* Review */
@@ -1160,6 +1196,7 @@ div.video .kbox-container {
 
 #editor_wrapper {
   height: 500px;
+  margin: 0 0 15px;
   position: relative;
 }
 
@@ -1174,7 +1211,7 @@ div.video .kbox-container {
 }
 
 .ace_other.ace_link {
-  color: #5757c2 !important; 
+  color: #5757c2 !important;
 }
 
 /* Variable font-spacing support rules */
@@ -1194,7 +1231,7 @@ div.video .kbox-container {
  font-family: 'OpenSans', Arial, Helvetica, sans-serif !important;
 }
 */
-/* Remove the following rules 
+/* Remove the following rules
    when https://github.com/ajaxorg/ace/issues/460 is fixed: */
 .ace_bold {
   font-weight: normal !important;