Redesigned feedback window

This commit is contained in:
Maxim Voloshin 2016-09-13 19:15:07 +03:00 committed by hristoterezov
parent c602839e06
commit 7b4941bde9
5 changed files with 148 additions and 44 deletions

View File

@ -1,48 +1,99 @@
/** @-webkit-keyframes shake-rotate {
* The feedback window inner div css. 0% {
*/ -webkit-transform:scale(1) rotate(0deg);
.feedback { transform:scale(1) rotate(0deg)
width: 450px; }
display: block;
margin-left: auto; 50% {
margin-right: auto; -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; 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 { .feedbackDetails textarea {
resize: vertical; resize: vertical;
min-height: 100px; min-height: 100px;
} }
.feedback-rating {
line-height: 1.2;
padding: 20px 0;
h2 {
font-size: 24px;
line-height: 1.2;
padding: auto;
margin: auto;
border: none;
}
.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;
}
}
}

View File

@ -34,4 +34,19 @@
@keyframes #{$animationName} { @keyframes #{$animationName} {
@content; @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;
}

View File

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

View File

@ -250,6 +250,8 @@
"displayNameRequired": "Please enter your display name", "displayNameRequired": "Please enter your display name",
"extensionRequired": "Extension required:", "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>!", "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?", "feedbackQuestion": "How was your call?",
"thankYou": "Thank you for using __appName__!", "thankYou": "Thank you for using __appName__!",
"sorryFeedback": "We're sorry to hear that. Would you like to tell us more?", "sorryFeedback": "We're sorry to hear that. Would you like to tell us more?",

View File

@ -49,6 +49,37 @@ var constructDetailedFeedbackHtml = function() {
return message; 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. * The callback function corresponding to the openFeedbackWindow parameter.
* *
@ -192,7 +223,7 @@ var Feedback = {
// Defines the different states of the feedback window. // Defines the different states of the feedback window.
var states = { var states = {
overall_feedback: { overall_feedback: {
html: constructOverallFeedbackHtml(), html: createRateFeedbackHTML(),
persistent: false, persistent: false,
buttons: {}, buttons: {},
closeText: '', closeText: '',