Show suggestion feedback form

- Edit css styles to render form properly; - Adjust editor HTML template; - Add JS handlers to work with suggestion feedback form;
ta2-1 · Apr 22, 2016 · 0f11a33 · 0f11a33
1 parent a028876
commit 0f11a33
Show file tree

Hide file tree

Showing 3 changed files with 192 additions and 13 deletions.
diff --git a/pootle/static/css/editor.css b/pootle/static/css/editor.css
@@ -767,6 +767,11 @@ a.suggestion-action
     float: right;
 }
 
+a.suggestion-action
+{
+    margin-left: 5px;
+}
+
 html[dir="rtl"] .comment-action,
 html[dir="rtl"] .suggestion-action
 {
@@ -794,6 +799,108 @@ html[dir="rtl"] .suggestion-action
     opacity: 1;
 }
 
+.extra-item-block .suggestion-collapse,
+.extra-item-block.suggestion-expanded .suggestion-expand,
+.extra-item-block.suggestion-expanded a.suggestion-action,
+.extra-item-block.suggestion-expanded .suggestion-translation
+{
+    display: none;
+}
+
+.extra-item-block .suggestion-translation
+{
+    display: block;
+}
+
+.extra-item-block .suggestion-expand,
+.extra-item-block.suggestion-expanded a.suggestion-action .suggestion-collapse,
+.extra-item-block.suggestion-expanded a.suggestion-action.suggestion-toggle
+{
+    display: inline-block;
+}
+
+.extra-item-block .feedback .field-wrapper label
+{
+    color: #999;
+    font-size: 85%;
+}
+
+.extra-item-block .feedback .field-wrapper
+{
+    margin: 5px 5px 0px 0px;
+}
+
+.extra-item-block .feedback .field-wrapper label,
+.extra-item-block .feedback .field-wrapper textarea
+{
+    display: block;
+}
+
+.extra-item-block .feedback .field-wrapper textarea
+{
+    width: 100%;
+    max-width: 100%;
+}
+
+.extra-item-block .feedback .buttons button
+{
+    float: right;
+    margin: 15px 0px 5px 15px;
+}
+
+.extra-item-block .feedback .buttons button i
+{
+    margin: 1px 4px 0 -4px;
+}
+
+.extra-item-block .feedback form
+{
+    margin: 5px 20px 10px 20px;
+}
+
+.translate-full
+{
+    position: relative;
+}
+
+.translate-full .translate-lightbox
+{
+    background: rgba(0, 0, 0, 0.2);
+    position: absolute;
+    z-index: 2;
+    margin: -5px;
+    box-sizing: border-box;
+    border-radius: 5px;
+    left: 10px;
+    right: 10px;
+    top: 5px;
+    bottom: 5px;
+    display: none;
+}
+
+.translate-full.suggestion-expanded .translate-lightbox
+{
+    display: block;
+}
+
+.extra-item-block.suggestion-expanded,
+.extra-item-block.suggestion-expanded:hover
+{
+    box-shadow: 0 0 6px #6daa00;
+    background-color: #f1f7e4;
+    z-index: 3;
+}
+
+.extra-item-block.suggestion-expanded .extra-item-meta
+{
+    margin-top: 0.2em;
+}
+
+#suggestions .extra-item-title
+{
+    margin-bottom: 0.2em;
+}
+
 .extra-item
 {
     line-height: 140%;

diff --git a/pootle/static/js/editor/app.js b/pootle/static/js/editor/app.js
@@ -8,6 +8,8 @@
 
 import $ from 'jquery';
 import _ from 'underscore';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 // jQuery plugins
 import 'jquery-caret';
@@ -30,6 +32,8 @@ import cookie from 'utils/cookie';
 import fetch from 'utils/fetch';
 import linkHashtags from 'utils/linkHashtags';
 
+import SuggestionFeedbackForm from './components/SuggestionFeedbackForm';
+
 import captcha from '../captcha';
 import { UnitSet } from '../collections';
 import helpers from '../helpers';
@@ -232,6 +236,9 @@ PTL.editor = {
       e.stopPropagation();
       this.acceptSuggestion(e.currentTarget.dataset.suggId);
     });
