Skip to content

Commit 02459d9

Browse files
embbnuxLingForCC
embbnux
authored and
LingForCC
committed
adjust compose text ui and redirect url (#120)
* adjust compose text ui * update commons version
1 parent 14b1910 commit 02459d9

File tree

6 files changed

+139
-119
lines changed

6 files changed

+139
-119
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"react-router": "^3.0.0",
3232
"ringcentral": "3.0.0",
3333
"ringcentral-client": "^1.0.0-rc1",
34-
"ringcentral-integration": "^0.4.1",
34+
"ringcentral-integration": "^0.4.3",
3535
"whatwg-fetch": "^2.0.1"
3636
},
3737
"devDependencies": {
@@ -79,7 +79,7 @@
7979
"redux-thunk": "^2.1.0",
8080
"ringcentral": "3.0.0",
8181
"ringcentral-client": "^1.0.0-rc1",
82-
"ringcentral-integration": "^0.4.1",
82+
"ringcentral-integration": "^0.4.3",
8383
"sass-loader": "^4.1.1",
8484
"source-map-loader": "^0.1.5",
8585
"style-loader": "^0.13.1",

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export default {
2-
sendMessageFrom: 'Send Message From',
2+
from: 'From',
33
to: 'To',
4-
enterNameOrNumber: 'Enter Number Or Name',
5-
typeAnyToSend: 'Type any text to send',
4+
enterNameOrNumber: 'Enter Number or Name...',
5+
typeMessage: 'Type message...',
66
send: 'Send',
77
};

‎src/components/ComposeTextPanel/index.js‎

Lines changed: 37 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,7 @@ import React, { PropTypes, Component } from 'react';
22
import i18n from './i18n';
33
import styles from './styles.scss';
44
import RecipientsInput from '../RecipientsInput';
5-
6-
function SenderSelectInput(props) {
7-
return (
8-
<select
9-
className={props.className}
10-
value={props.value}
11-
onChange={props.onChange}>
12-
{
13-
props.options.map(number => (
14-
<option key={number} value={number}>
15-
{props.formatPhone(number)}
16-
</option>
17-
))
18-
}
19-
</select>
20-
);
21-
}
22-
23-
SenderSelectInput.propTypes = {
24-
value: PropTypes.string.isRequired,
25-
className: PropTypes.string,
26-
onChange: PropTypes.func.isRequired,
27-
formatPhone: PropTypes.func.isRequired,
28-
options: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
29-
};
30-
31-
SenderSelectInput.defaultProps = {
32-
className: null,
33-
};
5+
import Select from '../Select';
346

357
class ComposeTextPanel extends Component {
368
constructor(props) {
@@ -53,6 +25,9 @@ class ComposeTextPanel extends Component {
5325
this.onReceiverInputKeyDown = (e) => {
5426
if (e.key === ',' || e.key === ';' || e.key === 'Enter') {
5527
e.preventDefault();
28+
if (this.props.typingToNumber.length === 0) {
29+
return;
30+
}
5631
this.props.addToNumber({
5732
name: this.props.formatPhone(this.props.typingToNumber),
5833
phoneNumber: this.props.typingToNumber,
@@ -88,21 +63,9 @@ class ComposeTextPanel extends Component {
8863

8964
render() {
9065
return (
91-
<div>
66+
<div className={styles.root}>
9267
<form onSubmit={this.handleSubmit}>
93-
<div className={styles.messageSenderField}>
94-
<label>{i18n.getString('sendMessageFrom', this.props.currentLocale)}</label>
95-
<div className={styles.valueInput}>
96-
<SenderSelectInput
97-
className={styles.select}
98-
value={this.props.senderNumber}
99-
onChange={this.onSenderChange}
100-
options={this.props.senderNumbers}
101-
formatPhone={this.props.formatPhone}
102-
/>
103-
</div>
104-
</div>
105-
<div className={styles.messageReceiverField}>
68+
<div className={styles.receiverField}>
10669
<label>{i18n.getString('to', this.props.currentLocale)}:</label>
10770
<div className={styles.rightPanel}>
10871
<RecipientsInput
@@ -120,20 +83,38 @@ class ComposeTextPanel extends Component {
12083
/>
12184
</div>
12285
</div>
123-
<div className={styles.messageTextField}>
124-
<textarea
125-
placeholder={i18n.getString('typeAnyToSend', this.props.currentLocale)}
126-
value={this.props.messageText}
127-
maxLength="1000"
128-
onChange={this.onTextChange}
129-
/>
86+
<div className={styles.senderField}>
87+
<label>{i18n.getString('from', this.props.currentLocale)}:</label>
88+
<div className={styles.senderInput}>
89+
<Select
90+
className={styles.senderSelect}
91+
value={this.props.senderNumber}
92+
onChange={this.onSenderChange}
93+
options={this.props.senderNumbers}
94+
paddingLeft={0}
95+
valueFunction={option => option}
96+
renderFunction={this.props.formatPhone}
97+
/>
98+
</div>
99+
</div>
100+
<div className={styles.buttomField}>
101+
<div className={styles.textField}>
102+
<textarea
103+
placeholder={i18n.getString('typeMessage', this.props.currentLocale)}
104+
value={this.props.messageText}
105+
maxLength="1000"
106+
onChange={this.onTextChange}
107+
/>
108+
</div>
109+
<div className={styles.submitField}>
110+
<input
111+
type="submit"
112+
value={i18n.getString('send', this.props.currentLocale)}
113+
className={styles.submitButton}
114+
disabled={this.props.sendButtonDisabled}
115+
/>
116+
</div>
130117
</div>
131-
<input
132-
type="submit"
133-
value={i18n.getString('send', this.props.currentLocale)}
134-
className={styles.submitButton}
135-
disabled={this.props.sendButtonDisabled}
136-
/>
137118
</form>
138119
</div>
139120
);

‎src/components/ComposeTextPanel/styles.scss‎

Lines changed: 76 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,130 @@
11
@import '../../lib/commonStyles/colors';
2+
@import '../../lib/commonStyles/full-size';
23

3-
.messageSenderField {
4-
margin: 25px 5px 0 5px;
5-
height: 50px;
4+
.root {
5+
@include full-size;
6+
font-family: Helvetica;
7+
}
8+
9+
.senderField {
10+
margin: 0 0 5px 0;
11+
padding: 0 6px 1px 20px;
12+
border-bottom: #e3e3e3 1px solid;
613
transition: height 0.5s ease-in;
14+
color: #797979;
715
overflow: hidden;
816

917
label {
10-
color: #555;
11-
font-size: 13px;
12-
line-height: 20px;
18+
font-size: 12px;
19+
line-height: 30px;
1320
display: block;
21+
float: left;
1422
}
1523

16-
.valueInput {
17-
border-bottom: 1px solid #e3e3e5;
18-
padding-bottom: 3px;
24+
.senderInput {
25+
position: relative;
26+
line-height: 30px;
27+
margin-left: 45px;
1928
}
2029
}
2130

22-
.hiddenField {
23-
height: 0px;
24-
}
31+
.senderSelect {
32+
font-size: 12px;
33+
width: 100%;
34+
height: 100%;
2535

26-
.sendNumberSetting {
27-
position: absolute;
28-
right: 10px;
29-
top: 10px;
30-
cursor: pointer;
31-
color: #333;
32-
text-decoration: none;
33-
&:focus {
36+
select:focus {
3437
outline: none;
3538
}
3639
}
3740

38-
.messageReceiverField {
39-
margin: 0 5px;
40-
border-bottom: 1px solid #e3e3e5;
41-
padding-bottom: 3px;
41+
.hiddenField {
42+
height: 0px;
43+
}
44+
45+
.receiverField {
46+
margin-top: 10px;
47+
padding: 0 10px 0 20px;
4248
position: relative;
49+
color: #303030;
4350

4451
label {
45-
color: #b3b3b3;
46-
font-size: 14px;
47-
line-height: 27px;
52+
font-size: 15px;
53+
line-height: 29px;
4854
margin-right: 5px;
4955
float: left;
5056
}
5157

5258
.rightPanel {
53-
font-size: 13px;
59+
font-size: 15px;
5460
display: block;
55-
margin-left: 30px;
61+
margin-left: 45px;
5662
}
5763
}
5864

59-
.messageTextField {
60-
margin: 10px 5px 0 5px;
65+
.buttomField {
66+
position: absolute;
67+
bottom: 0px;
68+
width: 100%;
69+
margin: 0 auto;
70+
padding: 0 2px 2px 2px;
71+
font-family: Helvetica;
72+
border-top: 1px solid #e3e3e5;
73+
}
74+
75+
.textField {
76+
margin-right: 115px;
77+
6178
textarea {
62-
font-size: 14px;
79+
background: transparent;
80+
font-size: 13px;
6381
line-height: 18px;
6482
width: 100%;
65-
margin-bottom: 5px;
83+
margin: 10px 0 10px 10px;
6684
resize: none;
67-
border-bottom: 1px solid #e3e3e5;
68-
border-top: 0;
69-
border-left: 0;
70-
border-right: 0;
71-
background: #fff;
72-
height: 200px;
85+
border: none;
86+
background: #transparent;
7387
outline: medium none!important;
7488
box-sizing: border-box!important;
89+
90+
&::placeholder {
91+
color: #a9a9a9;
92+
}
7593
}
7694
}
7795

96+
.submitField {
97+
position: absolute;
98+
top: 50%;
99+
right: 0;
100+
width: 115px;
101+
margin-top: -18px;
102+
}
103+
78104
.submitButton {
79105
display: block;
80-
margin: 0 auto 5px;
81-
width: 115px;
106+
margin: 0 auto;
107+
width: 73px;
108+
height: 36px;
82109
box-sizing: border-box;
83-
font-size: 14px;
110+
font-size: 13px;
111+
line-height: 18px;
84112
padding: 7px;
85-
border: 0;
86-
border-radius: 3px;
113+
border: $rc-blue 1px solid;
114+
border-radius: 18px;
87115
outline: medium none!important;
88116
color: #fff;
89117
background-color: $rc-blue;
90118
}
91119

92120
.submitButton:hover {
121+
border: $rc-blue-highlight 1px solid;
93122
background-color: $rc-blue-highlight;
94123
color: #fff;
95124
}
96125

97126
.submitButton:disabled {
98-
background-color: #888888!important;
99-
}
100-
101-
select {
102-
width: 100%;
103-
height: 100%;
127+
background-color: #fff!important;
128+
border: #c9c9c9 1px solid;
129+
color: #a9a9a9;
104130
}

‎src/components/RecipientsInput/styles.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,17 @@
1414
}
1515

1616
.numberInput {
17-
color: #2f2f2f;
18-
font-size: 12px;
19-
line-height: 17px;
17+
color: #303030;
18+
font-size: 15px;
19+
line-height: 20px;
2020
width: 100%;
2121
height: 27px;
2222
border-radius: 3px;
2323
border: 0;
2424
outline: 0;
25+
&::placeholder {
26+
font-size: 13px;
27+
}
2528
}
2629

2730
.contactsDropdown {

‎src/containers/ComposeTextPage/index.js‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,22 @@ const ComposeTextPage = connect((state, props) => ({
2222
searchContactList: props.contactSearch.searching.result,
2323
}), (dispatch, props) => ({
2424
send: () =>
25-
props.composeText.send().then((resp) => {
26-
if (resp && resp.conversation) {
27-
props.messageStore.pushMessage(resp);
28-
props.composeText.clean();
29-
props.router.history.push(`/conversations/${resp.conversation.id}`);
25+
props.composeText.send().then((responses) => {
26+
if (!responses || responses.length === 0) {
27+
return null;
3028
}
29+
props.messageStore.pushMessages(responses);
30+
if (responses.length === 1) {
31+
const conversationId =
32+
responses[0] && responses[0].conversation && responses[0].conversation.id;
33+
if (!conversationId) {
34+
return null;
35+
}
36+
props.router.history.push(`/conversations/${conversationId}`);
37+
} else {
38+
props.router.history.push('/messages');
39+
}
40+
props.composeText.clean();
3141
return null;
3242
}),
3343
formatPhone: phoneNumber => (

0 commit comments

Comments
 (0)