Merge pull request #858 from jitsi/ui-redesign-feedback

Ui redesign feedback

css/_feedback.scss

@@ -1,48 +1,107 @@
-/**
- * The feedback window inner div css.
- */
-.feedback {
-    width: 450px;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+@-webkit-keyframes shake-rotate {
+    0% {
+        -webkit-transform:scale(1) rotate(0deg);
+        transform:scale(1) rotate(0deg)
+    }
+
+    50% {
+        -webkit-transform:scale(.8) rotate(-5deg);
+        transform:scale(.8) rotate(-5deg)
+    }
+
+    to {
+        -webkit-transform:scale(1) rotate(3deg);
+        transform:scale(1) rotate(3deg)
+    }
+}
+
+@keyframes shake-rotate {
+    0% {
+        -webkit-transform:scale(1) rotate(0deg);
+        transform:scale(1) rotate(0deg)
+    }
+
+    50% {
+        -webkit-transform:scale(.8) rotate(-5deg);
+        transform:scale(.8) rotate(-5deg)
+    }
+
+    to {
+        -webkit-transform:scale(1) rotate(3deg);
+        transform:scale(1) rotate(3deg)
+    }
+}
+
+.shake-rotate {
+    -webkit-animation-duration: .4s;
+    animation-duration: .4s;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-animation-name: shake-rotate;
+    animation-name: shake-rotate;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out
+}
+
+.text-center {
     text-align: center;
-    font-size: 22px;
 }
 
-/**
- * Style of the thank you text inside the feedback window.
- */
-.feedbackTitle {
-    font-size: 22px;
-    color: #087dba;
-}
-
-/**
- * Stars div css.
- */
-#stars {
-    font-size: 30px;
-}
-
-/**
- * Star css.
- */
-#stars>a {
-    padding-right: 4px;
-}
-
-/**
- * Mouse over a star.
- */
-.starHover {
-    color: #087dba;
-}
-
-/**
- * Detailed feedback section text area style.
- */
 .feedbackDetails textarea {
     resize: vertical;
     min-height: 100px;
-}
+}
+
+.feedback-rating {
+    line-height: 1.2;
+    padding: 20px 0;
+
+    h2 {
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 1.2;
+        padding: auto;
+        margin: auto;
+        border: none;
+    }
+
+    p {
+        margin-top: 10px;
+        margin-left: 0px;
+        margin-bottom: 0px;
+        margin-right: 0px;
+    }
+
+    .star-label {
+        font-size: 16px;
+        color: $rateStarLabelColor;
+    }
+
+    .star-btn {
+        color: $rateStarDefault;
+        font-size: 36px;
+        position: relative;
+        cursor: pointer;
+        outline: none;
+        text-decoration: none;
+        @include transition(all .2s ease);
+
+        &.starHover,
+        &.active,
+        &:hover {
+            color: $rateStarActivity;
+
+            .fa {
+                top: -6px;
+            }
+        };
+
+        &.rated:hover .fa {
+            top: 0;
+        }
+
+        .fa {
+            position: relative;
+        }
+    }
+}

css/_mixins.scss

@@ -34,4 +34,19 @@
   @keyframes #{$animationName} {
     @content;
   }
-}
+}
+
+@mixin transform($func) {
+    -moz-transform: $func;
+    -ms-transform: $func;
+    -webkit-transform: $func;
+    -o-transform: $func;
+    transform: $func;
+}
+
+@mixin transition($transition...) {
+    -moz-transition:    $transition;
+    -o-transition:      $transition;
+    -webkit-transition: $transition;
+    transition:         $transition;
+}

css/_variables.scss

@@ -1,4 +1,5 @@
 /**
+<<<<<<< HEAD
  * Style variables
  */
 $baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -34,3 +35,7 @@ $borderRadius: 4px;
  */
 $toolbarZ: 900;
 $overlayZ: 800;
+
+$rateStarDefault: #ccc;
+$rateStarActivity: #f6c342;
+$rateStarLabelColor: #333;

lang/main.json

@@ -250,6 +250,8 @@
         "displayNameRequired": "Please enter your display name",
         "extensionRequired": "Extension required:",
         "firefoxExtensionPrompt": "You need to install a Firefox extension in order to use screen sharing. Please try again after you <a href='__url__'>get it from here</a>!",
+        "rateExperience": "Please rate your meeting experience.",
+        "feedbackHelp": "Your feedback will help us to improve our video experience.",
         "feedbackQuestion": "How was your call?",
         "thankYou": "Thank you for using __appName__!",
         "sorryFeedback": "We're sorry to hear that. Would you like to tell us more?",

modules/UI/Feedback.js

@@ -49,6 +49,37 @@ var constructDetailedFeedbackHtml = function() {
     return message;
 };
 
+var createRateFeedbackHTML = function () {
+    var rate = APP.translation.translateString('dialog.rateExperience'),
+        help = APP.translation.translateString('dialog.feedbackHelp');
+
+    return `
+        <div class="feedback-rating text-center">
+            <h2>${ rate }</h2>
+            <p class="star-label">&nbsp;</p>
+            <div id="stars" class="feedback-stars">
+                <a class="star-btn">
+                    <i class="fa fa-star shake-rotate"></i>
+                </a>
+                <a class="star-btn">
+                    <i class="fa fa-star shake-rotate"></i>
+                </a>
+                <a class="star-btn">
+                    <i class="fa fa-star shake-rotate"></i>
+                </a>
+                <a class="star-btn">
+                    <i class="fa fa-star shake-rotate"></i>
+                </a>
+                <a class="star-btn">
+                    <i class="fa fa-star shake-rotate"></i>
+                </a>
+            </div>
+            <p>&nbsp;</p>
+            <p>${ help }</p>
+        </div>
+    `;
+};
+
 /**
  * The callback function corresponding to the openFeedbackWindow parameter.
  *
@@ -192,7 +223,7 @@ var Feedback = {
         // Defines the different states of the feedback window.
         var states = {
             overall_feedback: {
-                html: constructOverallFeedbackHtml(),
+                html: createRateFeedbackHTML(),
                 persistent: false,
                 buttons: {},
                 closeText: '',