Skip to content

Commit bc9754d

Browse files
unadlibunadlib
authored
add calls list page and adjust calls list item extend icon (ringcentral#594)
* merge all calls to calls page * adjust calls list item extend icon
1 parent ab8b85b commit bc9754d

File tree

21 files changed

+755
-53
lines changed

21 files changed

+755
-53
lines changed

‎src/components/ActiveCallItem/index.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,15 +59,22 @@ CallIcon.defaultProps = {
5959
missedTitle: undefined,
6060
};
6161

62-
function ExtendIcon() {
62+
function ExtendIcon({ extendIconClassName }) {
6363
return (
6464
<div className={styles.extendIcon}>
65-
<div className={styles.extendInner} />
66-
<div className={styles.extendInnerIcon} />
65+
<div className={classnames(styles.extendInner, extendIconClassName)} />
6766
</div>
6867
);
6968
}
7069

70+
ExtendIcon.propTypes = {
71+
extendIconClassName: PropTypes.string
72+
};
73+
74+
ExtendIcon.defaultProps = {
75+
extendIconClassName: undefined
76+
};
77+
7178
function WebphoneButtons({
7279
session,
7380
webphoneAnswer,
@@ -447,7 +454,8 @@ export default class ActiveCallItem extends Component {
447454
createEntityTitle={i18n.getString('addEntity', currentLocale)}
448455
viewEntityTitle={i18n.getString('viewDetails', currentLocale)}
449456
/>
450-
<ExtendIcon />
457+
<ExtendIcon
458+
extendIconClassName={this.state.extended ? styles.extended : null} />
451459
</div>
452460
);
453461
}

‎src/components/ActiveCallItem/styles.scss‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
.callInfo {
1414
display: block;
1515
position: relative;
16-
height: 53px;
16+
height: 60px;
1717
width: 100%;
1818
@include secondary-font;
1919
}
@@ -86,7 +86,7 @@
8686
.webphoneButtons {
8787
position: absolute;
8888
right: 20px;
89-
bottom: 11px;
89+
bottom: 15px;
9090
}
9191

9292
.rejectButton {
@@ -131,36 +131,37 @@
131131

132132
.extendIcon {
133133
position: absolute;
134+
z-index: 1;
134135
top: 100%;
135136
left: 50%;
136-
border-top: 7px solid #e2e2e2;
137-
border-right: 5px solid transparent;
138-
border-left: 5px solid transparent;
137+
background-color: #ffffff;
138+
border: 1px solid #e2e2e2;
139139
box-sizing: border-box;
140-
width: 28px;
141-
height: 0;
142-
margin-left: -14px;
140+
border-radius: 8.5px;
141+
width: 36px;
142+
height: 17px;
143+
margin-left: -18px;
144+
margin-top: -8.5px;
143145
cursor: pointer;
144146

145147
.extendInner {
146148
position: absolute;
147-
top: -8px;
148-
left: -4px;
149-
border-top: 7px solid #ffffff;
150-
border-right: 5px solid transparent;
151-
border-left: 5px solid transparent;
149+
top: 50%;
150+
left: 50%;
151+
margin-top: -5px;
152+
margin-left: -4.5px;
153+
z-index: 1;
154+
height: 7px;
155+
width: 7px;
156+
border-left: 1px solid #e2e2e2;
157+
border-bottom: 1px solid #e2e2e2;
152158
box-sizing: border-box;
153-
width: 26px;
154-
height: 0;
159+
transform: rotate(-45deg);
155160
}
156161

157-
.extendInnerIcon {
158-
position: absolute;
159-
top: -5px;
160-
left: 6px;
161-
width: 6px;
162-
height: 1px;
163-
background: #e2e2e2;
162+
.extended {
163+
margin-top: -1.5px;
164+
transform: rotate(135deg);
164165
}
165166
}
166167

@@ -171,4 +172,4 @@
171172
&.extended {
172173
height: 30px;
173174
}
174-
}
175+
}

‎src/components/CallsListPanel/i18n/de-DE.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default {
2+
noActiveCalls: 'Keine aktiven Anrufe',
3+
currentCall: 'Aktueller Anruf',
4+
ringCall: 'Anruf wird getätigt',
5+
onHoldCall: 'Anruf wird gehalten',
6+
otherDeviceCall: 'Aktuelle Gespräche auf meinen anderen Geräten',
7+
};
8+
9+
// @key: @#@"noActiveCalls"@#@ @source: @#@"No active calls"@#@
10+
// @key: @#@"currentCall"@#@ @source: @#@"Current Call"@#@
11+
// @key: @#@"ringCall"@#@ @source: @#@"Ringing Call"@#@
12+
// @key: @#@"onHoldCall"@#@ @source: @#@"Call on Hold"@#@
13+
// @key: @#@"otherDeviceCall"@#@ @source: @#@"Ongoing calls on my other devices"@#@

‎src/components/CallsListPanel/i18n/en-CA.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default {
2+
noActiveCalls: 'No active calls',
3+
currentCall: 'Current Call',
4+
ringCall: 'Ringing Call',
5+
onHoldCall: 'Call on Hold',
6+
otherDeviceCall: 'Ongoing calls on my other devices',
7+
};
8+
9+
// @key: @#@"noActiveCalls"@#@ @source: @#@"No active calls"@#@
10+
// @key: @#@"currentCall"@#@ @source: @#@"Current Call"@#@
11+
// @key: @#@"ringCall"@#@ @source: @#@"Ringing Call"@#@
12+
// @key: @#@"onHoldCall"@#@ @source: @#@"Call on Hold"@#@
13+
// @key: @#@"otherDeviceCall"@#@ @source: @#@"Ongoing calls on my other devices"@#@

‎src/components/CallsListPanel/i18n/en-GB.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default {
2+
noActiveCalls: 'No active calls',
3+
currentCall: 'Current Call',
4+
ringCall: 'Ringing Call',
5+
onHoldCall: 'Call on Hold',
6+
otherDeviceCall: 'Ongoing calls on my other devices',
7+
};
8+
9+
// @key: @#@"noActiveCalls"@#@ @source: @#@"No active calls"@#@
10+
// @key: @#@"currentCall"@#@ @source: @#@"Current Call"@#@
11+
// @key: @#@"ringCall"@#@ @source: @#@"Ringing Call"@#@
12+
// @key: @#@"onHoldCall"@#@ @source: @#@"Call on Hold"@#@
13+
// @key: @#@"otherDeviceCall"@#@ @source: @#@"Ongoing calls on my other devices"@#@

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default {
2+
noActiveCalls: 'No active calls',
3+
noCalls: 'No calls',
4+
currentCall: 'Current Call',
5+
ringCall: 'Ringing Call',
6+
onHoldCall: 'Call on Hold',
7+
historyCalls: 'History Calls',
8+
otherDeviceCall: 'Ongoing calls on my other devices',
9+
};

‎src/components/CallsListPanel/i18n/es-419.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default {
2+
noActiveCalls: 'No hay llamadas activas',
3+
currentCall: 'Llamada actual',
4+
ringCall: 'Llamada sonando',
5+
onHoldCall: 'Llamada en espera',
6+
otherDeviceCall: 'Llamadas en curso en mis otros dispositivos',
7+
};
8+
9+
// @key: @#@"noActiveCalls"@#@ @source: @#@"No active calls"@#@
10+
// @key: @#@"currentCall"@#@ @source: @#@"Current Call"@#@
11+
// @key: @#@"ringCall"@#@ @source: @#@"Ringing Call"@#@
12+
// @key: @#@"onHoldCall"@#@ @source: @#@"Call on Hold"@#@
13+
// @key: @#@"otherDeviceCall"@#@ @source: @#@"Ongoing calls on my other devices"@#@

‎src/components/CallsListPanel/i18n/es-ES.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default {
2+
noActiveCalls: 'No hay llamadas activas',
3+
currentCall: 'Llamada actual',
4+
ringCall: 'Llamada sonando',
5+
onHoldCall: 'Llamada en espera',
6+
otherDeviceCall: 'Llamadas en curso en mis otros dispositivos',
7+
};
8+
9+
// @key: @#@"noActiveCalls"@#@ @source: @#@"No active calls"@#@
10+
// @key: @#@"currentCall"@#@ @source: @#@"Current Call"@#@
11+
// @key: @#@"ringCall"@#@ @source: @#@"Ringing Call"@#@
12+
// @key: @#@"onHoldCall"@#@ @source: @#@"Call on Hold"@#@
13+
// @key: @#@"otherDeviceCall"@#@ @source: @#@"Ongoing calls on my other devices"@#@

‎src/components/CallsListPanel/i18n/fr-CA.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default {
2+
noActiveCalls: 'Aucun appel actif',
3+
currentCall: 'Appel en cours',
4+
ringCall: 'Acheminer un appel',
5+
onHoldCall: 'Appel en attente',
6+
otherDeviceCall: 'Appels en cours sur mes autres appareils',
7+
};
8+
9+
// @key: @#@"noActiveCalls"@#@ @source: @#@"No active calls"@#@
10+
// @key: @#@"currentCall"@#@ @source: @#@"Current Call"@#@
11+
// @key: @#@"ringCall"@#@ @source: @#@"Ringing Call"@#@
12+
// @key: @#@"onHoldCall"@#@ @source: @#@"Call on Hold"@#@
13+
// @key: @#@"otherDeviceCall"@#@ @source: @#@"Ongoing calls on my other devices"@#@

‎src/components/CallsListPanel/i18n/fr-FR.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default {
2+
noActiveCalls: 'Aucun appel actif',
3+
currentCall: 'Appel actuel',
4+
ringCall: 'Sonnerie en cours',
5+
onHoldCall: 'Appel en attente',
6+
otherDeviceCall: 'Appels en cours sur mes autres appareils',
7+
};
8+
9+
// @key: @#@"noActiveCalls"@#@ @source: @#@"No active calls"@#@
10+
// @key: @#@"currentCall"@#@ @source: @#@"Current Call"@#@
11+
// @key: @#@"ringCall"@#@ @source: @#@"Ringing Call"@#@
12+
// @key: @#@"onHoldCall"@#@ @source: @#@"Call on Hold"@#@
13+
// @key: @#@"otherDeviceCall"@#@ @source: @#@"Ongoing calls on my other devices"@#@

0 commit comments

Comments
 (0)