Skip to content

Commit 8b903a4

Browse files
embbnuxembbnux
authored
support answerAndEnd and answerAndHold when call ring with a active call (#347)
* support multi calls * support answerAndEnd and answerAndHold When have multi call in ring * remove wrong comment
1 parent edc5f23 commit 8b903a4

File tree

14 files changed

+277
-41
lines changed

14 files changed

+277
-41
lines changed

‎src/components/ActiveCallButton/index.js‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,28 +16,32 @@ export default function ActiveCallButton(props) {
1616
return (
1717
<svg
1818
className={className}
19-
viewBox="0 0 500 400"
19+
viewBox="0 0 500 500"
2020
width={props.width}
2121
height={props.height}
2222
x={props.x}
2323
y={props.y}
2424
>
2525
<CircleButton
26-
width={'250'}
27-
height={'250'}
28-
x={125}
26+
width={'300'}
27+
height={'300'}
28+
x={100}
2929
y={0}
3030
className={buttonClassName}
3131
onClick={props.onClick}
3232
icon={props.icon}
3333
disabled={props.disabled}
3434
showBorder={props.showBorder}
3535
iconClassName={props.buttonClassName}
36+
iconWidth={props.iconWidth}
37+
iconHeight={props.iconHeight}
38+
iconX={props.iconX}
39+
iconY={props.iconY}
3640
/>
3741
<text
3842
className={styles.buttonTitle}
3943
x="250"
40-
y="340"
44+
y="410"
4145
textAnchor="middle"
4246
>
4347
{props.title}
@@ -59,6 +63,10 @@ ActiveCallButton.propTypes = {
5963
height: PropTypes.string,
6064
x: PropTypes.number,
6165
y: PropTypes.number,
66+
iconWidth: PropTypes.number,
67+
iconHeight: PropTypes.number,
68+
iconX: PropTypes.number,
69+
iconY: PropTypes.number,
6270
};
6371

6472
ActiveCallButton.defaultProps = {
@@ -72,4 +80,8 @@ ActiveCallButton.defaultProps = {
7280
height: '100%',
7381
x: 0,
7482
y: 0,
83+
iconWidth: undefined,
84+
iconHeight: undefined,
85+
iconX: undefined,
86+
iconY: undefined,
7587
};

‎src/components/ActiveCallButton/styles.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ $title-height: 24px;
2222

2323
.buttonTitle {
2424
@include secondary-font;
25-
font-size: 73px;
25+
font-size: 80px;
2626
fill: $darkergray;
2727
}
2828

‎src/components/ActiveCallDialPad/styles.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,10 @@ $input-height: 30px;
4646
width: 33.3%;
4747
text-align: center;
4848
padding: 2px;
49+
50+
text {
51+
font-size: 68px;
52+
}
4953
}
5054

5155
.stopButton {
@@ -59,5 +63,5 @@ $input-height: 30px;
5963

6064
.buttonRow {
6165
text-align: center;
62-
height: 35%;
66+
height: 22%;
6367
}

‎src/components/ActiveCallPad/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,8 @@ export default function ActiveCallPad(props) {
116116
onClick={props.hangup}
117117
icon={EndIcon}
118118
showBorder={false}
119+
iconWidth={250}
120+
iconX={125}
119121
/>
120122
</div>
121123
</div>

‎src/components/ActiveCallPad/styles.scss‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010

1111
.callButton {
1212
width: 33.33%;
13+
box-sizing: border-box;
14+
padding: 0 7px;
1315
}
1416

1517
.buttonRow {
@@ -18,12 +20,16 @@
1820
}
1921

2022
.button {
21-
width: 17%;
23+
width: 17.2%;
24+
height: 100%;
2225
border-radius: 63%;
2326
margin-left: auto;
2427
margin-right: auto;
2528
overflow: hidden;
26-
margin-top: 10px;
29+
30+
text {
31+
font-size: 88px;
32+
}
2733
}
2834

2935
.stopButton {
@@ -36,7 +42,7 @@
3642
}
3743

3844
.callCtrlButtonGroup {
39-
height: 60%;
45+
height: 70%;
4046
}
4147

4248
.stopButtonGroup {

‎src/components/ActiveCallPanel/styles.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ $avatar-width: 60px;
4444
padding-top: 15px;
4545
margin-left: auto;
4646
margin-right: auto;
47+
box-sizing: border-box;
4748
}
4849

4950
.avatarContainer {
@@ -105,5 +106,7 @@ $avatar-width: 60px;
105106
}
106107

107108
.callPad {
108-
height: calc(100% - 70px);
109+
box-sizing: border-box;
110+
height: calc(100% - 73px);
111+
padding-bottom: 50px;
109112
}

‎src/components/CircleButton/index.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ function CircleButton(props) {
1313
icon = (
1414
<Icon
1515
className={classnames(styles.icon, props.iconClassName)}
16-
width={200}
17-
height={200}
18-
x={150}
19-
y={150}
16+
width={props.iconWidth}
17+
height={props.iconHeight}
18+
x={props.iconX}
19+
y={props.iconY}
2020
/>
2121
);
2222
}
@@ -60,7 +60,11 @@ CircleButton.propTypes = {
6060
height: PropTypes.string,
6161
x: PropTypes.number,
6262
y: PropTypes.number,
63-
disabled: PropTypes.bool
63+
disabled: PropTypes.bool,
64+
iconWidth: PropTypes.number,
65+
iconHeight: PropTypes.number,
66+
iconX: PropTypes.number,
67+
iconY: PropTypes.number,
6468
};
6569

6670
CircleButton.defaultProps = {
@@ -74,6 +78,10 @@ CircleButton.defaultProps = {
7478
height: '100%',
7579
x: 0,
7680
y: 0,
81+
iconWidth: 200,
82+
iconHeight: 200,
83+
iconX: 150,
84+
iconY: 150,
7785
};
7886

7987
export default CircleButton;

‎src/components/IncomingCallPad/i18n/en-US.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,6 @@ export default {
44
ignore: 'Ignore',
55
toVoicemail: 'To Voicemail',
66
answer: 'Answer',
7+
answerAndEnd: 'Answer & End',
8+
answerAndHold: 'Answer & Hold',
79
};

‎src/components/IncomingCallPad/index.js‎

Lines changed: 64 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import 'rc-tooltip/assets/bootstrap_white.css';
77
import ForwardForm from '../ForwardForm';
88
import ReplyWithMessage from '../ReplyWithMessage';
99
import ActiveCallButton from '../ActiveCallButton';
10+
import MultiCallAnswerButton from '../MultiCallAnswerButton';
11+
1012
import MessageIcon from '../../assets/images/MessageFill.svg';
1113
import ForwardIcon from '../../assets/images/Forward.svg';
1214
import IgnoreIcon from '../../assets/images/Ignore.svg';
@@ -59,7 +61,59 @@ export default class IncomingCallPad extends Component {
5961
forwardingNumbers,
6062
formatPhone,
6163
className,
64+
hasOtherActiveCall,
65+
answerAndEnd,
66+
answerAndHold,
6267
} = this.props;
68+
// const isMultiCall = true;
69+
const multiCallButtons = (
70+
<div className={classnames(styles.buttonRow, styles.multiCallsButtonGroup)}>
71+
<MultiCallAnswerButton
72+
onClick={answerAndEnd}
73+
title={i18n.getString('answerAndEnd', currentLocale)}
74+
className={styles.callButton}
75+
isEndOtherCall
76+
/>
77+
<ActiveCallButton
78+
onClick={toVoiceMail}
79+
title={i18n.getString('toVoicemail', currentLocale)}
80+
buttonClassName={styles.rejectButton}
81+
icon={VoicemailIcon}
82+
iconWidth={274}
83+
iconX={116}
84+
showBorder={false}
85+
className={styles.callButton}
86+
/>
87+
<MultiCallAnswerButton
88+
onClick={answerAndHold}
89+
title={i18n.getString('answerAndHold', currentLocale)}
90+
className={styles.callButton}
91+
isEndOtherCall={false}
92+
/>
93+
</div>
94+
);
95+
const singleCallButtons = (
96+
<div className={classnames(styles.buttonRow, styles.answerButtonGroup)}>
97+
<ActiveCallButton
98+
onClick={toVoiceMail}
99+
title={i18n.getString('toVoicemail', currentLocale)}
100+
buttonClassName={styles.rejectButton}
101+
icon={VoicemailIcon}
102+
iconWidth={274}
103+
iconX={116}
104+
showBorder={false}
105+
className={styles.bigCallButton}
106+
/>
107+
<ActiveCallButton
108+
onClick={answer}
109+
title={i18n.getString('answer', currentLocale)}
110+
buttonClassName={styles.answerButton}
111+
icon={AnswerIcon}
112+
showBorder={false}
113+
className={styles.bigCallButton}
114+
/>
115+
</div>
116+
);
63117
return (
64118
<div className={classnames(styles.root, className)}>
65119
<div
@@ -97,6 +151,8 @@ export default class IncomingCallPad extends Component {
97151
>
98152
<ActiveCallButton
99153
icon={ForwardIcon}
154+
iconWidth={250}
155+
iconX={125}
100156
onClick={() => null}
101157
title={i18n.getString('forward', currentLocale)}
102158
className={styles.callButton}
@@ -134,24 +190,7 @@ export default class IncomingCallPad extends Component {
134190
className={styles.callButton}
135191
/>
136192
</div>
137-
<div className={classnames(styles.buttonRow, styles.answerButtonGroup)}>
138-
<ActiveCallButton
139-
onClick={toVoiceMail}
140-
title={i18n.getString('toVoicemail', currentLocale)}
141-
buttonClassName={styles.rejectButton}
142-
icon={VoicemailIcon}
143-
showBorder={false}
144-
className={styles.bigCallButton}
145-
/>
146-
<ActiveCallButton
147-
onClick={answer}
148-
title={i18n.getString('answer', currentLocale)}
149-
buttonClassName={styles.answerButton}
150-
icon={AnswerIcon}
151-
showBorder={false}
152-
className={styles.bigCallButton}
153-
/>
154-
</div>
193+
{hasOtherActiveCall ? multiCallButtons : singleCallButtons}
155194
</div>
156195
);
157196
}
@@ -166,10 +205,16 @@ IncomingCallPad.propTypes = {
166205
formatPhone: PropTypes.func,
167206
onForward: PropTypes.func.isRequired,
168207
replyWithMessage: PropTypes.func.isRequired,
169-
className: PropTypes.string
208+
className: PropTypes.string,
209+
answerAndEnd: PropTypes.func,
210+
answerAndHold: PropTypes.func,
211+
hasOtherActiveCall: PropTypes.bool,
170212
};
171213

172214
IncomingCallPad.defaultProps = {
173215
formatPhone: phone => phone,
174216
className: null,
217+
answerAndEnd: () => null,
218+
answerAndHold: () => null,
219+
hasOtherActiveCall: false,
175220
};

‎src/components/IncomingCallPad/styles.scss‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
.root {
22
position: relative;
3-
margin-left: 5%;
4-
margin-right: 5%;
53
}
64

75
.buttonRow {
86
text-align: center;
97
margin-bottom: 10px;
10-
height: 24%;
8+
height: 26.5%;
9+
margin-left: 5%;
10+
margin-right: 5%;
1111
}
1212

1313
.callButton {
1414
width: 33.33%;
1515
padding: 0;
1616

1717
text {
18-
font-size: 73px;
18+
font-size: 78px;
1919
}
2020
}
2121

2222
.bigCallButton {
2323
composes: callButton;
2424
width: 50%;
2525
text {
26-
font-size: 65px;
26+
font-size: 70px;
2727
}
2828
}
2929

@@ -47,7 +47,20 @@
4747
width: 76%;
4848
margin-left: auto;
4949
margin-right: auto;
50-
height: 27%;
50+
height: 29%;
51+
}
52+
53+
.multiCallsButtonGroup {
54+
width: 100%;
55+
margin-left: auto;
56+
margin-right: auto;
57+
height: 29.5%;
58+
59+
.callButton {
60+
text {
61+
font-size: 70px;
62+
}
63+
}
5164
}
5265

5366
.forwardContainner{

0 commit comments

Comments
 (0)