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

Ui redesign feedback
This commit is contained in:
yanas 2016-09-13 16:44:11 -05:00 committed by GitHub
commit d5d81c1bed
5 changed files with 156 additions and 44 deletions

View File

@ -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;
}
}
}

View File

@ -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;
}

View File

@ -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;

View File

@ -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?",

View File

@ -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: '',