+    $(document).on('click', '.js-suggestion-toggle', (e) => this.toggleSuggestion(e, true));
+    $(document).on('click', '.js-user-suggestion', (e) => this.toggleSuggestion(e, false));
+
     $(document).on('click', '#js-toggle-timeline', (e) => this.toggleTimeline(e));
     $(document).on('click', '.js-toggle-check', (e) => {
       this.toggleCheck(e.currentTarget.dataset.checkId);
@@ -1491,7 +1498,7 @@ PTL.editor = {
   },
 
   /* Pushes translation submissions and moves to the next unit */
-  handleSubmit() {
+  handleSubmit(comment = '') {
     const el = document.querySelector('input.submit');
     const newTranslation = $('.js-translation-area')[0].value;
     const suggestions = $('.js-user-suggestion').map(function getSuggestions() {
@@ -1533,6 +1540,14 @@ PTL.editor = {
 
     el.disabled = true;
 
+    // Check if we used a suggestion
+    if (this.selectedSuggestionId !== undefined) {
+      assign(body, {
+        suggestion_id: this.selectedSuggestionId,
+        comment: comment,
+      });
+    }
+
     UnitAPI.addTranslation(this.units.getCurrent().id, body)
       .then(
         (data) => this.processSubmission(data),
@@ -1541,6 +1556,11 @@ PTL.editor = {
   },
 
   processSubmission(data) {
+    if (this.selectedSuggestionId !== undefined) {
+      this.processAcceptSuggestion(data, this.selectedSuggestionId);
+      return;
+    }
+
     // FIXME: handle this via events
     const translations = $('.js-translation-area').map((i, el) => $(el).val())
                                                   .get();
@@ -2195,6 +2215,7 @@ PTL.editor = {
     }
 
     $(`#suggestion-${suggId}`).fadeOut(200, function handleRemove() {
+      PTL.editor.closeSuggestion(false);
       $(this).remove();
 
       // Go to the next unit if there are no more suggestions left
@@ -2216,16 +2237,20 @@ PTL.editor = {
 
   processAcceptSuggestion(data, suggId, skipToNext) {
     // Update target textareas
-    $.each(data.newtargets, (i, target) => {
-      $(`#id_target_f_${i}`).val(target).focus();
-    });
+    if (data.newtargets !== undefined) {
+      $.each(data.newtargets, (i, target) => {
+        $(`#id_target_f_${i}`).val(target).focus();
+      });
+    }
 
-    // Update remaining suggestion's diff
-    $.each(data.newdiffs, (suggestionId, sugg) => {
-      $.each(sugg, (i, target) => {
-        $(`#suggdiff-${suggestionId}-${i}`).html(target);
+    if (data.newdiffs !== undefined) {
+      // Update remaining suggestion's diff
+      $.each(data.newdiffs, (suggestionId, sugg) => {
+        $.each(sugg, (i, target) => {
+          $(`#suggdiff-${suggestionId}-${i}`).html(target);
+        });
       });
-    });
+    }
 
     // FIXME: handle this via events
     const translations = $('.js-translation-area').map((i, el) => $(el).val())
@@ -2245,6 +2270,7 @@ PTL.editor = {
     }
 
     $(`#suggestion-${suggId}`).fadeOut(200, function handleRemove() {
+      PTL.editor.closeSuggestion(false);
       $(this).remove();
 
       // Go to the next unit if there are no more suggestions left,
@@ -2289,7 +2315,7 @@ PTL.editor = {
 
   /* FIXME: provide an alternative to such an ad-hoc entry point */
   setTranslation(opts) {
-    const { translation } = opts;
+    const { translation, goFuzzy } = opts;
     if (translation === undefined && opts.msg) {
       this.displayError(opts.msg);
       return false;
@@ -2307,9 +2333,47 @@ PTL.editor = {
     area.dispatchEvent((new Event('input')));
     area.focus();
 
-    this.goFuzzy();
+    if (goFuzzy) {
+      this.goFuzzy();
+    }
 
     return true;
   },
 
+  toggleSuggestion(e, canHide = false) {
+    e.stopPropagation();
+    const $suggestion = $(e.target).parents('.js-user-suggestion');
+
+    if (this.selectedSuggestionId === undefined) {
+      this.selectedSuggestionId = $suggestion.data('sugg-id');
+      const props = {
+        editor: this,
+        suggId: this.selectedSuggestionId,
+        suggText: $suggestion.data('translation-aid'),
+      };
+      const $feedbackPlaceHolder = $suggestion.find('.feedback')[0];
+      $suggestion.addClass('suggestion-expanded');
+      $('.js-editor-body .translate-full').addClass('suggestion-expanded');
+      this.suggestionFeedbackForm = ReactDOM.render(
+        <SuggestionFeedbackForm {...props} />,
+        $feedbackPlaceHolder
+      );
+      $('#suggestion-editor').focus();
+      autosize($('#suggestion-feedback-form textarea'));
+    } else if (canHide) {
+      this.closeSuggestion();
+    }
+  },
+
+  closeSuggestion(checkIfCanNavigate = true) {
+    if (this.selectedSuggestionId !== undefined &&
+        (!checkIfCanNavigate || this.canNavigate())) {
+      const $suggestion = $(`#suggestion-${this.selectedSuggestionId}`);
+      this.selectedSuggestionId = undefined;
+      this.suggestionFeedbackForm = undefined;
+      $('.js-editor-body .translate-full').removeClass('suggestion-expanded');
+      $suggestion.removeClass('suggestion-expanded');
+      $suggestion.find('.feedback form').remove();
+    }
+  },
 };
diff --git a/pootle/templates/editor/units/edit.html b/pootle/templates/editor/units/edit.html
@@ -3,6 +3,7 @@
 {% get_current_language_bidi as LANGUAGE_BIDI %}
 {% cache settings.POOTLE_CACHE_TIMEOUT unit_edit unit.id unit.mtime cantranslate cansuggest canreview altsrcs user.id LANGUAGE_CODE unit.get_terminology %}
 <td colspan="2" rowspan="1" class="translate-full translate-focus{% if unit.isfuzzy %} fuzzy-unit{% endif %}" dir="{% locale_dir %}">
+  <div class="translate-lightbox js-translate-lightbox"></div>
   <div class="translate-container{% if unit.get_active_critical_qualitychecks.exists %} error{% endif %}">
     <div class="unit-path">
       <ul>
@@ -287,8 +288,8 @@
           <div class="extra-item-title">{% trans 'User suggestions' %}</div>
           {% for sugg in suggestions %}
           <div id="suggestion-{{ sugg.id }}"
-            class="js-user-suggestion js-editor-copytext extra-item-block"
-            data-action="overwrite" data-translation-aid="{{ sugg.target }}"
+            class="js-user-suggestion extra-item-block"
+            data-translation-aid="{{ sugg.target }}"
             data-sugg-id="{{ sugg.id }}"
             data-suggestor-id="{{ sugg.user.id }}">
             {% for i, target, diff, title in sugg|pluralize_diff_sugg %}
@@ -300,6 +301,13 @@
               {% endif %}
               <div class="extra-item">
                 {% if canreview %}
+                <a accesskey="a" class="suggestion-action suggestion-toggle js-suggestion-toggle"
+                  data-sugg-id="{{ sugg.id }}">
+                  <i class="icon-desc suggestion-expand" dir="{% locale_dir %}"
+                    title="{% trans 'More options' %}"></i>
+                  <i class="icon-asc suggestion-collapse" dir="{% locale_dir %}"
+                    title="{% trans 'Less options' %}"></i>
+                </a>
                 <a accesskey="a" class="suggestion-action js-suggestion-accept"
                   data-sugg-id="{{ sugg.id }}">
                   <i class="icon-accept" dir="{% locale_dir %}"