enhancement of call ctrl page

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 {

src/components/ActiveCallPad/index.js

@@ -42,69 +42,71 @@ export default function ActiveCallPad(props) {
     props.onRecord;
   return (
     <div className={classnames(styles.root, props.className)}>
-      <div className={styles.buttonRow}>
-        {muteButton}
-        <ActiveCallButton
-          onClick={props.onShowKeyPad}
-          className={styles.callButton}
-          icon={KeypadIcon}
-          title={i18n.getString('keypad', props.currentLocale)}
-        />
-        <ActiveCallButton
-          onClick={onHoldClicked}
-          className={styles.callButton}
-          title={
-            props.isOnHold ?
-            i18n.getString('onHold', props.currentLocale) :
-            i18n.getString('hold', props.currentLocale)
-          }
-          active={props.isOnHold}
-          icon={HoldIcon}
-        />
-      </div>
-      <div className={styles.buttonRow}>
-        <ActiveCallButton
-          onClick={props.isOnHold ? () => {} : () => {}}
-          className={styles.callButton}
-          title={i18n.getString('park', props.currentLocale)}
-          icon={ParkIcon}
-          disabled={props.isOnHold}
-        />
-        <ActiveCallButton
-          onClick={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}
-        />
-        <ActiveCallButton
-          onClick={props.onAdd}
-          title={i18n.getString('add', props.currentLocale)}
-          className={styles.callButton}
-          icon={AddIcon}
-        />
-      </div>
-      <div className={styles.buttonRow}>
-        <ActiveCallButton
-          onClick={() => null}
-          title={i18n.getString('transfer', props.currentLocale)}
-          icon={TransferIcon}
-          className={styles.callButton}
-        />
-        <ActiveCallButton
-          onClick={props.isOnHold ? () => {} : () => {}}
-          title={i18n.getString('flip', props.currentLocale)}
-          icon={FlipIcon}
-          className={styles.callButton}
-          disabled={props.isOnHold}
-        />
+      <div className={styles.callCtrlButtonGroup}>
+        <div className={styles.buttonRow}>
+          {muteButton}
+          <ActiveCallButton
+            onClick={props.onShowKeyPad}
+            className={styles.callButton}
+            icon={KeypadIcon}
+            title={i18n.getString('keypad', props.currentLocale)}
+          />
+          <ActiveCallButton
+            onClick={onHoldClicked}
+            className={styles.callButton}
+            title={
+              props.isOnHold ?
+              i18n.getString('onHold', props.currentLocale) :
+              i18n.getString('hold', props.currentLocale)
+            }
+            active={props.isOnHold}
+            icon={HoldIcon}
+          />
+        </div>
+        <div className={styles.buttonRow}>
+          <ActiveCallButton
+            onClick={props.isOnHold ? () => {} : () => {}}
+            className={styles.callButton}
+            title={i18n.getString('park', props.currentLocale)}
+            icon={ParkIcon}
+            disabled={props.isOnHold}
+          />
+          <ActiveCallButton
+            onClick={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}
+          />
+          <ActiveCallButton
+            onClick={props.onAdd}
+            title={i18n.getString('add', props.currentLocale)}
+            className={styles.callButton}
+            icon={AddIcon}
+          />
+        </div>
+        <div className={styles.buttonRow}>
+          <ActiveCallButton
+            onClick={() => null}
+            title={i18n.getString('transfer', props.currentLocale)}
+            icon={TransferIcon}
+            className={styles.callButton}
+          />
+          <ActiveCallButton
+            onClick={props.isOnHold ? () => {} : () => {}}
+            title={i18n.getString('flip', props.currentLocale)}
+            icon={FlipIcon}
+            className={styles.callButton}
+            disabled={props.isOnHold}
+          />
+        </div>
       </div>
-      <div className={styles.buttonRow}>
+      <div className={classnames(styles.buttonRow, styles.stopButtonGroup)}>
         <div className={styles.button}>
           <CircleButton
             className={styles.stopButton}

src/components/ActiveCallPad/styles.scss

@@ -1,8 +1,11 @@
 @import '../../lib/commonStyles/colors.scss';
 
 .root {
-  margin-left: 9%;
-  margin-right: 9%;
+  max-width: 550px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 9%;
+  padding-right: 9%;
 }
 
 .callButton {
@@ -11,6 +14,7 @@
 
 .buttonRow {
   text-align: left;
+  height: 33.33%;
 }
 
 .button {
@@ -28,3 +32,11 @@
     fill: #ffffff;
   }
 }
+
+.callCtrlButtonGroup {
+  height: 60%;
+}
+
+.stopButtonGroup {
+  height: 20%;
+}

src/components/ActiveCallPanel/index.js

@@ -1,12 +1,11 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 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,80 @@ 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 : (
-      <CallInfo
-        currentLocale={this.props.currentLocale}
-        nameMatches={this.props.nameMatches}
-        fallBackName={this.props.fallBackName}
-        phoneNumber={this.props.phoneNumber}
-        formatPhone={this.props.formatPhone}
-        startTime={this.props.startTime}
-        areaCode={this.props.areaCode}
-        countryCode={this.props.countryCode}
-        selectedMatcherIndex={this.props.selectedMatcherIndex}
-        onSelectMatcherName={this.props.onSelectMatcherName}
-        avatarUrl={this.props.avatarUrl}
-      />
-    );
-    const buttonsPad = this.state.isShowKeyPad ? null : (
-      <ActiveCallPad
-        currentLocale={this.props.currentLocale}
-        isOnMute={this.props.isOnMute}
-        isOnHold={this.props.isOnHold}
-        isOnRecord={this.props.isOnRecord}
-        onMute={this.props.onMute}
-        onUnmute={this.props.onUnmute}
-        onHold={this.props.onHold}
-        onUnhold={this.props.onUnhold}
-        onRecord={this.props.onRecord}
-        onStopRecord={this.props.onStopRecord}
-        onShowKeyPad={this.showKeyPad}
-        hangup={this.props.hangup}
-        onAdd={this.props.onAdd}
-      />
-    );
-    const dialPad = this.state.isShowKeyPad ? (
-      <ActiveCallDialPad
-        onChange={this.props.onKeyPadChange}
-        hiddenDialPad={this.hiddenKeyPad}
-        hangup={this.props.hangup}
-        currentLocale={this.props.currentLocale}
-      />
-    ) : 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 (
+    <div className={styles.root}>
       <BackHeader
-        onBackClick={this.props.onBackButtonClick}
+        onBackClick={onBackButtonClick}
         backButton={(
           <span className={styles.backButton}>
             <i className={classnames(dynamicsFont.arrow, styles.backIcon)} />
-            <span className={styles.backLabel}>{this.props.backButtonLabel}</span>
+            <span className={styles.backLabel}>{backButtonLabel}</span>
           </span>
         )}
         buttons={[]}
       />
-    );
-    return (
-      <div className={styles.root}>
-        {backHeader}
-        <Panel>
-          {userInfo}
-          {buttonsPad}
-          {dialPad}
-          {this.props.children}
-        </Panel>
-      </div>
-    );
-  }
+      <Panel>
+        <CallInfo
+          currentLocale={currentLocale}
+          nameMatches={nameMatches}
+          fallBackName={fallBackName}
+          phoneNumber={phoneNumber}
+          formatPhone={formatPhone}
+          startTime={startTime}
+          areaCode={areaCode}
+          countryCode={countryCode}
+          selectedMatcherIndex={selectedMatcherIndex}
+          onSelectMatcherName={onSelectMatcherName}
+          avatarUrl={avatarUrl}
+        />
+        <ActiveCallPad
+          className={styles.callPad}
+          currentLocale={currentLocale}
+          isOnMute={isOnMute}
+          isOnHold={isOnHold}
+          isOnRecord={isOnRecord}
+          onMute={onMute}
+          onUnmute={onUnmute}
+          onHold={onHold}
+          onUnhold={onUnhold}
+          onRecord={onRecord}
+          onStopRecord={onStopRecord}
+          onShowKeyPad={onShowKeyPad}
+          hangup={hangup}
+          onAdd={onAdd}
+        />
+        {children}
+      </Panel>
+    </div>
+  );
 }
 
 ActiveCallPanel.propTypes = {
@@ -185,7 +173,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,