From 151eb9c2a7782a6d3b5bcb99d7ecda2f20f23091 Mon Sep 17 00:00:00 2001 From: Andrei Gavrilescu Date: Mon, 5 Aug 2024 12:16:08 +0300 Subject: [PATCH 1/4] improve modal, hang up confirmation --- spot-client/src/common/css/_hangup-modal.scss | 31 ++++++++ spot-client/src/common/css/_modal.scss | 6 +- spot-client/src/common/css/index.scss | 1 + spot-client/src/common/i18n/en.json | 4 ++ .../meeting-toolbar/buttons/HangupButton.js | 5 +- .../meeting-toolbar/buttons/HangupModal.js | 72 +++++++++++++++++++ 6 files changed, 115 insertions(+), 4 deletions(-) create mode 100644 spot-client/src/common/css/_hangup-modal.scss create mode 100644 spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupModal.js diff --git a/spot-client/src/common/css/_hangup-modal.scss b/spot-client/src/common/css/_hangup-modal.scss new file mode 100644 index 000000000..67fdac40c --- /dev/null +++ b/spot-client/src/common/css/_hangup-modal.scss @@ -0,0 +1,31 @@ +.hangup-modal-select { + @include centered-content; + flex-direction: column; + justify-content: center; + min-width: 360px; + text-align: center; + width: 100%; + + .content { + display: flex; + flex-direction: column; + justify-content: center; + } + + .footer { + align-items: center; + display: flex; + padding: 24px; + justify-content: center; + width: 100%; + } + + .hangup-button { + display: block; + font-size: 19px; + } + + .description { + font-size: 19px; + } +} \ No newline at end of file diff --git a/spot-client/src/common/css/_modal.scss b/spot-client/src/common/css/_modal.scss index b4e9e60f9..c2eea505f 100644 --- a/spot-client/src/common/css/_modal.scss +++ b/spot-client/src/common/css/_modal.scss @@ -4,10 +4,10 @@ height: 100%; justify-content: center; left: 0; - pointer-events: none; position: fixed; top: 0; width: 100%; + backdrop-filter: blur(2px); .modal-shroud { height: 100%; @@ -24,7 +24,9 @@ overflow: auto; pointer-events: all; position: relative; - + border: 1px solid rgb(61, 61, 61); + box-shadow: rgba(20, 20, 20, 0.6) 0px 4px 25px 4px; + border-radius: 6px; @media #{$mqw-tablet} { background-color: var(--container-bg-color); diff --git a/spot-client/src/common/css/index.scss b/spot-client/src/common/css/index.scss index dae761182..c5a796e98 100644 --- a/spot-client/src/common/css/index.scss +++ b/spot-client/src/common/css/index.scss @@ -31,6 +31,7 @@ @import './desktop-picker.scss'; @import './dial-pad.scss'; @import './electron.scss'; +@import './hangup-modal'; @import './help-view.scss'; @import './home-view.scss'; @import './idle-cursor.scss'; diff --git a/spot-client/src/common/i18n/en.json b/spot-client/src/common/i18n/en.json index 2f2f3e764..f0053a773 100644 --- a/spot-client/src/common/i18n/en.json +++ b/spot-client/src/common/i18n/en.json @@ -102,6 +102,10 @@ "rate": "Rate your experience", "thanks": "Thanks for using {{ productName }}!" }, + "hangup": { + "confirmation" : "Are you sure you want to hang up?", + "button": "Hang up" + }, "help": { "howToConnect": "Open {{ url }} in a desktop Google Chrome browser in the conference room to set it up and obtain a share key. Next enter the {{ codeLength }}-character share key in this app.", "isRemote": "This app is a remote controller for a conference room." diff --git a/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupButton.js b/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupButton.js index 35f09d6ad..19cbe3181 100644 --- a/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupButton.js +++ b/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupButton.js @@ -1,4 +1,4 @@ -import { hangUp } from 'common/app-state'; +import { showModal } from 'common/app-state'; import { CallEnd } from 'common/icons'; import PropTypes from 'prop-types'; import React from 'react'; @@ -6,6 +6,7 @@ import { connect } from 'react-redux'; import { NavButton } from './../../nav'; +import HangupModal from './HangupModal'; /** * A component for leaving a meeting in progress. @@ -39,7 +40,7 @@ HangupButton.propTypes = { function mapDispatchToProps(dispatch) { return { onHangup() { - dispatch(hangUp()); + dispatch(showModal(HangupModal)); } }; } diff --git a/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupModal.js b/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupModal.js new file mode 100644 index 000000000..94177efb5 --- /dev/null +++ b/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupModal.js @@ -0,0 +1,72 @@ +import { hideModal, hangUp } from 'common/app-state'; +import { Button, Modal } from 'common/ui'; + +import PropTypes from 'prop-types'; +import React from 'react'; +import { withTranslation } from 'react-i18next'; +import { connect } from 'react-redux'; + +/** + * Implements a modal to adjust the volume of the spot tv remotely. + */ +export class HangupModal extends React.Component { + static propTypes = { + onClose: PropTypes.func, + t: PropTypes.func + }; + + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {ReactElement} + */ + render() { + const { t } = this.props; + + return ( + +
+
+
+ { t('hangup.confirmation') } +
+
+
+ +
+
+ + ); + } +} + +/** + * Creates actions which can update Redux state. + * + * @param {Function} dispatch - The Redux dispatch function to update state. + * @private + * @returns {Object} + */ +function mapDispatchToProps(dispatch) { + return { + onClose() { + dispatch(hideModal()); + }, + onHangup() { + dispatch(hangUp()); + dispatch(hideModal()); + } + }; +} + +export default connect(null, mapDispatchToProps)(withTranslation()(HangupModal)); \ No newline at end of file From b496465b8c947dd2b76fd73126ca93408faac564 Mon Sep 17 00:00:00 2001 From: Andrei Gavrilescu Date: Mon, 5 Aug 2024 12:21:00 +0300 Subject: [PATCH 2/4] comment update --- .../ui/components/meeting-toolbar/buttons/HangupModal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupModal.js b/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupModal.js index 94177efb5..16f5bf10c 100644 --- a/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupModal.js +++ b/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupModal.js @@ -7,7 +7,7 @@ import { withTranslation } from 'react-i18next'; import { connect } from 'react-redux'; /** - * Implements a modal to adjust the volume of the spot tv remotely. + * Implements a modal dialog for confirming that the user wants to hang up. */ export class HangupModal extends React.Component { static propTypes = { From e8b973f96a18923c3d2d54f0becdaeee1b578738 Mon Sep 17 00:00:00 2001 From: Andrei Gavrilescu Date: Mon, 5 Aug 2024 12:54:37 +0300 Subject: [PATCH 3/4] fix lint --- .../meeting-toolbar/buttons/HangupModal.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupModal.js b/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupModal.js index 16f5bf10c..b1cd6e74b 100644 --- a/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupModal.js +++ b/spot-client/src/spot-remote/ui/components/meeting-toolbar/buttons/HangupModal.js @@ -1,6 +1,5 @@ -import { hideModal, hangUp } from 'common/app-state'; +import { hangUp, hideModal } from 'common/app-state'; import { Button, Modal } from 'common/ui'; - import PropTypes from 'prop-types'; import React from 'react'; import { withTranslation } from 'react-i18next'; @@ -12,6 +11,7 @@ import { connect } from 'react-redux'; export class HangupModal extends React.Component { static propTypes = { onClose: PropTypes.func, + onHangup: PropTypes.func, t: PropTypes.func }; @@ -38,12 +38,12 @@ export class HangupModal extends React.Component { - + ); @@ -69,4 +69,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect(null, mapDispatchToProps)(withTranslation()(HangupModal)); \ No newline at end of file +export default connect(null, mapDispatchToProps)(withTranslation()(HangupModal)); From 3fbd7dfeaab3222c3019fd99eedb9887cfd6ec76 Mon Sep 17 00:00:00 2001 From: Andrei Gavrilescu Date: Wed, 14 Aug 2024 10:40:11 +0300 Subject: [PATCH 4/4] safari blur --- spot-client/src/common/css/_modal.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/spot-client/src/common/css/_modal.scss b/spot-client/src/common/css/_modal.scss index c2eea505f..2d4732550 100644 --- a/spot-client/src/common/css/_modal.scss +++ b/spot-client/src/common/css/_modal.scss @@ -8,6 +8,7 @@ top: 0; width: 100%; backdrop-filter: blur(2px); + -webkit-backdrop-filter: blur(2px); .modal-shroud { height: 100%;