From 7b4941bde96a1e321f2ff2d83de56b2af98ea19d Mon Sep 17 00:00:00 2001 From: Maxim Voloshin Date: Tue, 13 Sep 2016 19:15:07 +0300 Subject: [PATCH] Redesigned feedback window --- css/_feedback.scss | 135 ++++++++++++++++++++++++++++------------- css/_mixins.scss | 17 +++++- css/_variables.scss | 5 ++ lang/main.json | 2 + modules/UI/Feedback.js | 33 +++++++++- 5 files changed, 148 insertions(+), 44 deletions(-) diff --git a/css/_feedback.scss b/css/_feedback.scss index ea8ae88d5..9b1d8f297 100644 --- a/css/_feedback.scss +++ b/css/_feedback.scss @@ -1,48 +1,99 @@ -/** - * 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; -} \ No newline at end of file +} + +.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; + } + } +} diff --git a/css/_mixins.scss b/css/_mixins.scss index 167a25b9d..43aec2431 100644 --- a/css/_mixins.scss +++ b/css/_mixins.scss @@ -34,4 +34,19 @@ @keyframes #{$animationName} { @content; } -} \ No newline at end of file +} + +@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; +} diff --git a/css/_variables.scss b/css/_variables.scss index 3fe42a996..e44bf9e2d 100644 --- a/css/_variables.scss +++ b/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; diff --git a/lang/main.json b/lang/main.json index f8d5d1c9b..443639820 100644 --- a/lang/main.json +++ b/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 get it from here!", + "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?", diff --git a/modules/UI/Feedback.js b/modules/UI/Feedback.js index 4a6e21fe6..708b762c3 100644 --- a/modules/UI/Feedback.js +++ b/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 ` +
+

${ rate }

+

 

+ +

 

+

${ help }

+
+ `; +}; + /** * 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: '',