Merge pull request #945 from jitsi/feedback-improvements

Feedback window improvements.

css/_variables.scss

  */
 $tooltipsZ: 901;
 $toolbarZ: 900;
-$overlayZ: 800;
-
-/**
- * Font Colors TODO: Change colors when general dialogs are implemented.
- */
-$defaultFontColor: #777;
-$defaultLightFontColor: #F1F1F1;
-$defaultDarkFontColor: #000;
-$buttonFontColor: #777;
-$buttonHoverFontColor: #287ade;
-$linkFontColor: #489afe;
-$linkHoverFontColor: #287ade;
+$overlayZ: 800;

css/modals/_dialog.scss

     height: auto;
 
     p {
-        color: $defaultDarkFontColor;
+        color: $defaultDarkColor;
+    }
+    textarea {
+        background: none;
+        border: 1px solid $inputBorderColor;
     }
     .aui-dialog2-content:last-child {
         border-bottom-right-radius: 5px;
         border-top-left-radius: 5px;
     }
     .aui-dialog2-footer{
+        border-top: 0;
+        border-radius: 0;
         padding-top: 0;
+        background: none;
+        border: none;
+        height: auto;
+        margin-top: 10px;
     }
     .aui-button {
-        height: 36px;
-        padding-top: 12px;
+        height: 28px;
+        font-size: 12px;
+        padding: 3px 6px 3px 6px;
         border: none;
-        background-color: transparent!important;
-        border-left: solid 1px #e4e4e4;
-        font-weight: 700;
+        box-shadow: none;
+        outline: none;
 
         &_close {
-            color: $defaultFontColor;
+            font-weight: 400 !important;
+            color: $buttonBackground;
+            background: none !important;
+
+            :hover {
+                text-decoration: underline;
+            }
         }
         &_submit {
-            color: $linkFontColor;
-            &:hover {
-                color: $linkHoverFontColor;
-            }
+            font-weight: 700 !important;
+            color: $defaultColor;
+            background: $buttonBackground;
+            border-radius: 3px;
         }
     }
 }

css/modals/feedback/_feedback.scss

 
     &__content {
         text-align: center;
+
+        textarea {
+            text-align: left;
+            min-height: 80px;
+            width: 100%;
+        }
     }
     &__footer {
 
 
         }
     }
-    &__details {
-        text-align: left;
-        textarea {
-            min-height: 100px;
-            width: 100%;
-        }
-    }
 }

modules/UI/UI.js

 UI.requestFeedback = function () {
     if (Feedback.isVisible())
         return Promise.reject(UIErrors.FEEDBACK_REQUEST_IN_PROGRESS);
+    // Feedback has been submitted already.
+    else if (Feedback.isSubmitted())
+        return Promise.resolve();
     else
         return new Promise(function (resolve, reject) {
             if (Feedback.isEnabled()) {

modules/UI/feedback/Feedback.js

         return $(".feedback").is(":visible");
     },
 
+    /**
+     * Indicates if the feedback is submitted.
+     *
+     * @return {boolean} {true} to indicate if the feedback is submitted,
+     * {false} - otherwise
+     */
+    isSubmitted: function() {
+        return Feedback.window.submitted;
+    },
+
     /**
      * Opens the feedback window.
      */
         JitsiMeetJS.analytics.sendEvent('feedback.open');
     },
 
+    /**
+     * Returns the feedback score.
+     *
+     * @returns {*}
+     */
     getFeedbackScore: function() {
-      return Feedback.window.feedbackScore;
-    }
+        return Feedback.window.feedbackScore;
+    },
 
+    /**
+     * Returns the feedback free text.
+     *
+     * @returns {null|*|message}
+     */
+    getFeedbackText: function() {
+        return Feedback.window.feedbackText;
+    }
 };
 
 module.exports = Feedback;

modules/UI/feedback/FeedbackWindow.js

     });
 };
 
