From 151eb9c2a7782a6d3b5bcb99d7ecda2f20f23091 Mon Sep 17 00:00:00 2001 From: Andrei Gavrilescu Date: Mon, 5 Aug 2024 12:16:08 +0300 Subject: [PATCH] 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