diff --git a/docs/src/app/pages/Components/ActiveCallPad/Demo.js b/docs/src/app/pages/Components/ActiveCallPad/Demo.js index 21474bea78..31209a43fe 100644 --- a/docs/src/app/pages/Components/ActiveCallPad/Demo.js +++ b/docs/src/app/pages/Components/ActiveCallPad/Demo.js @@ -13,7 +13,9 @@ props.hangup = () => null; props.onShowKeyPad = () => null; props.onAdd = () => null; props.currentLocale = 'en-US'; - +props.flipNumbers = []; +props.recordStatus = 'recordStatus-idle'; +props.onShowFlipPanel = () => null; /** * A example of `ActiveCallPad` */ diff --git a/docs/src/app/pages/Components/ActiveCallPanel/Demo.js b/docs/src/app/pages/Components/ActiveCallPanel/Demo.js index 5267fd34d2..ad2b40b9f0 100644 --- a/docs/src/app/pages/Components/ActiveCallPanel/Demo.js +++ b/docs/src/app/pages/Components/ActiveCallPanel/Demo.js @@ -23,6 +23,9 @@ props.nameMatches = []; props.onSelectMatcherName = () => null; props.selectedMatcherIndex = 0; props.fallBackName = 'Unknown'; +props.flipNumbers = []; +props.recordStatus = 'recordStatus-idle'; +props.onShowKeyPad = () => null; /** * A example of `ActiveCallPanel` */ diff --git a/docs/src/www/index.html b/docs/src/www/index.html index d0d5eab0b8..000eb67330 100644 --- a/docs/src/www/index.html +++ b/docs/src/www/index.html @@ -4,7 +4,7 @@ - RingCentral Js Widget + RingCentral JS Widget diff --git a/src/components/ActiveCallButton/index.js b/src/components/ActiveCallButton/index.js index 60e0dc5f4c..848108d7c9 100644 --- a/src/components/ActiveCallButton/index.js +++ b/src/components/ActiveCallButton/index.js @@ -6,7 +6,7 @@ import CircleButton from '../CircleButton'; import styles from './styles.scss'; export default function ActiveCallButton(props) { - const className = classnames(styles.root, props.className); + const className = classnames(styles.btnSvg, props.className); const buttonClassName = classnames( styles.button, props.buttonClassName, @@ -14,21 +14,35 @@ export default function ActiveCallButton(props) { props.disabled ? styles.buttonDisabled : null, ); return ( -
-
- -
-
+ + + {props.title} -
-
+ + ); } @@ -41,6 +55,10 @@ ActiveCallButton.propTypes = { title: PropTypes.string.isRequired, icon: PropTypes.func, showBorder: PropTypes.bool, + width: PropTypes.string, + height: PropTypes.string, + x: PropTypes.number, + y: PropTypes.number, }; ActiveCallButton.defaultProps = { @@ -50,4 +68,8 @@ ActiveCallButton.defaultProps = { active: false, icon: undefined, showBorder: true, + width: '100%', + height: '100%', + x: 0, + y: 0, }; diff --git a/src/components/ActiveCallButton/styles.scss b/src/components/ActiveCallButton/styles.scss index e76ae81fb3..8f730d3acc 100644 --- a/src/components/ActiveCallButton/styles.scss +++ b/src/components/ActiveCallButton/styles.scss @@ -20,18 +20,9 @@ $title-height: 24px; margin-bottom: 2px; } -.buttonContainer { - padding-left: 22%; - padding-right: 22%; -} - .buttonTitle { @include secondary-font; - font-size: 12px; - text-align: center; - width: 100%; - line-height: $title-height; - height: $title-height; + font-size: 73px; } .buttonActive { diff --git a/src/components/ActiveCallPad/styles.scss b/src/components/ActiveCallPad/styles.scss index c3b8d3a7fe..f9d829e30e 100644 --- a/src/components/ActiveCallPad/styles.scss +++ b/src/components/ActiveCallPad/styles.scss @@ -27,7 +27,9 @@ } .stopButton { - background: #ff4646; + circle { + fill: #ff4646; + } g, path { fill: #ffffff; } diff --git a/src/components/ActiveCallPanel/index.js b/src/components/ActiveCallPanel/index.js index 8052a08f6f..0ad09695b4 100644 --- a/src/components/ActiveCallPanel/index.js +++ b/src/components/ActiveCallPanel/index.js @@ -197,15 +197,14 @@ ActiveCallPanel.propTypes = { backButtonLabel: PropTypes.string, brand: PropTypes.string, showContactDisplayPlaceholder: PropTypes.bool, - onShowFlipPanel: PropTypes.func.isRequired, - flipNumbers: PropTypes.array.isRequired, + onShowFlipPanel: PropTypes.func, + flipNumbers: PropTypes.array, }; ActiveCallPanel.defaultProps = { startTime: null, isOnMute: false, isOnHold: false, - isOnRecord: false, phoneNumber: null, children: undefined, avatarUrl: null, @@ -213,6 +212,7 @@ ActiveCallPanel.defaultProps = { brand: 'RingCentral', showContactDisplayPlaceholder: true, flipNumbers: [], + onShowFlipPanel: () => null, }; export default ActiveCallPanel; diff --git a/src/components/CircleButton/index.js b/src/components/CircleButton/index.js index 5787662320..29df4438f2 100644 --- a/src/components/CircleButton/index.js +++ b/src/components/CircleButton/index.js @@ -26,24 +26,27 @@ function CircleButton(props) { ); const onClick = props.disabled ? () => {} : props.onClick; return ( -
- - - - {icon} - - -
+ + + {icon} + + ); } @@ -53,6 +56,10 @@ CircleButton.propTypes = { showBorder: PropTypes.bool, iconClassName: PropTypes.string, onClick: PropTypes.func, + width: PropTypes.string, + height: PropTypes.string, + x: PropTypes.number, + y: PropTypes.number, disabled: PropTypes.bool }; @@ -63,6 +70,10 @@ CircleButton.defaultProps = { iconClassName: undefined, disabled: false, onClick: () => null, + width: '100%', + height: '100%', + x: 0, + y: 0, }; export default CircleButton; diff --git a/src/components/CircleButton/styles.scss b/src/components/CircleButton/styles.scss index b65f44a7ba..f0281c461c 100644 --- a/src/components/CircleButton/styles.scss +++ b/src/components/CircleButton/styles.scss @@ -1,17 +1,7 @@ @import '../../lib/commonStyles/colors.scss'; @import '../../lib/commonStyles/no-select'; -.root { - position: relative; - width: 100%; - box-sizing: border-box; - padding-top: 100%; -} - .btnSvg { - position: absolute; - top: 0; - left: 0; width: 100%; } diff --git a/src/components/Environment/index.js b/src/components/Environment/index.js index c471932109..a3831cb433 100644 --- a/src/components/Environment/index.js +++ b/src/components/Environment/index.js @@ -99,7 +99,10 @@ class Environment extends Component {
Environment + buttons={[]} + > + Environment + Server diff --git a/src/components/IncomingCallPad/index.js b/src/components/IncomingCallPad/index.js index c737a475aa..6aba076567 100644 --- a/src/components/IncomingCallPad/index.js +++ b/src/components/IncomingCallPad/index.js @@ -58,9 +58,10 @@ export default class IncomingCallPad extends Component { answer, forwardingNumbers, formatPhone, + className, } = this.props; return ( -
+
{ @@ -165,8 +166,10 @@ IncomingCallPad.propTypes = { formatPhone: PropTypes.func, onForward: PropTypes.func.isRequired, replyWithMessage: PropTypes.func.isRequired, + className: PropTypes.string }; IncomingCallPad.defaultProps = { formatPhone: phone => phone, + className: null, }; diff --git a/src/components/IncomingCallPad/styles.scss b/src/components/IncomingCallPad/styles.scss index dd10ed0420..324a286668 100644 --- a/src/components/IncomingCallPad/styles.scss +++ b/src/components/IncomingCallPad/styles.scss @@ -7,22 +7,30 @@ .buttonRow { text-align: center; margin-bottom: 10px; + height: 24%; } .callButton { width: 33.33%; padding: 0; + + text { + font-size: 73px; + } } .bigCallButton { composes: callButton; - padding: 1px; width: 50%; + text { + font-size: 65px; + } } .rejectButton { - background: #ff4646; - font-size: 20px; + circle { + fill: #ff4646; + } g, path { fill: #ffffff; } @@ -30,13 +38,16 @@ .answerButton { composes: rejectButton; - background: #4cd964; + circle { + fill: #4cd964; + } } .answerButtonGroup { - width: 75%; + width: 76%; margin-left: auto; margin-right: auto; + height: 27%; } .forwardContainner{ diff --git a/src/components/IncomingCallPanel/index.js b/src/components/IncomingCallPanel/index.js index ce37e21046..824ec60551 100644 --- a/src/components/IncomingCallPanel/index.js +++ b/src/components/IncomingCallPanel/index.js @@ -95,6 +95,7 @@ export default function IncomingCallPanel(props) { showContactDisplayPlaceholder={props.showContactDisplayPlaceholder} />