-/**
- * Constructs the html for the detailed feedback window.
- *
- * @returns {string} the contructed html string
- */
-let constructDetailedFeedbackHtml = function() {
-
-    return `
-        <div class="aui-dialog2-content feedback__content">
-            <div class="feedback__details">
-                <p>${APP.translation.translateString("dialog.sorryFeedback")}</p>
-                <br/><br/>
-                <textarea id="feedbackTextArea" rows="10" cols="50" autofocus></textarea>
-            </div>
-        </div>
-        <footer class="aui-dialog2-footer feedback__footer">
-            <div class="aui-dialog2-footer-actions">
-                <button id="dialog-close-button" class="aui-button aui-button_close">Close</button>
-                <button id="dialog-submit-button" class="aui-button aui-button_submit">Submit</button>
-            </div>
-        </footer>
-        `;
-};
-
 /**
  * Constructs the html for the rated feedback window.
  *
 let createRateFeedbackHTML = function (Feedback) {
     let rateExperience
             = APP.translation.translateString('dialog.rateExperience'),
-        feedbackHelp = APP.translation.translateString('dialog.feedbackHelp'),
-        feedbackQuestion = (Feedback.feedbackScore < 0)
-        ? `<p><br/>${APP.translation.translateString('dialog.feedbackQuestion')}</p>`
-        : '';
+        feedbackHelp = APP.translation.translateString('dialog.feedbackHelp');
 
     let starClassName = (interfaceConfig.ENABLE_FEEDBACK_ANIMATION)
                             ? "icon-star shake-rotate"
 
     return `
         <div class="aui-dialog2-content feedback__content">
-            ${feedbackQuestion}
             <form action="javascript:false;" onsubmit="return false;">
                 <div class="feedback__rating">
                     <h2>${ rateExperience }</h2>
                     <p>&nbsp;</p>
                     <p>${ feedbackHelp }</p>
                 </div>
+                <textarea id="feedbackTextArea" rows="10" cols="40" autofocus></textarea>
             </form>
+            <footer class="aui-dialog2-footer feedback__footer">
+                <div class="aui-dialog2-footer-actions">
+                    <button id="dialog-close-button" class="aui-button aui-button_close">Close</button>
+                    <button id="dialog-submit-button" class="aui-button aui-button_submit">Submit</button>
+                </div>
+            </footer>
         </div>
 `;
 };
         };
         el.onclick = function(){
             Feedback.feedbackScore = index + 1;
-
-            // If the feedback is less than 3 stars we're going to
-            // ask the user for more information.
-            if (Feedback.feedbackScore > 3) {
-                APP.conference.sendFeedback(Feedback.feedbackScore, "");
-                Feedback.hide();
-            } else {
-                Feedback.setState('detailed_feedback');
-            }
         };
     });
 
     if (Feedback.feedbackScore > 0) {
         toggleStars(Feedback.feedbackScore - 1);
     }
-};
 
-/**
- * Callback for Detailed Feedback
- *
- * @param Feedback
- */
-let onLoadDetailedFunction = function(Feedback) {
+    if (Feedback.feedbackText && Feedback.feedbackText.length > 0)
+        $('#feedbackTextArea').text(Feedback.feedbackText);
+
     let submitBtn = Feedback.$el.find('#dialog-submit-button');
     let closeBtn = Feedback.$el.find('#dialog-close-button');
 
 
     constructor(options) {
         this.feedbackScore = -1;
+        this.feedbackText = null;
+        this.submitted = false;
         this.onCloseCallback = null;
 
         this.states = {
             rate_feedback: {
                 getHtml: createRateFeedbackHTML,
                 onLoad: onLoadRateFunction
-            },
-            detailed_feedback: {
-                getHtml: constructDetailedFeedbackHtml,
-                onLoad: onLoadDetailedFunction
             }
         };
         this.state = options.state || 'rate_feedback';
         let self = this;
 
         if (message && message.length > 0) {
-            APP.conference.sendFeedback(
-                self.feedbackScore,
-                message);
+            self.feedbackText = message;
         }
+
+        APP.conference.sendFeedback(self.feedbackScore,
+                                    self.feedbackText);
+
+        // TO DO: make sendFeedback return true or false.
+        self.submitted = true;
+
         this.hide();
     }
-
 }