Redesigned feedback window
This commit is contained in:
parent
c602839e06
commit
7b4941bde9
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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?",
|
||||||
|
|
|
@ -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"> </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> </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: '',
|
||||||
|
|
Loading…
Reference in New Issue