Skip to content
This repository was archived by the owner on Feb 10, 2022. It is now read-only.

Commit aed8771

Browse files
committed
Update quickstart strings
1 parent f246c86 commit aed8771

File tree

11 files changed

+25
-39
lines changed

11 files changed

+25
-39
lines changed

css/main.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ body {
106106
}
107107

108108
.title-choice-type {
109-
width: 174px;
109+
width: 185px;
110110
height: 20px;
111111
letter-spacing: -0.1px;
112112
color: var(--navy-600);

lib/components/Header.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default class Header extends BaseElement {
1212

1313
this.settingItems = [
1414
{
15-
'label': 'Device settings',
15+
'label': 'Device Settings',
1616
'callback': () => { this.sendToParent('show_settings') }
1717
},
1818
{

lib/components/TabToolBar.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default class TabToolBar extends BaseElement {
1515
}
1616
const btnDial = createDiv({ id: 'btn_tab_dial', className: `${classes['btnTab']}` });
1717
const icoTabDial = createDiv({id: 'ico_tab_dial', className: `${classes['tabIco']} ${classes['dialActive']}`});
18-
const btnDialCaption = createParagraph({id: 'btn_dial_caption', innerText: 'Dial', className: `${classes['fontSmall']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabActive']}`});
18+
const btnDialCaption = createParagraph({id: 'btn_dial_caption', innerText: 'Call', className: `${classes['fontSmall']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabActive']}`});
1919

2020
btnDial.appendChild(icoTabDial);
2121
btnDial.appendChild(btnDialCaption);
@@ -37,7 +37,7 @@ export default class TabToolBar extends BaseElement {
3737

3838
const btnCallLog = createDiv({id: 'btn_tab_calllog', className: `${classes['btnTab']}`});
3939
const icoCallLog = createDiv({id: 'ico_tab_callog', className: `${classes['tabIco']} ${classes['callLogDeactive']}`});
40-
const btnCalllogCaption = createParagraph({id: 'btn_calllog_caption', innerText: 'History', className: `${classes['fontSmall']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabDeactive']}`});
40+
const btnCalllogCaption = createParagraph({id: 'btn_calllog_caption', innerText: 'Recents', className: `${classes['fontSmall']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabDeactive']}`});
4141

4242
btnCallLog.appendChild(icoCallLog);
4343
btnCallLog.appendChild(btnCalllogCaption);

lib/css/styles.js

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -608,7 +608,7 @@ const styles = {
608608
},
609609

610610
dialTitle: {
611-
marginBottom: '16px'
611+
marginBottom: '32px'
612612
},
613613

614614
/*** buttons ***/
@@ -1273,15 +1273,6 @@ const styles = {
12731273
backgroundPosition: 'center'
12741274
},
12751275

1276-
dialDesc: {
1277-
width: '312px',
1278-
height: '40px',
1279-
textAlign: 'center',
1280-
color: colors.navy400,
1281-
marginBottom: '32px',
1282-
letterSpacing: '-0.1px'
1283-
},
1284-
12851276
btnVideo: {
12861277
backgroundImage: `url(${videoPurpleIcon})`,
12871278
backgroundRepeat: 'no-repeat',

lib/views/AppInfoView.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import SendBirdCall from "sendbird-calls";
21
import BaseElement from "../components/BaseElement";
32
import { classes } from "../css/styles";
4-
import { createDiv, createLabel, createOption, createSelect } from "../utils/domUtil";
3+
import { createDiv, createLabel } from "../utils/domUtil";
54

65
export default class AppInfoView extends BaseElement {
76
constructor({ args }) {
@@ -55,7 +54,7 @@ export default class AppInfoView extends BaseElement {
5554
const applicationInfoContainer = createDiv({ id: 'select_container', className: classes['selectContainer'] });
5655
const applicationNameLabel = createLabel({
5756
id: 'app_name_label',
58-
innerText: 'Application name',
57+
innerText: 'Name',
5958
className: `${classes['popupItemLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}`
6059
});
6160
const applicationName = createLabel({
@@ -69,7 +68,7 @@ export default class AppInfoView extends BaseElement {
6968

7069
const applicationIDLabel = createLabel({
7170
id: 'app_id_label',
72-
innerText: 'Application ID',
71+
innerText: 'ID',
7372
className: `${classes['popupItemLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}`
7473
});
7574

lib/views/CallLogItem.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,10 @@ export class CallLogItem {
126126
} else {
127127
const wrapper = createDiv({ id: 'empty_calllog', className: className });
128128
const icoCallLogEmpty = createDiv({ className: `${classes['icoCallLogEmpty']}` });
129-
const labelCallLogEmpty = createDiv({ innerText: 'No call history', className: `${classes['labelCallLogEmpty']} ${classes['font16']} ${classes['fontHeavy']}` });
129+
const labelCallLogEmpty = createDiv({
130+
innerText: 'The list of calls you make will show here.\nTap the phone button to start making a call.',
131+
className: `${classes['labelCallLogEmpty']} ${classes['fontSmall']}`
132+
});
130133
wrapper.appendChild(icoCallLogEmpty);
131134
wrapper.appendChild(labelCallLogEmpty);
132135

lib/views/CallView.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import BaseElement from "../components/BaseElement";
22
import { createAudio, createDiv, createImg, createLabel, createVideo } from "../utils/domUtil";
33
import { getCallOption } from "../utils/util";
4-
import { hasClassName } from "../utils/domUtil";
54
import CallButtons from "./CallButtons";
65
import { classes } from "../css/styles.js";
76
import PeriodicJob from "../modules/periodicJob";
@@ -38,9 +37,9 @@ export default class CallView extends BaseElement {
3837

3938
let connectionText;
4039
if (this.call.isVideoCall) {
41-
connectionText = 'Incoming video call…';
40+
connectionText = 'incoming video call…';
4241
} else {
43-
connectionText = 'Incoming voice call…';
42+
connectionText = 'incoming voice call…';
4443
}
4544
this.connectionInfo = createLabel({
4645
id: 'conn_info_label',
@@ -50,7 +49,7 @@ export default class CallView extends BaseElement {
5049

5150
const peerStateDiv = createDiv({ id: 'peer_state', className: `${classes['column']} ${classes['peerStateDiv']} ${classes['invisible']}` });
5251
const peerMuteIcon = createDiv({ id: 'peer_mute_icon', className: `${classes['peerMuteIcon']}` });
53-
const peerMuteLabel = createLabel({ id: 'peer_mute_label', className: `${classes['peerMuteLabel']} ${classes['fontSmall']} ${classes['fontColorWhite']}`, innerText: `${remoteUser.userId} audio muted this call` });
52+
const peerMuteLabel = createLabel({ id: 'peer_mute_label', className: `${classes['peerMuteLabel']} ${classes['fontSmall']} ${classes['fontColorWhite']}`, innerText: `${remoteUser.userId} is muted.` });
5453
peerStateDiv.appendChild(peerMuteIcon);
5554
peerStateDiv.appendChild(peerMuteLabel);
5655

@@ -227,7 +226,7 @@ export default class CallView extends BaseElement {
227226

228227
drawCallingText() {
229228
this.removeConnectionInfoDrawer();
230-
const rotatingTexts = ['Calling', 'Calling.', 'Calling..'];
229+
const rotatingTexts = ['calling', 'calling.', 'calling..'];
231230
let frame = 0;
232231
this.connectionInfoDrawer = new PeriodicJob(() => {
233232
this.connectionInfo.innerText = rotatingTexts[frame];
@@ -237,7 +236,7 @@ export default class CallView extends BaseElement {
237236

238237
drawReconnectingText() {
239238
this.removeConnectionInfoDrawer();
240-
const rotatingTexts = ['Reconnecting', 'Reconnecting.', 'Reconnecting..'];
239+
const rotatingTexts = ['reconnecting', 'reconnecting.', 'reconnecting..'];
241240
let frame = 0;
242241
this.connectionInfoDrawer = new PeriodicJob(() => {
243242
this.connectionInfo.innerText = rotatingTexts[frame];

lib/views/DialView.js

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,6 @@ export default class DialView extends BaseElement {
2828
className: `${classes['formContainer']} ${classes['column']} ${classes['center']}`
2929
});
3030
const dialTitleDiv = createDiv({ id: 'title', className: `${classes['fontBig']} ${classes['fontDemi']} ${classes['dialTitle']}`, innerText: 'Make a call'});
31-
const descDiv = createDiv({id: 'desc_div',
32-
innerText: 'Enter the user ID of the user you wish to call, then press one of the video or voice call buttons',
33-
className: `${classes['fontNormal']} ${classes['dialDesc']} ${classes['fontHeavy']}`
34-
});
3531

3632
const peerId = createInput({
3733
id: 'peer_id',
@@ -54,7 +50,6 @@ export default class DialView extends BaseElement {
5450
btns.appendChild(btnAudio);
5551

5652
formContainer.appendChild(dialTitleDiv);
57-
formContainer.appendChild(descDiv);
5853
formContainer.appendChild(peerId);
5954
formContainer.appendChild(btns);
6055

lib/views/LoginView.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,11 @@ export default class LoginView extends BaseElement {
4141
loginTitleDiv.appendChild(loginTitle);
4242

4343
const formContainer = createDiv({ id: 'form_container', className: classes['formContainer'] });
44-
const inputAppIdLabel = createLabel({ id: 'input_app_id_label', htmlFor: 'input_app_id', innerText: 'App ID', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
44+
const inputAppIdLabel = createLabel({ id: 'input_app_id_label', htmlFor: 'input_app_id', innerText: 'Application ID', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
4545
const inputAppId = createInput({ id: 'input_app_id', className: `${classes['field']} ${classes['fontNormal']}` });
4646
const inputIdLabel = createLabel({ id: 'input_id_label', htmlFor: 'input_id', innerText: 'User ID', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
4747
const inputId = createInput({ id: 'input_id', className: `${classes['field']} ${classes['fontNormal']}` });
48-
const inputAccessTokenLabel = createLabel({ id: 'input_access_token_label', htmlFor: 'input_access_token', innerText: 'Access Token', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
48+
const inputAccessTokenLabel = createLabel({ id: 'input_access_token_label', htmlFor: 'input_access_token', innerText: 'Access token', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
4949
const inputAccessToken = createInput({ id: 'input_access_token', className: `${classes['field']} ${classes['fontNormal']}` });
5050

5151
const btnLogin = createButton({ id: 'btn_login', className: `${classes['btn']} ${classes['btnPrimary']} ${classes['btnMid']} ${classes['loginButton']} ${classes['fontNormal']}`, });

views/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,18 @@
1313
<div id="welcome_view" class="column center">
1414
<img src="<%=require('../img/ic-logo-horizontal.svg')%>" alt="Sendbird horizontal logo svg icon" class="ic-logo-horizontal">
1515
<div class="voice-sample-page title font-weight-demi">
16-
Sendbird Calls Quickstart
16+
Sendbird Calls
1717
</div>
1818
<div class="title-choice-type">
19-
Choose an application type
19+
Choose a quickstart app type
2020
</div>
2121
<div class="row center margin-top-24">
2222
<div class="choice-item margin-right-24" onclick="location.href='main.html'">
2323
<div class="title-choice-item">
2424
Full-screen
2525
</div>
2626
<div class="desc-choice-item">
27-
The full-screen application type provides an example of a standalone phone call web app.
27+
The full-screen type allows you to make calls without any installation on your browser.
2828
</div>
2929
</div>
3030

@@ -33,7 +33,7 @@
3333
Widget
3434
</div>
3535
<div class="desc-choice-item">
36-
The widget application type showcases how a phone call may be overlaid on top of an existing web application.
36+
The widget type allows you to make calls on your existing web application.
3737
</div>
3838
</div>
3939
</div>

0 commit comments

Comments
 (0)