From 4c4be306b740d3ece243cc8c43aa6e016c1a19d4 Mon Sep 17 00:00:00 2001 From: embbnux Date: Mon, 24 Jul 2017 10:13:11 +0800 Subject: [PATCH 1/3] adjust call ctrl structure --- src/components/ActiveCallPanel/index.js | 147 +++++++++++------------- src/components/CallCtrlPanel/index.js | 118 +++++++++++++++++++ src/containers/CallCtrlPage/index.js | 6 +- 3 files changed, 188 insertions(+), 83 deletions(-) create mode 100644 src/components/CallCtrlPanel/index.js diff --git a/src/components/ActiveCallPanel/index.js b/src/components/ActiveCallPanel/index.js index 0e18bfe28d..09c4e94834 100644 --- a/src/components/ActiveCallPanel/index.js +++ b/src/components/ActiveCallPanel/index.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; @@ -6,7 +6,6 @@ import BackHeader from '../BackHeader'; import Panel from '../Panel'; import DurationCounter from '../DurationCounter'; import ActiveCallPad from '../ActiveCallPad'; -import ActiveCallDialPad from '../ActiveCallDialPad'; import ContactDisplay from '../ContactDisplay'; import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss'; import styles from './styles.scss'; @@ -80,91 +79,79 @@ CallInfo.defaultProps = { avatarUrl: null, }; -class ActiveCallPanel extends Component { - constructor(props) { - super(props); - this.state = { - isShowKeyPad: false, - }; - - this.hiddenKeyPad = () => { - this.setState({ - isShowKeyPad: false, - }); - }; - - this.showKeyPad = () => { - this.setState({ - isShowKeyPad: true, - }); - }; - } - - render() { - const userInfo = this.state.isShowKeyPad ? null : ( - - ); - const buttonsPad = this.state.isShowKeyPad ? null : ( - - ); - const dialPad = this.state.isShowKeyPad ? ( - - ) : null; - const backHeader = this.state.isShowKeyPad ? null : ( +function ActiveCallPanel({ + onBackButtonClick, + backButtonLabel, + currentLocale, + nameMatches, + fallBackName, + phoneNumber, + formatPhone, + startTime, + areaCode, + countryCode, + selectedMatcherIndex, + onSelectMatcherName, + avatarUrl, + isOnMute, + isOnHold, + isOnRecord, + onMute, + onUnmute, + onHold, + onUnhold, + onRecord, + onStopRecord, + onShowKeyPad, + hangup, + onAdd, + children, +}) { + return ( +
- {this.props.backButtonLabel} + {backButtonLabel} )} buttons={[]} /> - ); - return ( -
- {backHeader} - - {userInfo} - {buttonsPad} - {dialPad} - {this.props.children} - -
- ); - } + + + + {children} + +
+ ); } ActiveCallPanel.propTypes = { @@ -185,7 +172,7 @@ ActiveCallPanel.propTypes = { onAdd: PropTypes.func.isRequired, hangup: PropTypes.func.isRequired, onBackButtonClick: PropTypes.func.isRequired, - onKeyPadChange: PropTypes.func.isRequired, + onShowKeyPad: PropTypes.func.isRequired, formatPhone: PropTypes.func.isRequired, children: PropTypes.node, areaCode: PropTypes.string.isRequired, diff --git a/src/components/CallCtrlPanel/index.js b/src/components/CallCtrlPanel/index.js new file mode 100644 index 0000000000..a652e0fe90 --- /dev/null +++ b/src/components/CallCtrlPanel/index.js @@ -0,0 +1,118 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import ActiveCallDialPad from '../ActiveCallDialPad'; +import ActiveCallPanel from '../ActiveCallPanel'; + +class CallCtrlPanel extends Component { + constructor(props) { + super(props); + this.state = { + isShowKeyPad: false, + }; + + this.hiddenKeyPad = () => { + this.setState({ + isShowKeyPad: false, + }); + }; + + this.showKeyPad = () => { + this.setState({ + isShowKeyPad: true, + }); + }; + } + + render() { + if (this.state.isShowKeyPad) { + return ( + + ); + } + return ( + + {this.props.children} + + ); + } +} + +CallCtrlPanel.propTypes = { + callStatus: PropTypes.string, + sessionId: PropTypes.string, + phoneNumber: PropTypes.string, + nameMatches: PropTypes.array.isRequired, + fallBackName: PropTypes.string.isRequired, + currentLocale: PropTypes.string.isRequired, + startTime: PropTypes.number, + isOnMute: PropTypes.bool, + isOnHold: PropTypes.bool, + isOnRecord: PropTypes.bool, + onMute: PropTypes.func.isRequired, + onUnmute: PropTypes.func.isRequired, + onHold: PropTypes.func.isRequired, + onUnhold: PropTypes.func.isRequired, + onRecord: PropTypes.func.isRequired, + onStopRecord: PropTypes.func.isRequired, + onAdd: PropTypes.func.isRequired, + hangup: PropTypes.func.isRequired, + onBackButtonClick: PropTypes.func.isRequired, + onKeyPadChange: PropTypes.func.isRequired, + formatPhone: PropTypes.func.isRequired, + children: PropTypes.node, + areaCode: PropTypes.string.isRequired, + countryCode: PropTypes.string.isRequired, + selectedMatcherIndex: PropTypes.number.isRequired, + onSelectMatcherName: PropTypes.func.isRequired, + avatarUrl: PropTypes.string, + backButtonLabel: PropTypes.string, +}; + +CallCtrlPanel.defaultProps = { + startTime: null, + isOnMute: false, + isOnHold: false, + isOnRecord: false, + phoneNumber: null, + children: undefined, + avatarUrl: null, + backButtonLabel: 'Active Calls', + sessionId: undefined, + callStatus: null, +}; + +export default CallCtrlPanel; diff --git a/src/containers/CallCtrlPage/index.js b/src/containers/CallCtrlPage/index.js index c708b112c0..7ba41cf2b2 100644 --- a/src/containers/CallCtrlPage/index.js +++ b/src/containers/CallCtrlPage/index.js @@ -7,7 +7,7 @@ import Locale from 'ringcentral-integration/modules/Locale'; import RegionSettings from 'ringcentral-integration/modules/RegionSettings'; import callDirections from 'ringcentral-integration/enums/callDirections'; -import ActiveCallPanel from '../../components/ActiveCallPanel'; +import CallCtrlPanel from '../../components/CallCtrlPanel'; import i18n from './i18n'; @@ -99,7 +99,7 @@ class CallCtrlPage extends Component { fallbackUserName = i18n.getString('unknown', this.props.currentLocale); } return ( - {this.props.children} - + ); } } From 9a100d16ddcf2516ec1ca2435e46dafeb9b3e346 Mon Sep 17 00:00:00 2001 From: embbnux Date: Mon, 24 Jul 2017 15:56:40 +0800 Subject: [PATCH 2/3] update call ctrl ui --- src/components/ActiveCallButton/styles.scss | 15 ++- src/components/ActiveCallPad/index.js | 126 ++++++++++---------- src/components/ActiveCallPad/styles.scss | 17 ++- src/components/ActiveCallPanel/index.js | 1 + src/components/ActiveCallPanel/styles.scss | 8 +- src/components/CircleButton/styles.scss | 7 +- src/components/IncomingCallPad/index.js | 3 +- src/components/IncomingCallPad/styles.scss | 14 ++- src/containers/CallCtrlPage/index.js | 52 ++++---- src/containers/IncomingCallPage/index.js | 51 ++++---- 10 files changed, 164 insertions(+), 130 deletions(-) diff --git a/src/components/ActiveCallButton/styles.scss b/src/components/ActiveCallButton/styles.scss index 8127572a98..37e4b59da8 100644 --- a/src/components/ActiveCallButton/styles.scss +++ b/src/components/ActiveCallButton/styles.scss @@ -1,16 +1,20 @@ @import '../../lib/commonStyles/colors.scss'; @import '../../lib/commonStyles/fonts.scss'; +$title-height: 24px; + .root { + position: relative; text-align: center; display: inline-block; - padding: 5px 5px; + padding: 5px 8%; box-sizing: border-box; + height: 100%; } .button { - width: 63%; - border-radius: 63%; + width: 100%; + border-radius: 100%; margin-left: auto; margin-right: auto; margin-bottom: 2px; @@ -19,7 +23,10 @@ .buttonTitle { @include secondary-font; font-size: 12px; - padding: 5px 0; + text-align: center; + width: 100%; + line-height: $title-height; + height: $title-height; } .buttonActive { diff --git a/src/components/ActiveCallPad/index.js b/src/components/ActiveCallPad/index.js index 9549ac7528..b002497c22 100644 --- a/src/components/ActiveCallPad/index.js +++ b/src/components/ActiveCallPad/index.js @@ -42,69 +42,71 @@ export default function ActiveCallPad(props) { props.onRecord; return (
-
- {muteButton} - - -
-
- {} : () => {}} - className={styles.callButton} - title={i18n.getString('park', props.currentLocale)} - icon={ParkIcon} - disabled={props.isOnHold} - /> - {} : onRecordClicked} - title={ - props.isOnRecord ? - i18n.getString('stopRecord', props.currentLocale) : - i18n.getString('record', props.currentLocale) - } - active={props.isOnRecord} - className={styles.callButton} - icon={RecordIcon} - disabled={props.isOnHold} - /> - -
-
- null} - title={i18n.getString('transfer', props.currentLocale)} - icon={TransferIcon} - className={styles.callButton} - /> - {} : () => {}} - title={i18n.getString('flip', props.currentLocale)} - icon={FlipIcon} - className={styles.callButton} - disabled={props.isOnHold} - /> +
+
+ {muteButton} + + +
+
+ {} : () => {}} + className={styles.callButton} + title={i18n.getString('park', props.currentLocale)} + icon={ParkIcon} + disabled={props.isOnHold} + /> + {} : onRecordClicked} + title={ + props.isOnRecord ? + i18n.getString('stopRecord', props.currentLocale) : + i18n.getString('record', props.currentLocale) + } + active={props.isOnRecord} + className={styles.callButton} + icon={RecordIcon} + disabled={props.isOnHold} + /> + +
+
+ null} + title={i18n.getString('transfer', props.currentLocale)} + icon={TransferIcon} + className={styles.callButton} + /> + {} : () => {}} + title={i18n.getString('flip', props.currentLocale)} + icon={FlipIcon} + className={styles.callButton} + disabled={props.isOnHold} + /> +
-
+
-
+
- match.id === props.session.contactMatch.id - ); - } this.state = { - selectedMatcherIndex, + selectedMatcherIndex: 0, avatarUrl: null, }; @@ -60,26 +53,34 @@ class CallCtrlPage extends Component { this.props.sendDTMF(value, this.props.session.id); } + componentDidMount() { + this._updateAvatarAndMatchIndex(this.props); + } + componentWillReceiveProps(nextProps) { if (this.props.session.id !== nextProps.session.id) { - let contact = nextProps.session.contactMatch; - let selectedMatcherIndex = 0; - if (!contact) { - contact = nextProps.nameMatches && nextProps.nameMatches[0]; - } else { - selectedMatcherIndex = nextProps.nameMatches.findIndex(match => - match.id === contact.id - ); - } - this.setState({ - selectedMatcherIndex, - avatarUrl: null, + this._updateAvatarAndMatchIndex(nextProps); + } + } + + _updateAvatarAndMatchIndex(props) { + let contact = props.session.contactMatch; + let selectedMatcherIndex = 0; + if (!contact) { + contact = props.nameMatches && props.nameMatches[0]; + } else { + selectedMatcherIndex = props.nameMatches.findIndex(match => + match.id === contact.id + ); + } + this.setState({ + selectedMatcherIndex, + avatarUrl: null, + }); + if (contact) { + props.getAvatarUrl(contact).then((avatarUrl) => { + this.setState({ avatarUrl }); }); - if (contact) { - nextProps.getAvatarUrl(contact).then((avatarUrl) => { - this.setState({ avatarUrl }); - }); - } } } @@ -88,7 +89,6 @@ class CallCtrlPage extends Component { if (!session.id) { return null; } - // isRinging = true; const phoneNumber = session.direction === callDirections.outbound ? session.to : session.from; let fallbackUserName; diff --git a/src/containers/IncomingCallPage/index.js b/src/containers/IncomingCallPage/index.js index 4a1a1075fb..932cb15fd7 100644 --- a/src/containers/IncomingCallPage/index.js +++ b/src/containers/IncomingCallPage/index.js @@ -17,15 +17,8 @@ import i18n from './i18n'; class IncomingCallPage extends Component { constructor(props) { super(props); - - let selectedMatcherIndex = 0; - if (props.session.contactMatch) { - selectedMatcherIndex = props.nameMatches.findIndex(match => - match.id === props.session.contactMatch.id - ); - } this.state = { - selectedMatcherIndex, + selectedMatcherIndex: 0, avatarUrl: null, }; @@ -57,26 +50,34 @@ class IncomingCallPage extends Component { this.props.onForward(this.props.session.id, forwardNumber); } + componentDidMount() { + this._updateAvatarAndMatchIndex(this.props); + } + componentWillReceiveProps(nextProps) { if (this.props.session.id !== nextProps.session.id) { - let selectedMatcherIndex = 0; - let contact = nextProps.session.contactMatch; - if (!contact) { - contact = nextProps.nameMatches && nextProps.nameMatches[0]; - } else { - selectedMatcherIndex = nextProps.nameMatches.findIndex(match => - match.id === contact.id - ); - } - this.setState({ - selectedMatcherIndex, - avatarUrl: null, + this._updateAvatarAndMatchIndex(nextProps); + } + } + + _updateAvatarAndMatchIndex(props) { + let selectedMatcherIndex = 0; + let contact = props.session.contactMatch; + if (!contact) { + contact = props.nameMatches && props.nameMatches[0]; + } else { + selectedMatcherIndex = props.nameMatches.findIndex(match => + match.id === contact.id + ); + } + this.setState({ + selectedMatcherIndex, + avatarUrl: null, + }); + if (contact) { + props.getAvatarUrl(contact).then((avatarUrl) => { + this.setState({ avatarUrl }); }); - if (contact) { - nextProps.getAvatarUrl(contact).then((avatarUrl) => { - this.setState({ avatarUrl }); - }); - } } } From 05811570595dbf7f9ab1ac063e4b70ebfb902704 Mon Sep 17 00:00:00 2001 From: embbnux Date: Mon, 24 Jul 2017 15:59:12 +0800 Subject: [PATCH 3/3] add new line --- src/components/ActiveCallPad/styles.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ActiveCallPad/styles.scss b/src/components/ActiveCallPad/styles.scss index 5633233be8..f8083ab13e 100644 --- a/src/components/ActiveCallPad/styles.scss +++ b/src/components/ActiveCallPad/styles.scss @@ -35,9 +35,8 @@ .callCtrlButtonGroup { height: 60%; - // min-height: 250px; } .stopButtonGroup { height: 20%; -} \ No newline at end of file +}