From 6249ff89ff1c1f7e2101eb8e41dcacf522c3e4c3 Mon Sep 17 00:00:00 2001 From: yanas Date: Mon, 26 Sep 2016 21:15:24 -0500 Subject: [PATCH 1/3] Feedback window improvements. --- css/_variables.scss | 13 +---- css/modals/_dialog.scss | 36 +++++++++----- css/modals/feedback/_feedback.scss | 13 +++-- modules/UI/UI.js | 3 ++ modules/UI/feedback/Feedback.js | 27 ++++++++++- modules/UI/feedback/FeedbackWindow.js | 68 ++++++++------------------- 6 files changed, 80 insertions(+), 80 deletions(-) diff --git a/css/_variables.scss b/css/_variables.scss index d5b3005f6..b471f9a02 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -61,15 +61,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; \ No newline at end of file diff --git a/css/modals/_dialog.scss b/css/modals/_dialog.scss index c3cea92ca..babc330a3 100644 --- a/css/modals/_dialog.scss +++ b/css/modals/_dialog.scss @@ -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,34 @@ 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; &_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; } } } \ No newline at end of file diff --git a/css/modals/feedback/_feedback.scss b/css/modals/feedback/_feedback.scss index 50cf92324..7de96adeb 100644 --- a/css/modals/feedback/_feedback.scss +++ b/css/modals/feedback/_feedback.scss @@ -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%; - } - } } diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 22802db3d..eae77ddb8 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -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()) { diff --git a/modules/UI/feedback/Feedback.js b/modules/UI/feedback/Feedback.js index eb51dd166..8fbc29e85 100644 --- a/modules/UI/feedback/Feedback.js +++ b/modules/UI/feedback/Feedback.js @@ -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; \ No newline at end of file diff --git a/modules/UI/feedback/FeedbackWindow.js b/modules/UI/feedback/FeedbackWindow.js index 6a2b1882f..79aa87f72 100644 --- a/modules/UI/feedback/FeedbackWindow.js +++ b/modules/UI/feedback/FeedbackWindow.js @@ -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 ` -
- -
- - `; -}; - /** * Constructs the html for the rated feedback window. * @@ -86,7 +62,14 @@ let createRateFeedbackHTML = function (Feedback) {

 

${ feedbackHelp }

+ + `; }; @@ -106,15 +89,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 +96,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 +127,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 +183,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(); } - } From 37dcc6c994fb5b6dafad40edb2901d34ddfbacc7 Mon Sep 17 00:00:00 2001 From: yanas Date: Mon, 26 Sep 2016 15:40:56 -0500 Subject: [PATCH 2/3] Improves the pin and hover borders --- css/_base.scss | 5 ---- css/_toolbars.scss | 5 ++++ css/_variables.scss | 3 ++- css/_videolayout_default.scss | 26 +++++++++++++------ modules/UI/audio_levels/AudioLevels.js | 35 ++++++++------------------ modules/UI/videolayout/RemoteVideo.js | 5 ++-- modules/UI/videolayout/VideoLayout.js | 4 ++- 7 files changed, 43 insertions(+), 40 deletions(-) diff --git a/css/_base.scss b/css/_base.scss index 439451302..be6bfc068 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -85,11 +85,6 @@ form { background-color: #00ccff; } -.glow -{ - text-shadow: 0px 0px 30px #06a5df, 0px 0px 10px #06a5df, 0px 0px 5px #06a5df,0px 0px 3px #06a5df; -} - .watermark { display: block; position: absolute; diff --git a/css/_toolbars.scss b/css/_toolbars.scss index a30f622ae..d235d78b5 100644 --- a/css/_toolbars.scss +++ b/css/_toolbars.scss @@ -110,6 +110,11 @@ cursor: default; } +.button.glow +{ + text-shadow: 0px 0px 5px $toolbarToggleBackground; +} + a.button.unclickable:hover, a.button.unclickable:active, a.button.unclickable.selected{ diff --git a/css/_variables.scss b/css/_variables.scss index b471f9a02..e25d93796 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -30,6 +30,7 @@ $toolbarSelectBackground: rgba(0, 0, 0, .6); $toolbarBadgeBackground: #165ECC; $toolbarBadgeColor: #FFFFFF; +$toolbarToggleBackground: #165ECC; // Main controls $inputBackground: rgba(132, 132, 132, .5); @@ -39,7 +40,7 @@ $inputBorderColor: #EBEBEB; $buttonBackground: #44A5FF; // Video layout. -$videoThumbnailHovered: #44A5FF; +$videoThumbnailHovered: #BFEBFF; $videoThumbnailSelected: #165ECC; $participantNameColor: #fff; $thumbnailPictogramColor: #fff; diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index e53a4b55f..9a276de2c 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -25,7 +25,7 @@ left: 0; right: 0; width:auto; - border:1px solid transparent; + border: 2px solid transparent; z-index: 5; transition: bottom 2s; overflow: visible !important; @@ -48,7 +48,6 @@ background-size: contain; border-radius:1px; margin: 0 $thumbnailVideoMargin; - border: 1px solid $defaultDarkColor; } /** @@ -67,22 +66,35 @@ padding: 0 5px 0 5px; } +#remoteVideos .videocontainer.videoContainerFocused, +#remoteVideos .videocontainer:hover { + cursor: hand; + margin-right: $thumbnailVideoMargin - 2; + margin-left: $thumbnailVideoMargin - 2; + margin-top: -2px; +} /** * Focused video thumbnail. */ #remoteVideos .videocontainer.videoContainerFocused { - cursor: hand; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -webkit-animation-name: greyPulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; - border: 1px solid $videoThumbnailSelected; + border: 2px solid $videoThumbnailSelected !important; + box-shadow: inset 0 0 3px $videoThumbnailSelected, + 0 0 3px $videoThumbnailSelected !important; } -#remoteVideos .videocontainer:hover, -#remoteVideos .videocontainer.videoContainerFocused:hover { - border: 1px solid $videoThumbnailHovered; +/** + * Hovered video thumbnail. + */ +#remoteVideos .videocontainer:hover { + cursor: hand; + border: 2px solid $videoThumbnailHovered; + box-shadow: inset 0 0 3px $videoThumbnailHovered, + 0 0 3px $videoThumbnailHovered; } #localVideoWrapper { diff --git a/modules/UI/audio_levels/AudioLevels.js b/modules/UI/audio_levels/AudioLevels.js index dc188c48c..258168909 100644 --- a/modules/UI/audio_levels/AudioLevels.js +++ b/modules/UI/audio_levels/AudioLevels.js @@ -147,17 +147,13 @@ const AudioLevels = { * Updates the audio level canvas for the given id. If the canvas * didn't exist we create it. */ - createAudioLevelCanvas (id, thumbWidth, thumbHeight) { - - let videoSpanId = (id === "local") - ? "localVideoContainer" - : `participant_${id}`; + createAudioLevelCanvas (videoSpanId, thumbWidth, thumbHeight) { let videoSpan = document.getElementById(videoSpanId); if (!videoSpan) { - if (id) { - console.error("No video element for id", id); + if (videoSpanId) { + console.error("No video element for id", videoSpanId); } else { console.error("No video element for local video."); } @@ -245,27 +241,18 @@ const AudioLevels = { }, updateCanvasSize (localVideo, remoteVideo) { - let localCanvasWidth - = localVideo.thumbWidth + interfaceConfig.CANVAS_EXTRA; - let localCanvasHeight - = localVideo.thumbHeight + interfaceConfig.CANVAS_EXTRA; - let remoteCanvasWidth - = remoteVideo.thumbWidth + interfaceConfig.CANVAS_EXTRA; - let remoteCanvasHeight - = remoteVideo.thumbHeight + interfaceConfig.CANVAS_EXTRA; - let { remoteThumbs, localThumb } = FilmStrip.getThumbs(); - remoteThumbs.children('canvas').each(function () { - $(this).attr('width', remoteCanvasWidth); - $(this).attr('height', remoteCanvasHeight); + remoteThumbs.each(( index, element ) => { + this.createAudioLevelCanvas(element.id, + remoteVideo.thumbWidth, + remoteVideo.thumbHeight); }); - if(localThumb) { - localThumb.children('canvas').each(function () { - $(this).attr('width', localCanvasWidth); - $(this).attr('height', localCanvasHeight); - }); + if (localThumb) { + this.createAudioLevelCanvas(localThumb.get(0).id, + localVideo.thumbWidth, + localVideo.thumbHeight); } } }; diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 6d577765a..52a769c15 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -33,9 +33,10 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() { this.addRemoteVideoMenu(); } - let { remoteVideo } = this.VideoLayout.resizeThumbnails(); + let { remoteVideo } = this.VideoLayout.resizeThumbnails(false, true); let { thumbHeight, thumbWidth } = remoteVideo; - AudioLevels.createAudioLevelCanvas(this.id, thumbWidth, thumbHeight); + AudioLevels.createAudioLevelCanvas( + this.videoSpanId, thumbWidth, thumbHeight); return this.container; }; diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 0b3b68375..2ed4175e6 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -109,7 +109,9 @@ var VideoLayout = { // the local video thumb maybe one pixel let { localVideo } = this.resizeThumbnails(false, true); AudioLevels.createAudioLevelCanvas( - "local", localVideo.thumbWidth, localVideo.thumbHeight); + "localVideoContainer", + localVideo.thumbWidth, + localVideo.thumbHeight); emitter.addListener(UIEvents.CONTACT_CLICKED, onContactClicked); this.lastNCount = config.channelLastN; From 08b2fbe30faa924ed2d4559adf5ac2ee2c3b162f Mon Sep 17 00:00:00 2001 From: yanas Date: Mon, 26 Sep 2016 22:43:20 -0500 Subject: [PATCH 3/3] Fixes feedback message and button active state --- css/modals/_dialog.scss | 2 ++ modules/UI/feedback/FeedbackWindow.js | 6 +----- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/css/modals/_dialog.scss b/css/modals/_dialog.scss index babc330a3..028fa24c7 100644 --- a/css/modals/_dialog.scss +++ b/css/modals/_dialog.scss @@ -31,6 +31,8 @@ font-size: 12px; padding: 3px 6px 3px 6px; border: none; + box-shadow: none; + outline: none; &_close { font-weight: 400 !important; diff --git a/modules/UI/feedback/FeedbackWindow.js b/modules/UI/feedback/FeedbackWindow.js index 79aa87f72..bededdffa 100644 --- a/modules/UI/feedback/FeedbackWindow.js +++ b/modules/UI/feedback/FeedbackWindow.js @@ -26,10 +26,7 @@ let toggleStars = function(starCount) { let createRateFeedbackHTML = function (Feedback) { let rateExperience = APP.translation.translateString('dialog.rateExperience'), - feedbackHelp = APP.translation.translateString('dialog.feedbackHelp'), - feedbackQuestion = (Feedback.feedbackScore < 0) - ? `


${APP.translation.translateString('dialog.feedbackQuestion')}

` - : ''; + feedbackHelp = APP.translation.translateString('dialog.feedbackHelp'); let starClassName = (interfaceConfig.ENABLE_FEEDBACK_ANIMATION) ? "icon-star shake-rotate" @@ -37,7 +34,6 @@ let createRateFeedbackHTML = function (Feedback) { return `