From 63284f8056b99d40ddbcb27fad2359c78eb544b0 Mon Sep 17 00:00:00 2001 From: caffffe Date: Tue, 18 Jul 2017 09:51:04 +0800 Subject: [PATCH 1/6] current call control_Hold/unhold --- src/components/ActiveCallPad/index.js | 10 +++++----- src/components/ActiveCallPad/styles.scss | 4 ++++ 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/ActiveCallPad/index.js b/src/components/ActiveCallPad/index.js index 336f441e3e..ad5fc9364d 100644 --- a/src/components/ActiveCallPad/index.js +++ b/src/components/ActiveCallPad/index.js @@ -29,7 +29,7 @@ export default function ActiveCallPad(props) { ( @@ -61,7 +61,7 @@ export default function ActiveCallPad(props) {
null} - className={styles.callButton} + className={classnames(styles.callButton, props.isOnHold ? styles.disabled : null)} title={i18n.getString('park', props.currentLocale)} icon={ParkIcon} /> @@ -73,7 +73,7 @@ export default function ActiveCallPad(props) { i18n.getString('record', props.currentLocale) } active={props.isOnRecord} - className={styles.callButton} + className={classnames(styles.callButton, props.isOnHold ? styles.disabled : null)} icon={RecordIcon} /> null} title={i18n.getString('transfer', props.currentLocale)} icon={TransferIcon} - className={styles.callButton} + className={classnames(styles.callButton, props.isOnHold ? styles.disabled : null)} /> null} title={i18n.getString('flip', props.currentLocale)} icon={FlipIcon} - className={styles.callButton} + className={classnames(styles.callButton, props.isOnHold ? styles.disabled : null)} />
diff --git a/src/components/ActiveCallPad/styles.scss b/src/components/ActiveCallPad/styles.scss index 40fcfa85a8..21c1d45d29 100644 --- a/src/components/ActiveCallPad/styles.scss +++ b/src/components/ActiveCallPad/styles.scss @@ -7,6 +7,10 @@ .callButton { width: 33.33%; + &.disabled g{ + background: #ffffff; + border: solid 1px #e3e3e3; + } } .buttonRow { From 55a49ace4f48462bce817fe6b407469590a9d514 Mon Sep 17 00:00:00 2001 From: caffffe Date: Tue, 18 Jul 2017 15:09:40 +0800 Subject: [PATCH 2/6] when the call is on hold user should not be able to record/flip/park --- src/components/ActiveCallPad/index.js | 10 +++++----- src/components/ActiveCallPad/styles.scss | 19 ++++++++++++++++--- src/components/WebphoneAlert/i18n/en-US.js | 1 + src/components/WebphoneAlert/index.js | 3 ++- 4 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/components/ActiveCallPad/index.js b/src/components/ActiveCallPad/index.js index ad5fc9364d..3c031e2982 100644 --- a/src/components/ActiveCallPad/index.js +++ b/src/components/ActiveCallPad/index.js @@ -29,7 +29,7 @@ export default function ActiveCallPad(props) { ( @@ -60,13 +60,13 @@ export default function ActiveCallPad(props) {
null} + onClick={props.onHold ? null : null} className={classnames(styles.callButton, props.isOnHold ? styles.disabled : null)} title={i18n.getString('park', props.currentLocale)} icon={ParkIcon} /> null} title={i18n.getString('transfer', props.currentLocale)} icon={TransferIcon} - className={classnames(styles.callButton, props.isOnHold ? styles.disabled : null)} + className={styles.callButton} /> null} + onClick={props.onHold ? null : null} title={i18n.getString('flip', props.currentLocale)} icon={FlipIcon} className={classnames(styles.callButton, props.isOnHold ? styles.disabled : null)} diff --git a/src/components/ActiveCallPad/styles.scss b/src/components/ActiveCallPad/styles.scss index 21c1d45d29..cae0669f4f 100644 --- a/src/components/ActiveCallPad/styles.scss +++ b/src/components/ActiveCallPad/styles.scss @@ -7,9 +7,22 @@ .callButton { width: 33.33%; - &.disabled g{ - background: #ffffff; - border: solid 1px #e3e3e3; + &.disabled { + g { + fill: $lightgray; + } + circle { + fill: $lightgray; + stroke: $gray; + } + path { + fill:$rc-blue-highlight-solid; + } + } + &.disabled:hover{ + circle { + stroke: $gray; + } } } diff --git a/src/components/WebphoneAlert/i18n/en-US.js b/src/components/WebphoneAlert/i18n/en-US.js index d00d185f9a..e8e9dba4cb 100644 --- a/src/components/WebphoneAlert/i18n/en-US.js +++ b/src/components/WebphoneAlert/i18n/en-US.js @@ -8,4 +8,5 @@ export default { [webphoneErrors.getSipProvisionError]: 'You have no permission to send message.', [webphoneErrors.toVoiceMailError]: 'Cannot send call to voicemail due to internal error', [webphoneErrors.muteError]: 'Call cannot be muted at the moment.', + [webphoneErrors.holdError]: 'Call cannot be hold at the moment.', }; diff --git a/src/components/WebphoneAlert/index.js b/src/components/WebphoneAlert/index.js index bf2de252f4..c50845e5e8 100644 --- a/src/components/WebphoneAlert/index.js +++ b/src/components/WebphoneAlert/index.js @@ -22,6 +22,7 @@ WebphoneAlert.handleMessage = ({ message }) => ( (message === webphoneErrors.webphoneCountOverLimit) || (message === webphoneErrors.notOutboundCallWithoutDL) || (message === webphoneErrors.toVoiceMailError) || - (message === webphoneErrors.muteError) + (message === webphoneErrors.muteError) || + (message === webphoneErrors.holdError) ); From 02a9f0e0c188f28c9799e7fb9bb27ee32fe2c8e8 Mon Sep 17 00:00:00 2001 From: caffffe Date: Wed, 19 Jul 2017 11:24:41 +0800 Subject: [PATCH 3/6] add on hold style --- src/components/ActiveCallButton/index.js | 3 ++- src/components/ActiveCallButton/styles.scss | 29 ++++++++++++++++++--- src/components/ActiveCallPad/i18n/en-US.js | 1 + src/components/ActiveCallPad/index.js | 17 ++++++++---- src/components/ActiveCallPad/styles.scss | 17 ------------ 5 files changed, 40 insertions(+), 27 deletions(-) diff --git a/src/components/ActiveCallButton/index.js b/src/components/ActiveCallButton/index.js index 3b1dfa2e2a..30751aa80f 100644 --- a/src/components/ActiveCallButton/index.js +++ b/src/components/ActiveCallButton/index.js @@ -10,7 +10,8 @@ export default function ActiveCallButton(props) { const buttonClassName = classnames( styles.button, props.buttonClassName, - props.active ? styles.buttonActive : null + props.active ? styles.buttonActive : null, + props.disabled ? styles.buttonDisabled : null, ); return (
diff --git a/src/components/ActiveCallButton/styles.scss b/src/components/ActiveCallButton/styles.scss index e9a6b8cc52..431ace99f1 100644 --- a/src/components/ActiveCallButton/styles.scss +++ b/src/components/ActiveCallButton/styles.scss @@ -16,12 +16,33 @@ margin-bottom: 2px; } -.buttonActive { - background: $primary-color; -} - .buttonTitle { @include secondary-font; font-size: 12px; padding: 5px 0; } + +.buttonActive { + circle { + fill: $primary-color; + stroke: $primary-color; + } + path { + fill: #ffffff; + } +} + +.buttonDisabled { + circle { + fill: $lightgray; + stroke: $gray; + } + path { + fill:$primary-color-highlight-solid; + } + &:hover { + circle { + stroke: $gray; + } + } +} diff --git a/src/components/ActiveCallPad/i18n/en-US.js b/src/components/ActiveCallPad/i18n/en-US.js index 6d13fa2999..c48c0601c4 100644 --- a/src/components/ActiveCallPad/i18n/en-US.js +++ b/src/components/ActiveCallPad/i18n/en-US.js @@ -3,6 +3,7 @@ export default { mute: 'Mute', keypad: 'Keypad', hold: 'Hold', + onHold: 'On Hold', park: 'Park', stopRecord: 'Stop', record: 'Record', diff --git a/src/components/ActiveCallPad/index.js b/src/components/ActiveCallPad/index.js index 3c031e2982..61a14651d7 100644 --- a/src/components/ActiveCallPad/index.js +++ b/src/components/ActiveCallPad/index.js @@ -52,8 +52,12 @@ export default function ActiveCallPad(props) { /> @@ -61,9 +65,10 @@ export default function ActiveCallPad(props) {
diff --git a/src/components/ActiveCallPad/styles.scss b/src/components/ActiveCallPad/styles.scss index cae0669f4f..40fcfa85a8 100644 --- a/src/components/ActiveCallPad/styles.scss +++ b/src/components/ActiveCallPad/styles.scss @@ -7,23 +7,6 @@ .callButton { width: 33.33%; - &.disabled { - g { - fill: $lightgray; - } - circle { - fill: $lightgray; - stroke: $gray; - } - path { - fill:$rc-blue-highlight-solid; - } - } - &.disabled:hover{ - circle { - stroke: $gray; - } - } } .buttonRow { From f07f119d1b2c91413f918516db8e3dabe4d3dcef Mon Sep 17 00:00:00 2001 From: caffffe Date: Thu, 20 Jul 2017 13:19:18 +0800 Subject: [PATCH 4/6] when the call is on hold I cannot record/flip/park the call --- src/components/ActiveCallButton/styles.scss | 17 ++++++++++++++--- src/components/ActiveCallPad/index.js | 6 +++--- src/components/CircleButton/styles.scss | 2 +- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/components/ActiveCallButton/styles.scss b/src/components/ActiveCallButton/styles.scss index 431ace99f1..fa30de70b2 100644 --- a/src/components/ActiveCallButton/styles.scss +++ b/src/components/ActiveCallButton/styles.scss @@ -40,9 +40,20 @@ path { fill:$primary-color-highlight-solid; } - &:hover { - circle { - stroke: $gray; + g { + cursor: default; + &:hover { + circle { + stroke: $gray; + } + } + } + .btnSvgGroup { + cursor: default; + &:hover { + .circle { + stroke: $gray; + } } } } diff --git a/src/components/ActiveCallPad/index.js b/src/components/ActiveCallPad/index.js index 61a14651d7..e0294a70fe 100644 --- a/src/components/ActiveCallPad/index.js +++ b/src/components/ActiveCallPad/index.js @@ -64,14 +64,14 @@ export default function ActiveCallPad(props) {
{} : () => {}} className={classnames(styles.callButton)} title={i18n.getString('park', props.currentLocale)} icon={ParkIcon} disabled={props.isOnHold} /> {} : onRecordClicked} title={ props.isOnRecord ? i18n.getString('stopRecord', props.currentLocale) : @@ -97,7 +97,7 @@ export default function ActiveCallPad(props) { className={styles.callButton} /> {} : () => {}} title={i18n.getString('flip', props.currentLocale)} icon={FlipIcon} className={classnames(styles.callButton)} diff --git a/src/components/CircleButton/styles.scss b/src/components/CircleButton/styles.scss index df0d98804a..5c34c2e863 100644 --- a/src/components/CircleButton/styles.scss +++ b/src/components/CircleButton/styles.scss @@ -37,7 +37,7 @@ cursor: pointer; &:hover { - .circle { + circle { stroke: $primary-color-highlight-solid; } .noBorder { From b0b56e3aacfd2d67d2dfa6037ebed3eb0e40d2ce Mon Sep 17 00:00:00 2001 From: caffffe Date: Thu, 20 Jul 2017 13:28:48 +0800 Subject: [PATCH 5/6] when the call is on hold I cannot record/flip/park the call --- src/components/ActiveCallButton/styles.scss | 9 +-------- src/components/ActiveCallPad/index.js | 8 ++++---- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/src/components/ActiveCallButton/styles.scss b/src/components/ActiveCallButton/styles.scss index fa30de70b2..384e3d8f33 100644 --- a/src/components/ActiveCallButton/styles.scss +++ b/src/components/ActiveCallButton/styles.scss @@ -42,18 +42,11 @@ } g { cursor: default; + &:hover { circle { stroke: $gray; } } } - .btnSvgGroup { - cursor: default; - &:hover { - .circle { - stroke: $gray; - } - } - } } diff --git a/src/components/ActiveCallPad/index.js b/src/components/ActiveCallPad/index.js index e0294a70fe..fffa03e4ed 100644 --- a/src/components/ActiveCallPad/index.js +++ b/src/components/ActiveCallPad/index.js @@ -29,7 +29,7 @@ export default function ActiveCallPad(props) { ( @@ -52,7 +52,7 @@ export default function ActiveCallPad(props) { /> {} : () => {}} - className={classnames(styles.callButton)} + className={styles.callButton} title={i18n.getString('park', props.currentLocale)} icon={ParkIcon} disabled={props.isOnHold} @@ -100,7 +100,7 @@ export default function ActiveCallPad(props) { onClick={props.isOnHold ? () => {} : () => {}} title={i18n.getString('flip', props.currentLocale)} icon={FlipIcon} - className={classnames(styles.callButton)} + className={styles.callButton} disabled={props.isOnHold} />
From 55e99354f5fd7bfa01c4cf18ea848e11b88830c1 Mon Sep 17 00:00:00 2001 From: caffffe Date: Thu, 20 Jul 2017 13:34:17 +0800 Subject: [PATCH 6/6] adjust indentation --- src/components/ActiveCallButton/styles.scss | 2 +- src/components/ActiveCallPad/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ActiveCallButton/styles.scss b/src/components/ActiveCallButton/styles.scss index 384e3d8f33..8127572a98 100644 --- a/src/components/ActiveCallButton/styles.scss +++ b/src/components/ActiveCallButton/styles.scss @@ -38,7 +38,7 @@ stroke: $gray; } path { - fill:$primary-color-highlight-solid; + fill: $primary-color-highlight-solid; } g { cursor: default; diff --git a/src/components/ActiveCallPad/index.js b/src/components/ActiveCallPad/index.js index fffa03e4ed..9549ac7528 100644 --- a/src/components/ActiveCallPad/index.js +++ b/src/components/ActiveCallPad/index.js @@ -78,7 +78,7 @@ export default function ActiveCallPad(props) { i18n.getString('record', props.currentLocale) } active={props.isOnRecord} - className={classnames(styles.callButton)} + className={styles.callButton} icon={RecordIcon} disabled={props.isOnHold} />