Merge pull request #945 from jitsi/feedback-improvements
Feedback window improvements.
This commit is contained in:
commit
6ccc58a060
|
@ -62,15 +62,4 @@ $defaultWatermarkLink: '../images/watermark.png';
|
|||
*/
|
||||
$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;
|
|
@ -3,7 +3,11 @@
|
|||
height: auto;
|
||||
|
||||
p {
|
||||
color: $defaultDarkFontColor;
|
||||
color: $defaultDarkColor;
|
||||
}
|
||||
textarea {
|
||||
background: none;
|
||||
border: 1px solid $inputBorderColor;
|
||||
}
|
||||
.aui-dialog2-content:last-child {
|
||||
border-bottom-right-radius: 5px;
|
||||
|
@ -14,24 +18,36 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -58,6 +58,12 @@
|
|||
|
||||
&__content {
|
||||
text-align: center;
|
||||
|
||||
textarea {
|
||||
text-align: left;
|
||||
min-height: 80px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&__footer {
|
||||
|
||||
|
@ -99,11 +105,4 @@
|
|||
|
||||
}
|
||||
}
|
||||
&__details {
|
||||
text-align: left;
|
||||
textarea {
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1072,6 +1072,9 @@ UI.updateDTMFSupport = function (isDTMFSupported) {
|
|||
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()) {
|
||||
|
|
|
@ -87,6 +87,16 @@ var Feedback = {
|
|||
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.
|
||||
*/
|
||||
|
@ -96,10 +106,23 @@ var Feedback = {
|
|||
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;
|
|
@ -18,30 +18,6 @@ let toggleStars = function(starCount) {
|
|||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
|
@ -50,10 +26,7 @@ let constructDetailedFeedbackHtml = function() {
|
|||
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"
|
||||
|
@ -61,7 +34,6 @@ let createRateFeedbackHTML = function (Feedback) {
|
|||
|
||||
return `
|
||||
<div class="aui-dialog2-content feedback__content">
|
||||
${feedbackQuestion}
|
||||
<form action="javascript:false;" onsubmit="return false;">
|
||||
<div class="feedback__rating">
|
||||
<h2>${ rateExperience }</h2>
|
||||
|
@ -86,7 +58,14 @@ let createRateFeedbackHTML = function (Feedback) {
|
|||
<p> </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>
|
||||
`;
|
||||
};
|
||||
|
@ -106,15 +85,6 @@ let onLoadRateFunction = function (Feedback) {
|
|||
};
|
||||
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');
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
|
@ -122,14 +92,10 @@ let onLoadRateFunction = function (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');
|
||||
|
||||
|
@ -157,16 +123,14 @@ export default class Dialog {
|
|||
|
||||
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';
|
||||
|
@ -215,11 +179,15 @@ export default class Dialog {
|
|||
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();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue