From b2a8f5026780e04732c289e65ca29ed74c6fa76a Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Tue, 12 May 2020 10:46:19 +0900 Subject: [PATCH 01/47] Appling call-log UI design on a quickstart-calls sample. 1. Add CallLogView Component. 2. Add CallLogItem Component. 3. Add Header Component. 4. Add TabToolBar Component. 5. Add design Images. 6. Call-Log UI Desing apply. 7. when scroll reached to the bottom, get next call log query --- .gitignore | 1 + css/main.css | 15 ++ js/main.js | 4 +- js/widget.js | 4 +- lib/assets/ic-call-filled-active.svg | 3 + lib/assets/ic-call-filled-deactive.svg | 3 + lib/assets/ic-call-filled.svg | 3 + lib/assets/ic-layout-default-active.svg | 3 + lib/assets/ic-layout-default-deactive.svg | 3 + lib/assets/ic-logo-horizontal-inverse-01.svg | 3 + lib/assets/ic-video-thumbnail-filled.svg | 3 + .../icon-call-video-incoming-filled.svg | 6 + .../icon-call-video-outgoing-filled.svg | 6 + .../icon-call-voice-incoming-filled.svg | 6 + .../icon-call-voice-outgoing-filled.svg | 6 + lib/components/App.js | 11 +- lib/components/Header.js | 91 +++++++ lib/components/MainApp.js | 26 +- lib/components/TabToolBar.js | 53 ++++ lib/css/styles.js | 252 +++++++++++++++++- lib/utils/domUtil.js | 19 ++ lib/views/CallLogItem.js | 132 +++++++++ lib/views/CallLogView.js | 54 ++++ lib/views/DialView.js | 102 +------ package-lock.json | 90 +++---- 25 files changed, 746 insertions(+), 153 deletions(-) create mode 100644 lib/assets/ic-call-filled-active.svg create mode 100644 lib/assets/ic-call-filled-deactive.svg create mode 100644 lib/assets/ic-call-filled.svg create mode 100644 lib/assets/ic-layout-default-active.svg create mode 100644 lib/assets/ic-layout-default-deactive.svg create mode 100644 lib/assets/ic-logo-horizontal-inverse-01.svg create mode 100644 lib/assets/ic-video-thumbnail-filled.svg create mode 100644 lib/assets/icon-call-video-incoming-filled.svg create mode 100644 lib/assets/icon-call-video-outgoing-filled.svg create mode 100644 lib/assets/icon-call-voice-incoming-filled.svg create mode 100644 lib/assets/icon-call-voice-outgoing-filled.svg create mode 100644 lib/components/Header.js create mode 100644 lib/components/TabToolBar.js create mode 100644 lib/views/CallLogItem.js create mode 100644 lib/views/CallLogView.js diff --git a/.gitignore b/.gitignore index 6704566..a6b984d 100644 --- a/.gitignore +++ b/.gitignore @@ -102,3 +102,4 @@ dist # TernJS port file .tern-port +.DS_Store diff --git a/css/main.css b/css/main.css index ab66b10..e0a1723 100644 --- a/css/main.css +++ b/css/main.css @@ -150,6 +150,7 @@ body { display: flex; width: 100vw; height: 100vh; + overflow: hidden; } .container { @@ -253,3 +254,17 @@ button label { right: 16px; bottom: 16px; } + +::-webkit-scrollbar { + width: 5px; /* 세로축 스크롤바 길이 */ + } + ::-webkit-scrollbar-track { + background-color: transparent; + } + ::-webkit-scrollbar-track-piece { + background-color: transparent; + } + ::-webkit-scrollbar-thumb { + border-radius: 8px; + background-color: gray; + } diff --git a/js/main.js b/js/main.js index b4e8c80..1394175 100644 --- a/js/main.js +++ b/js/main.js @@ -3,6 +3,7 @@ import MainApp from "../lib/components/MainApp"; import DialView from "../lib/views/DialView"; import CallView from "../lib/views/CallView"; import LoginView from "../lib/views/LoginView"; +import CallLogView from "../lib/views/CallLogView"; import { ACCESS_TOKEN, IS_ACCESS_TOKEN_NEEDED, TEST_APP_ID, USER_ID } from "../envs"; function onLoadedHandler() { @@ -12,7 +13,8 @@ function onLoadedHandler() { 'index': LoginView, 'login_view': LoginView, 'dial_view': DialView, - 'call_view': CallView + 'call_view': CallView, + 'calllog_view': CallLogView }, styles: {}, args: { diff --git a/js/widget.js b/js/widget.js index fcfc1c7..3773281 100644 --- a/js/widget.js +++ b/js/widget.js @@ -2,6 +2,7 @@ import "../css/main.css"; import LoginView from "../lib/views/LoginView"; import CallView from "../lib/views/CallView"; import DialView from "../lib/views/DialView"; +import CallLogView from "../lib/views/CallLogView"; import { TEST_APP_ID, USER_ID, ACCESS_TOKEN, IS_ACCESS_TOKEN_NEEDED } from "../envs.js"; import WidgetApp from "../lib/components/WidgetApp"; @@ -13,7 +14,8 @@ function onLoadedHandler() { 'index': LoginView, 'login_view': LoginView, 'dial_view': DialView, - 'call_view': CallView + 'call_view': CallView, + 'calllog_view': CallLogView }, styles: { }, diff --git a/lib/assets/ic-call-filled-active.svg b/lib/assets/ic-call-filled-active.svg new file mode 100644 index 0000000..e875484 --- /dev/null +++ b/lib/assets/ic-call-filled-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/assets/ic-call-filled-deactive.svg b/lib/assets/ic-call-filled-deactive.svg new file mode 100644 index 0000000..115f2a7 --- /dev/null +++ b/lib/assets/ic-call-filled-deactive.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/assets/ic-call-filled.svg b/lib/assets/ic-call-filled.svg new file mode 100644 index 0000000..e875484 --- /dev/null +++ b/lib/assets/ic-call-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/assets/ic-layout-default-active.svg b/lib/assets/ic-layout-default-active.svg new file mode 100644 index 0000000..78a47c9 --- /dev/null +++ b/lib/assets/ic-layout-default-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/assets/ic-layout-default-deactive.svg b/lib/assets/ic-layout-default-deactive.svg new file mode 100644 index 0000000..5f4b5bd --- /dev/null +++ b/lib/assets/ic-layout-default-deactive.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/assets/ic-logo-horizontal-inverse-01.svg b/lib/assets/ic-logo-horizontal-inverse-01.svg new file mode 100644 index 0000000..f574caf --- /dev/null +++ b/lib/assets/ic-logo-horizontal-inverse-01.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/assets/ic-video-thumbnail-filled.svg b/lib/assets/ic-video-thumbnail-filled.svg new file mode 100644 index 0000000..677fc23 --- /dev/null +++ b/lib/assets/ic-video-thumbnail-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/assets/icon-call-video-incoming-filled.svg b/lib/assets/icon-call-video-incoming-filled.svg new file mode 100644 index 0000000..a408dd3 --- /dev/null +++ b/lib/assets/icon-call-video-incoming-filled.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/lib/assets/icon-call-video-outgoing-filled.svg b/lib/assets/icon-call-video-outgoing-filled.svg new file mode 100644 index 0000000..380a106 --- /dev/null +++ b/lib/assets/icon-call-video-outgoing-filled.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/lib/assets/icon-call-voice-incoming-filled.svg b/lib/assets/icon-call-voice-incoming-filled.svg new file mode 100644 index 0000000..f0cd9cc --- /dev/null +++ b/lib/assets/icon-call-voice-incoming-filled.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/lib/assets/icon-call-voice-outgoing-filled.svg b/lib/assets/icon-call-voice-outgoing-filled.svg new file mode 100644 index 0000000..9bb0429 --- /dev/null +++ b/lib/assets/icon-call-voice-outgoing-filled.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/lib/components/App.js b/lib/components/App.js index b05beac..b76eff8 100644 --- a/lib/components/App.js +++ b/lib/components/App.js @@ -1,5 +1,5 @@ import BaseElement from "./BaseElement"; -import { jss, sheet } from "../css/styles.js"; +import { jss, sheet, classes } from "../css/styles.js"; export default class App extends BaseElement { constructor({ id, className, pages, styles, args }) { @@ -30,7 +30,14 @@ export default class App extends BaseElement { route(pageName, opt = {}) { for (let i = this.children.length - 1 ; i >= 0 ; i--) { const child = this.children[i]; - child.remove(); + if( child.element.id === 'header' || child.element.id === 'tabtoolbar') { + if( opt.isRemoveHeader === true ) { + child.remove(); + } + } + else{ + child.remove(); + } } const _pageName = this.pages[pageName] ? pageName : 'index'; diff --git a/lib/components/Header.js b/lib/components/Header.js new file mode 100644 index 0000000..3f35542 --- /dev/null +++ b/lib/components/Header.js @@ -0,0 +1,91 @@ +import SendBirdCall from "sendbird-calls"; +import BaseElement from "./BaseElement"; +import { createDiv } from "../utils/domUtil"; +import Menu from "../components/Menu"; +import { sheet, classes } from "../css/styles"; + +export default class Header extends BaseElement { + constructor({ id, className, parent, element, args } = {}) { + super({ id, className, parent, element, args }); + this.element = element; + this.parent = parent; + + this.settingItems = [ + { + 'label': 'Device settings', + 'callback': () => { this.sendToParent('show_settings') } + }, + { + 'label': 'Sign out', + 'callback': () => { + SendBirdCall.deauthenticate(); + this.sendToParent('deauthenticate'); + } + } + ]; + } + + build() { + const userDiv = createDiv({ + id: 'header_user_div', + className: `${classes['userDiv']} ${classes['center']}` + }); + + let profileImg; + if (this.args.user && this.args.user.profileUrl) { + sheet.update({ profileUrl: this.args.user.profileUrl }); + profileImg = createDiv({ id: 'header_profile_img', className: classes['profileSmall'] }); + } else { + profileImg = createDiv({ id: 'header_avatar', className: `${classes['avatar']}` }); + } + + const headerInfo = createDiv({ id: 'header_info', className: `${classes['headerInfo']}` }); + const userId = createDiv({ + id: 'header_user_id', + className: `${classes['headerUserId']} ${classes['fontNormal']} ${classes['fontHeavy']}`, + innerText: this.args.user.userId || '' + }); + const nickname = createDiv({ + id: 'header_nickname', + className: `${classes['headerNickname']} ${classes['fontSmall']}`, + innerText: this.args.user.nickname || 'no nickname' + }); + headerInfo.appendChild(userId); + headerInfo.appendChild(nickname); + + userDiv.appendChild(profileImg); + userDiv.appendChild(headerInfo); + + const headerButtons = createDiv({ + id: 'header_buttons', + className: `${classes['headerButtons']} ${classes['row']} ${classes['center']}` + }); + const settingsButton = new Menu({ + id: 'settings_button', + element: createDiv({ className: `${classes['settingsButton']}` }), + items: this.settingItems + }); + + const closeButton = createDiv({ + id: 'close_button', + className: `${classes['closeButton']}` + }); + closeButton.onclick = () => { + this.element.sendToParent('widgetclose'); + }; + settingsButton.appendToHTML(headerButtons); + headerButtons.appendChild(closeButton); + + const divider = createDiv({ + id: 'header_divider', + className: classes['headerDivider'] + }); + + const headerLogo = createDiv({ id: 'header_logo', className: `${classes['headerLogo']}`}); + + this.element.appendChild(userDiv); + this.element.appendChild(divider); + this.element.appendChild(headerButtons); + this.element.appendChild(headerLogo); + } +} \ No newline at end of file diff --git a/lib/components/MainApp.js b/lib/components/MainApp.js index cc31ae0..e0b119f 100644 --- a/lib/components/MainApp.js +++ b/lib/components/MainApp.js @@ -6,6 +6,10 @@ import { getCallOption } from "../utils/util"; import { Toast } from "./Toast"; import Settings from "../views/Settings"; +import Header from "../components/Header"; +import TabToolBar from "../components/TabToolBar"; +import { createDiv } from "../utils/domUtil"; + export default class MainApp extends App { constructor({ id, className, pages, styles, args }) { const _className = `${classes['mainApp']} ${classes['container']} ${classes['center']} ${className || ''}`; @@ -97,6 +101,9 @@ export default class MainApp extends App { this.args.user = user; if (this.onLoginSuccess) this.onLoginSuccess(); + + this.createHeaderNTab(); + this.route('dial_view', {}); } catch (e) { if (this.onLoginFailure) this.onLoginFailure(e); @@ -137,7 +144,7 @@ export default class MainApp extends App { return undefined; } - this.route('call_view', { call: call, state: state }); + this.route('call_view', { call: call, state: state, isRemoveHeader: true }); } isBusy() { @@ -173,6 +180,12 @@ export default class MainApp extends App { case 'close': this.recvClose(value); break; + case 'show_calllog': + this.route('calllog_view', {}); + break; + case 'show_dial': + this.route('dial_view', {}); + break; default: break; } @@ -190,7 +203,7 @@ export default class MainApp extends App { this.args.user = undefined; this.args.userId = undefined; this.args.accessToken = undefined; - this.route('login_view', {}); + this.route('login_view', { isRemoveHeader: true }); } recvShowSettings() { @@ -202,6 +215,15 @@ export default class MainApp extends App { } recvClose() { + this.createHeaderNTab(); this.route('dial_view', {}); } + + createHeaderNTab() { + const HeaderItem = new Header({element: createDiv({ id: 'header', className: `${classes['widgetHeader']}`})}); + const tabToolBar = new TabToolBar({element: createDiv({id: 'tabtoolbar', className: `${classes['tabToolBar']}`})}); + + HeaderItem.appendToBaseElement(this); + tabToolBar.appendToBaseElement(this); + } } \ No newline at end of file diff --git a/lib/components/TabToolBar.js b/lib/components/TabToolBar.js new file mode 100644 index 0000000..8367ac7 --- /dev/null +++ b/lib/components/TabToolBar.js @@ -0,0 +1,53 @@ +import BaseElement from "./BaseElement"; +import { createDiv, createParagraph, replaceClassName, hasClassName } from "../utils/domUtil"; +import { classes } from "../css/styles"; + +export default class TabToolBar extends BaseElement { + constructor({ id, className, parent, element } = {}) { + super({ id, className, parent, element }); + this.element = element; + } + + build() { + // dial tab + const btnDial = createDiv({id: 'btn_tab_dial', className: `${classes['btnTab']}`}); + const icoTabDial = createDiv({id: 'ico_tab_dial', className: `${classes['tabIco']} ${classes['dialActive']}`}); + const btnDialCaption = createParagraph({id: 'btn_dial_caption', innerText: 'dial', className: `${classes['fontNormal']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabActive']}`}); + + btnDial.appendChild(icoTabDial); + btnDial.appendChild(btnDialCaption); + + btnDial.onclick = (ev) => { + if(!hasClassName(icoTabDial, classes['dialActive'])) { + replaceClassName(icoTabDial, classes['dialDeactive'], classes['dialActive']); + replaceClassName(btnDialCaption, classes['btnTabDeactive'], classes['btnTabActive']); + + replaceClassName(icoCallLog, classes['callLogActive'], classes['callLogDeactive']); + replaceClassName(btnCalllogCaption, classes['btnTabActive'], classes['btnTabDeactive']); + this.sendToParent('show_dial'); + } + }; + + const btnCallLog = createDiv({id: 'btn_tab_calllog', className: `${classes['btnTab']}`}); + const icoCallLog = createDiv({id: 'ico_tab_callog', className: `${classes['tabIco']} ${classes['callLogDeactive']}`}); + const btnCalllogCaption = createParagraph({id: 'btn_calllog_caption', innerText: 'History', className: `${classes['fontNormal']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabDeactive']}`}); + + btnCallLog.appendChild(icoCallLog); + btnCallLog.appendChild(btnCalllogCaption); + + btnCallLog.onclick = (ev) => { + if(!hasClassName(icoCallLog, classes['callLogActive'])) { + replaceClassName(icoCallLog, classes['callLogDeactive'], classes['callLogActive']); + replaceClassName(btnCalllogCaption, classes['btnTabDeactive'], classes['btnTabActive']); + + replaceClassName(icoTabDial, classes['dialActive'], classes['dialDeactive']); + replaceClassName(btnDialCaption, classes['btnTabActive'], classes['btnTabDeactive']); + + this.sendToParent('show_calllog'); + } + }; + + this.element.appendChild(btnDial); + this.element.appendChild(btnCallLog); + } +} \ No newline at end of file diff --git a/lib/css/styles.js b/lib/css/styles.js index 63ad272..a9d1b48 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -24,6 +24,15 @@ import settingsCloseIcon from '../assets/ic-close-black-20.svg'; import widgetCloseIcon from '../assets/ic-close-24.svg'; import arrowDownIcon from '../assets/ic-input-arrow-down.svg'; import avatarIcon from '../assets/icon-avatar.svg'; +import dialIconActive from '../assets/ic-call-filled-active.svg'; +import dialIconDeactive from '../assets/ic-call-filled-deactive.svg'; +import callhistoryIconDeactive from '../assets/ic-layout-default-deactive.svg'; +import callhistoryIconActive from '../assets/ic-layout-default-active.svg'; +import headerLogo from '../assets/ic-logo-horizontal-inverse-01.svg'; +import thumbnailVideo from '../assets/ic-video-thumbnail-filled.svg'; +import thumbnailVoice from '../assets/ic-call-filled.svg'; + + const option = Object.assign( {}, @@ -39,9 +48,12 @@ jss.setup(option); const colors = { navy50: '#f6f8fc', + navy80: '#eef2fa', navy100: '#dee2f2', navy200: '#c9d0e6', navy300: '#b6bdd7', + navy400: '#8a92ba', + navy600: '#595e8a', navy800: '#353761', navy900: '#212242', white: '#ffffff', @@ -137,10 +149,13 @@ const styles = { display: 'flex', width: '100%', height: '100%', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'flex-start', }, hidden: { - display: 'none' + display: 'none !important' }, invisible: { @@ -190,11 +205,21 @@ const styles = { marginBottom: '24px' }, + headerLogo: { + display: 'block', + width: '100%', + height: '24px', + backgroundImage: `url(${headerLogo})`, + backgroundRepeat: 'no-repeat', + marginLeft: '16px' + }, + /*** views ***/ view: { boxSizing: 'border-box', - width: '100vw', + // width: '100vw', + width: '100%', height: '100%', padding: '24px', display: 'relative' @@ -339,6 +364,71 @@ const styles = { fontWeight: 600 }, + /*** tab ***/ + tabToolBar: { + position: 'relative', + display: 'inline-flex', + justifyContent: 'center', + width: '100%', + height: '55px', + backgroundColor: colors.white, + textAlign: 'center', + borderBottom: 'solid 1px #dee2f2' + }, + + btnTab: { + display: 'inline-block', + width: '100px', + height: '55px', + cursor: 'pointer' + }, + + tabIco: { + width: '100%', + height: '32px', + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center' + }, + + dialActive: { + backgroundImage: `url(${dialIconActive})` + }, + + dialDeactive: { + backgroundImage: `url(${dialIconDeactive})` + }, + + btnTabCaption: { + width: '100%', + height: '12px', + margin: 0, + lineHeight: 1, + textAlign: 'center' + }, + + icoTabCallLog: { + width: '100%', + height: '32px', + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center', + }, + + callLogActive: { + backgroundImage: `url(${callhistoryIconActive})`, + }, + + callLogDeactive: { + backgroundImage: `url(${callhistoryIconDeactive})`, + }, + + btnTabActive: { + color: colors.purple300 + }, + + btnTabDeactive: { + color: colors.navy600 + }, + /*** components ***/ formContainer: { @@ -379,6 +469,9 @@ const styles = { } }, + dialTitle: { + marginBottom: '16px' + }, /*** buttons ***/ loginButton: { @@ -818,7 +911,10 @@ const styles = { borderRadius: '8px', boxShadow: '0 9px 15px -7px rgba(33, 34, 66, 0.04), 0 9px 46px 8px rgba(33, 34, 66, 0.08), 0 24px 38px 3px rgba(33, 34, 66, 0.12)', backgroundColor: colors.white, - overflow: 'hidden' + overflow: 'hidden', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center' }, widgetIcon: { @@ -833,14 +929,13 @@ const styles = { }, widgetHeader: { - position: 'absolute', - top: '0', - display: 'flex', + display: 'inline-flex', + position: 'relative', flexDirection: 'row-reverse', alignItems: 'center', width: '100%', height: '48px', - backgroundColor: colors.navy800, + backgroundColor: colors.purple300, }, userDiv: { @@ -916,7 +1011,8 @@ const styles = { backgroundPosition: 'center', '&:hover': { backgroundColor: colors.navy900 - } + }, + zIndex: 10, }, closeButton: { @@ -942,6 +1038,10 @@ const styles = { }, dialDesc: { + width: '312px', + height: '40px', + textAlign: 'center', + color: colors.navy400, marginBottom: '32px' }, @@ -959,6 +1059,142 @@ const styles = { backgroundColor: colors.purple300 }, + /* call Log View */ + callLogListContainer: { + display: 'inline-block', + position: 'relative', + width: '382px', + height: 'calc(100% - 103px)', + overflowY: 'auto', + listStyle: 'none', + margin: '0', + padding: '0', + }, + + /* call Log item */ + callLogItemWrap: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + position: 'relative', + width: '376px', + minHeight: '88px', + height: 'auto', + borderRight: 'solid 1px #dee2f2', + paddingBottom: '5px', + }, + + callLogTypeDiv: { + display: 'inline-flex', + width: '44px', + height: '100%' + }, + + callLogProfileDiv: { + display: 'inline-flex', + width: '40px', + height: '100%' + }, + + callLogInfoDiv: { + display: 'inline-flex', + flexDirection: 'column', + justifyContent: 'flex-start', + width: '156px', + height: '100%' + }, + + callLogActionDiv: { + display: 'inline-flex', + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'right', + width: '136px', + height: '100%' + }, + + callLogItemWarpBorder: { + borderTop: 'solid 1px #dee2f2' + }, + + callLogItemType: { + display: 'block', + width: '20px', + height: '20px', + marginLeft: '18px', + marginTop: '26px', + }, + + callLogProfileImg: { + display: 'block', + width: '40px', + height: '40px', + marginTop: '16px', + borderRadius: '50%' + }, + + callLogDisplayName: { + display: 'inline-flex', + width: '140px', + height: 'auto', + marginTop: '16px', + marginLeft: '12px', + wordBreak: 'break-all', + }, + + callLogDuration: { + display: 'inline-flex', + width: '100%', + height: '16px', + marginLeft: '12px', + marginTop: '4px', + color: colors.navy600 + }, + + callLogStartTime: { + display: 'block', + width: '120px', + height: '16px', + textAlign: 'right', + marginTop: '16px', + marginRight: '16px', + color: colors.navy600 + }, + + callLogActionBtnWrap: { + display: 'inline-flex', + flexDirection: 'row', + justifyContent: 'flex-end', + width: '136px', + height: '56px' + }, + + callLogVideoActionBtn: { + width: '32px', + height: '32px', + borderRadius: '50%', + backgroundImage: `url(${thumbnailVideo})`, + backgroundPosition: 'center', + backgroundRepeat: 'no-repeat', + marginRight: '12px', + marginTop: '12px', + backgroundColor: colors.navy80, + cursor: 'pointer' + }, + + callLogVoiceActionBtn: { + width: '32px', + height: '32px', + borderRadius: '50%', + backgroundImage: `url(${thumbnailVoice})`, + backgroundPosition: 'center', + backgroundRepeat: 'no-repeat', + marginTop: '12px', + marginRight: '16px', + backgroundColor: colors.navy80, + cursor: 'pointer' + }, + welcomeDiv: {} }; diff --git a/lib/utils/domUtil.js b/lib/utils/domUtil.js index 509bb37..0fc9480 100644 --- a/lib/utils/domUtil.js +++ b/lib/utils/domUtil.js @@ -124,6 +124,25 @@ export function createImg({ id, className, src, onerror } = {}) { return element; } +export function createParagraph({ id, className, innerText } = {}) { + return _createElement({ tagName: 'p', id: id, className: className, innerText: innerText }); +} + +export function createList({ id, className } = {}) { + return _createElement({ tagName: 'ul', id: id, className: className }); +} + +export function createListItem({ id, className } = {}) { + return _createElement({ tagName: 'li', id: id, className: className }); +} + export function replaceClassName(element, searchValue, newValue) { element.classList.replace(searchValue, newValue); +} + +export function hasClassName(element, searchValue) { + if(element.classList.value.indexOf(searchValue) === -1) { + return false; + } + return true; } \ No newline at end of file diff --git a/lib/views/CallLogItem.js b/lib/views/CallLogItem.js new file mode 100644 index 0000000..9f61036 --- /dev/null +++ b/lib/views/CallLogItem.js @@ -0,0 +1,132 @@ +import SendBirdCall from 'sendbird-calls'; +import outgoingVideo from '../assets/icon-call-video-outgoing-filled.svg'; +import incomingVideo from '../assets/icon-call-video-incoming-filled.svg'; +import outgoingVoice from '../assets/icon-call-voice-outgoing-filled.svg'; +import incomingVoice from '../assets/icon-call-voice-incoming-filled.svg'; + +import { createListItem, createDiv, createImg, createLabel } from "../utils/domUtil"; +import { sheet, classes } from "../css/styles"; + +export class CallLogItem { + constructor({ callLogInfo, className }) { + const wrapper = createListItem({ id: callLogInfo.callId, className: className }); + let callType = null; + if(callLogInfo.isVideoCall){ + if(callLogInfo.userRole === 'dc_caller'){ + callType = outgoingVideo; + } + else{ + callType = incomingVideo; + } + } + else{ + if(callLogInfo.userRole === 'dc_caller'){ + callType = outgoingVoice; + } + else{ + callType = incomingVoice; + } + } + + let profileImage = null; + let displayName = ""; + if(callLogInfo.userRole === 'dc_caller'){ + profileImage = callLogInfo.callee.profileUrl; + displayName = callLogInfo.callee.userId; + } + else{ + profileImage = callLogInfo.caller.profileUrl; + displayName = callLogInfo.caller.userId; + } + + const icoCallType = createImg({ className: `${classes['callLogItemType']}`, src: callType }); + const callTypeDiv = createDiv({ className: `${classes['callLogTypeDiv']}` }); + callTypeDiv.appendChild(icoCallType); + + const profileImg = createImg({ className: `${classes['callLogProfileImg']}`, src: profileImage }); + const profileDiv = createDiv({ className: `${classes['callLogProfileDiv']}` }); + profileDiv.appendChild(profileImg); + + //duration + let callDurationTime = ''; + callLogInfo.duration = 3603; + if(callLogInfo.duration > 0){ + let hour = parseInt(callLogInfo.duration / 3600); + let min = parseInt((callLogInfo.duration - (hour * 3600)) / 60); + let sec = callLogInfo.duration - (hour * 3600) - (min * 60); + if( hour > 0 ){ + callDurationTime = hour + 'h '; + } + if( min > 0 ){ + callDurationTime += (min + 'm '); + } + callDurationTime += (sec + 's'); + } + else { + callDurationTime = '0s'; + } + + const displayNameLabel = createLabel({ className: `${classes['callLogDisplayName']} ${classes['fontNormal']} ${classes['fontHeavy']}`, innerText: displayName }); + const callDuration = createLabel({ className: `${classes['callLogDuration']} ${classes['fontSmall']}`, innerText: callDurationTime }); + const callEndReason = createLabel({ className: `${classes['callLogDuration']} ${classes['fontSmall']}`, innerText: callLogInfo.endResult }); + + + const callLogInfoDiv = createDiv({ className: `${classes['callLogInfoDiv']}` }); + callLogInfoDiv.appendChild(displayNameLabel); + callLogInfoDiv.appendChild(callDuration); + callLogInfoDiv.appendChild(callEndReason); + + + let callStartTime = new Date(callLogInfo.startedAt); + let callStartTimeLabel = callStartTime.getFullYear() + '/' + + callStartTime.toLocaleString(['en-US'], {month: '2-digit'}) + '/' + + callStartTime.toLocaleString(['en-US'], {day: '2-digit'}) + ' ' + + this.formatAMPM(callStartTime); + + const callLogStartTime = createLabel({ className: `${classes['callLogStartTime']} ${classes['fontSmall']}`, innerText: callStartTimeLabel}); + const callActionBtnWrap = createDiv({ className: `${classes['callLogActionBtnWrap']}` }); + const btnCallVideo = createDiv({ className: `${classes['callLogVideoActionBtn']}`}); + const btnCallVoice = createDiv({ className: `${classes['callLogVoiceActionBtn']}`}); + callActionBtnWrap.appendChild(btnCallVoice); + callActionBtnWrap.appendChild(btnCallVideo); + + + const callLogActionDiv = createDiv({ className: `${classes['callLogActionDiv']}` }); + callLogActionDiv.appendChild(callLogStartTime); + callLogActionDiv.appendChild(callActionBtnWrap); + + + wrapper.appendChild(callTypeDiv); + wrapper.appendChild(profileDiv); + wrapper.appendChild(callLogInfoDiv); + wrapper.appendChild(callLogActionDiv); + + this.element = wrapper; + this.btnCallVideo = btnCallVideo; + this.btnCallVoice = btnCallVoice; + this.destPeerID = displayName; + } + + formatAMPM(date) { + let hours = date.getHours(); + let minutes = date.getMinutes(); + let ampm = hours >= 12 ? 'pm' : 'am'; + hours = hours % 12; + hours = hours ? hours : 12; // the hour '0' should be '12' + minutes = minutes < 10 ? '0'+minutes : minutes; + let strTime = hours + ':' + minutes + ampm; + return strTime; + } + + /** + * @param {(event: any, args: any) => void} eventhandler + */ + set onclick(eventhandler) { + this.btnCallVideo.onclick = (event) => { + eventhandler(event, {peerId: this.destPeerID, isVideoCall: true, callOption: null}); + }; + this.btnCallVoice.onclick = (event) => { + eventhandler(event, {peerId: this.destPeerID, isVideoCall: true, callOption: null}); + }; + } +} \ No newline at end of file diff --git a/lib/views/CallLogView.js b/lib/views/CallLogView.js new file mode 100644 index 0000000..500294f --- /dev/null +++ b/lib/views/CallLogView.js @@ -0,0 +1,54 @@ +import SendBirdCall from "sendbird-calls"; +import BaseElement from "../components/BaseElement"; +import { classes } from "../css/styles.js"; +import { createList } from "../utils/domUtil"; +import { CallLogItem } from "./CallLogItem"; + +export default class CallLogView extends BaseElement{ + constructor({ args }) { + super({ + id: 'calllog_view', + className: `${classes['container']} ${classes['center']} ${classes['viewDial']}`, + args + }); + this.callLogQuery = null; + this.callLogQueryData = []; + } + + build() { + const callLogList = createList({ id: 'call_log_list', className: `${classes['callLogListContainer']}` }); + this.callLogQuery = SendBirdCall.createDirectCallLogListQuery({limit: 30}); + this.getCallLogs(callLogList); + callLogList.onscroll = (e) => { + let scrollposition = e.target.scrollHeight - e.target.clientHeight; + + if( scrollposition === e.target.scrollTop ) { + this.getCallLogs(callLogList); + } + }; + this.element.appendChild(callLogList); + } + + getCallLogs(element){ + if(this.callLogQuery.hasNext && !this.callLogQuery.isLoading) { + this.callLogQuery.next((directCallLog) => { + if(directCallLog){ + for(let i = 0; i < directCallLog.length; i++){ + let callItem = null; + if( i === 0 ){ + callItem = new CallLogItem({callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']}`}); + } + else { + callItem = new CallLogItem({callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']} ${classes['callLogItemWarpBorder']}`}); + } + callItem.onclick = (event, args) => { + this.sendToParent('dial', args); + }; + + element.appendChild(callItem.element); + } + } + }); + } + } +} \ No newline at end of file diff --git a/lib/views/DialView.js b/lib/views/DialView.js index da4bb2d..1966445 100644 --- a/lib/views/DialView.js +++ b/lib/views/DialView.js @@ -1,9 +1,9 @@ import SendBirdCall from "sendbird-calls"; import BaseElement from "../components/BaseElement"; -import { sheet, classes } from "../css/styles.js"; +import { classes } from "../css/styles.js"; import { createButton, createDiv, createInput, createLabel } from "../utils/domUtil"; -import Menu from "../components/Menu"; + import pack from "../../package"; export default class DialView extends BaseElement { @@ -13,108 +13,32 @@ export default class DialView extends BaseElement { className: `${classes['container']} ${classes['column']} ${classes['center']} ${classes['view']} ${classes['viewDial']}`, args }); - - this.settingItems = [ - { - 'label': 'Device settings', - 'callback': () => { this.sendToParent('show_settings') } - }, - { - 'label': 'Sign out', - 'callback': () => { this.deauthenticate(); } - } - ]; } onLoaded() { } build() { - const header = createDiv({ id: 'header', className: classes['widgetHeader'] }); - const content = createDiv({ id: 'content', className: `${classes['content']} ${classes['column']} ${classes['center']}` }); - - const userDiv = createDiv({ - id: 'header_user_div', - className: `${classes['userDiv']} ${classes['center']}` - }); - - let profileImg; - if (this.args.user && this.args.user.profileUrl) { - sheet.update({ profileUrl: this.args.user.profileUrl }); - profileImg = createDiv({ id: 'header_profile_img', className: classes['profileSmall'] }); - } else { - profileImg = createDiv({ id: 'header_avatar', className: `${classes['avatar']}` }); - } - - const headerInfo = createDiv({ id: 'header_info', className: `${classes['headerInfo']}` }); - const userId = createDiv({ - id: 'header_user_id', - className: `${classes['headerUserId']} ${classes['fontNormal']} ${classes['fontHeavy']}`, - innerText: this.args.user.userId || '' - }); - const nickname = createDiv({ - id: 'header_nickname', - className: `${classes['headerNickname']} ${classes['fontSmall']}`, - innerText: this.args.user.nickname || 'no nickname' - }); - headerInfo.appendChild(userId); - headerInfo.appendChild(nickname); - - userDiv.appendChild(profileImg); - userDiv.appendChild(headerInfo); - - const headerButtons = createDiv({ - id: 'header_buttons', - className: `${classes['headerButtons']} ${classes['row']} ${classes['center']}` - }); - const settingsButton = new Menu({ - id: 'settings_button', - element: createDiv({ className: `${classes['settingsButton']}` }), - items: this.settingItems - }); - - const closeButton = createDiv({ - id: 'close_button', - className: `${classes['closeButton']}` - }); - closeButton.onclick = () => { - this.sendToParent('widgetclose'); - }; - settingsButton.appendToHTML(headerButtons); - headerButtons.appendChild(closeButton); - - const divider = createDiv({ - id: 'header_divider', - className: classes['headerDivider'] - }); - - header.appendChild(userDiv); - header.appendChild(divider); - header.appendChild(headerButtons); - + const formContainer = createDiv({ className: `${classes['formContainer']} ${classes['column']} ${classes['center']}` }); - const logoMid = createDiv({ id: 'logo_oval', className: `${classes['logoMidBlack']}` }); - const welcomeDiv = createDiv({ - id: 'welcome_div', - className: `${classes['fontBig']} ${classes['fontHeavy']}`, - innerText: 'SendBird Calls' - }); - const descDiv = createDiv({ - id: 'desc_div', - className: `${classes['dialDesc']} ${classes['fontNormal']}`, - innerText: 'Make a call' + const dialTitleDiv = createDiv({ id: 'title', className: `${classes['fontBig']} ${classes['fontDemi']} ${classes['dialTitle']}`, innerText: 'Make a call'}); + const descDiv = createDiv({id: 'desc_div', + innerText: 'Enter the user ID of the user you wish to call, then press one of the video or voice call buttons', + className: `${classes['fontNormal']} ${classes['fontHeavy']} ${classes['dialDesc']}` }); + const peerId = createInput({ id: 'peer_id', className: `${classes['field']} ${classes['fontNormal']}`, - placeholder: 'User ID' + placeholder: 'Enter user ID' }); + const btns = createDiv({ id: 'buttons', className: `${classes['row']} ${classes['center']} ${classes['btns']}` }); const btnVideo = createButton({ @@ -129,8 +53,7 @@ export default class DialView extends BaseElement { btns.appendChild(btnVideo); btns.appendChild(btnAudio); - formContainer.appendChild(logoMid); - formContainer.appendChild(welcomeDiv); + formContainer.appendChild(dialTitleDiv); formContainer.appendChild(descDiv); formContainer.appendChild(peerId); formContainer.appendChild(btns); @@ -156,7 +79,6 @@ export default class DialView extends BaseElement { versionInfo.appendChild(sampleVersionLabel); versionInfo.appendChild(sdkVersionLabel); - this.element.appendChild(header); this.element.appendChild(content); this.element.appendChild(versionInfo); @@ -181,4 +103,4 @@ export default class DialView extends BaseElement { SendBirdCall.deauthenticate(); this.sendToParent('deauthenticate'); } -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index 6e347f8..60bdf4c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1158,9 +1158,9 @@ } }, "acorn": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz", - "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==", + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz", + "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==", "dev": true }, "ajv": { @@ -1688,9 +1688,9 @@ "dev": true }, "cacache": { - "version": "12.0.3", - "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.3.tgz", - "integrity": "sha512-kqdmfXEGFepesTuROHMs3MpFLWrPkSSpRqOw80RCflZXy/khxaArvFrQ7uJxSUduzAufc6G0g1VUCOZXxWavPw==", + "version": "12.0.4", + "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz", + "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==", "dev": true, "requires": { "bluebird": "^3.5.5", @@ -1781,9 +1781,9 @@ } }, "chownr": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.3.tgz", - "integrity": "sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", + "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==", "dev": true }, "chrome-trace-event": { @@ -2869,9 +2869,9 @@ } }, "figgy-pudding": { - "version": "3.5.1", - "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", - "integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==", + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz", + "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==", "dev": true }, "file-loader": { @@ -4592,9 +4592,9 @@ "dev": true }, "kind-of": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", "dev": true }, "lcid": { @@ -4856,9 +4856,9 @@ } }, "minimist": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", "dev": true }, "mississippi": { @@ -4901,20 +4901,12 @@ } }, "mkdirp": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", - "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", + "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", "dev": true, "requires": { - "minimist": "0.0.8" - }, - "dependencies": { - "minimist": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true - } + "minimist": "^1.2.5" } }, "move-concurrently": { @@ -5472,9 +5464,9 @@ } }, "portfinder": { - "version": "1.0.25", - "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz", - "integrity": "sha512-6ElJnHBbxVA1XSLgBp7G1FiCkQdlqGzuF7DswL5tcea+E8UpuvPU7beVAjjRwCioTS9ZluNbu+ZyRvgTsmqEBg==", + "version": "1.0.26", + "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz", + "integrity": "sha512-Xi7mKxJHHMI3rIUrnm/jjUgwhbYMkp/XKEcZX3aG4BrumLpq3nmoQMX+ClYnDZnZ/New7IatC1no5RX0zo1vXQ==", "dev": true, "requires": { "async": "^2.6.2", @@ -6460,9 +6452,9 @@ } }, "source-map-support": { - "version": "0.5.16", - "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz", - "integrity": "sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==", + "version": "0.5.19", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz", + "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==", "dev": true, "requires": { "buffer-from": "^1.0.0", @@ -6633,9 +6625,9 @@ } }, "stream-shift": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz", - "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz", + "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==", "dev": true }, "strict-uri-encode": { @@ -6742,9 +6734,9 @@ "dev": true }, "terser": { - "version": "4.4.2", - "resolved": "https://registry.npmjs.org/terser/-/terser-4.4.2.tgz", - "integrity": "sha512-Uufrsvhj9O1ikwgITGsZ5EZS6qPokUOkCegS7fYOdGTv+OA90vndUbU6PEjr5ePqHfNUbGyMO7xyIZv2MhsALQ==", + "version": "4.6.13", + "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.13.tgz", + "integrity": "sha512-wMvqukYgVpQlymbnNbabVZbtM6PN63AzqexpwJL8tbh/mRT9LE5o+ruVduAGL7D6Fpjl+Q+06U5I9Ul82odAhw==", "dev": true, "requires": { "commander": "^2.20.0", @@ -6767,16 +6759,16 @@ } }, "terser-webpack-plugin": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.2.tgz", - "integrity": "sha512-fdEb91kR2l+BVgES77N/NTXWZlpX6vX+pYPjnX5grcDYBF2CMnzJiXX4NNlna4l04lvCW39lZ+O/jSvUhHH/ew==", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz", + "integrity": "sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==", "dev": true, "requires": { "cacache": "^12.0.2", "find-cache-dir": "^2.1.0", "is-wsl": "^1.1.0", "schema-utils": "^1.0.0", - "serialize-javascript": "^2.1.1", + "serialize-javascript": "^2.1.2", "source-map": "^0.6.1", "terser": "^4.1.2", "webpack-sources": "^1.4.0", @@ -7665,9 +7657,9 @@ } }, "yargs-parser": { - "version": "13.1.1", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz", - "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==", + "version": "13.1.2", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz", + "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==", "dev": true, "requires": { "camelcase": "^5.0.0", From 61d7724e38d85991ac9db233ded78db30c562ab2 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Wed, 13 May 2020 16:21:26 +0900 Subject: [PATCH 02/47] [CALLS-700]Call history design implementation 1. add call-log view in widget mode --- lib/assets/ic-layout-default.svg | 3 + lib/assets/ic-logo-horizontal.svg | 3 + lib/components/App.js | 2 +- lib/components/Header.js | 13 ++- lib/components/MainApp.js | 6 +- lib/components/TabToolBar.js | 18 ++- lib/components/WidgetApp.js | 1 + lib/css/styles.js | 130 +++++++++++++++++++++- lib/views/CallLogItem.js | 179 ++++++++++++++++-------------- lib/views/CallLogView.js | 62 +++++++---- lib/views/DialView.js | 4 +- 11 files changed, 300 insertions(+), 121 deletions(-) create mode 100644 lib/assets/ic-layout-default.svg create mode 100644 lib/assets/ic-logo-horizontal.svg diff --git a/lib/assets/ic-layout-default.svg b/lib/assets/ic-layout-default.svg new file mode 100644 index 0000000..da2789d --- /dev/null +++ b/lib/assets/ic-layout-default.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/assets/ic-logo-horizontal.svg b/lib/assets/ic-logo-horizontal.svg new file mode 100644 index 0000000..1c3c7d4 --- /dev/null +++ b/lib/assets/ic-logo-horizontal.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/components/App.js b/lib/components/App.js index b76eff8..87c7342 100644 --- a/lib/components/App.js +++ b/lib/components/App.js @@ -45,7 +45,7 @@ export default class App extends BaseElement { const pageClass = this.pages[_pageName]; const view = new pageClass(opt); view.appendToBaseElement(this); - + if (this.onPageChange) this.onPageChange(_pageName); } } \ No newline at end of file diff --git a/lib/components/Header.js b/lib/components/Header.js index 3f35542..c737d7b 100644 --- a/lib/components/Header.js +++ b/lib/components/Header.js @@ -23,6 +23,9 @@ export default class Header extends BaseElement { } } ]; + + this.args = args; + this.parent = parent; } build() { @@ -71,7 +74,7 @@ export default class Header extends BaseElement { className: `${classes['closeButton']}` }); closeButton.onclick = () => { - this.element.sendToParent('widgetclose'); + this.parent.sendToParent('widgetclose'); }; settingsButton.appendToHTML(headerButtons); headerButtons.appendChild(closeButton); @@ -81,11 +84,13 @@ export default class Header extends BaseElement { className: classes['headerDivider'] }); - const headerLogo = createDiv({ id: 'header_logo', className: `${classes['headerLogo']}`}); - this.element.appendChild(userDiv); this.element.appendChild(divider); this.element.appendChild(headerButtons); - this.element.appendChild(headerLogo); + + if( !this.args.isWidget ){ + const headerLogo = createDiv({ id: 'header_logo', className: `${classes['headerLogo']}`}); + this.element.appendChild(headerLogo); + } } } \ No newline at end of file diff --git a/lib/components/MainApp.js b/lib/components/MainApp.js index e0b119f..56cd421 100644 --- a/lib/components/MainApp.js +++ b/lib/components/MainApp.js @@ -181,7 +181,7 @@ export default class MainApp extends App { this.recvClose(value); break; case 'show_calllog': - this.route('calllog_view', {}); + this.route('calllog_view', {args: this.args}); break; case 'show_dial': this.route('dial_view', {}); @@ -220,8 +220,8 @@ export default class MainApp extends App { } createHeaderNTab() { - const HeaderItem = new Header({element: createDiv({ id: 'header', className: `${classes['widgetHeader']}`})}); - const tabToolBar = new TabToolBar({element: createDiv({id: 'tabtoolbar', className: `${classes['tabToolBar']}`})}); + const HeaderItem = new Header({parent: this, element: createDiv({ id: 'header', className: `${classes['widgetHeader']}`})}); + const tabToolBar = new TabToolBar({ parent: this, element: createDiv({id: 'tabtoolbar', className: `${classes['tabToolBar']}`}), args: this.args }); HeaderItem.appendToBaseElement(this); tabToolBar.appendToBaseElement(this); diff --git a/lib/components/TabToolBar.js b/lib/components/TabToolBar.js index 8367ac7..6e011e0 100644 --- a/lib/components/TabToolBar.js +++ b/lib/components/TabToolBar.js @@ -3,14 +3,18 @@ import { createDiv, createParagraph, replaceClassName, hasClassName } from "../u import { classes } from "../css/styles"; export default class TabToolBar extends BaseElement { - constructor({ id, className, parent, element } = {}) { + constructor({ id, className, parent, element, args } = {}) { super({ id, className, parent, element }); this.element = element; + this.args = args; } build() { - // dial tab - const btnDial = createDiv({id: 'btn_tab_dial', className: `${classes['btnTab']}`}); + // dial tab + if( this.args.isWidget ) { + this.element.classList.add(classes['tabToolBarWidget']); + } + const btnDial = createDiv({ id: 'btn_tab_dial', className: `${classes['btnTab']}` }); const icoTabDial = createDiv({id: 'ico_tab_dial', className: `${classes['tabIco']} ${classes['dialActive']}`}); const btnDialCaption = createParagraph({id: 'btn_dial_caption', innerText: 'dial', className: `${classes['fontNormal']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabActive']}`}); @@ -28,6 +32,10 @@ export default class TabToolBar extends BaseElement { } }; + if( this.args.isWidget ) { + btnDial.classList.add(classes['btnTabWidget']); + } + const btnCallLog = createDiv({id: 'btn_tab_calllog', className: `${classes['btnTab']}`}); const icoCallLog = createDiv({id: 'ico_tab_callog', className: `${classes['tabIco']} ${classes['callLogDeactive']}`}); const btnCalllogCaption = createParagraph({id: 'btn_calllog_caption', innerText: 'History', className: `${classes['fontNormal']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabDeactive']}`}); @@ -47,6 +55,10 @@ export default class TabToolBar extends BaseElement { } }; + if( this.args.isWidget ) { + btnCallLog.classList.add(classes['btnTabWidget']); + } + this.element.appendChild(btnDial); this.element.appendChild(btnCallLog); } diff --git a/lib/components/WidgetApp.js b/lib/components/WidgetApp.js index 97b15ee..12070b0 100644 --- a/lib/components/WidgetApp.js +++ b/lib/components/WidgetApp.js @@ -63,6 +63,7 @@ export default class WidgetApp extends BaseElement { build() { if (!this.widgetIcon) this.widgetIcon = createDiv({ id: 'widget_icon', className: classes['widgetIcon'] }); + this.args.isWidget = true; this.mainApp = new MainApp({ className: `${classes['widgetDiv']} ${classes['hidden']}`, pages: this.pages, diff --git a/lib/css/styles.js b/lib/css/styles.js index a9d1b48..29f78c2 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -31,6 +31,8 @@ import callhistoryIconActive from '../assets/ic-layout-default-active.svg'; import headerLogo from '../assets/ic-logo-horizontal-inverse-01.svg'; import thumbnailVideo from '../assets/ic-video-thumbnail-filled.svg'; import thumbnailVoice from '../assets/ic-call-filled.svg'; +import callLogEmpty from '../assets/ic-layout-default.svg'; +import logoHorizon from '../assets/ic-logo-horizontal.svg'; @@ -250,6 +252,8 @@ const styles = { viewSettings: { position: 'absolute', + left: '0px', + top: '0px', width: '100%', height: '100%', zIndex: '100', @@ -330,6 +334,19 @@ const styles = { '-moz-osx-font-smoothing': 'grayscale' }, + font16: { + fontFamily: 'Avenir Next', + fontSize: '16px', + fontWeight: 'normal', + fontStretch: 'normal', + fontStyle: 'normal', + lineHeight: '1.25', + letterSpacing: '-0.15px', + textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' + }, + font20: { fontFamily: 'Avenir Next', fontSize: '20px', @@ -342,6 +359,19 @@ const styles = { '-moz-osx-font-smoothing': 'grayscale' }, + font24: { + fontFamily: 'Avenir Next', + fontSize: '24px', + fontWeight: 'normal', + fontStretch: 'normal', + fontStyle: 'normal', + lineHeight: '1.33', + letterSpacing: '-0.25px', + textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' + }, + fontBig: { fontFamily: 'Avenir Next', height: '32px', @@ -373,9 +403,19 @@ const styles = { height: '55px', backgroundColor: colors.white, textAlign: 'center', + borderTop: 'solid 1px #dee2f2', borderBottom: 'solid 1px #dee2f2' }, + tabToolBarWidget: { + position: 'absolute', + display: 'inline-block', + bottom: '0px', + left: '0px', + borderBottomLeftRadius: '8px', + borderBottomRightRadius: '8px' + }, + btnTab: { display: 'inline-block', width: '100px', @@ -383,6 +423,10 @@ const styles = { cursor: 'pointer' }, + btnTabWidget: { + width: '156px', + }, + tabIco: { width: '100%', height: '32px', @@ -841,11 +885,14 @@ const styles = { } }, '& $viewDial': { + height: 'calc(100% - 136px)', '& $content': { - marginTop: '144px' + // marginTop: '144px' + margin: 'auto' }, '& $versionInfo': { - display: 'flex' + // display: 'flex' + display: 'none' } }, '& $widgetHeader': { @@ -912,9 +959,7 @@ const styles = { boxShadow: '0 9px 15px -7px rgba(33, 34, 66, 0.04), 0 9px 46px 8px rgba(33, 34, 66, 0.08), 0 24px 38px 3px rgba(33, 34, 66, 0.12)', backgroundColor: colors.white, overflow: 'hidden', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center' + display: 'block' }, widgetIcon: { @@ -1063,14 +1108,61 @@ const styles = { callLogListContainer: { display: 'inline-block', position: 'relative', - width: '382px', height: 'calc(100% - 103px)', + height: '100%', overflowY: 'auto', listStyle: 'none', margin: '0', padding: '0', }, + callLogListDesc: { + display: 'inline-flex', + position: 'absolute', + width: 'calc(100% - 382px)', + height: 'calc(100% - 103px)', + margin: '0', + padding: '0', + right: '0px', + justifyContent: 'center', + alignItems: 'center', + flexDirection: 'column' + }, + + callLogDescLogo: { + display: 'block', + position: 'relative', + width: '100%', + height: '40px', + backgroundImage: `url(${logoHorizon})`, + backgroundPosition: 'center', + backgroundRepeat: 'no-repeat' + }, + + callLogDescTitle: { + position: 'relative', + width: '100%', + height: '32px', + textAlign: 'center', + marginTop: '24px', + color: colors.navy900 + }, + + callLogDescLabel: { + position: 'relative', + width: '275px', + height: '40px', + textAlign: 'center', + marginTop: '16px', + color: colors.navy600 + }, + + widgetCallLog: { + height: '100%', + width: '100%', + overflowX: 'hidden', + }, + /* call Log item */ callLogItemWrap: { display: 'flex', @@ -1084,6 +1176,32 @@ const styles = { paddingBottom: '5px', }, + callLogEmptyWrap: { + position: 'relative', + width: '312px', + height: '116px', + marginTop: '158px', + marginLeft: '32px', + }, + + icoCallLogEmpty: { + display: 'inline-block', + width: '100%', + height: '64px', + backgroundImage: `url(${callLogEmpty})`, + backgroundPosition: 'center', + backgroundRepeat: 'no-repeat' + }, + + labelCallLogEmpty: { + display: 'inline-block', + width: '100%', + height: '20px', + marginTop: '12px', + textAlign: 'center', + color: colors.navy600 + }, + callLogTypeDiv: { display: 'inline-flex', width: '44px', diff --git a/lib/views/CallLogItem.js b/lib/views/CallLogItem.js index 9f61036..e6eb6e8 100644 --- a/lib/views/CallLogItem.js +++ b/lib/views/CallLogItem.js @@ -9,102 +9,113 @@ import { sheet, classes } from "../css/styles"; export class CallLogItem { constructor({ callLogInfo, className }) { - const wrapper = createListItem({ id: callLogInfo.callId, className: className }); - let callType = null; - if(callLogInfo.isVideoCall){ - if(callLogInfo.userRole === 'dc_caller'){ - callType = outgoingVideo; + if(callLogInfo) { + const wrapper = createListItem({ id: callLogInfo.callId, className: className }); + let callType = null; + if(callLogInfo.isVideoCall){ + if(callLogInfo.userRole === 'dc_caller'){ + callType = outgoingVideo; + } + else{ + callType = incomingVideo; + } } else{ - callType = incomingVideo; + if(callLogInfo.userRole === 'dc_caller'){ + callType = outgoingVoice; + } + else{ + callType = incomingVoice; + } } - } - else{ + + let profileImage = null; + let displayName = ""; if(callLogInfo.userRole === 'dc_caller'){ - callType = outgoingVoice; + profileImage = callLogInfo.callee.profileUrl; + displayName = callLogInfo.callee.userId; } else{ - callType = incomingVoice; + profileImage = callLogInfo.caller.profileUrl; + displayName = callLogInfo.caller.userId; } - } - let profileImage = null; - let displayName = ""; - if(callLogInfo.userRole === 'dc_caller'){ - profileImage = callLogInfo.callee.profileUrl; - displayName = callLogInfo.callee.userId; - } - else{ - profileImage = callLogInfo.caller.profileUrl; - displayName = callLogInfo.caller.userId; - } - - const icoCallType = createImg({ className: `${classes['callLogItemType']}`, src: callType }); - const callTypeDiv = createDiv({ className: `${classes['callLogTypeDiv']}` }); - callTypeDiv.appendChild(icoCallType); - - const profileImg = createImg({ className: `${classes['callLogProfileImg']}`, src: profileImage }); - const profileDiv = createDiv({ className: `${classes['callLogProfileDiv']}` }); - profileDiv.appendChild(profileImg); - - //duration - let callDurationTime = ''; - callLogInfo.duration = 3603; - if(callLogInfo.duration > 0){ - let hour = parseInt(callLogInfo.duration / 3600); - let min = parseInt((callLogInfo.duration - (hour * 3600)) / 60); - let sec = callLogInfo.duration - (hour * 3600) - (min * 60); - if( hour > 0 ){ - callDurationTime = hour + 'h '; + const icoCallType = createImg({ className: `${classes['callLogItemType']}`, src: callType }); + const callTypeDiv = createDiv({ className: `${classes['callLogTypeDiv']}` }); + callTypeDiv.appendChild(icoCallType); + + const profileImg = createImg({ className: `${classes['callLogProfileImg']}`, src: profileImage }); + const profileDiv = createDiv({ className: `${classes['callLogProfileDiv']}` }); + profileDiv.appendChild(profileImg); + + //duration + let callDurationTime = ''; + callLogInfo.duration = 3603; + if(callLogInfo.duration > 0){ + let hour = parseInt(callLogInfo.duration / 3600); + let min = parseInt((callLogInfo.duration - (hour * 3600)) / 60); + let sec = callLogInfo.duration - (hour * 3600) - (min * 60); + if( hour > 0 ){ + callDurationTime = hour + 'h '; + } + if( min > 0 ){ + callDurationTime += (min + 'm '); + } + callDurationTime += (sec + 's'); } - if( min > 0 ){ - callDurationTime += (min + 'm '); + else { + callDurationTime = '0s'; } - callDurationTime += (sec + 's'); - } - else { - callDurationTime = '0s'; + + const displayNameLabel = createLabel({ className: `${classes['callLogDisplayName']} ${classes['fontNormal']} ${classes['fontHeavy']}`, innerText: displayName }); + const callDuration = createLabel({ className: `${classes['callLogDuration']} ${classes['fontSmall']}`, innerText: callDurationTime }); + const callEndReason = createLabel({ className: `${classes['callLogDuration']} ${classes['fontSmall']}`, innerText: callLogInfo.endResult }); + + + const callLogInfoDiv = createDiv({ className: `${classes['callLogInfoDiv']}` }); + callLogInfoDiv.appendChild(displayNameLabel); + callLogInfoDiv.appendChild(callDuration); + callLogInfoDiv.appendChild(callEndReason); + + + let callStartTime = new Date(callLogInfo.startedAt); + let callStartTimeLabel = callStartTime.getFullYear() + '/' + + callStartTime.toLocaleString(['en-US'], {month: '2-digit'}) + '/' + + callStartTime.toLocaleString(['en-US'], {day: '2-digit'}) + ' ' + + this.formatAMPM(callStartTime); + + const callLogStartTime = createLabel({ className: `${classes['callLogStartTime']} ${classes['fontSmall']}`, innerText: callStartTimeLabel}); + const callActionBtnWrap = createDiv({ className: `${classes['callLogActionBtnWrap']}` }); + const btnCallVideo = createDiv({ className: `${classes['callLogVideoActionBtn']}`}); + const btnCallVoice = createDiv({ className: `${classes['callLogVoiceActionBtn']}`}); + callActionBtnWrap.appendChild(btnCallVoice); + callActionBtnWrap.appendChild(btnCallVideo); + + + const callLogActionDiv = createDiv({ className: `${classes['callLogActionDiv']}` }); + callLogActionDiv.appendChild(callLogStartTime); + callLogActionDiv.appendChild(callActionBtnWrap); + + + wrapper.appendChild(callTypeDiv); + wrapper.appendChild(profileDiv); + wrapper.appendChild(callLogInfoDiv); + wrapper.appendChild(callLogActionDiv); + + this.element = wrapper; + this.btnCallVideo = btnCallVideo; + this.btnCallVoice = btnCallVoice; + this.destPeerID = displayName; } + else{ + const wrapper = createDiv({ id: 'empty_calllog', className: className }); + const icoCallLogEmpty = createDiv({ className: `${classes['icoCallLogEmpty']}` }); + const labelCallLogEmpty = createDiv({ innerText: 'No call history', className: `${classes['labelCallLogEmpty']} ${classes['font16']} ${classes['fontHeavy']}` }); + wrapper.appendChild(icoCallLogEmpty); + wrapper.appendChild(labelCallLogEmpty); - const displayNameLabel = createLabel({ className: `${classes['callLogDisplayName']} ${classes['fontNormal']} ${classes['fontHeavy']}`, innerText: displayName }); - const callDuration = createLabel({ className: `${classes['callLogDuration']} ${classes['fontSmall']}`, innerText: callDurationTime }); - const callEndReason = createLabel({ className: `${classes['callLogDuration']} ${classes['fontSmall']}`, innerText: callLogInfo.endResult }); - - - const callLogInfoDiv = createDiv({ className: `${classes['callLogInfoDiv']}` }); - callLogInfoDiv.appendChild(displayNameLabel); - callLogInfoDiv.appendChild(callDuration); - callLogInfoDiv.appendChild(callEndReason); - - - let callStartTime = new Date(callLogInfo.startedAt); - let callStartTimeLabel = callStartTime.getFullYear() + '/' + - callStartTime.toLocaleString(['en-US'], {month: '2-digit'}) + '/' + - callStartTime.toLocaleString(['en-US'], {day: '2-digit'}) + ' ' + - this.formatAMPM(callStartTime); - - const callLogStartTime = createLabel({ className: `${classes['callLogStartTime']} ${classes['fontSmall']}`, innerText: callStartTimeLabel}); - const callActionBtnWrap = createDiv({ className: `${classes['callLogActionBtnWrap']}` }); - const btnCallVideo = createDiv({ className: `${classes['callLogVideoActionBtn']}`}); - const btnCallVoice = createDiv({ className: `${classes['callLogVoiceActionBtn']}`}); - callActionBtnWrap.appendChild(btnCallVoice); - callActionBtnWrap.appendChild(btnCallVideo); - - - const callLogActionDiv = createDiv({ className: `${classes['callLogActionDiv']}` }); - callLogActionDiv.appendChild(callLogStartTime); - callLogActionDiv.appendChild(callActionBtnWrap); - - - wrapper.appendChild(callTypeDiv); - wrapper.appendChild(profileDiv); - wrapper.appendChild(callLogInfoDiv); - wrapper.appendChild(callLogActionDiv); - - this.element = wrapper; - this.btnCallVideo = btnCallVideo; - this.btnCallVoice = btnCallVoice; - this.destPeerID = displayName; + this.element = wrapper; + } } formatAMPM(date) { diff --git a/lib/views/CallLogView.js b/lib/views/CallLogView.js index 500294f..2e9a3ca 100644 --- a/lib/views/CallLogView.js +++ b/lib/views/CallLogView.js @@ -1,7 +1,7 @@ import SendBirdCall from "sendbird-calls"; import BaseElement from "../components/BaseElement"; import { classes } from "../css/styles.js"; -import { createList } from "../utils/domUtil"; +import { createList, createDiv } from "../utils/domUtil"; import { CallLogItem } from "./CallLogItem"; export default class CallLogView extends BaseElement{ @@ -11,43 +11,67 @@ export default class CallLogView extends BaseElement{ className: `${classes['container']} ${classes['center']} ${classes['viewDial']}`, args }); + this.callLogQuery = null; this.callLogQueryData = []; + this.args = args; } build() { const callLogList = createList({ id: 'call_log_list', className: `${classes['callLogListContainer']}` }); - this.callLogQuery = SendBirdCall.createDirectCallLogListQuery({limit: 30}); + this.callLogQuery = SendBirdCall.createDirectCallLogListQuery({ limit: 30 }); this.getCallLogs(callLogList); callLogList.onscroll = (e) => { let scrollposition = e.target.scrollHeight - e.target.clientHeight; - if( scrollposition === e.target.scrollTop ) { this.getCallLogs(callLogList); } }; - this.element.appendChild(callLogList); + + if( this.args.isWidget ) { + callLogList.classList.add(classes['widgetCallLog']); + this.element.appendChild(callLogList); + } + else{ + const callLogDescription = createDiv({ id: 'call_log_desc', className: `${classes['callLogListDesc']}` }); + const callLogDescLogo = createDiv({ className: `${classes['callLogDescLogo']}` }); + const callLogDescTitle = createDiv({ innerText: 'Sendbird Calls Quickstart', className: `${classes['callLogDescTitle']} ${classes['font24']} ${classes['fontDemi']}` }); + const callLogDescLabel = createDiv({ innerText: 'This is the Sendbird Calls Quickstart page. Lorem ipsum', className: `${classes['callLogDescLabel']} ${classes['fontNormal']} ${classes['fontHeavy']}` }); + callLogDescription.appendChild(callLogDescLogo); + callLogDescription.appendChild(callLogDescTitle); + callLogDescription.appendChild(callLogDescLabel); + + this.element.appendChild(callLogList); + this.element.appendChild(callLogDescription); + } } getCallLogs(element){ - if(this.callLogQuery.hasNext && !this.callLogQuery.isLoading) { + if( this.callLogQuery.hasNext && !this.callLogQuery.isLoading ) { this.callLogQuery.next((directCallLog) => { - if(directCallLog){ - for(let i = 0; i < directCallLog.length; i++){ - let callItem = null; - if( i === 0 ){ - callItem = new CallLogItem({callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']}`}); - } - else { - callItem = new CallLogItem({callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']} ${classes['callLogItemWarpBorder']}`}); + if( directCallLog ){ + if( directCallLog.length > 0 ) { + for( let i = 0; i < directCallLog.length; i++ ){ + let callItem = null; + if( i === 0 ){ + callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']}` }); + } + else { + callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']} ${classes['callLogItemWarpBorder']}` }); + } + callItem.onclick = (event, args) => { + this.sendToParent('dial', args); + }; + + element.appendChild(callItem.element); } - callItem.onclick = (event, args) => { - this.sendToParent('dial', args); - }; - - element.appendChild(callItem.element); } - } + else{ + // empty call log + const emptyCallLog = new CallLogItem({ className: `${classes['callLogEmptyWrap']}` }); + element.appendChild(emptyCallLog.element); + } + } }); } } diff --git a/lib/views/DialView.js b/lib/views/DialView.js index 1966445..6222f6d 100644 --- a/lib/views/DialView.js +++ b/lib/views/DialView.js @@ -60,6 +60,8 @@ export default class DialView extends BaseElement { content.appendChild(formContainer); + this.element.appendChild(content); + const sampleVersion = pack.version; const sdkVersion = SendBirdCall.sdkVersion; const versionInfo = createDiv({ @@ -79,7 +81,7 @@ export default class DialView extends BaseElement { versionInfo.appendChild(sampleVersionLabel); versionInfo.appendChild(sdkVersionLabel); - this.element.appendChild(content); + this.element.appendChild(versionInfo); btnVideo.onclick = () => { From 97f0b93393e2dec7ccffd4196f45b7e151c1d214 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Wed, 13 May 2020 17:06:17 +0900 Subject: [PATCH 03/47] [CALLS-700]Call history design implementation 1. add profile image loading error exception. --- lib/assets/icon-avatar.jpg | Bin 0 -> 1720 bytes lib/views/CallLogItem.js | 9 ++++++--- 2 files changed, 6 insertions(+), 3 deletions(-) create mode 100644 lib/assets/icon-avatar.jpg diff --git a/lib/assets/icon-avatar.jpg b/lib/assets/icon-avatar.jpg new file mode 100644 index 0000000000000000000000000000000000000000..f30ff57f88435da4814b975cb064916ca1202c73 GIT binary patch literal 1720 zcmbV~cTf{q9LHa>DI|)JP!vXr1QhXf=ta43^rDD}Q9%$P(!tO}i8SRzL>X*|r-LYn zs0W8s%h8*Zqf3(uML^UbMM40Ry$#;r%>Cuuci+DK&inoL_xAJl2lvAxK-|W{+5(_Z z09YXxfJear^9UbL0Bmi68UR29pf30T4C0U!AdB1pK=)7pLY^q$+CB7oRP`S8-3t?8 z4$wd3%?M?LcryYOwf3k3eG_Y2jIbJ_HLtQ}#e3vZ22#N@%yb;#)+e4x3|s|BB0v?W zLMSDGCZQk_3a$eR$evi#n$})JCKMXNU~za60&xS9P$CY{Ce~R|=BUj8DrFp_mj_OC9cl(#7Pf*RJ2VnSLwd_WcLh zIS+FmJF$Lu1qH=C1CZ-Zy>y1B0Vu63gux5BP-vzQoP@z{)4-99?eT6w5=xr!B9bO)S%uXE ziq_#-Dfi$`qO`L1sLGrWZH?^5z!Lr!**e&Ft|4HGG?q|kWI$*%@~a?37z67ZytF_ZtFL7$Uqq%# zYN6rA!(qR@Ii;!YkR4Oabc-Q+UY*9bbqMc>ma6D9%9vsV@R_Hl77DT}Bm{3NWn&~y zn*FqBt>a>#{yRN}qkRJJ-6A(fH}qHZlEDO>ybA*&of`&&^Dq!d;<;A}VL-6U;2Lq9 z&ADP_<9ye&RJ~^Q{F&jGOoO2|mi^=DGAG@a3s3nEtALh`zHL$kxoGRBw5D|MiGkGbKNY$QZTDaT} zf1>2G)Z9pzI8c4m^v-xQiyAdTx+CHGB6GG}APs|#sCI!sZ1(X)MeRgIBiz9^_Vjdb z@0kzz=)$fo0KBC!g`{pPUKm}6^Oe#rZ%?F%82{a+apadx2A+_N*MFbU;|ztRdEqHwD$C}RmQ3l+bg5YE0b%q zuX&;HuTT7$putLAsuB<1SSe;`v0_`KU3HgN2)Lkr}F3#ZYmGEmyzMETXcTUt)-_+_~E;!%lOb&|kTXGOc!k`8Q zD=0@8unPrJ*)C~*J#eRBlxoC+X45&)NITEs)h`WQ^Zmu8o97<+?9QRcZPKgzN}wp? zfjF&KE>^5!M@&oXR;nc1R{CXDTeOF~Bjd}W-*2Ag;HD>yEiO~Na6{90s9dyhMW=wm zTZDmfNL}pWI~a6bzgx10IMXWdQNgjP5d&rUGa8F+XGLdIxz4=Cx#St?j^aH3;sKNA zJ&d%G()oU}tgc7vKm-2z7U*)laa#ob5|z`}0RuHbN~K5YvYsnGwqH|W!lBiBIy*lA vX+O%SLOfN}j>vO6@T|!!op}aa9dkZaM8AI}DQ?s<*qZ(+)c)wHc6i_)Dn`%3 literal 0 HcmV?d00001 diff --git a/lib/views/CallLogItem.js b/lib/views/CallLogItem.js index e6eb6e8..27b90e5 100644 --- a/lib/views/CallLogItem.js +++ b/lib/views/CallLogItem.js @@ -1,11 +1,11 @@ -import SendBirdCall from 'sendbird-calls'; import outgoingVideo from '../assets/icon-call-video-outgoing-filled.svg'; import incomingVideo from '../assets/icon-call-video-incoming-filled.svg'; import outgoingVoice from '../assets/icon-call-voice-outgoing-filled.svg'; import incomingVoice from '../assets/icon-call-voice-incoming-filled.svg'; +import avatarIcon from '../assets/icon-avatar.svg'; import { createListItem, createDiv, createImg, createLabel } from "../utils/domUtil"; -import { sheet, classes } from "../css/styles"; +import { classes } from "../css/styles"; export class CallLogItem { constructor({ callLogInfo, className }) { @@ -44,7 +44,10 @@ export class CallLogItem { const callTypeDiv = createDiv({ className: `${classes['callLogTypeDiv']}` }); callTypeDiv.appendChild(icoCallType); - const profileImg = createImg({ className: `${classes['callLogProfileImg']}`, src: profileImage }); + const profileImg = createImg({ className: `${classes['callLogProfileImg']}`, src: profileImage, onerror: (error) => { + error.currentTarget.src = avatarIcon; + } }); + const profileDiv = createDiv({ className: `${classes['callLogProfileDiv']}` }); profileDiv.appendChild(profileImg); From 4905a7df157182886a2ed82e33b26981786a8c25 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Wed, 13 May 2020 18:41:33 +0900 Subject: [PATCH 04/47] call duration time bug fixed 1. body tag css is modified 2. dial_view height value is modified. --- css/main.css | 1 + lib/css/styles.js | 1 + lib/views/CallLogItem.js | 8 ++++---- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/css/main.css b/css/main.css index e0a1723..105941d 100644 --- a/css/main.css +++ b/css/main.css @@ -14,6 +14,7 @@ body { margin: 0 auto; + overflow: hidden; } .center { diff --git a/lib/css/styles.js b/lib/css/styles.js index 29f78c2..f0e6a87 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -228,6 +228,7 @@ const styles = { }, viewDial: { + height: 'calc(100% - 110px)', color: colors.navy900, '& $content': { marginTop: 'auto' diff --git a/lib/views/CallLogItem.js b/lib/views/CallLogItem.js index 27b90e5..efdb626 100644 --- a/lib/views/CallLogItem.js +++ b/lib/views/CallLogItem.js @@ -53,11 +53,11 @@ export class CallLogItem { //duration let callDurationTime = ''; - callLogInfo.duration = 3603; if(callLogInfo.duration > 0){ - let hour = parseInt(callLogInfo.duration / 3600); - let min = parseInt((callLogInfo.duration - (hour * 3600)) / 60); - let sec = callLogInfo.duration - (hour * 3600) - (min * 60); + let tempDuration = Math.ceil(callLogInfo.duration / 1000); + let hour = parseInt(tempDuration / 3600); + let min = parseInt((tempDuration - (hour * 3600)) / 60); + let sec = tempDuration - (hour * 3600) - (min * 60); if( hour > 0 ){ callDurationTime = hour + 'h '; } From 79509241a4c9bc6a0f34a3def45a89191aa35365 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Thu, 14 May 2020 10:49:37 +0900 Subject: [PATCH 05/47] [CALLS-700]Call history design implementation 1. intentation size change. 2. voice call bug fix in the call log --- lib/components/App.js | 2 +- lib/components/Header.js | 152 +++++++++++++++++++-------------------- lib/views/CallLogItem.js | 2 +- lib/views/CallLogView.js | 122 +++++++++++++++---------------- 4 files changed, 139 insertions(+), 139 deletions(-) diff --git a/lib/components/App.js b/lib/components/App.js index 87c7342..bbed294 100644 --- a/lib/components/App.js +++ b/lib/components/App.js @@ -1,5 +1,5 @@ import BaseElement from "./BaseElement"; -import { jss, sheet, classes } from "../css/styles.js"; +import { jss, sheet } from "../css/styles.js"; export default class App extends BaseElement { constructor({ id, className, pages, styles, args }) { diff --git a/lib/components/Header.js b/lib/components/Header.js index c737d7b..4c0d1b1 100644 --- a/lib/components/Header.js +++ b/lib/components/Header.js @@ -5,92 +5,92 @@ import Menu from "../components/Menu"; import { sheet, classes } from "../css/styles"; export default class Header extends BaseElement { - constructor({ id, className, parent, element, args } = {}) { - super({ id, className, parent, element, args }); - this.element = element; - this.parent = parent; + constructor({ id, className, parent, element, args } = {}) { + super({ id, className, parent, element, args }); + this.element = element; + this.parent = parent; - this.settingItems = [ - { - 'label': 'Device settings', - 'callback': () => { this.sendToParent('show_settings') } - }, - { - 'label': 'Sign out', - 'callback': () => { - SendBirdCall.deauthenticate(); - this.sendToParent('deauthenticate'); - } - } - ]; + this.settingItems = [ + { + 'label': 'Device settings', + 'callback': () => { this.sendToParent('show_settings') } + }, + { + 'label': 'Sign out', + 'callback': () => { + SendBirdCall.deauthenticate(); + this.sendToParent('deauthenticate'); + } + } + ]; - this.args = args; - this.parent = parent; - } + this.args = args; + this.parent = parent; + } - build() { - const userDiv = createDiv({ - id: 'header_user_div', - className: `${classes['userDiv']} ${classes['center']}` - }); + build() { + const userDiv = createDiv({ + id: 'header_user_div', + className: `${classes['userDiv']} ${classes['center']}` + }); - let profileImg; - if (this.args.user && this.args.user.profileUrl) { - sheet.update({ profileUrl: this.args.user.profileUrl }); - profileImg = createDiv({ id: 'header_profile_img', className: classes['profileSmall'] }); - } else { - profileImg = createDiv({ id: 'header_avatar', className: `${classes['avatar']}` }); - } + let profileImg; + if (this.args.user && this.args.user.profileUrl) { + sheet.update({ profileUrl: this.args.user.profileUrl }); + profileImg = createDiv({ id: 'header_profile_img', className: classes['profileSmall'] }); + } else { + profileImg = createDiv({ id: 'header_avatar', className: `${classes['avatar']}` }); + } - const headerInfo = createDiv({ id: 'header_info', className: `${classes['headerInfo']}` }); - const userId = createDiv({ - id: 'header_user_id', - className: `${classes['headerUserId']} ${classes['fontNormal']} ${classes['fontHeavy']}`, - innerText: this.args.user.userId || '' - }); - const nickname = createDiv({ - id: 'header_nickname', - className: `${classes['headerNickname']} ${classes['fontSmall']}`, - innerText: this.args.user.nickname || 'no nickname' - }); - headerInfo.appendChild(userId); - headerInfo.appendChild(nickname); + const headerInfo = createDiv({ id: 'header_info', className: `${classes['headerInfo']}` }); + const userId = createDiv({ + id: 'header_user_id', + className: `${classes['headerUserId']} ${classes['fontNormal']} ${classes['fontHeavy']}`, + innerText: this.args.user.userId || '' + }); + const nickname = createDiv({ + id: 'header_nickname', + className: `${classes['headerNickname']} ${classes['fontSmall']}`, + innerText: this.args.user.nickname || 'no nickname' + }); + headerInfo.appendChild(userId); + headerInfo.appendChild(nickname); - userDiv.appendChild(profileImg); - userDiv.appendChild(headerInfo); + userDiv.appendChild(profileImg); + userDiv.appendChild(headerInfo); - const headerButtons = createDiv({ - id: 'header_buttons', - className: `${classes['headerButtons']} ${classes['row']} ${classes['center']}` - }); - const settingsButton = new Menu({ - id: 'settings_button', - element: createDiv({ className: `${classes['settingsButton']}` }), - items: this.settingItems - }); + const headerButtons = createDiv({ + id: 'header_buttons', + className: `${classes['headerButtons']} ${classes['row']} ${classes['center']}` + }); + const settingsButton = new Menu({ + id: 'settings_button', + element: createDiv({ className: `${classes['settingsButton']}` }), + items: this.settingItems + }); - const closeButton = createDiv({ - id: 'close_button', - className: `${classes['closeButton']}` - }); - closeButton.onclick = () => { - this.parent.sendToParent('widgetclose'); - }; - settingsButton.appendToHTML(headerButtons); - headerButtons.appendChild(closeButton); + const closeButton = createDiv({ + id: 'close_button', + className: `${classes['closeButton']}` + }); + closeButton.onclick = () => { + this.parent.sendToParent('widgetclose'); + }; + settingsButton.appendToHTML(headerButtons); + headerButtons.appendChild(closeButton); - const divider = createDiv({ - id: 'header_divider', - className: classes['headerDivider'] - }); + const divider = createDiv({ + id: 'header_divider', + className: classes['headerDivider'] + }); - this.element.appendChild(userDiv); - this.element.appendChild(divider); - this.element.appendChild(headerButtons); + this.element.appendChild(userDiv); + this.element.appendChild(divider); + this.element.appendChild(headerButtons); - if( !this.args.isWidget ){ - const headerLogo = createDiv({ id: 'header_logo', className: `${classes['headerLogo']}`}); - this.element.appendChild(headerLogo); - } + if( !this.args.isWidget ){ + const headerLogo = createDiv({ id: 'header_logo', className: `${classes['headerLogo']}`}); + this.element.appendChild(headerLogo); } + } } \ No newline at end of file diff --git a/lib/views/CallLogItem.js b/lib/views/CallLogItem.js index efdb626..4a689ab 100644 --- a/lib/views/CallLogItem.js +++ b/lib/views/CallLogItem.js @@ -140,7 +140,7 @@ export class CallLogItem { eventhandler(event, {peerId: this.destPeerID, isVideoCall: true, callOption: null}); }; this.btnCallVoice.onclick = (event) => { - eventhandler(event, {peerId: this.destPeerID, isVideoCall: true, callOption: null}); + eventhandler(event, {peerId: this.destPeerID, isVideoCall: false, callOption: null}); }; } } \ No newline at end of file diff --git a/lib/views/CallLogView.js b/lib/views/CallLogView.js index 2e9a3ca..eecc113 100644 --- a/lib/views/CallLogView.js +++ b/lib/views/CallLogView.js @@ -5,74 +5,74 @@ import { createList, createDiv } from "../utils/domUtil"; import { CallLogItem } from "./CallLogItem"; export default class CallLogView extends BaseElement{ - constructor({ args }) { - super({ - id: 'calllog_view', - className: `${classes['container']} ${classes['center']} ${classes['viewDial']}`, - args - }); + constructor({ args }) { + super({ + id: 'calllog_view', + className: `${classes['container']} ${classes['center']} ${classes['viewDial']}`, + args + }); - this.callLogQuery = null; - this.callLogQueryData = []; - this.args = args; - } + this.callLogQuery = null; + this.callLogQueryData = []; + this.args = args; + } - build() { - const callLogList = createList({ id: 'call_log_list', className: `${classes['callLogListContainer']}` }); - this.callLogQuery = SendBirdCall.createDirectCallLogListQuery({ limit: 30 }); + build() { + const callLogList = createList({ id: 'call_log_list', className: `${classes['callLogListContainer']}` }); + this.callLogQuery = SendBirdCall.createDirectCallLogListQuery({ limit: 30 }); + this.getCallLogs(callLogList); + callLogList.onscroll = (e) => { + let scrollposition = e.target.scrollHeight - e.target.clientHeight; + if( scrollposition === e.target.scrollTop ) { this.getCallLogs(callLogList); - callLogList.onscroll = (e) => { - let scrollposition = e.target.scrollHeight - e.target.clientHeight; - if( scrollposition === e.target.scrollTop ) { - this.getCallLogs(callLogList); - } - }; + } + }; - if( this.args.isWidget ) { - callLogList.classList.add(classes['widgetCallLog']); - this.element.appendChild(callLogList); - } - else{ - const callLogDescription = createDiv({ id: 'call_log_desc', className: `${classes['callLogListDesc']}` }); - const callLogDescLogo = createDiv({ className: `${classes['callLogDescLogo']}` }); - const callLogDescTitle = createDiv({ innerText: 'Sendbird Calls Quickstart', className: `${classes['callLogDescTitle']} ${classes['font24']} ${classes['fontDemi']}` }); - const callLogDescLabel = createDiv({ innerText: 'This is the Sendbird Calls Quickstart page. Lorem ipsum', className: `${classes['callLogDescLabel']} ${classes['fontNormal']} ${classes['fontHeavy']}` }); - callLogDescription.appendChild(callLogDescLogo); - callLogDescription.appendChild(callLogDescTitle); - callLogDescription.appendChild(callLogDescLabel); + if( this.args.isWidget ) { + callLogList.classList.add(classes['widgetCallLog']); + this.element.appendChild(callLogList); + } + else{ + const callLogDescription = createDiv({ id: 'call_log_desc', className: `${classes['callLogListDesc']}` }); + const callLogDescLogo = createDiv({ className: `${classes['callLogDescLogo']}` }); + const callLogDescTitle = createDiv({ innerText: 'Sendbird Calls Quickstart', className: `${classes['callLogDescTitle']} ${classes['font24']} ${classes['fontDemi']}` }); + const callLogDescLabel = createDiv({ innerText: 'This is the Sendbird Calls Quickstart page. Lorem ipsum', className: `${classes['callLogDescLabel']} ${classes['fontNormal']} ${classes['fontHeavy']}` }); + callLogDescription.appendChild(callLogDescLogo); + callLogDescription.appendChild(callLogDescTitle); + callLogDescription.appendChild(callLogDescLabel); - this.element.appendChild(callLogList); - this.element.appendChild(callLogDescription); - } + this.element.appendChild(callLogList); + this.element.appendChild(callLogDescription); } + } + + getCallLogs(element){ + if( this.callLogQuery.hasNext && !this.callLogQuery.isLoading ) { + this.callLogQuery.next((directCallLog) => { + if( directCallLog ){ + if( directCallLog.length > 0 ) { + for( let i = 0; i < directCallLog.length; i++ ){ + let callItem = null; + if( i === 0 ){ + callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']}` }); + } + else { + callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']} ${classes['callLogItemWarpBorder']}` }); + } + callItem.onclick = (event, args) => { + this.sendToParent('dial', args); + }; - getCallLogs(element){ - if( this.callLogQuery.hasNext && !this.callLogQuery.isLoading ) { - this.callLogQuery.next((directCallLog) => { - if( directCallLog ){ - if( directCallLog.length > 0 ) { - for( let i = 0; i < directCallLog.length; i++ ){ - let callItem = null; - if( i === 0 ){ - callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']}` }); - } - else { - callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']} ${classes['callLogItemWarpBorder']}` }); - } - callItem.onclick = (event, args) => { - this.sendToParent('dial', args); - }; - - element.appendChild(callItem.element); - } - } - else{ - // empty call log - const emptyCallLog = new CallLogItem({ className: `${classes['callLogEmptyWrap']}` }); - element.appendChild(emptyCallLog.element); - } - } - }); + element.appendChild(callItem.element); + } + } + else{ + // empty call log + const emptyCallLog = new CallLogItem({ className: `${classes['callLogEmptyWrap']}` }); + element.appendChild(emptyCallLog.element); + } } + }); } + } } \ No newline at end of file From 099236104383e24c5366341a2eb7b2c87cbd63f5 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Thu, 14 May 2020 17:04:14 +0900 Subject: [PATCH 06/47] Update lib/views/CallLogView.js Co-authored-by: Dongjin Jung --- lib/views/CallLogView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/views/CallLogView.js b/lib/views/CallLogView.js index eecc113..8b15fd2 100644 --- a/lib/views/CallLogView.js +++ b/lib/views/CallLogView.js @@ -47,7 +47,7 @@ export default class CallLogView extends BaseElement{ } getCallLogs(element){ - if( this.callLogQuery.hasNext && !this.callLogQuery.isLoading ) { + if (!this.callLogQuery.hasNext || this.callLogQuery.isLoading) return; this.callLogQuery.next((directCallLog) => { if( directCallLog ){ if( directCallLog.length > 0 ) { @@ -75,4 +75,4 @@ export default class CallLogView extends BaseElement{ }); } } -} \ No newline at end of file +} From d935e8e18ddc3e6ce399b75fb1e35a5291094b13 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Thu, 14 May 2020 17:10:04 +0900 Subject: [PATCH 07/47] Update lib/utils/domUtil.js Co-authored-by: Dongjin Jung --- lib/utils/domUtil.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/utils/domUtil.js b/lib/utils/domUtil.js index 0fc9480..ea71674 100644 --- a/lib/utils/domUtil.js +++ b/lib/utils/domUtil.js @@ -141,8 +141,8 @@ export function replaceClassName(element, searchValue, newValue) { } export function hasClassName(element, searchValue) { - if(element.classList.value.indexOf(searchValue) === -1) { + return (element.classList.value.indexOf(searchValue) !== -1); return false; } return true; -} \ No newline at end of file +} From 31efa8a40c3cffe06d60be9e425ad15c6a382e23 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Thu, 14 May 2020 17:19:16 +0900 Subject: [PATCH 08/47] Update lib/views/CallLogView.js Co-authored-by: Dongjin Jung --- lib/views/CallLogView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/views/CallLogView.js b/lib/views/CallLogView.js index 8b15fd2..762bb33 100644 --- a/lib/views/CallLogView.js +++ b/lib/views/CallLogView.js @@ -49,7 +49,7 @@ export default class CallLogView extends BaseElement{ getCallLogs(element){ if (!this.callLogQuery.hasNext || this.callLogQuery.isLoading) return; this.callLogQuery.next((directCallLog) => { - if( directCallLog ){ + if (!directCallLog) return; if( directCallLog.length > 0 ) { for( let i = 0; i < directCallLog.length; i++ ){ let callItem = null; From 1f00f8f327b221753a5d2e9f4b0327b8cc994b6b Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Thu, 14 May 2020 17:34:44 +0900 Subject: [PATCH 09/47] [CALLS-700]Call history design implementation review apply --- lib/components/App.js | 4 ++-- lib/components/Header.js | 2 +- lib/components/TabToolBar.js | 6 +++--- lib/css/styles.js | 1 - lib/views/CallLogItem.js | 7 +++---- lib/views/CallLogView.js | 15 +++++++-------- 6 files changed, 16 insertions(+), 19 deletions(-) diff --git a/lib/components/App.js b/lib/components/App.js index bbed294..3448407 100644 --- a/lib/components/App.js +++ b/lib/components/App.js @@ -30,8 +30,8 @@ export default class App extends BaseElement { route(pageName, opt = {}) { for (let i = this.children.length - 1 ; i >= 0 ; i--) { const child = this.children[i]; - if( child.element.id === 'header' || child.element.id === 'tabtoolbar') { - if( opt.isRemoveHeader === true ) { + if(child.element.id === 'header' || child.element.id === 'tabtoolbar') { + if(opt.isRemoveHeader === true) { child.remove(); } } diff --git a/lib/components/Header.js b/lib/components/Header.js index 4c0d1b1..a2096b1 100644 --- a/lib/components/Header.js +++ b/lib/components/Header.js @@ -88,7 +88,7 @@ export default class Header extends BaseElement { this.element.appendChild(divider); this.element.appendChild(headerButtons); - if( !this.args.isWidget ){ + if(!this.args.isWidget){ const headerLogo = createDiv({ id: 'header_logo', className: `${classes['headerLogo']}`}); this.element.appendChild(headerLogo); } diff --git a/lib/components/TabToolBar.js b/lib/components/TabToolBar.js index 6e011e0..364f419 100644 --- a/lib/components/TabToolBar.js +++ b/lib/components/TabToolBar.js @@ -11,7 +11,7 @@ export default class TabToolBar extends BaseElement { build() { // dial tab - if( this.args.isWidget ) { + if(this.args.isWidget) { this.element.classList.add(classes['tabToolBarWidget']); } const btnDial = createDiv({ id: 'btn_tab_dial', className: `${classes['btnTab']}` }); @@ -32,7 +32,7 @@ export default class TabToolBar extends BaseElement { } }; - if( this.args.isWidget ) { + if(this.args.isWidget) { btnDial.classList.add(classes['btnTabWidget']); } @@ -55,7 +55,7 @@ export default class TabToolBar extends BaseElement { } }; - if( this.args.isWidget ) { + if(this.args.isWidget) { btnCallLog.classList.add(classes['btnTabWidget']); } diff --git a/lib/css/styles.js b/lib/css/styles.js index f0e6a87..c294e7d 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -1109,7 +1109,6 @@ const styles = { callLogListContainer: { display: 'inline-block', position: 'relative', - height: 'calc(100% - 103px)', height: '100%', overflowY: 'auto', listStyle: 'none', diff --git a/lib/views/CallLogItem.js b/lib/views/CallLogItem.js index 4a689ab..4b2e34c 100644 --- a/lib/views/CallLogItem.js +++ b/lib/views/CallLogItem.js @@ -58,15 +58,14 @@ export class CallLogItem { let hour = parseInt(tempDuration / 3600); let min = parseInt((tempDuration - (hour * 3600)) / 60); let sec = tempDuration - (hour * 3600) - (min * 60); - if( hour > 0 ){ + if(hour > 0){ callDurationTime = hour + 'h '; } - if( min > 0 ){ + if(min > 0){ callDurationTime += (min + 'm '); } callDurationTime += (sec + 's'); - } - else { + } else { callDurationTime = '0s'; } diff --git a/lib/views/CallLogView.js b/lib/views/CallLogView.js index eecc113..88a4371 100644 --- a/lib/views/CallLogView.js +++ b/lib/views/CallLogView.js @@ -23,12 +23,12 @@ export default class CallLogView extends BaseElement{ this.getCallLogs(callLogList); callLogList.onscroll = (e) => { let scrollposition = e.target.scrollHeight - e.target.clientHeight; - if( scrollposition === e.target.scrollTop ) { + if(scrollposition === e.target.scrollTop) { this.getCallLogs(callLogList); } }; - if( this.args.isWidget ) { + if(this.args.isWidget) { callLogList.classList.add(classes['widgetCallLog']); this.element.appendChild(callLogList); } @@ -47,16 +47,15 @@ export default class CallLogView extends BaseElement{ } getCallLogs(element){ - if( this.callLogQuery.hasNext && !this.callLogQuery.isLoading ) { + if(this.callLogQuery.hasNext && !this.callLogQuery.isLoading) { this.callLogQuery.next((directCallLog) => { - if( directCallLog ){ - if( directCallLog.length > 0 ) { + if(directCallLog){ + if(directCallLog.length > 0) { for( let i = 0; i < directCallLog.length; i++ ){ let callItem = null; - if( i === 0 ){ + if(i === 0){ callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']}` }); - } - else { + } else { callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']} ${classes['callLogItemWarpBorder']}` }); } callItem.onclick = (event, args) => { From d013352ac5007d70826d4285be92ea60da44b732 Mon Sep 17 00:00:00 2001 From: Cobb Jung Date: Thu, 14 May 2020 18:06:18 +0900 Subject: [PATCH 10/47] Update gitignore Add Editor configuration files into gitignore. Editors : Webstorm, VSCode --- .gitignore | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.gitignore b/.gitignore index 6704566..6de2d07 100644 --- a/.gitignore +++ b/.gitignore @@ -102,3 +102,7 @@ dist # TernJS port file .tern-port + +# Editor configuration files +.idea/ +.vscode/ From 94471f14dac4757d2c6392878164083874eaca06 Mon Sep 17 00:00:00 2001 From: Cobb Jung Date: Thu, 14 May 2020 18:18:16 +0900 Subject: [PATCH 11/47] Update logo images Altered previous logos with new one. --- img/ic-logo-horizontal-purple-300.svg | 2 +- lib/assets/ic-logo-black-01.svg | 4 ++-- lib/assets/ic-logo-horizontal-purple-300.svg | 2 +- lib/assets/ic-logo-inverse-01.svg | 6 +----- 4 files changed, 5 insertions(+), 9 deletions(-) diff --git a/img/ic-logo-horizontal-purple-300.svg b/img/ic-logo-horizontal-purple-300.svg index 78d907c..1c3c7d4 100644 --- a/img/ic-logo-horizontal-purple-300.svg +++ b/img/ic-logo-horizontal-purple-300.svg @@ -1,3 +1,3 @@ - + diff --git a/lib/assets/ic-logo-black-01.svg b/lib/assets/ic-logo-black-01.svg index ddf7ac9..06a28d8 100644 --- a/lib/assets/ic-logo-black-01.svg +++ b/lib/assets/ic-logo-black-01.svg @@ -1,3 +1,3 @@ - - + + diff --git a/lib/assets/ic-logo-horizontal-purple-300.svg b/lib/assets/ic-logo-horizontal-purple-300.svg index 78d907c..1c3c7d4 100644 --- a/lib/assets/ic-logo-horizontal-purple-300.svg +++ b/lib/assets/ic-logo-horizontal-purple-300.svg @@ -1,3 +1,3 @@ - + diff --git a/lib/assets/ic-logo-inverse-01.svg b/lib/assets/ic-logo-inverse-01.svg index cf5a385..173f883 100644 --- a/lib/assets/ic-logo-inverse-01.svg +++ b/lib/assets/ic-logo-inverse-01.svg @@ -1,7 +1,3 @@ - - - - - + From 30ebe82f990d2885117c167f2ddd602a69ff6bfb Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Thu, 14 May 2020 18:19:34 +0900 Subject: [PATCH 12/47] [CALLS-700]Call history design implementation apply review comment. --- lib/components/App.js | 5 ++--- lib/css/styles.js | 12 +++++++----- lib/utils/domUtil.js | 3 --- lib/views/CallLogItem.js | 21 +++++++-------------- lib/views/CallLogView.js | 15 ++++----------- 5 files changed, 20 insertions(+), 36 deletions(-) diff --git a/lib/components/App.js b/lib/components/App.js index 3448407..7d140b7 100644 --- a/lib/components/App.js +++ b/lib/components/App.js @@ -31,11 +31,10 @@ export default class App extends BaseElement { for (let i = this.children.length - 1 ; i >= 0 ; i--) { const child = this.children[i]; if(child.element.id === 'header' || child.element.id === 'tabtoolbar') { - if(opt.isRemoveHeader === true) { + if(opt.isRemoveHeader) { child.remove(); } - } - else{ + } else { child.remove(); } } diff --git a/lib/css/styles.js b/lib/css/styles.js index c294e7d..08ff48e 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -1114,6 +1114,12 @@ const styles = { listStyle: 'none', margin: '0', padding: '0', + borderRight: 'solid 1px #dee2f2', + 'li': { + '&:first-child': { + borderTop: 'unset' + } + } }, callLogListDesc: { @@ -1172,7 +1178,7 @@ const styles = { width: '376px', minHeight: '88px', height: 'auto', - borderRight: 'solid 1px #dee2f2', + borderTop: 'solid 1px #dee2f2', paddingBottom: '5px', }, @@ -1231,10 +1237,6 @@ const styles = { height: '100%' }, - callLogItemWarpBorder: { - borderTop: 'solid 1px #dee2f2' - }, - callLogItemType: { display: 'block', width: '20px', diff --git a/lib/utils/domUtil.js b/lib/utils/domUtil.js index ea71674..4e9861d 100644 --- a/lib/utils/domUtil.js +++ b/lib/utils/domUtil.js @@ -142,7 +142,4 @@ export function replaceClassName(element, searchValue, newValue) { export function hasClassName(element, searchValue) { return (element.classList.value.indexOf(searchValue) !== -1); - return false; - } - return true; } diff --git a/lib/views/CallLogItem.js b/lib/views/CallLogItem.js index 4b2e34c..d3343b6 100644 --- a/lib/views/CallLogItem.js +++ b/lib/views/CallLogItem.js @@ -15,16 +15,13 @@ export class CallLogItem { if(callLogInfo.isVideoCall){ if(callLogInfo.userRole === 'dc_caller'){ callType = outgoingVideo; - } - else{ + } else { callType = incomingVideo; } - } - else{ + } else { if(callLogInfo.userRole === 'dc_caller'){ callType = outgoingVoice; - } - else{ + } else { callType = incomingVoice; } } @@ -34,8 +31,7 @@ export class CallLogItem { if(callLogInfo.userRole === 'dc_caller'){ profileImage = callLogInfo.callee.profileUrl; displayName = callLogInfo.callee.userId; - } - else{ + } else { profileImage = callLogInfo.caller.profileUrl; displayName = callLogInfo.caller.userId; } @@ -46,7 +42,7 @@ export class CallLogItem { const profileImg = createImg({ className: `${classes['callLogProfileImg']}`, src: profileImage, onerror: (error) => { error.currentTarget.src = avatarIcon; - } }); + }}); const profileDiv = createDiv({ className: `${classes['callLogProfileDiv']}` }); profileDiv.appendChild(profileImg); @@ -81,10 +77,7 @@ export class CallLogItem { let callStartTime = new Date(callLogInfo.startedAt); - let callStartTimeLabel = callStartTime.getFullYear() + '/' + - callStartTime.toLocaleString(['en-US'], {month: '2-digit'}) + '/' + - callStartTime.toLocaleString(['en-US'], {day: '2-digit'}) + ' ' + - this.formatAMPM(callStartTime); + let callStartTimeLabel = `${callStartTime.getFullYear()}/${callStartTime.toLocaleString(['en-US'], {month: '2-digit'})}/${callStartTime.toLocaleString(['en-US'], {day: '2-digit'})} ${this.formatAMPM(callStartTime)}`; const callLogStartTime = createLabel({ className: `${classes['callLogStartTime']} ${classes['fontSmall']}`, innerText: callStartTimeLabel}); const callActionBtnWrap = createDiv({ className: `${classes['callLogActionBtnWrap']}` }); @@ -125,7 +118,7 @@ export class CallLogItem { let minutes = date.getMinutes(); let ampm = hours >= 12 ? 'pm' : 'am'; hours = hours % 12; - hours = hours ? hours : 12; // the hour '0' should be '12' + hours = hours || 12; // the hour '0' should be '12' minutes = minutes < 10 ? '0'+minutes : minutes; let strTime = hours + ':' + minutes + ampm; return strTime; diff --git a/lib/views/CallLogView.js b/lib/views/CallLogView.js index a4d4b7a..62eb144 100644 --- a/lib/views/CallLogView.js +++ b/lib/views/CallLogView.js @@ -31,8 +31,7 @@ export default class CallLogView extends BaseElement{ if(this.args.isWidget) { callLogList.classList.add(classes['widgetCallLog']); this.element.appendChild(callLogList); - } - else{ + } else { const callLogDescription = createDiv({ id: 'call_log_desc', className: `${classes['callLogListDesc']}` }); const callLogDescLogo = createDiv({ className: `${classes['callLogDescLogo']}` }); const callLogDescTitle = createDiv({ innerText: 'Sendbird Calls Quickstart', className: `${classes['callLogDescTitle']} ${classes['font24']} ${classes['fontDemi']}` }); @@ -50,21 +49,15 @@ export default class CallLogView extends BaseElement{ if (!this.callLogQuery.hasNext || this.callLogQuery.isLoading) return; this.callLogQuery.next((directCallLog) => { if( directCallLog.length > 0 ) { - for( let i = 0; i < directCallLog.length; i++ ){ - let callItem = null; - if(i === 0){ - callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']}` }); - } else { - callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']} ${classes['callLogItemWarpBorder']}` }); - } + for(let callLogItem of directCallLog) { + const callItem = new CallLogItem({ callLogInfo: callLogItem, className: `${classes['callLogItemWrap']}` }); callItem.onclick = (event, args) => { this.sendToParent('dial', args); }; element.appendChild(callItem.element); } - } - else{ + } else { // empty call log const emptyCallLog = new CallLogItem({ className: `${classes['callLogEmptyWrap']}` }); element.appendChild(emptyCallLog.element); From 8d22abe88dd6f7c9405b9683cdecbf87c14e6114 Mon Sep 17 00:00:00 2001 From: Cobb Jung Date: Thu, 14 May 2020 18:47:23 +0900 Subject: [PATCH 13/47] Add alt property into img tags --- views/index.html | 4 ++-- views/widget.html | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/views/index.html b/views/index.html index f88d1f7..7bde71b 100644 --- a/views/index.html +++ b/views/index.html @@ -11,7 +11,7 @@
- + logo
Calls Sample
@@ -30,4 +30,4 @@
- \ No newline at end of file + diff --git a/views/widget.html b/views/widget.html index 8b6c3ad..a2cd595 100644 --- a/views/widget.html +++ b/views/widget.html @@ -10,7 +10,7 @@
- + logo
Voice Sample Login
@@ -18,7 +18,7 @@ This is the Voice Sample page. To try our Voice widget, please click the button below.
- + arrow-down-right
@@ -27,11 +27,11 @@ - + tooltip-tail-down
- \ No newline at end of file + From 6d99f4503466c45bbdc62d3c2bdd92fa953d8a6c Mon Sep 17 00:00:00 2001 From: Cobb Jung Date: Fri, 15 May 2020 15:59:15 +0900 Subject: [PATCH 14/47] Update img tag alt attributes, SEO in mind Make dom util, create img accept alt parameter. Update alt texts with SEO in mind. Refer to https://blog.hubspot.com/marketing/image-alt-text --- lib/utils/domUtil.js | 4 ++-- lib/views/CallLogItem.js | 28 +++++++++++++++++++--------- lib/views/CallView.js | 1 + views/index.html | 2 +- views/widget.html | 2 +- 5 files changed, 24 insertions(+), 13 deletions(-) diff --git a/lib/utils/domUtil.js b/lib/utils/domUtil.js index 4e9861d..816cafe 100644 --- a/lib/utils/domUtil.js +++ b/lib/utils/domUtil.js @@ -111,12 +111,12 @@ export function createButton({ id, className, innerText } = {}) { return _createElement({ tagName: 'button', id: id, className: className, innerText: innerText }); } -export function createImg({ id, className, src, onerror } = {}) { +export function createImg({ id, className, src, alt, onerror } = {}) { const element = _createElement({ tagName: 'img', id: id, className: className, - attrs: { src: src } + attrs: { src, alt } }); element.onerror = onerror; diff --git a/lib/views/CallLogItem.js b/lib/views/CallLogItem.js index d3343b6..01737db 100644 --- a/lib/views/CallLogItem.js +++ b/lib/views/CallLogItem.js @@ -12,17 +12,22 @@ export class CallLogItem { if(callLogInfo) { const wrapper = createListItem({ id: callLogInfo.callId, className: className }); let callType = null; + let callTypeAlt = ''; if(callLogInfo.isVideoCall){ if(callLogInfo.userRole === 'dc_caller'){ callType = outgoingVideo; + callTypeAlt = 'Outgoing call history'; } else { callType = incomingVideo; + callTypeAlt = 'Incoming call history'; } } else { if(callLogInfo.userRole === 'dc_caller'){ callType = outgoingVoice; + callTypeAlt = 'Outgoing call history'; } else { callType = incomingVoice; + callTypeAlt = 'Incoming call history'; } } @@ -36,14 +41,19 @@ export class CallLogItem { displayName = callLogInfo.caller.userId; } - const icoCallType = createImg({ className: `${classes['callLogItemType']}`, src: callType }); + const icoCallType = createImg({ className: `${classes['callLogItemType']}`, src: callType, alt: callTypeAlt }); const callTypeDiv = createDiv({ className: `${classes['callLogTypeDiv']}` }); callTypeDiv.appendChild(icoCallType); - const profileImg = createImg({ className: `${classes['callLogProfileImg']}`, src: profileImage, onerror: (error) => { - error.currentTarget.src = avatarIcon; - }}); - + const profileImg = createImg({ + className: `${classes['callLogProfileImg']}`, + src: profileImage, + alt: 'Opponent profile photo of call history', + onerror: (error) => { + error.currentTarget.src = avatarIcon; + } + }); + const profileDiv = createDiv({ className: `${classes['callLogProfileDiv']}` }); profileDiv.appendChild(profileImg); @@ -85,12 +95,12 @@ export class CallLogItem { const btnCallVoice = createDiv({ className: `${classes['callLogVoiceActionBtn']}`}); callActionBtnWrap.appendChild(btnCallVoice); callActionBtnWrap.appendChild(btnCallVideo); - - + + const callLogActionDiv = createDiv({ className: `${classes['callLogActionDiv']}` }); callLogActionDiv.appendChild(callLogStartTime); callLogActionDiv.appendChild(callActionBtnWrap); - + wrapper.appendChild(callTypeDiv); wrapper.appendChild(profileDiv); @@ -135,4 +145,4 @@ export class CallLogItem { eventhandler(event, {peerId: this.destPeerID, isVideoCall: false, callOption: null}); }; } -} \ No newline at end of file +} diff --git a/lib/views/CallView.js b/lib/views/CallView.js index f809b8c..202f38e 100644 --- a/lib/views/CallView.js +++ b/lib/views/CallView.js @@ -24,6 +24,7 @@ export default class CallView extends BaseElement { this.peerProfile = createImg({ src: remoteUser.profileUrl, + alt: 'Sendbird voice & video call opponent profile photo', className: classes['remoteProfile'], onerror: (e) => e.target.style.visibility = 'hidden' }); diff --git a/views/index.html b/views/index.html index 7bde71b..41a00b2 100644 --- a/views/index.html +++ b/views/index.html @@ -11,7 +11,7 @@
- logo + Sendbird horizontal logo svg icon
Calls Sample
diff --git a/views/widget.html b/views/widget.html index a2cd595..f58d5de 100644 --- a/views/widget.html +++ b/views/widget.html @@ -10,7 +10,7 @@
- logo + Sendbird horizontal svg icon
Voice Sample Login
From ed27a8fd258649a2224e7d898f4593a460af7749 Mon Sep 17 00:00:00 2001 From: Dongjin Jung Date: Mon, 18 May 2020 09:25:14 +0900 Subject: [PATCH 15/47] Update widget.html --- views/widget.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/views/widget.html b/views/widget.html index f58d5de..50a1f2e 100644 --- a/views/widget.html +++ b/views/widget.html @@ -10,7 +10,7 @@
- Sendbird horizontal svg icon + Sendbird horizontal logo svg icon
Voice Sample Login
From 6e3b0651010c39c1bcf7cd76cf5cc181196af2ae Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Mon, 18 May 2020 14:48:42 +0900 Subject: [PATCH 16/47] template --- lib/views/CallLogItem.js | 3 +-- lib/views/CallView.js | 6 ++++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/lib/views/CallLogItem.js b/lib/views/CallLogItem.js index d3343b6..de1e424 100644 --- a/lib/views/CallLogItem.js +++ b/lib/views/CallLogItem.js @@ -101,8 +101,7 @@ export class CallLogItem { this.btnCallVideo = btnCallVideo; this.btnCallVoice = btnCallVoice; this.destPeerID = displayName; - } - else{ + } else { const wrapper = createDiv({ id: 'empty_calllog', className: className }); const icoCallLogEmpty = createDiv({ className: `${classes['icoCallLogEmpty']}` }); const labelCallLogEmpty = createDiv({ innerText: 'No call history', className: `${classes['labelCallLogEmpty']} ${classes['font16']} ${classes['fontHeavy']}` }); diff --git a/lib/views/CallView.js b/lib/views/CallView.js index f809b8c..2f9fa1a 100644 --- a/lib/views/CallView.js +++ b/lib/views/CallView.js @@ -104,14 +104,16 @@ export default class CallView extends BaseElement { this.sendToChildren('connected'); }; - call.onEnded = () => { + call.onEnded = (endedCall) => { this.drawEndResult(); - if (this.call.isVideoCall) { + if (endedCall.isVideoCall) { this.localMediaViewDiv.classList.add(classes['videoHidden']); this.remoteMediaViewDiv.classList.add(classes['videoHidden']); this.showSecondaryInfo(); } + + console.log(endedCall.getCallLog); this.sendToChildren('ended'); }; From da3ee93ec838d60537c731e50c8b67d00543d1c5 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Fri, 5 Jun 2020 15:24:30 +0900 Subject: [PATCH 17/47] calls-534 not complete issue --- css/main.css | 144 +++++++++++++++++---- envs.js | 5 +- img/ic-logo-horizontal.svg | 3 + lib/assets/ic-call-filled-purple.svg | 3 + lib/assets/ic-call-filled.svg | 4 +- lib/assets/ic-copy.svg | 3 + lib/assets/icon-camera-off.svg | 3 + lib/components/Header.js | 4 + lib/components/MainApp.js | 31 ++++- lib/css/styles.js | 184 ++++++++++++++++++++++----- lib/utils/domUtil.js | 2 +- lib/views/AppInfoView.js | 112 ++++++++++++++++ lib/views/CallView.js | 74 +++++++++-- lib/views/DialView.js | 3 +- lib/views/Settings.js | 10 +- views/index.html | 34 ++++- views/widget.html | 12 +- 17 files changed, 541 insertions(+), 90 deletions(-) create mode 100644 img/ic-logo-horizontal.svg create mode 100644 lib/assets/ic-call-filled-purple.svg create mode 100644 lib/assets/ic-copy.svg create mode 100644 lib/assets/icon-camera-off.svg create mode 100644 lib/views/AppInfoView.js diff --git a/css/main.css b/css/main.css index 105941d..c2989a9 100644 --- a/css/main.css +++ b/css/main.css @@ -37,6 +37,14 @@ body { flex-direction: row-reverse; } +.margin-top-24 { + margin-top: 24px; +} + +.margin-right-24 { + margin-right: 24px; +} + .btn { display: flex; cursor: pointer; @@ -78,6 +86,49 @@ body { width: 100%; } +.choose-background { + display: inline-block; + width: 260px; + height: 158px; + border-radius: 4px; + border: solid 1px #dee2f2; + background-color: var(--white); + cursor: pointer; +} + +.choose-background:hover { + border: solid 1px var(--purple-300); +} + +.choose-title { + margin: 24px 24px 8px 24px; + width: 88px; + height: 24px; + font-family: Avenir Next; + font-size: 18px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: 1.33; + letter-spacing: -0.25px; + color: var(--navy-900); +} + +.choose-desc { + width: 212px; + height: 60px; + margin-left: 24px; + font-family: Avenir Next; + font-size: 14px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.43; + letter-spacing: -0.1px; + color: #595e8a; +} + + .title { height: 32px; font-family: Avenir Next; @@ -90,6 +141,10 @@ body { color: inherit; } +.demi { + font-weight: 600; +} + .input-title { display: inline-block; margin-top: 6px; @@ -112,15 +167,17 @@ body { .desc { font-family: Avenir Next; font-size: 14px; - font-weight: 500; + font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.43; letter-spacing: -0.1px; - color: inherit; + color: #595e8a; } .desc-light { + width: 100%; + height: 20px; font-family: Avenir Next; font-size: 14px; font-weight: normal; @@ -129,7 +186,36 @@ body { line-height: 1.43; letter-spacing: normal; text-align: center; - color: var(--white); + letter-spacing: -0.1px; + color: #595e8a; + margin-bottom: 24px; +} + +.desc-quick { + width: 275px; + height: 32px; + font-family: Avenir Next; + font-size: 24px; + font-weight: 600; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.33; + letter-spacing: -0.25px; + color: var(--navy-900); +} + +.choose-a-type { + width: 92px; + height: 20px; + font-family: Avenir Next; + font-size: 14px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: 1.43; + letter-spacing: -0.1px; + color: #595e8a; } .smile-face { @@ -212,14 +298,22 @@ button label { margin-bottom: 24px; } +.ic-logo-horizontal { + display: block; + width: 180px; + height: 40px; + background: url("../img/ic-logo-horizontal.svg"); + margin-bottom: 24px; +} + .voice-sample-page { height: 32px; - margin-bottom: 20px; + margin-bottom: 16px; text-align: center; } .voice-sample-desc { - width: 280px; + width: 308px; height: 40px; margin-bottom: 28px; text-align: center; @@ -234,20 +328,24 @@ button label { .widget-tooltip { position: absolute; - right: 24px; - bottom: 88px; + right: 18px; + bottom: 112px; width: 296px; - height: 124px; + height: 108px; border-radius: 4px; + box-shadow: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(33, 34, 66, 0.08), 0 8px 10px 1px rgba(33, 34, 66, 0.12); + border: solid 1px #c9d0e6; } .img-tooltip-tail-down { position: absolute; right: 16px; bottom: -8px; - width: 12px; - height: 8px; - object-fit: contain; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-top: 8px solid white; } .widget { @@ -257,15 +355,15 @@ button label { } ::-webkit-scrollbar { - width: 5px; /* 세로축 스크롤바 길이 */ - } - ::-webkit-scrollbar-track { - background-color: transparent; - } - ::-webkit-scrollbar-track-piece { - background-color: transparent; - } - ::-webkit-scrollbar-thumb { - border-radius: 8px; - background-color: gray; - } + width: 5px; /* 세로축 스크롤바 길이 */ +} +::-webkit-scrollbar-track { + background-color: transparent; +} +::-webkit-scrollbar-track-piece { + background-color: transparent; +} +::-webkit-scrollbar-thumb { + border-radius: 8px; + background-color: gray; +} diff --git a/envs.js b/envs.js index a6bcd54..72e3736 100644 --- a/envs.js +++ b/envs.js @@ -1,4 +1,7 @@ -export const TEST_APP_ID = BUILD_APP_ID || undefined; +// export const TEST_APP_ID = BUILD_APP_ID || undefined; +// export const TEST_APP_ID = "6C53468D-A6AB-4160-B586-7F5DB1DBF1D4"; +export const TEST_APP_ID = "7768FD30-5639-48BC-8B25-F5211F3DFEBB"; +// export const TEST_APP_ID = "80ED633C-5301-4BEB-B1DC-0605A395DFAC"; export const USER_ID = undefined; export const ACCESS_TOKEN = undefined; export const IS_ACCESS_TOKEN_NEEDED = false; diff --git a/img/ic-logo-horizontal.svg b/img/ic-logo-horizontal.svg new file mode 100644 index 0000000..1c3c7d4 --- /dev/null +++ b/img/ic-logo-horizontal.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/assets/ic-call-filled-purple.svg b/lib/assets/ic-call-filled-purple.svg new file mode 100644 index 0000000..e875484 --- /dev/null +++ b/lib/assets/ic-call-filled-purple.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/assets/ic-call-filled.svg b/lib/assets/ic-call-filled.svg index e875484..f35280c 100644 --- a/lib/assets/ic-call-filled.svg +++ b/lib/assets/ic-call-filled.svg @@ -1,3 +1,3 @@ - - + + diff --git a/lib/assets/ic-copy.svg b/lib/assets/ic-copy.svg new file mode 100644 index 0000000..59a010d --- /dev/null +++ b/lib/assets/ic-copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/assets/icon-camera-off.svg b/lib/assets/icon-camera-off.svg new file mode 100644 index 0000000..28bd930 --- /dev/null +++ b/lib/assets/icon-camera-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/components/Header.js b/lib/components/Header.js index a2096b1..8a71ef8 100644 --- a/lib/components/Header.js +++ b/lib/components/Header.js @@ -15,6 +15,10 @@ export default class Header extends BaseElement { 'label': 'Device settings', 'callback': () => { this.sendToParent('show_settings') } }, + { + 'label': 'Application information', + 'callback': () => { this.sendToParent('show_app_info') } + }, { 'label': 'Sign out', 'callback': () => { diff --git a/lib/components/MainApp.js b/lib/components/MainApp.js index 56cd421..ec85415 100644 --- a/lib/components/MainApp.js +++ b/lib/components/MainApp.js @@ -5,10 +5,10 @@ import { classes } from "../css/styles.js"; import { getCallOption } from "../utils/util"; import { Toast } from "./Toast"; import Settings from "../views/Settings"; - import Header from "../components/Header"; import TabToolBar from "../components/TabToolBar"; import { createDiv } from "../utils/domUtil"; +import AppInfoView from "../views/AppInfoView"; export default class MainApp extends App { constructor({ id, className, pages, styles, args }) { @@ -17,7 +17,8 @@ export default class MainApp extends App { this.onLoginSuccess = null; this.onLoginFailure = null; - + this.settings = null; + this.appInfoView = null; this.init(); } @@ -48,6 +49,18 @@ export default class MainApp extends App { } } + showAppInfo() { + this.appInfoView = new AppInfoView({}); + this.appInfoView.appendToBaseElement(this); + } + + closeAppInfo() { + if (this.appInfoView) { + this.appInfoView.remove(); + this.appInfoView = null; + } + } + async setAppId(appId) { await this._setArgs({ appId: appId }); } @@ -177,6 +190,12 @@ export default class MainApp extends App { case 'close_settings': this.recvCloseSettings(); break; + case 'show_app_info': + this.recvShowAppInfo(); + break; + case 'close_app_info': + this.recvCloseAppInfo(); + break; case 'close': this.recvClose(value); break; @@ -214,6 +233,14 @@ export default class MainApp extends App { this.closeSettings(); } + recvShowAppInfo() { + this.showAppInfo(); + } + + recvCloseAppInfo() { + this.closeAppInfo(); + } + recvClose() { this.createHeaderNTab(); this.route('dial_view', {}); diff --git a/lib/css/styles.js b/lib/css/styles.js index 08ff48e..28cd1bf 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -13,12 +13,13 @@ import videoWhiteIcon from '../assets/ic-video-thumbnail-white.svg'; import videoBlackIcon from '../assets/ic-video-thumbnail-black.svg'; import audioOffBlack from '../assets/ic-callkit-audio-off-black.svg'; import audioOffWhite from '../assets/ic-callkit-audio-off-white.svg'; +import cameraOff from '../assets/icon-camera-off.svg'; import declineWhiteIcon from '../assets/ic-callkit-decline.svg'; import declineBlackIcon from '../assets/ic-decline-black.svg'; import endIcon from '../assets/ic-callkit-end.svg'; import toastErrorIcon from '../assets/ic-error-20.svg'; import toastCloseBtn from '../assets/ic-close-20.svg'; -import widgetIcon from '../assets/ic-call-logs-filled.svg'; +import widgetIcon from '../assets/ic-call-filled.svg'; import settingsIcon from '../assets/ic-settings.svg'; import settingsCloseIcon from '../assets/ic-close-black-20.svg'; import widgetCloseIcon from '../assets/ic-close-24.svg'; @@ -30,9 +31,10 @@ import callhistoryIconDeactive from '../assets/ic-layout-default-deactive.svg'; import callhistoryIconActive from '../assets/ic-layout-default-active.svg'; import headerLogo from '../assets/ic-logo-horizontal-inverse-01.svg'; import thumbnailVideo from '../assets/ic-video-thumbnail-filled.svg'; -import thumbnailVoice from '../assets/ic-call-filled.svg'; +import thumbnailVoice from '../assets/ic-call-filled-purple.svg'; import callLogEmpty from '../assets/ic-layout-default.svg'; import logoHorizon from '../assets/ic-logo-horizontal.svg'; +import icCopy from '../assets/ic-copy.svg'; @@ -60,8 +62,10 @@ const colors = { navy900: '#212242', white: '#ffffff', purple300: '#825eeb', + purple400: '#6440c4', green300: '#1fcca1', green400: '#00998c', + green500: '#007a7a', red300: '#f24d6b', red400: '#d92148', mutegray: 'rgba(168, 168, 168, 0.38)' @@ -123,7 +127,8 @@ const styles = { height: '40px', '& label': { cursor: 'inherit' - } + }, + backgroundColor: colors.white }, btnPrimary: { @@ -263,7 +268,7 @@ const styles = { }, settingsCloseButton: { - marginLeft: 'auto', + display: 'inline-flex', width: '32px', height: '32px', cursor: 'pointer', @@ -286,14 +291,83 @@ const styles = { maxWidth: '480px', paddingTop: '16px', paddingBottom: '24px', - paddingLeft: '32px', - paddingRight: '32px', + paddingLeft: '24px', + paddingRight: '24px', zIndex: '1', boxShadow: '0 6px 10px -5px rgba(33, 34, 66, 0.04), 0 6px 30px 5px rgba(33, 34, 66, 0.08), 0 16px 24px 2px rgba(33, 34, 66, 0.12)', borderRadius: '4px', backgroundColor: colors.white }, + popupHeader: { + display: 'flex', + alignItems: 'center', + width: '100%' + }, + + popupTitle: { + display: 'inline-flex', + width: 'calc(100% - 20px)' + }, + + popupItemLabel: { + display: 'inline-block', + width: '100%', + height: '12px', + marginTop: '22px', + marginBottom: '6px', + lineHeight: '12px !important' + }, + + widgetpopup: { + width: '312px', + marginBottom: '2px' + }, + + appInfoLabelWrap: { + display: 'flex', + width: '100%', + height: '40px', + borderRadius: '4px', + alignItems: 'center', + justifyContent: 'space-between', + backgroundColor: colors.navy80, + }, + + appInfoLabel: { + display: 'inline-flex', + width: 'calc(100% - 60px)', + height: '40px', + borderRadius: '4px', + paddingLeft: '16px', + lineHeight: '40px !important', + textOverflow: 'clip', + overflow: 'hidden', + backgroundColor: colors.navy80, + color: colors.nany600, + }, + + appName: { + width: 'calc(100% - 16px) !important' + }, + + appInfoIdLabel: { + textOverflow: 'clip', + overflow: 'hidden', + whiteSpace: 'pre' + }, + + appInfoIdCopy: { + display: 'inline-flex', + width: '32px', + height: '32px', + borderRadius: '4px', + marginRight: '4px', + backgroundImage: `url(${icCopy})`, + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center', + cursor: 'pointer' + }, /*** fonts ***/ fontSmall: { @@ -473,7 +547,6 @@ const styles = { btnTabDeactive: { color: colors.navy600 }, - /*** components ***/ formContainer: { @@ -500,6 +573,10 @@ const styles = { marginBottom: '16px' }, + dialField: { + width: '312px' + }, + fieldInvalid: { border: `solid 1px ${colors.red300}` }, @@ -587,21 +664,36 @@ const styles = { display: block; `, + peerVideoMuteIcon: ` + width: 40px; + height: 40px; + background-image: url(${cameraOff}); + background-repeat: no-repeat; + background-position: center; + margin-bottom: 16px; + `, + + peerVideoMuteLabel: ` + display: block; + `, + callButtons: { position: 'relative' }, btnCircle: { - width: '64px', - height: '64px', - border: 'none', + width: '56px', + height: '56px', + border: 'solid 1px var(--purple-300)', borderRadius: '50%', + backgroundColor: colors.white, + borderColor: 'transparent', cursor: 'pointer', '&::before': { content: '', display: 'block', - width: '64px', - height: '64px', + width: '56px', + height: '56px', borderRadius: '50%' }, 'btn-circle:hover::before': { @@ -616,52 +708,73 @@ const styles = { }, btnVideoAccept: { - backgroundColor: colors.green300, + backgroundColor: '#2eba9f', backgroundImage: `url(${videoIcon})`, backgroundRepeat: 'no-repeat', - backgroundPosition: 'center' + backgroundPosition: 'center', + '&:hover': { + backgroundColor: colors.green500 + } }, btnAccept: { - backgroundColor: colors.green300, + backgroundColor: '#2eba9f', backgroundImage: `url(${audioIcon})`, backgroundRepeat: 'no-repeat', - backgroundPosition: 'center' + backgroundPosition: 'center', + '&:hover': { + backgroundColor: colors.green500 + } }, btnMute: { backgroundColor: colors.mutegray, backgroundImage: `url(${audioOffWhite})`, backgroundRepeat: 'no-repeat', - backgroundPosition: 'center' + backgroundPosition: 'center', + '&:hover': { + backgroundColor: 'rgba(168, 168, 168, 0.5)' + } }, btnUnmute: { backgroundColor: colors.white, backgroundImage: `url(${audioOffBlack})`, backgroundRepeat: 'no-repeat', - backgroundPosition: 'center' + backgroundPosition: 'center', + '&:hover': { + backgroundColor: 'rgba(168, 168, 168, 0.5)' + } }, btnStopVideo: { backgroundColor: colors.mutegray, backgroundImage: `url(${videoWhiteIcon})`, backgroundRepeat: 'no-repeat', - backgroundPosition: 'center' + backgroundPosition: 'center', + '&:hover': { + backgroundColor: 'rgba(168, 168, 168, 0.5)' + } }, btnStartVideo: { backgroundColor: colors.white, backgroundImage: `url(${videoBlackIcon})`, backgroundRepeat: 'no-repeat', - backgroundPosition: 'center' + backgroundPosition: 'center', + '&:hover': { + backgroundColor: 'rgba(168, 168, 168, 0.5)' + } }, btnEnd: { - backgroundColor: colors.red300, + backgroundColor: '#e53157', backgroundImage: `url(${endIcon})`, backgroundRepeat: 'no-repeat', - backgroundPosition: 'center' + backgroundPosition: 'center', + '&:hover' : { + backgroundColor: '#a30e2d', + } }, videoView: { @@ -716,10 +829,13 @@ const styles = { }, btnDecline: { - backgroundColor: colors.red300, + backgroundColor: 'rgba(0, 0, 0, 0.12)', backgroundImage: `url(${declineWhiteIcon})`, backgroundRepeat: 'no-repeat', - backgroundPosition: 'center' + backgroundPosition: 'center', + '&:hover' : { + backgroundColor: 'rgba(0, 0, 0, 0.38)', + } }, closeDiv: {}, @@ -902,7 +1018,7 @@ const styles = { borderTopLeftRadius: '8px', borderTopRightRadius: '8px', '& $closeButton:hover': { - backgroundColor: colors.navy900 + backgroundColor: colors.purple400 } }, '& $userDiv': { @@ -965,13 +1081,14 @@ const styles = { widgetIcon: { cursor: 'pointer', - width: '56px', - height: '56px', - borderRadius: '32px', + width: '48px', + height: '48px', + borderRadius: '24px', backgroundColor: colors.purple300, backgroundImage: `url(${widgetIcon})`, backgroundRepeat: 'no-repeat', - backgroundPosition: 'center' + backgroundPosition: 'center', + marginBottom: '32px' }, widgetHeader: { @@ -1048,15 +1165,15 @@ const styles = { position: 'relative', marginLeft: '2px', marginRight: '2px', - width: '40px', - height: '40px', + width: '48px', + height: '48px', borderRadius: '4px', cursor: 'pointer', backgroundImage: `url(${settingsIcon})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', '&:hover': { - backgroundColor: colors.navy900 + backgroundColor: colors.purple400 }, zIndex: 10, }, @@ -1088,7 +1205,8 @@ const styles = { height: '40px', textAlign: 'center', color: colors.navy400, - marginBottom: '32px' + marginBottom: '32px', + letterSpacing: '-0.1px' }, btnVideo: { diff --git a/lib/utils/domUtil.js b/lib/utils/domUtil.js index 816cafe..1491ae6 100644 --- a/lib/utils/domUtil.js +++ b/lib/utils/domUtil.js @@ -142,4 +142,4 @@ export function replaceClassName(element, searchValue, newValue) { export function hasClassName(element, searchValue) { return (element.classList.value.indexOf(searchValue) !== -1); -} +} \ No newline at end of file diff --git a/lib/views/AppInfoView.js b/lib/views/AppInfoView.js new file mode 100644 index 0000000..98fc1bc --- /dev/null +++ b/lib/views/AppInfoView.js @@ -0,0 +1,112 @@ +import SendBirdCall from "sendbird-calls"; +import BaseElement from "../components/BaseElement"; +import { classes } from "../css/styles"; +import { createDiv, createLabel, createOption, createSelect } from "../utils/domUtil"; + +export default class AppInfoView extends BaseElement { + constructor({ args }) { + super({ + id: 'appinfo_view', + className: `${classes['viewSettings']} ${classes['column']} ${classes['center']}`, + args + }); + + this.args = args; + } + + onLoaded() { + + } + + onRemoved() { + + } + + build() { + const cover = createDiv({ id: 'cover', className: classes['cover'] }); + cover.onclick = () => { + this.remove(); + }; + let popup; + if (this.args.isWidget) { + popup = createDiv({ id: 'settings_popup', className: `${classes['popup']} ${classes['widgetpopup']}` }); + } else { + popup = createDiv({ id: 'settings_popup', className: classes['popup'] }); + } + + const popupHeader = createDiv({ + id: 'settings_popup_header', + className: `${classes['popupHeader']}` + }); + + const popupTitle = createDiv({ + id: 'settings_popup_title', + className: `${classes['popupTitle']} ${classes['font20']} ${classes['fontDemi']}`, + innerText: 'Application information' + }); + const closeButton = createDiv({ + id: 'popup_close_button', + className: `${classes['settingsCloseButton']}` + }); + closeButton.onclick = () => { + this.remove(); + }; + popupHeader.appendChild(popupTitle); + popupHeader.appendChild(closeButton); + + const applicationInfoContainer = createDiv({ id: 'select_container', className: classes['selectContainer'] }); + const applicationNameLabel = createLabel({ + id: 'app_name_label', + innerText: 'Application name', + className: `${classes['popupItemLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` + }); + const applicationName = createLabel({ + id: 'app_name', + readonly: 'readonly', + innerText: 'Voice & Video', + className: `${classes['appInfoLabel']} ${classes['appName']} ${classes['fontNormal']}` + }); + + applicationInfoContainer.appendChild(applicationNameLabel); + applicationInfoContainer.appendChild(applicationName); + + const applicationIDLabel = createLabel({ + id: 'app_id_label', + innerText: 'Application ID', + className: `${classes['popupItemLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` + }); + + const applicationIdWrap = createDiv({ + id: 'app_id_wrap', + className: `${classes['appInfoLabelWrap']}` + }); + + const applicationID = createLabel({ + id: 'app_id', + readonly: 'readonly', + innerText: this.args.appId, + className: `${classes['appInfoLabel']} ${classes['appInfoIdLabel']} ${classes['fontNormal']}` + }); + + const appInfoIdCopy = createDiv({ + id: 'btn_app_id_copy', + className: `${classes['appInfoIdCopy']}` + }); + + appInfoIdCopy.onclick = () => { + navigator.clipboard.writeText(this.args.appId); + }; + + applicationIdWrap.appendChild(applicationID); + applicationIdWrap.appendChild(appInfoIdCopy); + + applicationInfoContainer.appendChild(applicationIDLabel); + applicationInfoContainer.appendChild(applicationIdWrap); + + popup.appendChild(popupHeader); + popup.appendChild(applicationInfoContainer); + + this.element.appendChild(cover); + this.element.appendChild(popup); + } +} \ No newline at end of file diff --git a/lib/views/CallView.js b/lib/views/CallView.js index e5dfe75..bf3d0f5 100644 --- a/lib/views/CallView.js +++ b/lib/views/CallView.js @@ -1,6 +1,7 @@ import BaseElement from "../components/BaseElement"; import { createAudio, createDiv, createImg, createLabel, createVideo } from "../utils/domUtil"; import { getCallOption } from "../utils/util"; +import { hasClassName } from "../utils/domUtil"; import CallButtons from "./CallButtons"; import { classes } from "../css/styles.js"; import PeriodicJob from "../modules/periodicJob"; @@ -12,6 +13,13 @@ export default class CallView extends BaseElement { this.call = call; this.state = state; this.connected = false; + + this.peerStateDiv = null; + this.peerMuteIcon = null; + this.peerMuteLabel = null; + this.peerVideoMuteIcon = null; + this.peerVideoMuteLabel = null; + this.addCallListeners(call); } @@ -42,23 +50,24 @@ export default class CallView extends BaseElement { innerText: connectionText }); - const peerStateDiv = createDiv({ id: 'peer_state', className: `${classes['column']} ${classes['peerStateDiv']} ${classes['invisible']}` }); - const peerMuteIcon = createDiv({ id: 'peer_mute_icon', className: classes['peerMuteIcon'] }); - const peerMuteLabel = createLabel({ id: 'peer_mute_label', className: `${classes['peerMuteLabel']} ${classes['fontSmall']}`, innerText: `${remoteUser.userId} muted this call` }); - peerStateDiv.appendChild(peerMuteIcon); - peerStateDiv.appendChild(peerMuteLabel); + this.peerStateDiv = createDiv({ id: 'peer_state', className: `${classes['column']} ${classes['peerStateDiv']} ${classes['invisible']}` }); + this.peerMuteIcon = createDiv({ id: 'peer_mute_icon', className: `${classes['peerMuteIcon']}` }); + this.peerMuteLabel = createLabel({ id: 'peer_mute_label', className: `${classes['peerMuteLabel']} ${classes['fontSmall']}`, innerText: `${remoteUser.userId} audio muted this call` }); + this.peerVideoMuteIcon = createDiv({ id: 'peer_video_mute_icon', className: `${classes['peerVideoMuteIcon']}` }); + this.peerVideoMuteLabel = createLabel({ id: 'peer_video_mute_label', className: `${classes['peerVideoMuteLabel']} ${classes['fontSmall']}`, innerText: 'The other person’s camera has been turned off.' }); const buttons = new CallButtons({ call: this.call }); if (this.call.isVideoCall) { - this.localMediaView = createVideo({ className: `${classes['videoView']}`, autoplay: true, muted: true }); + this.localMediaView = createVideo({ className: `${classes['videoView']}`, autoplay: true, muted: true, style: "background-color: #fff;" }); this.remoteMediaView = createVideo({ className: `${classes['videoView']}`, autoplay: true, muted: false, remote: true }); } else { this.localMediaView = createAudio({ autoplay: true, muted: true }); this.remoteMediaView = createAudio({ autoplay: true, muted: false, remote: true }); } + this.localMediaViewDiv = createDiv({ className: `${classes['videoViewDiv']} ${classes['videoFull']}` }); this.remoteMediaViewDiv = createDiv({ className: `${classes['videoViewDiv']} ${classes['videoHidden']}` }); this.localMediaViewDiv.appendChild(this.localMediaView); @@ -76,7 +85,7 @@ export default class CallView extends BaseElement { foreground.appendChild(this.peerProfile); foreground.appendChild(this.peerName); foreground.appendChild(this.connectionInfo); - foreground.appendChild(peerStateDiv); + foreground.appendChild(this.peerStateDiv); this.element.appendChild(background); this.element.appendChild(foreground); @@ -127,16 +136,57 @@ export default class CallView extends BaseElement { }; call.onRemoteAudioSettingsChanged = (call) => { - this.onRemoteMuted(call.isRemoteAudioEnabled); + this.onRemoteAudioMuted(call.isRemoteAudioEnabled); }; + + call.onRemoteVideoSettingsChanged = (call) => { + this.onRemoteVideoMuted(call.isRemoteVideoEnabled); + }; + } + + onRemoteAudioMuted(isEnabled) { + if (isEnabled) { + if (!hasClassName(this.peerStateDiv, classes['invisible'])) { + this.peerStateDiv.classList.add(classes['invisible']); + this.peerStateDiv.removeChild(this.peerMuteIcon); + this.peerStateDiv.removeChild(this.peerMuteLabel); + } else{ + this.peerStateDiv.removeChild(this.peerMuteIcon); + this.peerStateDiv.removeChild(this.peerMuteLabel); + } + } else { + if (hasClassName(this.peerStateDiv, classes['invisible'])) { + this.peerStateDiv.classList.remove(classes['invisible']); + this.peerStateDiv.appendChild(this.peerMuteIcon); + this.peerStateDiv.appendChild(this.peerMuteLabel); + } else { + this.peerStateDiv.appendChild(this.peerMuteIcon); + this.peerStateDiv.appendChild(this.peerMuteLabel); + } + } } - onRemoteMuted(isEnabled) { - const peerStateDiv = this.element.querySelector('#peer_state'); + onRemoteVideoMuted(isEnabled) { if (isEnabled) { - peerStateDiv.classList.add(classes['invisible']); + this.remoteMediaViewDiv.classList.remove(classes['videoHidden']); + if (!hasClassName(this.peerStateDiv, classes['invisible'])) { + this.peerStateDiv.classList.add(classes['invisible']); + this.peerStateDiv.removeChild(this.peerVideoMuteIcon); + this.peerStateDiv.removeChild(this.peerVideoMuteLabel); + } else{ + this.peerStateDiv.removeChild(this.peerVideoMuteIcon); + this.peerStateDiv.removeChild(this.peerVideoMuteLabel); + } } else { - peerStateDiv.classList.remove(classes['invisible']); + this.remoteMediaViewDiv.classList.add(classes['videoHidden']); + if (hasClassName(this.peerStateDiv, classes['invisible'])) { + this.peerStateDiv.classList.remove(classes['invisible']); + this.peerStateDiv.appendChild(this.peerVideoMuteIcon); + this.peerStateDiv.appendChild(this.peerVideoMuteLabel); + } else{ + this.peerStateDiv.appendChild(this.peerVideoMuteIcon); + this.peerStateDiv.appendChild(this.peerVideoMuteLabel); + } } } diff --git a/lib/views/DialView.js b/lib/views/DialView.js index 6222f6d..2a388de 100644 --- a/lib/views/DialView.js +++ b/lib/views/DialView.js @@ -13,6 +13,7 @@ export default class DialView extends BaseElement { className: `${classes['container']} ${classes['column']} ${classes['center']} ${classes['view']} ${classes['viewDial']}`, args }); + this.args = args; } onLoaded() { @@ -35,7 +36,7 @@ export default class DialView extends BaseElement { const peerId = createInput({ id: 'peer_id', - className: `${classes['field']} ${classes['fontNormal']}`, + className: `${classes['field']} ${classes['fontNormal']} ${classes['dialField']}`, placeholder: 'Enter user ID' }); diff --git a/lib/views/Settings.js b/lib/views/Settings.js index 8e9161a..a2972e1 100644 --- a/lib/views/Settings.js +++ b/lib/views/Settings.js @@ -14,6 +14,7 @@ export default class Settings extends BaseElement { this.microphone = null; this.speaker = null; this.camera = null; + this.args = args; } onLoaded() { @@ -40,11 +41,16 @@ export default class Settings extends BaseElement { cover.onclick = () => { this.remove(); }; - const popup = createDiv({ id: 'settings_popup', className: classes['popup'] }); + let popup; + if (this.args.isWidget) { + popup = createDiv({ id: 'settings_popup', className: `${classes['popup']} ${classes['widgetpopup']}` }); + } else { + popup = createDiv({ id: 'settings_popup', className: classes['popup'] }); + } const popupHeader = createDiv({ id: 'settings_popup_header', - className: `${classes['popupHeader']}, ${classes['row']} ${classes['center']}` + className: `${classes['popupHeader']}` }); const popupTitle = createDiv({ diff --git a/views/index.html b/views/index.html index 41a00b2..e90ab7e 100644 --- a/views/index.html +++ b/views/index.html @@ -11,20 +11,40 @@
- Sendbird horizontal logo svg icon + Sendbird horizontal logo svg icon
- Calls Sample + Sendbird Calls Quickstart
-
- Choose Sample Type +
+ Choose a type
-
- +
+
+
+ Full-screen +
+
+ Make a call using a full-screen type. Lorem ipsum dolor sit amet, di os consectetur. +
+
+ +
+
+ Widget +
+
+ Make a call using a widget type. Lorem ipsum dolor sit amet, di os consectetur. +
+
+ + + +
diff --git a/views/widget.html b/views/widget.html index 50a1f2e..f8d3869 100644 --- a/views/widget.html +++ b/views/widget.html @@ -11,21 +11,21 @@
Sendbird horizontal logo svg icon -
- Voice Sample Login +
+ Sendbird Calls Quickstart
- This is the Voice Sample page. To try our - Voice widget, please click the button below. + This is the Sendbird Calls Quickstart page.
+ To try our widget, please click the button below.
arrow-down-right
-
+
😀
tooltip-tail-down
From 95ec783fad89b0af94b607cace92b051f48288b3 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Fri, 5 Jun 2020 15:59:11 +0900 Subject: [PATCH 18/47] [CALLS-534]widget Sample App Design Improvements 1. fixed disign issue 2. add application information menu --- envs.js | 5 +--- lib/css/styles.js | 1 + lib/views/CallView.js | 55 +++++++++---------------------------------- 3 files changed, 13 insertions(+), 48 deletions(-) diff --git a/envs.js b/envs.js index 72e3736..a6bcd54 100644 --- a/envs.js +++ b/envs.js @@ -1,7 +1,4 @@ -// export const TEST_APP_ID = BUILD_APP_ID || undefined; -// export const TEST_APP_ID = "6C53468D-A6AB-4160-B586-7F5DB1DBF1D4"; -export const TEST_APP_ID = "7768FD30-5639-48BC-8B25-F5211F3DFEBB"; -// export const TEST_APP_ID = "80ED633C-5301-4BEB-B1DC-0605A395DFAC"; +export const TEST_APP_ID = BUILD_APP_ID || undefined; export const USER_ID = undefined; export const ACCESS_TOKEN = undefined; export const IS_ACCESS_TOKEN_NEEDED = false; diff --git a/lib/css/styles.js b/lib/css/styles.js index 28cd1bf..78594c8 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -808,6 +808,7 @@ const styles = { left: '16px', width: '200px', height: '150px', + backgroundColor: colors.navy300, transition: 'all 1s' }, diff --git a/lib/views/CallView.js b/lib/views/CallView.js index bf3d0f5..1fa4873 100644 --- a/lib/views/CallView.js +++ b/lib/views/CallView.js @@ -14,12 +14,6 @@ export default class CallView extends BaseElement { this.state = state; this.connected = false; - this.peerStateDiv = null; - this.peerMuteIcon = null; - this.peerMuteLabel = null; - this.peerVideoMuteIcon = null; - this.peerVideoMuteLabel = null; - this.addCallListeners(call); } @@ -50,11 +44,11 @@ export default class CallView extends BaseElement { innerText: connectionText }); - this.peerStateDiv = createDiv({ id: 'peer_state', className: `${classes['column']} ${classes['peerStateDiv']} ${classes['invisible']}` }); - this.peerMuteIcon = createDiv({ id: 'peer_mute_icon', className: `${classes['peerMuteIcon']}` }); - this.peerMuteLabel = createLabel({ id: 'peer_mute_label', className: `${classes['peerMuteLabel']} ${classes['fontSmall']}`, innerText: `${remoteUser.userId} audio muted this call` }); - this.peerVideoMuteIcon = createDiv({ id: 'peer_video_mute_icon', className: `${classes['peerVideoMuteIcon']}` }); - this.peerVideoMuteLabel = createLabel({ id: 'peer_video_mute_label', className: `${classes['peerVideoMuteLabel']} ${classes['fontSmall']}`, innerText: 'The other person’s camera has been turned off.' }); + const peerStateDiv = createDiv({ id: 'peer_state', className: `${classes['column']} ${classes['peerStateDiv']} ${classes['invisible']}` }); + const peerMuteIcon = createDiv({ id: 'peer_mute_icon', className: `${classes['peerMuteIcon']}` }); + const peerMuteLabel = createLabel({ id: 'peer_mute_label', className: `${classes['peerMuteLabel']} ${classes['fontSmall']}`, innerText: `${remoteUser.userId} audio muted this call` }); + peerStateDiv.appendChild(peerMuteIcon); + peerStateDiv.appendChild(peerMuteLabel); const buttons = new CallButtons({ call: this.call @@ -85,7 +79,7 @@ export default class CallView extends BaseElement { foreground.appendChild(this.peerProfile); foreground.appendChild(this.peerName); foreground.appendChild(this.connectionInfo); - foreground.appendChild(this.peerStateDiv); + foreground.appendChild(peerStateDiv); this.element.appendChild(background); this.element.appendChild(foreground); @@ -145,48 +139,19 @@ export default class CallView extends BaseElement { } onRemoteAudioMuted(isEnabled) { + const peerStateDiv = this.element.querySelector('#peer_state'); if (isEnabled) { - if (!hasClassName(this.peerStateDiv, classes['invisible'])) { - this.peerStateDiv.classList.add(classes['invisible']); - this.peerStateDiv.removeChild(this.peerMuteIcon); - this.peerStateDiv.removeChild(this.peerMuteLabel); - } else{ - this.peerStateDiv.removeChild(this.peerMuteIcon); - this.peerStateDiv.removeChild(this.peerMuteLabel); - } + peerStateDiv.classList.add(classes['invisible']); } else { - if (hasClassName(this.peerStateDiv, classes['invisible'])) { - this.peerStateDiv.classList.remove(classes['invisible']); - this.peerStateDiv.appendChild(this.peerMuteIcon); - this.peerStateDiv.appendChild(this.peerMuteLabel); - } else { - this.peerStateDiv.appendChild(this.peerMuteIcon); - this.peerStateDiv.appendChild(this.peerMuteLabel); - } + peerStateDiv.classList.remove(classes['invisible']); } } onRemoteVideoMuted(isEnabled) { if (isEnabled) { this.remoteMediaViewDiv.classList.remove(classes['videoHidden']); - if (!hasClassName(this.peerStateDiv, classes['invisible'])) { - this.peerStateDiv.classList.add(classes['invisible']); - this.peerStateDiv.removeChild(this.peerVideoMuteIcon); - this.peerStateDiv.removeChild(this.peerVideoMuteLabel); - } else{ - this.peerStateDiv.removeChild(this.peerVideoMuteIcon); - this.peerStateDiv.removeChild(this.peerVideoMuteLabel); - } } else { this.remoteMediaViewDiv.classList.add(classes['videoHidden']); - if (hasClassName(this.peerStateDiv, classes['invisible'])) { - this.peerStateDiv.classList.remove(classes['invisible']); - this.peerStateDiv.appendChild(this.peerVideoMuteIcon); - this.peerStateDiv.appendChild(this.peerVideoMuteLabel); - } else{ - this.peerStateDiv.appendChild(this.peerVideoMuteIcon); - this.peerStateDiv.appendChild(this.peerVideoMuteLabel); - } } } @@ -238,7 +203,9 @@ export default class CallView extends BaseElement { toggleVideo() { if (this.call.isLocalVideoEnabled) { this.call.stopVideo(); + this.localMediaView.classList.add(classes['videoHidden']); } else { + this.localMediaView.classList.remove(classes['videoHidden']); this.call.startVideo(); } } From 4f7864adda0cbe4b6def16c5678bef42448bba36 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Fri, 5 Jun 2020 16:41:19 +0900 Subject: [PATCH 19/47] [CALLS-534]widget Sample App Design Improvements small video view add border radius. --- lib/css/styles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/css/styles.js b/lib/css/styles.js index 78594c8..837f60f 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -808,6 +808,7 @@ const styles = { left: '16px', width: '200px', height: '150px', + borderRadius: '8px', backgroundColor: colors.navy300, transition: 'all 1s' }, From 651d9772e530edd2bf0725717ea51bbfcddab430 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Fri, 12 Jun 2020 18:16:36 +0900 Subject: [PATCH 20/47] [CALLS-534]widget Sample App Design Improvements apply review. --- lib/css/styles.js | 8 ++++---- views/index.html | 15 +++------------ 2 files changed, 7 insertions(+), 16 deletions(-) diff --git a/lib/css/styles.js b/lib/css/styles.js index 837f60f..093fd0c 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -831,12 +831,12 @@ const styles = { }, btnDecline: { - backgroundColor: 'rgba(0, 0, 0, 0.12)', - backgroundImage: `url(${declineWhiteIcon})`, + backgroundColor: '#e53157', + backgroundImage: `url(${endIcon})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', '&:hover' : { - backgroundColor: 'rgba(0, 0, 0, 0.38)', + backgroundColor: '#a30e2d', } }, @@ -844,7 +844,7 @@ const styles = { btnClose: { width: '248px', - height: '64px', + height: '48px', border: 'none', borderRadius: '4px', marginBottom: '28px', diff --git a/views/index.html b/views/index.html index e90ab7e..3303f01 100644 --- a/views/index.html +++ b/views/index.html @@ -12,7 +12,7 @@
Sendbird horizontal logo svg icon -
+
Sendbird Calls Quickstart
@@ -24,7 +24,7 @@ Full-screen
- Make a call using a full-screen type. Lorem ipsum dolor sit amet, di os consectetur. + Make a call using a full-screen type.
@@ -33,18 +33,9 @@ Widget
- Make a call using a widget type. Lorem ipsum dolor sit amet, di os consectetur. + Make a call using a widget type.
- - - -
From c6d24d18f18bcc923e31e68eb47cbf6e92b88eee Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Fri, 12 Jun 2020 18:24:47 +0900 Subject: [PATCH 21/47] [CALLS-534] widget Sample App Design Improvements apply review --- lib/css/styles.js | 6 +++--- lib/views/CallButtons.js | 4 ---- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/lib/css/styles.js b/lib/css/styles.js index 093fd0c..61b2d7d 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -831,12 +831,12 @@ const styles = { }, btnDecline: { - backgroundColor: '#e53157', - backgroundImage: `url(${endIcon})`, + backgroundColor: 'rgba(0, 0, 0, 0.12)', + backgroundImage: `url(${declineWhiteIcon})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', '&:hover' : { - backgroundColor: '#a30e2d', + backgroundColor: 'rgba(0, 0, 0, 0.38)', } }, diff --git a/lib/views/CallButtons.js b/lib/views/CallButtons.js index 1575ab3..e4fbf7e 100644 --- a/lib/views/CallButtons.js +++ b/lib/views/CallButtons.js @@ -128,8 +128,6 @@ export default class CallButtons extends BaseElement { setAccepting() { this.hideActiveButtons(); this.showButtons(this.endBtn); - - replaceClassName(this.endBtn.icon, classes['btnDecline'], classes['btnEnd']); } setDialing() { @@ -140,8 +138,6 @@ export default class CallButtons extends BaseElement { setRinging() { this.hideActiveButtons(); this.showButtons(this.muteBtn, this.videoBtn, this.acceptBtn, this.endBtn); - - replaceClassName(this.endBtn.icon, classes['btnEnd'], classes['btnDecline']); } setConnected() { From 469f7b003d0b896a782c39bf72cba3a9cd3e1941 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Fri, 12 Jun 2020 18:50:43 +0900 Subject: [PATCH 22/47] [CALLS-534]widget Sample App Design Improvements remove place holder text --- views/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/views/index.html b/views/index.html index 3303f01..32f73a2 100644 --- a/views/index.html +++ b/views/index.html @@ -24,7 +24,7 @@ Full-screen
- Make a call using a full-screen type. + Make a call using a full-screen type.
@@ -33,7 +33,7 @@ Widget
- Make a call using a widget type. + Make a call using a widget type.
From bea207b11ce75244c857f9ae44b1424a87a5d877 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Mon, 15 Jun 2020 14:11:40 +0900 Subject: [PATCH 23/47] [CALLS-534]widget Sample App Design Improvements apply review --- css/main.css | 367 ++++++++++++++++++++---------------------- lib/views/CallView.js | 3 +- views/index.html | 16 +- 3 files changed, 186 insertions(+), 200 deletions(-) diff --git a/css/main.css b/css/main.css index c2989a9..16de1de 100644 --- a/css/main.css +++ b/css/main.css @@ -1,112 +1,126 @@ :root { - --navy-50: #f6f8fc; - --navy-100: #dee2f2; - --navy-200: #c9d0e6; - --navy-900: #212242; - --white: #ffffff; - --purple-300: #825eeb; - --green-300: #1fcca1; - --green-400: #00998c; - --red-300: #f24d6b; - --red-400: #d92148; - --mute-gray: rgba(255, 255, 255, 0.2); + --navy-50: #f6f8fc; + --navy-100: #dee2f2; + --navy-200: #c9d0e6; + --navy-600: #595e8a; + --navy-900: #212242; + --white: #ffffff; + --purple-300: #825eeb; + --green-300: #1fcca1; + --green-400: #00998c; + --red-300: #f24d6b; + --red-400: #d92148; + --mute-gray: rgba(255, 255, 255, 0.2); } body { - margin: 0 auto; - overflow: hidden; + margin: 0 auto; + overflow: hidden; } .center { - align-items: center; - justify-content: center; + align-items: center; + justify-content: center; } .column { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .row { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .row-reverse { - display:flex; - flex-direction: row-reverse; + display:flex; + flex-direction: row-reverse; } .margin-top-24 { - margin-top: 24px; + margin-top: 24px; } .margin-right-24 { - margin-right: 24px; + margin-right: 24px; } .btn { - display: flex; - cursor: pointer; - align-items: center; - justify-content: center; - text-decoration: none; - border-radius: 4px; - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: normal; - text-align: center; - height: 40px; + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + border-radius: 4px; + font-family: Avenir Next; + font-size: 14px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.43; + letter-spacing: normal; + text-align: center; + height: 40px; } .btn-primary { - background-color: var(--purple-300); - color: var(--white); + background-color: var(--purple-300); + color: var(--white); } .btn.btn-big { - width: 180px; - height: 50px; - margin-left: 16px; - margin-right: 16px; + width: 180px; + height: 50px; + margin-left: 16px; + margin-right: 16px; } .btn.btn-mid { - width: 80px; - height: 40px; - margin-bottom: 23px; - margin-left: 10px; + width: 80px; + height: 40px; + margin-bottom: 23px; + margin-left: 10px; } .btn-block { - width: 100%; + width: 100%; +} + +.title-choice-type { + width: 92px; + height: 20px; + font-family: Avenir Next; + font-size: 14px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.43; + letter-spacing: -0.1px; + color: var(--navy-600); } -.choose-background { - display: inline-block; - width: 260px; - height: 158px; - border-radius: 4px; - border: solid 1px #dee2f2; - background-color: var(--white); - cursor: pointer; +.choice-item { + display: inline-block; + width: 260px; + height: 158px; + border-radius: 4px; + border: solid 1px #dee2f2; + background-color: var(--white); + cursor: pointer; } -.choose-background:hover { +.choice-item:hover { border: solid 1px var(--purple-300); } -.choose-title { +.title-choice-item { margin: 24px 24px 8px 24px; width: 88px; height: 24px; font-family: Avenir Next; font-size: 18px; - font-weight: 500; + font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.33; @@ -114,7 +128,7 @@ body { color: var(--navy-900); } -.choose-desc { +.desc-choice-item { width: 212px; height: 60px; margin-left: 24px; @@ -125,20 +139,20 @@ body { font-style: normal; line-height: 1.43; letter-spacing: -0.1px; - color: #595e8a; + color: var(--navy-600); } .title { - height: 32px; - font-family: Avenir Next; - font-size: 24px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.33; - letter-spacing: -0.25px; - color: inherit; + height: 32px; + font-family: Avenir Next; + font-size: 24px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.33; + letter-spacing: -0.25px; + color: inherit; } .demi { @@ -146,156 +160,129 @@ body { } .input-title { - display: inline-block; - margin-top: 6px; - height: 12px; - font-family: Avenir Next; - font-size: 12px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: 1; - letter-spacing: normal; - color: var(--navy-900); - margin-bottom: 6px; + display: inline-block; + margin-top: 6px; + height: 12px; + font-family: Avenir Next; + font-size: 12px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1; + letter-spacing: normal; + color: var(--navy-900); + margin-bottom: 6px; } .input-title:first-of-type { - margin-top: 38px; + margin-top: 38px; } .desc { - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: -0.1px; - color: #595e8a; -} - -.desc-light { - width: 100%; - height: 20px; - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: normal; - text-align: center; - letter-spacing: -0.1px; - color: #595e8a; - margin-bottom: 24px; -} - -.desc-quick { - width: 275px; - height: 32px; font-family: Avenir Next; - font-size: 24px; - font-weight: 600; + font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; - line-height: 1.33; - letter-spacing: -0.25px; - color: var(--navy-900); + line-height: 1.43; + letter-spacing: -0.1px; + color: var(--navy-600); } -.choose-a-type { - width: 92px; +.desc-light { + width: 100%; height: 20px; font-family: Avenir Next; font-size: 14px; - font-weight: 500; + font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.43; + letter-spacing: normal; + text-align: center; letter-spacing: -0.1px; - color: #595e8a; + color: var(--navy-600); + margin-bottom: 24px; } .smile-face { - margin-top: 32px; - margin-bottom: 16px; - width: 40px; - height: 40px; - font-family: AppleColorEmoji; - font-size: 40px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1; - letter-spacing: normal; - color: var(--white); + margin-top: 32px; + margin-bottom: 16px; + width: 40px; + height: 40px; + font-family: AppleColorEmoji; + font-size: 40px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1; + letter-spacing: normal; + color: var(--white); } .wrapper { - display: flex; - width: 100vw; - height: 100vh; - overflow: hidden; + display: flex; + width: 100vw; + height: 100vh; + overflow: hidden; } .container { - display: flex; - width: 100%; - height: 100%; + display: flex; + width: 100%; + height: 100%; } .backdrop { - -webkit-backdrop-filter: blur(2px); - backdrop-filter: blur(2px); + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); } .bg-white { - background-color: var(--white); - color: var(--navy-900); + background-color: var(--white); + color: var(--navy-900); } .bg-light { - background-color: var(--navy-50); - color: var(--navy-900); + background-color: var(--navy-50); + color: var(--navy-900); } .bg-dark { - background-color: var(--navy-900); - color: var(--white); + background-color: var(--navy-900); + color: var(--white); } .bg-white .desc { - color: #595e8a; + color: var(--navy-600); } .bg-light .desc { - color: #595e8a; + color: var(--navy-600); } .bg-dark .desc { - color: var(--white); + color: var(--white); } .hidden { - display: none; + display: none; } .invisible { - visibility: hidden; + visibility: hidden; } button label { - cursor: inherit; + cursor: inherit; } .ic-logo-horizontal-purple-300 { - display: block; - width: 180px; - height: 40px; - background: url("../img/ic-logo-horizontal-purple-300.svg"); - margin-bottom: 24px; + display: block; + width: 180px; + height: 40px; + background: url("../img/ic-logo-horizontal-purple-300.svg"); + margin-bottom: 24px; } .ic-logo-horizontal { @@ -307,51 +294,51 @@ button label { } .voice-sample-page { - height: 32px; - margin-bottom: 16px; - text-align: center; + height: 32px; + margin-bottom: 16px; + text-align: center; } .voice-sample-desc { - width: 308px; - height: 40px; - margin-bottom: 28px; - text-align: center; + width: 308px; + height: 40px; + margin-bottom: 28px; + text-align: center; } .ic-arrow-down-right-24 { - display: block; - width: 32px; - height: 32px; - object-fit: contain; + display: block; + width: 32px; + height: 32px; + object-fit: contain; } .widget-tooltip { - position: absolute; - right: 18px; - bottom: 112px; - width: 296px; - height: 108px; - border-radius: 4px; - box-shadow: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(33, 34, 66, 0.08), 0 8px 10px 1px rgba(33, 34, 66, 0.12); - border: solid 1px #c9d0e6; + position: absolute; + right: 18px; + bottom: 112px; + width: 296px; + height: 108px; + border-radius: 4px; + box-shadow: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(33, 34, 66, 0.08), 0 8px 10px 1px rgba(33, 34, 66, 0.12); + border: solid 1px #c9d0e6; } .img-tooltip-tail-down { - position: absolute; - right: 16px; - bottom: -8px; - width: 0; - height: 0; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-top: 8px solid white; + position: absolute; + right: 16px; + bottom: -8px; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-top: 8px solid white; } .widget { - position: absolute; - right: 16px; - bottom: 16px; + position: absolute; + right: 16px; + bottom: 16px; } ::-webkit-scrollbar { diff --git a/lib/views/CallView.js b/lib/views/CallView.js index 1fa4873..6ca1b5d 100644 --- a/lib/views/CallView.js +++ b/lib/views/CallView.js @@ -116,8 +116,7 @@ export default class CallView extends BaseElement { this.showSecondaryInfo(); } - - console.log(endedCall.getCallLog); + this.sendToChildren('ended'); }; diff --git a/views/index.html b/views/index.html index 32f73a2..7849e0c 100644 --- a/views/index.html +++ b/views/index.html @@ -12,27 +12,27 @@
Sendbird horizontal logo svg icon -
+
Sendbird Calls Quickstart
-
+
Choose a type
-
-
+
+
Full-screen
-
+
Make a call using a full-screen type.
-
-
+
+
Widget
-
+
Make a call using a widget type.
From eaa4516725eafc8c0e8b7e204d277561248ab446 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Mon, 15 Jun 2020 16:03:15 +0900 Subject: [PATCH 24/47] [CALLS-534]widget Sample App Design Improvements apply review --- css/main.css | 66 ++++------------- img/ic-logo-horizontal-purple-300.svg | 3 - .../{ic-call-filled.svg => ic-call-white.svg} | 0 lib/css/styles.js | 17 +---- views/index.html | 70 +++++++++---------- views/widget.html | 2 +- 6 files changed, 49 insertions(+), 109 deletions(-) delete mode 100644 img/ic-logo-horizontal-purple-300.svg rename lib/assets/{ic-call-filled.svg => ic-call-white.svg} (100%) diff --git a/css/main.css b/css/main.css index 16de1de..cfc6453 100644 --- a/css/main.css +++ b/css/main.css @@ -16,6 +16,13 @@ body { margin: 0 auto; overflow: hidden; + font-family: Avenir Next; + font-size: 14px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.43; + letter-spacing: normal; } .center { @@ -46,6 +53,10 @@ body { margin-right: 24px; } +.font-weight-demi { + font-weight: 600; +} + .btn { display: flex; cursor: pointer; @@ -53,13 +64,6 @@ body { justify-content: center; text-decoration: none; border-radius: 4px; - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: normal; text-align: center; height: 40px; } @@ -90,12 +94,6 @@ body { .title-choice-type { width: 92px; height: 20px; - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; letter-spacing: -0.1px; color: var(--navy-600); } @@ -118,11 +116,7 @@ body { margin: 24px 24px 8px 24px; width: 88px; height: 24px; - font-family: Avenir Next; font-size: 18px; - font-weight: normal; - font-stretch: normal; - font-style: normal; line-height: 1.33; letter-spacing: -0.25px; color: var(--navy-900); @@ -132,12 +126,6 @@ body { width: 212px; height: 60px; margin-left: 24px; - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; letter-spacing: -0.1px; color: var(--navy-600); } @@ -145,31 +133,18 @@ body { .title { height: 32px; - font-family: Avenir Next; font-size: 24px; - font-weight: normal; - font-stretch: normal; - font-style: normal; line-height: 1.33; letter-spacing: -0.25px; color: inherit; } -.demi { - font-weight: 600; -} - .input-title { display: inline-block; margin-top: 6px; height: 12px; - font-family: Avenir Next; font-size: 12px; - font-weight: normal; - font-stretch: normal; - font-style: normal; line-height: 1; - letter-spacing: normal; color: var(--navy-900); margin-bottom: 6px; } @@ -179,12 +154,6 @@ body { } .desc { - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; letter-spacing: -0.1px; color: var(--navy-600); } @@ -192,13 +161,6 @@ body { .desc-light { width: 100%; height: 20px; - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: normal; text-align: center; letter-spacing: -0.1px; color: var(--navy-600); @@ -212,11 +174,7 @@ body { height: 40px; font-family: AppleColorEmoji; font-size: 40px; - font-weight: normal; - font-stretch: normal; - font-style: normal; line-height: 1; - letter-spacing: normal; color: var(--white); } @@ -281,7 +239,7 @@ button label { display: block; width: 180px; height: 40px; - background: url("../img/ic-logo-horizontal-purple-300.svg"); + background: url("../img/ic-logo-horizontal.svg"); margin-bottom: 24px; } diff --git a/img/ic-logo-horizontal-purple-300.svg b/img/ic-logo-horizontal-purple-300.svg deleted file mode 100644 index 1c3c7d4..0000000 --- a/img/ic-logo-horizontal-purple-300.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/lib/assets/ic-call-filled.svg b/lib/assets/ic-call-white.svg similarity index 100% rename from lib/assets/ic-call-filled.svg rename to lib/assets/ic-call-white.svg diff --git a/lib/css/styles.js b/lib/css/styles.js index 61b2d7d..0a6ad83 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -19,7 +19,7 @@ import declineBlackIcon from '../assets/ic-decline-black.svg'; import endIcon from '../assets/ic-callkit-end.svg'; import toastErrorIcon from '../assets/ic-error-20.svg'; import toastCloseBtn from '../assets/ic-close-20.svg'; -import widgetIcon from '../assets/ic-call-filled.svg'; +import widgetIcon from '../assets/ic-call-white.svg'; import settingsIcon from '../assets/ic-settings.svg'; import settingsCloseIcon from '../assets/ic-close-black-20.svg'; import widgetCloseIcon from '../assets/ic-close-24.svg'; @@ -225,7 +225,6 @@ const styles = { /*** views ***/ view: { boxSizing: 'border-box', - // width: '100vw', width: '100%', height: '100%', padding: '24px', @@ -379,8 +378,6 @@ const styles = { lineHeight: 'normal', letterSpacing: 'normal', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale' }, fontNormal: { @@ -392,8 +389,6 @@ const styles = { lineHeight: '1.43', letterSpacing: 'normal', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale' }, fontMidBig: { @@ -405,8 +400,6 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale' }, font16: { @@ -418,8 +411,6 @@ const styles = { lineHeight: '1.25', letterSpacing: '-0.15px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale' }, font20: { @@ -430,8 +421,6 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale' }, font24: { @@ -443,8 +432,6 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale' }, fontBig: { @@ -457,8 +444,6 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale' }, fontHeavy: { diff --git a/views/index.html b/views/index.html index 7849e0c..aebafaf 100644 --- a/views/index.html +++ b/views/index.html @@ -1,44 +1,44 @@ - - - - - Sample - + + + + + Sample + - -
-
- Sendbird horizontal logo svg icon -
- Sendbird Calls Quickstart -
-
- Choose a type -
-
-
-
- Full-screen + +
+
+ Sendbird horizontal logo svg icon +
+ Sendbird Calls Quickstart +
+
+ Choose a type +
+
+
+
+ Full-screen +
+
+ Make a call using a full-screen type. +
-
- Make a call using a full-screen type. -
-
-
-
- Widget -
-
- Make a call using a widget type. +
+
+ Widget +
+
+ Make a call using a widget type. +
-
-
-
-
- +
+
+
+ diff --git a/views/widget.html b/views/widget.html index f8d3869..3a0437b 100644 --- a/views/widget.html +++ b/views/widget.html @@ -10,7 +10,7 @@
- Sendbird horizontal logo svg icon + Sendbird horizontal logo svg icon
Sendbird Calls Quickstart
From 4a106807dec3a2c77240798bfd2991272d0322ce Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Mon, 15 Jun 2020 18:07:25 +0900 Subject: [PATCH 25/47] rollback_#1 rollback_#1 --- views/index.html | 62 ++++++++++++++++++++++++------------------------ 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/views/index.html b/views/index.html index 7849e0c..c6e942c 100644 --- a/views/index.html +++ b/views/index.html @@ -2,43 +2,43 @@ - - - - Sample + + + + Sample -
-
- Sendbird horizontal logo svg icon -
- Sendbird Calls Quickstart -
-
- Choose a type -
-
-
-
- Full-screen -
-
- Make a call using a full-screen type. -
-
+
+
+ Sendbird horizontal logo svg icon +
+ Sendbird Calls Quickstart +
+
+ Choose a type +
+
+
+
+ Full-screen +
+
+ Make a call using a full-screen type. +
+
-
-
- Widget -
-
- Make a call using a widget type. -
-
-
+
+
+ Widget +
+
+ Make a call using a widget type. +
+
+
From 5eedc69c1c15e8564db79af64e45a4ad6addbaaa Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Mon, 15 Jun 2020 18:14:57 +0900 Subject: [PATCH 26/47] Update index.html --- views/index.html | 62 ++++++++++++++++++++++++------------------------ 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/views/index.html b/views/index.html index aebafaf..5766663 100644 --- a/views/index.html +++ b/views/index.html @@ -2,43 +2,43 @@ - - - - Sample + + + + Sample -
-
- Sendbird horizontal logo svg icon -
- Sendbird Calls Quickstart -
-
- Choose a type -
-
-
-
- Full-screen -
-
- Make a call using a full-screen type. -
-
+
+
+ Sendbird horizontal logo svg icon +
+ Sendbird Calls Quickstart +
+
+ Choose a type +
+
+
+
+ Full-screen +
+
+ Make a call using a full-screen type. +
+
-
-
- Widget -
-
- Make a call using a widget type. -
-
-
+
+
+ Widget +
+
+ Make a call using a widget type. +
+
+
From 402171271350a9091d28af1f658883e3c531cc8a Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Mon, 15 Jun 2020 18:24:40 +0900 Subject: [PATCH 27/47] [CALLS-534]widget Sample App Design Improvements rollback_again_#1 --- css/main.css | 352 ++++++++++++++++++++++++------------------ lib/views/CallView.js | 3 +- views/index.html | 44 +++--- 3 files changed, 225 insertions(+), 174 deletions(-) diff --git a/css/main.css b/css/main.css index cfc6453..a2f0e2a 100644 --- a/css/main.css +++ b/css/main.css @@ -1,56 +1,48 @@ :root { - --navy-50: #f6f8fc; - --navy-100: #dee2f2; - --navy-200: #c9d0e6; - --navy-600: #595e8a; - --navy-900: #212242; - --white: #ffffff; - --purple-300: #825eeb; - --green-300: #1fcca1; - --green-400: #00998c; - --red-300: #f24d6b; - --red-400: #d92148; - --mute-gray: rgba(255, 255, 255, 0.2); + --navy-50: #f6f8fc; + --navy-100: #dee2f2; + --navy-200: #c9d0e6; + --navy-900: #212242; + --white: #ffffff; + --purple-300: #825eeb; + --green-300: #1fcca1; + --green-400: #00998c; + --red-300: #f24d6b; + --red-400: #d92148; + --mute-gray: rgba(255, 255, 255, 0.2); } body { - margin: 0 auto; - overflow: hidden; - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: normal; + margin: 0 auto; + overflow: hidden; } .center { - align-items: center; - justify-content: center; + align-items: center; + justify-content: center; } .column { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .row { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .row-reverse { - display:flex; - flex-direction: row-reverse; + display:flex; + flex-direction: row-reverse; } .margin-top-24 { - margin-top: 24px; + margin-top: 24px; } .margin-right-24 { - margin-right: 24px; + margin-right: 24px; } .font-weight-demi { @@ -58,189 +50,245 @@ body { } .btn { - display: flex; - cursor: pointer; - align-items: center; - justify-content: center; - text-decoration: none; - border-radius: 4px; - text-align: center; - height: 40px; + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + border-radius: 4px; + font-family: Avenir Next; + font-size: 14px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.43; + letter-spacing: normal; + text-align: center; + height: 40px; } .btn-primary { - background-color: var(--purple-300); - color: var(--white); + background-color: var(--purple-300); + color: var(--white); } .btn.btn-big { - width: 180px; - height: 50px; - margin-left: 16px; - margin-right: 16px; + width: 180px; + height: 50px; + margin-left: 16px; + margin-right: 16px; } .btn.btn-mid { - width: 80px; - height: 40px; - margin-bottom: 23px; - margin-left: 10px; + width: 80px; + height: 40px; + margin-bottom: 23px; + margin-left: 10px; } .btn-block { - width: 100%; -} - -.title-choice-type { - width: 92px; - height: 20px; - letter-spacing: -0.1px; - color: var(--navy-600); + width: 100%; } -.choice-item { - display: inline-block; - width: 260px; - height: 158px; - border-radius: 4px; - border: solid 1px #dee2f2; - background-color: var(--white); - cursor: pointer; +.choose-background { + display: inline-block; + width: 260px; + height: 158px; + border-radius: 4px; + border: solid 1px #dee2f2; + background-color: var(--white); + cursor: pointer; } -.choice-item:hover { +.choose-background:hover { border: solid 1px var(--purple-300); } -.title-choice-item { +.choose-title { margin: 24px 24px 8px 24px; width: 88px; height: 24px; font-size: 18px; + font-weight: 500; + font-stretch: normal; + font-style: normal; line-height: 1.33; letter-spacing: -0.25px; color: var(--navy-900); } -.desc-choice-item { +.choose-desc { width: 212px; height: 60px; margin-left: 24px; letter-spacing: -0.1px; - color: var(--navy-600); + color: #595e8a; } .title { - height: 32px; - font-size: 24px; - line-height: 1.33; - letter-spacing: -0.25px; - color: inherit; + height: 32px; + font-family: Avenir Next; + font-size: 24px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.33; + letter-spacing: -0.25px; + color: inherit; } .input-title { - display: inline-block; - margin-top: 6px; - height: 12px; - font-size: 12px; - line-height: 1; - color: var(--navy-900); - margin-bottom: 6px; + display: inline-block; + margin-top: 6px; + height: 12px; + font-family: Avenir Next; + font-size: 12px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: 1; + letter-spacing: normal; + color: var(--navy-900); + margin-bottom: 6px; } .input-title:first-of-type { - margin-top: 38px; + margin-top: 38px; } .desc { - letter-spacing: -0.1px; - color: var(--navy-600); + font-family: Avenir Next; + font-size: 14px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.43; + letter-spacing: -0.1px; + color: #595e8a; } .desc-light { - width: 100%; + width: 100%; + height: 20px; + font-family: Avenir Next; + font-size: 14px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.43; + letter-spacing: normal; + text-align: center; + letter-spacing: -0.1px; + color: #595e8a; + margin-bottom: 24px; +} + +.desc-quick { + width: 275px; + height: 32px; + font-family: Avenir Next; + font-size: 24px; + font-weight: 600; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.33; + letter-spacing: -0.25px; + color: var(--navy-900); +} + +.choose-a-type { + width: 92px; height: 20px; - text-align: center; + font-family: Avenir Next; + font-size: 14px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: 1.43; letter-spacing: -0.1px; - color: var(--navy-600); - margin-bottom: 24px; + color: #595e8a; } .smile-face { - margin-top: 32px; - margin-bottom: 16px; - width: 40px; - height: 40px; - font-family: AppleColorEmoji; - font-size: 40px; - line-height: 1; - color: var(--white); + margin-top: 32px; + margin-bottom: 16px; + width: 40px; + height: 40px; + font-family: AppleColorEmoji; + font-size: 40px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1; + letter-spacing: normal; + color: var(--white); } .wrapper { - display: flex; - width: 100vw; - height: 100vh; - overflow: hidden; + display: flex; + width: 100vw; + height: 100vh; + overflow: hidden; } .container { - display: flex; - width: 100%; - height: 100%; + display: flex; + width: 100%; + height: 100%; } .backdrop { - -webkit-backdrop-filter: blur(2px); - backdrop-filter: blur(2px); + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); } .bg-white { - background-color: var(--white); - color: var(--navy-900); + background-color: var(--white); + color: var(--navy-900); } .bg-light { - background-color: var(--navy-50); - color: var(--navy-900); + background-color: var(--navy-50); + color: var(--navy-900); } .bg-dark { - background-color: var(--navy-900); - color: var(--white); + background-color: var(--navy-900); + color: var(--white); } .bg-white .desc { - color: var(--navy-600); + color: #595e8a; } .bg-light .desc { - color: var(--navy-600); + color: #595e8a; } .bg-dark .desc { - color: var(--white); + color: var(--white); } .hidden { - display: none; + display: none; } .invisible { - visibility: hidden; + visibility: hidden; } button label { - cursor: inherit; + cursor: inherit; } .ic-logo-horizontal-purple-300 { - display: block; - width: 180px; - height: 40px; - background: url("../img/ic-logo-horizontal.svg"); - margin-bottom: 24px; + display: block; + width: 180px; + height: 40px; + background: url("../img/ic-logo-horizontal-purple-300.svg"); + margin-bottom: 24px; } .ic-logo-horizontal { @@ -252,51 +300,51 @@ button label { } .voice-sample-page { - height: 32px; - margin-bottom: 16px; - text-align: center; + height: 32px; + margin-bottom: 16px; + text-align: center; } .voice-sample-desc { - width: 308px; - height: 40px; - margin-bottom: 28px; - text-align: center; + width: 308px; + height: 40px; + margin-bottom: 28px; + text-align: center; } .ic-arrow-down-right-24 { - display: block; - width: 32px; - height: 32px; - object-fit: contain; + display: block; + width: 32px; + height: 32px; + object-fit: contain; } .widget-tooltip { - position: absolute; - right: 18px; - bottom: 112px; - width: 296px; - height: 108px; - border-radius: 4px; - box-shadow: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(33, 34, 66, 0.08), 0 8px 10px 1px rgba(33, 34, 66, 0.12); - border: solid 1px #c9d0e6; + position: absolute; + right: 18px; + bottom: 112px; + width: 296px; + height: 108px; + border-radius: 4px; + box-shadow: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(33, 34, 66, 0.08), 0 8px 10px 1px rgba(33, 34, 66, 0.12); + border: solid 1px #c9d0e6; } .img-tooltip-tail-down { - position: absolute; - right: 16px; - bottom: -8px; - width: 0; - height: 0; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-top: 8px solid white; + position: absolute; + right: 16px; + bottom: -8px; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-top: 8px solid white; } .widget { - position: absolute; - right: 16px; - bottom: 16px; + position: absolute; + right: 16px; + bottom: 16px; } ::-webkit-scrollbar { diff --git a/lib/views/CallView.js b/lib/views/CallView.js index 6ca1b5d..1fa4873 100644 --- a/lib/views/CallView.js +++ b/lib/views/CallView.js @@ -116,7 +116,8 @@ export default class CallView extends BaseElement { this.showSecondaryInfo(); } - + + console.log(endedCall.getCallLog); this.sendToChildren('ended'); }; diff --git a/views/index.html b/views/index.html index 5766663..7efeab8 100644 --- a/views/index.html +++ b/views/index.html @@ -10,30 +10,32 @@
-
- Sendbird horizontal logo svg icon -
- Sendbird Calls Quickstart -
-
- Choose a type -
-
-
-
- Full-screen +
+ Sendbird horizontal logo svg icon +
+ Sendbird Calls Quickstart
-
- Make a call using a full-screen type. +
+ Choose a type
-
+
+
+
+ Full-screen +
+
+ Make a call using a full-screen type. +
+
-
-
- Widget -
-
- Make a call using a widget type. +
+
+ Widget +
+
+ Make a call using a widget type. +
+
From 6fef8f29e547884e76d35c37031fe1f8f7b72f86 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Mon, 15 Jun 2020 18:30:42 +0900 Subject: [PATCH 28/47] [CALLS-534]widget Sample App Design Improvements change main.css indent --- css/main.css | 334 +++++++++++++++++++++++++-------------------------- 1 file changed, 167 insertions(+), 167 deletions(-) diff --git a/css/main.css b/css/main.css index a2f0e2a..c9fa750 100644 --- a/css/main.css +++ b/css/main.css @@ -1,48 +1,48 @@ :root { - --navy-50: #f6f8fc; - --navy-100: #dee2f2; - --navy-200: #c9d0e6; - --navy-900: #212242; - --white: #ffffff; - --purple-300: #825eeb; - --green-300: #1fcca1; - --green-400: #00998c; - --red-300: #f24d6b; - --red-400: #d92148; - --mute-gray: rgba(255, 255, 255, 0.2); + --navy-50: #f6f8fc; + --navy-100: #dee2f2; + --navy-200: #c9d0e6; + --navy-900: #212242; + --white: #ffffff; + --purple-300: #825eeb; + --green-300: #1fcca1; + --green-400: #00998c; + --red-300: #f24d6b; + --red-400: #d92148; + --mute-gray: rgba(255, 255, 255, 0.2); } body { - margin: 0 auto; - overflow: hidden; + margin: 0 auto; + overflow: hidden; } .center { - align-items: center; - justify-content: center; + align-items: center; + justify-content: center; } .column { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .row { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .row-reverse { - display:flex; - flex-direction: row-reverse; + display:flex; + flex-direction: row-reverse; } .margin-top-24 { - margin-top: 24px; + margin-top: 24px; } .margin-right-24 { - margin-right: 24px; + margin-right: 24px; } .font-weight-demi { @@ -50,54 +50,54 @@ body { } .btn { - display: flex; - cursor: pointer; - align-items: center; - justify-content: center; - text-decoration: none; - border-radius: 4px; - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: normal; - text-align: center; - height: 40px; + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + border-radius: 4px; + font-family: Avenir Next; + font-size: 14px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.43; + letter-spacing: normal; + text-align: center; + height: 40px; } .btn-primary { - background-color: var(--purple-300); - color: var(--white); + background-color: var(--purple-300); + color: var(--white); } .btn.btn-big { - width: 180px; - height: 50px; - margin-left: 16px; - margin-right: 16px; + width: 180px; + height: 50px; + margin-left: 16px; + margin-right: 16px; } .btn.btn-mid { - width: 80px; - height: 40px; - margin-bottom: 23px; - margin-left: 10px; + width: 80px; + height: 40px; + margin-bottom: 23px; + margin-left: 10px; } .btn-block { - width: 100%; + width: 100%; } .choose-background { - display: inline-block; - width: 260px; - height: 158px; - border-radius: 4px; - border: solid 1px #dee2f2; - background-color: var(--white); - cursor: pointer; + display: inline-block; + width: 260px; + height: 158px; + border-radius: 4px; + border: solid 1px #dee2f2; + background-color: var(--white); + cursor: pointer; } .choose-background:hover { @@ -127,61 +127,61 @@ body { .title { - height: 32px; - font-family: Avenir Next; - font-size: 24px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.33; - letter-spacing: -0.25px; - color: inherit; + height: 32px; + font-family: Avenir Next; + font-size: 24px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.33; + letter-spacing: -0.25px; + color: inherit; } .input-title { - display: inline-block; - margin-top: 6px; - height: 12px; - font-family: Avenir Next; - font-size: 12px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: 1; - letter-spacing: normal; - color: var(--navy-900); - margin-bottom: 6px; + display: inline-block; + margin-top: 6px; + height: 12px; + font-family: Avenir Next; + font-size: 12px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: 1; + letter-spacing: normal; + color: var(--navy-900); + margin-bottom: 6px; } .input-title:first-of-type { - margin-top: 38px; + margin-top: 38px; } .desc { - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: -0.1px; - color: #595e8a; + font-family: Avenir Next; + font-size: 14px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.43; + letter-spacing: -0.1px; + color: #595e8a; } .desc-light { - width: 100%; - height: 20px; - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: normal; - text-align: center; - letter-spacing: -0.1px; - color: #595e8a; - margin-bottom: 24px; + width: 100%; + height: 20px; + font-family: Avenir Next; + font-size: 14px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.43; + letter-spacing: normal; + text-align: center; + letter-spacing: -0.1px; + color: #595e8a; + margin-bottom: 24px; } .desc-quick { @@ -212,83 +212,83 @@ body { } .smile-face { - margin-top: 32px; - margin-bottom: 16px; - width: 40px; - height: 40px; - font-family: AppleColorEmoji; - font-size: 40px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1; - letter-spacing: normal; - color: var(--white); + margin-top: 32px; + margin-bottom: 16px; + width: 40px; + height: 40px; + font-family: AppleColorEmoji; + font-size: 40px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1; + letter-spacing: normal; + color: var(--white); } .wrapper { - display: flex; - width: 100vw; - height: 100vh; - overflow: hidden; + display: flex; + width: 100vw; + height: 100vh; + overflow: hidden; } .container { - display: flex; - width: 100%; - height: 100%; + display: flex; + width: 100%; + height: 100%; } .backdrop { - -webkit-backdrop-filter: blur(2px); - backdrop-filter: blur(2px); + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); } .bg-white { - background-color: var(--white); - color: var(--navy-900); + background-color: var(--white); + color: var(--navy-900); } .bg-light { - background-color: var(--navy-50); - color: var(--navy-900); + background-color: var(--navy-50); + color: var(--navy-900); } .bg-dark { - background-color: var(--navy-900); - color: var(--white); + background-color: var(--navy-900); + color: var(--white); } .bg-white .desc { - color: #595e8a; + color: #595e8a; } .bg-light .desc { - color: #595e8a; + color: #595e8a; } .bg-dark .desc { - color: var(--white); + color: var(--white); } .hidden { - display: none; + display: none; } .invisible { - visibility: hidden; + visibility: hidden; } button label { - cursor: inherit; + cursor: inherit; } .ic-logo-horizontal-purple-300 { - display: block; - width: 180px; - height: 40px; - background: url("../img/ic-logo-horizontal-purple-300.svg"); - margin-bottom: 24px; + display: block; + width: 180px; + height: 40px; + background: url("../img/ic-logo-horizontal-purple-300.svg"); + margin-bottom: 24px; } .ic-logo-horizontal { @@ -300,51 +300,51 @@ button label { } .voice-sample-page { - height: 32px; - margin-bottom: 16px; - text-align: center; + height: 32px; + margin-bottom: 16px; + text-align: center; } .voice-sample-desc { - width: 308px; - height: 40px; - margin-bottom: 28px; - text-align: center; + width: 308px; + height: 40px; + margin-bottom: 28px; + text-align: center; } .ic-arrow-down-right-24 { - display: block; - width: 32px; - height: 32px; - object-fit: contain; + display: block; + width: 32px; + height: 32px; + object-fit: contain; } .widget-tooltip { - position: absolute; - right: 18px; - bottom: 112px; - width: 296px; - height: 108px; - border-radius: 4px; - box-shadow: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(33, 34, 66, 0.08), 0 8px 10px 1px rgba(33, 34, 66, 0.12); - border: solid 1px #c9d0e6; + position: absolute; + right: 18px; + bottom: 112px; + width: 296px; + height: 108px; + border-radius: 4px; + box-shadow: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(33, 34, 66, 0.08), 0 8px 10px 1px rgba(33, 34, 66, 0.12); + border: solid 1px #c9d0e6; } .img-tooltip-tail-down { - position: absolute; - right: 16px; - bottom: -8px; - width: 0; - height: 0; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-top: 8px solid white; + position: absolute; + right: 16px; + bottom: -8px; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-top: 8px solid white; } .widget { - position: absolute; - right: 16px; - bottom: 16px; + position: absolute; + right: 16px; + bottom: 16px; } ::-webkit-scrollbar { From aee2995c7b14bd73c259a37c7c1e39bc4c6d76c4 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Mon, 15 Jun 2020 19:12:42 +0900 Subject: [PATCH 29/47] [CALLS-534]widget Sample App Design Improvements last commit version --- css/main.css | 60 ++++++++++++----------------------------------- lib/css/styles.js | 15 ++++++++++++ views/index.html | 44 +++++++++++++++++----------------- views/widget.html | 2 +- 4 files changed, 52 insertions(+), 69 deletions(-) diff --git a/css/main.css b/css/main.css index c9fa750..a4111a9 100644 --- a/css/main.css +++ b/css/main.css @@ -15,6 +15,13 @@ body { margin: 0 auto; overflow: hidden; + font-family: Avenir Next; + font-size: 14px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.43; + letter-spacing: normal; } .center { @@ -56,13 +63,6 @@ body { justify-content: center; text-decoration: none; border-radius: 4px; - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: normal; text-align: center; height: 40px; } @@ -90,7 +90,14 @@ body { width: 100%; } -.choose-background { +.title-choice-type { + width: 92px; + height: 20px; + letter-spacing: -0.1px; + color: var(--navy-600); +} + +.choice-item { display: inline-block; width: 260px; height: 158px; @@ -109,9 +116,6 @@ body { width: 88px; height: 24px; font-size: 18px; - font-weight: 500; - font-stretch: normal; - font-style: normal; line-height: 1.33; letter-spacing: -0.25px; color: var(--navy-900); @@ -128,11 +132,7 @@ body { .title { height: 32px; - font-family: Avenir Next; font-size: 24px; - font-weight: normal; - font-stretch: normal; - font-style: normal; line-height: 1.33; letter-spacing: -0.25px; color: inherit; @@ -142,13 +142,8 @@ body { display: inline-block; margin-top: 6px; height: 12px; - font-family: Avenir Next; font-size: 12px; - font-weight: 500; - font-stretch: normal; - font-style: normal; line-height: 1; - letter-spacing: normal; color: var(--navy-900); margin-bottom: 6px; } @@ -158,12 +153,6 @@ body { } .desc { - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; letter-spacing: -0.1px; color: #595e8a; } @@ -171,13 +160,6 @@ body { .desc-light { width: 100%; height: 20px; - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: normal; text-align: center; letter-spacing: -0.1px; color: #595e8a; @@ -218,11 +200,7 @@ body { height: 40px; font-family: AppleColorEmoji; font-size: 40px; - font-weight: normal; - font-stretch: normal; - font-style: normal; line-height: 1; - letter-spacing: normal; color: var(--white); } @@ -283,14 +261,6 @@ button label { cursor: inherit; } -.ic-logo-horizontal-purple-300 { - display: block; - width: 180px; - height: 40px; - background: url("../img/ic-logo-horizontal-purple-300.svg"); - margin-bottom: 24px; -} - .ic-logo-horizontal { display: block; width: 180px; diff --git a/lib/css/styles.js b/lib/css/styles.js index 0a6ad83..da60533 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -225,6 +225,7 @@ const styles = { /*** views ***/ view: { boxSizing: 'border-box', + // width: '100vw', width: '100%', height: '100%', padding: '24px', @@ -378,6 +379,8 @@ const styles = { lineHeight: 'normal', letterSpacing: 'normal', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' }, fontNormal: { @@ -389,6 +392,8 @@ const styles = { lineHeight: '1.43', letterSpacing: 'normal', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' }, fontMidBig: { @@ -400,6 +405,8 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' }, font16: { @@ -411,6 +418,8 @@ const styles = { lineHeight: '1.25', letterSpacing: '-0.15px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' }, font20: { @@ -421,6 +430,8 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' }, font24: { @@ -432,6 +443,8 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' }, fontBig: { @@ -444,6 +457,8 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' }, fontHeavy: { diff --git a/views/index.html b/views/index.html index 7efeab8..5766663 100644 --- a/views/index.html +++ b/views/index.html @@ -10,32 +10,30 @@
-
- Sendbird horizontal logo svg icon -
- Sendbird Calls Quickstart +
+ Sendbird horizontal logo svg icon +
+ Sendbird Calls Quickstart +
+
+ Choose a type +
+
+
+
+ Full-screen
-
- Choose a type +
+ Make a call using a full-screen type.
-
-
-
- Full-screen -
-
- Make a call using a full-screen type. -
-
+
-
-
- Widget -
-
- Make a call using a widget type. -
-
+
+
+ Widget +
+
+ Make a call using a widget type.
diff --git a/views/widget.html b/views/widget.html index 3a0437b..818daed 100644 --- a/views/widget.html +++ b/views/widget.html @@ -10,7 +10,7 @@
- Sendbird horizontal logo svg icon + Sendbird horizontal logo svg icon
Sendbird Calls Quickstart
From 36f31fac2fdf3b2b02bf45485f1a148d678c1f99 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Mon, 15 Jun 2020 19:29:39 +0900 Subject: [PATCH 30/47] Update main.css 1. remove desc-quick, choose-a-type 2. change css class name --- css/main.css | 33 +++------------------------------ 1 file changed, 3 insertions(+), 30 deletions(-) diff --git a/css/main.css b/css/main.css index a4111a9..3326749 100644 --- a/css/main.css +++ b/css/main.css @@ -107,11 +107,11 @@ body { cursor: pointer; } -.choose-background:hover { +.choice-item:hover { border: solid 1px var(--purple-300); } -.choose-title { +.title-choice-item { margin: 24px 24px 8px 24px; width: 88px; height: 24px; @@ -121,7 +121,7 @@ body { color: var(--navy-900); } -.choose-desc { +.desc-choice-item { width: 212px; height: 60px; margin-left: 24px; @@ -166,33 +166,6 @@ body { margin-bottom: 24px; } -.desc-quick { - width: 275px; - height: 32px; - font-family: Avenir Next; - font-size: 24px; - font-weight: 600; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.33; - letter-spacing: -0.25px; - color: var(--navy-900); -} - -.choose-a-type { - width: 92px; - height: 20px; - font-family: Avenir Next; - font-size: 14px; - font-weight: 500; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: -0.1px; - color: #595e8a; -} - .smile-face { margin-top: 32px; margin-bottom: 16px; From 512cf9888e649d38d2def9eed883de0e6cc28502 Mon Sep 17 00:00:00 2001 From: Cobb Jung Date: Mon, 15 Jun 2020 19:42:25 +0900 Subject: [PATCH 31/47] Fix main.css indentation --- css/main.css | 328 +++++++++++++++++++++++++-------------------------- 1 file changed, 164 insertions(+), 164 deletions(-) diff --git a/css/main.css b/css/main.css index 3326749..a465476 100644 --- a/css/main.css +++ b/css/main.css @@ -1,305 +1,305 @@ :root { - --navy-50: #f6f8fc; - --navy-100: #dee2f2; - --navy-200: #c9d0e6; - --navy-900: #212242; - --white: #ffffff; - --purple-300: #825eeb; - --green-300: #1fcca1; - --green-400: #00998c; - --red-300: #f24d6b; - --red-400: #d92148; - --mute-gray: rgba(255, 255, 255, 0.2); + --navy-50: #f6f8fc; + --navy-100: #dee2f2; + --navy-200: #c9d0e6; + --navy-900: #212242; + --white: #ffffff; + --purple-300: #825eeb; + --green-300: #1fcca1; + --green-400: #00998c; + --red-300: #f24d6b; + --red-400: #d92148; + --mute-gray: rgba(255, 255, 255, 0.2); } body { - margin: 0 auto; - overflow: hidden; - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: normal; + margin: 0 auto; + overflow: hidden; + font-family: Avenir Next; + font-size: 14px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.43; + letter-spacing: normal; } .center { - align-items: center; - justify-content: center; + align-items: center; + justify-content: center; } .column { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .row { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .row-reverse { - display:flex; - flex-direction: row-reverse; + display:flex; + flex-direction: row-reverse; } .margin-top-24 { - margin-top: 24px; + margin-top: 24px; } .margin-right-24 { - margin-right: 24px; + margin-right: 24px; } .font-weight-demi { - font-weight: 600; + font-weight: 600; } .btn { - display: flex; - cursor: pointer; - align-items: center; - justify-content: center; - text-decoration: none; - border-radius: 4px; - text-align: center; - height: 40px; + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + border-radius: 4px; + text-align: center; + height: 40px; } .btn-primary { - background-color: var(--purple-300); - color: var(--white); + background-color: var(--purple-300); + color: var(--white); } .btn.btn-big { - width: 180px; - height: 50px; - margin-left: 16px; - margin-right: 16px; + width: 180px; + height: 50px; + margin-left: 16px; + margin-right: 16px; } .btn.btn-mid { - width: 80px; - height: 40px; - margin-bottom: 23px; - margin-left: 10px; + width: 80px; + height: 40px; + margin-bottom: 23px; + margin-left: 10px; } .btn-block { - width: 100%; + width: 100%; } .title-choice-type { - width: 92px; - height: 20px; - letter-spacing: -0.1px; - color: var(--navy-600); + width: 92px; + height: 20px; + letter-spacing: -0.1px; + color: var(--navy-600); } .choice-item { - display: inline-block; - width: 260px; - height: 158px; - border-radius: 4px; - border: solid 1px #dee2f2; - background-color: var(--white); - cursor: pointer; + display: inline-block; + width: 260px; + height: 158px; + border-radius: 4px; + border: solid 1px #dee2f2; + background-color: var(--white); + cursor: pointer; } .choice-item:hover { - border: solid 1px var(--purple-300); + border: solid 1px var(--purple-300); } .title-choice-item { - margin: 24px 24px 8px 24px; - width: 88px; - height: 24px; - font-size: 18px; - line-height: 1.33; - letter-spacing: -0.25px; - color: var(--navy-900); + margin: 24px 24px 8px 24px; + width: 88px; + height: 24px; + font-size: 18px; + line-height: 1.33; + letter-spacing: -0.25px; + color: var(--navy-900); } .desc-choice-item { - width: 212px; - height: 60px; - margin-left: 24px; - letter-spacing: -0.1px; - color: #595e8a; + width: 212px; + height: 60px; + margin-left: 24px; + letter-spacing: -0.1px; + color: #595e8a; } .title { - height: 32px; - font-size: 24px; - line-height: 1.33; - letter-spacing: -0.25px; - color: inherit; + height: 32px; + font-size: 24px; + line-height: 1.33; + letter-spacing: -0.25px; + color: inherit; } .input-title { - display: inline-block; - margin-top: 6px; - height: 12px; - font-size: 12px; - line-height: 1; - color: var(--navy-900); - margin-bottom: 6px; + display: inline-block; + margin-top: 6px; + height: 12px; + font-size: 12px; + line-height: 1; + color: var(--navy-900); + margin-bottom: 6px; } .input-title:first-of-type { - margin-top: 38px; + margin-top: 38px; } .desc { - letter-spacing: -0.1px; - color: #595e8a; + letter-spacing: -0.1px; + color: #595e8a; } .desc-light { - width: 100%; - height: 20px; - text-align: center; - letter-spacing: -0.1px; - color: #595e8a; - margin-bottom: 24px; + width: 100%; + height: 20px; + text-align: center; + letter-spacing: -0.1px; + color: #595e8a; + margin-bottom: 24px; } .smile-face { - margin-top: 32px; - margin-bottom: 16px; - width: 40px; - height: 40px; - font-family: AppleColorEmoji; - font-size: 40px; - line-height: 1; - color: var(--white); + margin-top: 32px; + margin-bottom: 16px; + width: 40px; + height: 40px; + font-family: AppleColorEmoji; + font-size: 40px; + line-height: 1; + color: var(--white); } .wrapper { - display: flex; - width: 100vw; - height: 100vh; - overflow: hidden; + display: flex; + width: 100vw; + height: 100vh; + overflow: hidden; } .container { - display: flex; - width: 100%; - height: 100%; + display: flex; + width: 100%; + height: 100%; } .backdrop { - -webkit-backdrop-filter: blur(2px); - backdrop-filter: blur(2px); + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); } .bg-white { - background-color: var(--white); - color: var(--navy-900); + background-color: var(--white); + color: var(--navy-900); } .bg-light { - background-color: var(--navy-50); - color: var(--navy-900); + background-color: var(--navy-50); + color: var(--navy-900); } .bg-dark { - background-color: var(--navy-900); - color: var(--white); + background-color: var(--navy-900); + color: var(--white); } .bg-white .desc { - color: #595e8a; + color: #595e8a; } .bg-light .desc { - color: #595e8a; + color: #595e8a; } .bg-dark .desc { - color: var(--white); + color: var(--white); } .hidden { - display: none; + display: none; } .invisible { - visibility: hidden; + visibility: hidden; } button label { - cursor: inherit; + cursor: inherit; } .ic-logo-horizontal { - display: block; - width: 180px; - height: 40px; - background: url("../img/ic-logo-horizontal.svg"); - margin-bottom: 24px; + display: block; + width: 180px; + height: 40px; + background: url("../img/ic-logo-horizontal.svg"); + margin-bottom: 24px; } .voice-sample-page { - height: 32px; - margin-bottom: 16px; - text-align: center; + height: 32px; + margin-bottom: 16px; + text-align: center; } .voice-sample-desc { - width: 308px; - height: 40px; - margin-bottom: 28px; - text-align: center; + width: 308px; + height: 40px; + margin-bottom: 28px; + text-align: center; } .ic-arrow-down-right-24 { - display: block; - width: 32px; - height: 32px; - object-fit: contain; + display: block; + width: 32px; + height: 32px; + object-fit: contain; } .widget-tooltip { - position: absolute; - right: 18px; - bottom: 112px; - width: 296px; - height: 108px; - border-radius: 4px; - box-shadow: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(33, 34, 66, 0.08), 0 8px 10px 1px rgba(33, 34, 66, 0.12); - border: solid 1px #c9d0e6; + position: absolute; + right: 18px; + bottom: 112px; + width: 296px; + height: 108px; + border-radius: 4px; + box-shadow: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(33, 34, 66, 0.08), 0 8px 10px 1px rgba(33, 34, 66, 0.12); + border: solid 1px #c9d0e6; } .img-tooltip-tail-down { - position: absolute; - right: 16px; - bottom: -8px; - width: 0; - height: 0; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-top: 8px solid white; + position: absolute; + right: 16px; + bottom: -8px; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-top: 8px solid white; } .widget { - position: absolute; - right: 16px; - bottom: 16px; + position: absolute; + right: 16px; + bottom: 16px; } ::-webkit-scrollbar { - width: 5px; /* 세로축 스크롤바 길이 */ + width: 5px; /* 세로축 스크롤바 길이 */ } ::-webkit-scrollbar-track { - background-color: transparent; + background-color: transparent; } ::-webkit-scrollbar-track-piece { - background-color: transparent; + background-color: transparent; } ::-webkit-scrollbar-thumb { - border-radius: 8px; - background-color: gray; + border-radius: 8px; + background-color: gray; } From 8cea8da1e923619bf7b2f35c9cd1b50647d916b3 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Mon, 15 Jun 2020 19:47:20 +0900 Subject: [PATCH 32/47] [CALLS-534]widget Sample App Design Improvements "this.args = args" remove --- lib/components/Header.js | 1 - lib/components/TabToolBar.js | 1 - lib/views/AppInfoView.js | 2 -- lib/views/CallLogView.js | 1 - lib/views/DialView.js | 1 - lib/views/Settings.js | 1 - 6 files changed, 7 deletions(-) diff --git a/lib/components/Header.js b/lib/components/Header.js index 8a71ef8..8da53bd 100644 --- a/lib/components/Header.js +++ b/lib/components/Header.js @@ -28,7 +28,6 @@ export default class Header extends BaseElement { } ]; - this.args = args; this.parent = parent; } diff --git a/lib/components/TabToolBar.js b/lib/components/TabToolBar.js index 364f419..e3d0f74 100644 --- a/lib/components/TabToolBar.js +++ b/lib/components/TabToolBar.js @@ -6,7 +6,6 @@ export default class TabToolBar extends BaseElement { constructor({ id, className, parent, element, args } = {}) { super({ id, className, parent, element }); this.element = element; - this.args = args; } build() { diff --git a/lib/views/AppInfoView.js b/lib/views/AppInfoView.js index 98fc1bc..c794024 100644 --- a/lib/views/AppInfoView.js +++ b/lib/views/AppInfoView.js @@ -10,8 +10,6 @@ export default class AppInfoView extends BaseElement { className: `${classes['viewSettings']} ${classes['column']} ${classes['center']}`, args }); - - this.args = args; } onLoaded() { diff --git a/lib/views/CallLogView.js b/lib/views/CallLogView.js index 62eb144..a4f52bf 100644 --- a/lib/views/CallLogView.js +++ b/lib/views/CallLogView.js @@ -14,7 +14,6 @@ export default class CallLogView extends BaseElement{ this.callLogQuery = null; this.callLogQueryData = []; - this.args = args; } build() { diff --git a/lib/views/DialView.js b/lib/views/DialView.js index 2a388de..80ff155 100644 --- a/lib/views/DialView.js +++ b/lib/views/DialView.js @@ -13,7 +13,6 @@ export default class DialView extends BaseElement { className: `${classes['container']} ${classes['column']} ${classes['center']} ${classes['view']} ${classes['viewDial']}`, args }); - this.args = args; } onLoaded() { diff --git a/lib/views/Settings.js b/lib/views/Settings.js index a2972e1..66ea4fb 100644 --- a/lib/views/Settings.js +++ b/lib/views/Settings.js @@ -14,7 +14,6 @@ export default class Settings extends BaseElement { this.microphone = null; this.speaker = null; this.camera = null; - this.args = args; } onLoaded() { From c16654a38df911c92228335c45485f5a5240c7c4 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Mon, 15 Jun 2020 19:50:46 +0900 Subject: [PATCH 33/47] [CALLS-534]widget Sample App Design Improvements add '--navy-600' color value. --- css/main.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/main.css b/css/main.css index a465476..89d30c5 100644 --- a/css/main.css +++ b/css/main.css @@ -2,6 +2,7 @@ --navy-50: #f6f8fc; --navy-100: #dee2f2; --navy-200: #c9d0e6; + --navy-600: #595e8a; --navy-900: #212242; --white: #ffffff; --purple-300: #825eeb; From 8a8a7b10b62145a7430155c5c160b2c2c99c1b36 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Mon, 15 Jun 2020 23:33:10 +0900 Subject: [PATCH 34/47] [CALLS-534]widget Sample App Design Improvements apply review --- css/main.css | 4 ++-- lib/views/CallView.js | 1 - views/widget.html | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/css/main.css b/css/main.css index 89d30c5..3650b5b 100644 --- a/css/main.css +++ b/css/main.css @@ -127,7 +127,7 @@ body { height: 60px; margin-left: 24px; letter-spacing: -0.1px; - color: #595e8a; + color: var(--navy-900); } @@ -271,7 +271,7 @@ button label { height: 108px; border-radius: 4px; box-shadow: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(33, 34, 66, 0.08), 0 8px 10px 1px rgba(33, 34, 66, 0.12); - border: solid 1px #c9d0e6; + border: solid 1px var(--navy-200); } .img-tooltip-tail-down { diff --git a/lib/views/CallView.js b/lib/views/CallView.js index 1fa4873..7d0c7da 100644 --- a/lib/views/CallView.js +++ b/lib/views/CallView.js @@ -117,7 +117,6 @@ export default class CallView extends BaseElement { this.showSecondaryInfo(); } - console.log(endedCall.getCallLog); this.sendToChildren('ended'); }; diff --git a/views/widget.html b/views/widget.html index 818daed..453514b 100644 --- a/views/widget.html +++ b/views/widget.html @@ -11,7 +11,7 @@
Sendbird horizontal logo svg icon -
+
Sendbird Calls Quickstart
From 1012806332e74949ec9a1029570c61e6a815a1f6 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Tue, 16 Jun 2020 11:05:01 +0900 Subject: [PATCH 35/47] [CALLS-534]widget Sample App Design Improvements update description in index.html --- css/main.css | 4 ++-- views/index.html | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/css/main.css b/css/main.css index 3650b5b..e3eaaeb 100644 --- a/css/main.css +++ b/css/main.css @@ -92,7 +92,7 @@ body { } .title-choice-type { - width: 92px; + width: 174px; height: 20px; letter-spacing: -0.1px; color: var(--navy-600); @@ -127,7 +127,7 @@ body { height: 60px; margin-left: 24px; letter-spacing: -0.1px; - color: var(--navy-900); + color: var(--navy-600); } diff --git a/views/index.html b/views/index.html index 5766663..20fbfdb 100644 --- a/views/index.html +++ b/views/index.html @@ -16,7 +16,7 @@ Sendbird Calls Quickstart
- Choose a type + Choose an application type
@@ -24,7 +24,7 @@ Full-screen
- Make a call using a full-screen type. + The full-screen application type provides an example of a standalone phone call web app.
@@ -33,7 +33,7 @@ Widget
- Make a call using a widget type. + The widget application type showcases how a phone call may be overlaid on top of an existing web application.
From 0f3c3c669de9c35bdf8c8fc57e693892f1d7dd36 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Tue, 16 Jun 2020 12:38:04 +0900 Subject: [PATCH 36/47] [CALLS-534]widget Sample App Design Improvements color code --> color variable in main.css --- css/main.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/main.css b/css/main.css index e3eaaeb..c7d5f36 100644 --- a/css/main.css +++ b/css/main.css @@ -155,7 +155,7 @@ body { .desc { letter-spacing: -0.1px; - color: #595e8a; + color: var(--navy-600); } .desc-light { @@ -163,7 +163,7 @@ body { height: 20px; text-align: center; letter-spacing: -0.1px; - color: #595e8a; + color: var(--navy-600); margin-bottom: 24px; } @@ -212,7 +212,7 @@ body { } .bg-white .desc { - color: #595e8a; + color: var(--navy-600); } .bg-light .desc { From 956650c86a54ce20594644bbd11eca27e49fd61f Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Tue, 16 Jun 2020 14:45:51 +0900 Subject: [PATCH 37/47] Update main.css --- css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/main.css b/css/main.css index c7d5f36..4ee79dd 100644 --- a/css/main.css +++ b/css/main.css @@ -216,7 +216,7 @@ body { } .bg-light .desc { - color: #595e8a; + color: var(--navy-600); } .bg-dark .desc { From ca3adcf6e7c2f2582e4e242ae79f533609e2a079 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Tue, 16 Jun 2020 16:06:36 +0900 Subject: [PATCH 38/47] [CALLS-534]widget Sample App Design Improvements 1. remove antialiased attribute in text 2. add line break in case of display long nickname --- lib/css/styles.js | 18 ++++-------------- lib/views/CallView.js | 3 ++- 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/lib/css/styles.js b/lib/css/styles.js index da60533..1d89aa3 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -379,8 +379,6 @@ const styles = { lineHeight: 'normal', letterSpacing: 'normal', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale' }, fontNormal: { @@ -392,8 +390,6 @@ const styles = { lineHeight: '1.43', letterSpacing: 'normal', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale' }, fontMidBig: { @@ -405,8 +401,6 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale' }, font16: { @@ -418,8 +412,6 @@ const styles = { lineHeight: '1.25', letterSpacing: '-0.15px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale' }, font20: { @@ -430,8 +422,6 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale' }, font24: { @@ -443,8 +433,6 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale' }, fontBig: { @@ -457,8 +445,6 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale' }, fontHeavy: { @@ -638,6 +624,10 @@ const styles = { `, peerName: ` + min-height: 32px; + height: auto; + text-align: center; + word-break: break-all; margin-bottom: 4px; `, diff --git a/lib/views/CallView.js b/lib/views/CallView.js index 7d0c7da..dabbcf5 100644 --- a/lib/views/CallView.js +++ b/lib/views/CallView.js @@ -24,13 +24,14 @@ export default class CallView extends BaseElement { const localUser = this.call.localUser; const remoteUser = this.call.remoteUser; + remoteUser.nickname = "1234567890123456789012345678901234567890"; this.peerProfile = createImg({ src: remoteUser.profileUrl, alt: 'Sendbird voice & video call opponent profile photo', className: classes['remoteProfile'], onerror: (e) => e.target.style.visibility = 'hidden' }); - this.peerName = createLabel({ id: 'peer_name', innerText: remoteUser.userId, className: `${classes['peerName']} ${classes['fontBig']}` }); + this.peerName = createLabel({ id: 'peer_name', innerText: (remoteUser.nickname ? remoteUser.nickname : remoteUser.userId), className: `${classes['peerName']} ${classes['fontBig']}` }); let connectionText; if (this.call.isVideoCall) { From 97767c49425bf5b557eb285d52c6b73b30e22719 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Wed, 17 Jun 2020 15:38:39 +0900 Subject: [PATCH 39/47] Update main.css indent change 4 --> 2 --- css/main.css | 330 +++++++++++++++++++++++++-------------------------- 1 file changed, 165 insertions(+), 165 deletions(-) diff --git a/css/main.css b/css/main.css index 4ee79dd..027367a 100644 --- a/css/main.css +++ b/css/main.css @@ -1,306 +1,306 @@ :root { - --navy-50: #f6f8fc; - --navy-100: #dee2f2; - --navy-200: #c9d0e6; - --navy-600: #595e8a; - --navy-900: #212242; - --white: #ffffff; - --purple-300: #825eeb; - --green-300: #1fcca1; - --green-400: #00998c; - --red-300: #f24d6b; - --red-400: #d92148; - --mute-gray: rgba(255, 255, 255, 0.2); + --navy-50: #f6f8fc; + --navy-100: #dee2f2; + --navy-200: #c9d0e6; + --navy-600: #595e8a; + --navy-900: #212242; + --white: #ffffff; + --purple-300: #825eeb; + --green-300: #1fcca1; + --green-400: #00998c; + --red-300: #f24d6b; + --red-400: #d92148; + --mute-gray: rgba(255, 255, 255, 0.2); } body { - margin: 0 auto; - overflow: hidden; - font-family: Avenir Next; - font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: normal; + margin: 0 auto; + overflow: hidden; + font-family: Avenir Next; + font-size: 14px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.43; + letter-spacing: normal; } .center { - align-items: center; - justify-content: center; + align-items: center; + justify-content: center; } .column { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .row { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .row-reverse { - display:flex; - flex-direction: row-reverse; + display:flex; + flex-direction: row-reverse; } .margin-top-24 { - margin-top: 24px; + margin-top: 24px; } .margin-right-24 { - margin-right: 24px; + margin-right: 24px; } .font-weight-demi { - font-weight: 600; + font-weight: 600; } .btn { - display: flex; - cursor: pointer; - align-items: center; - justify-content: center; - text-decoration: none; - border-radius: 4px; - text-align: center; - height: 40px; + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + border-radius: 4px; + text-align: center; + height: 40px; } .btn-primary { - background-color: var(--purple-300); - color: var(--white); + background-color: var(--purple-300); + color: var(--white); } .btn.btn-big { - width: 180px; - height: 50px; - margin-left: 16px; - margin-right: 16px; + width: 180px; + height: 50px; + margin-left: 16px; + margin-right: 16px; } .btn.btn-mid { - width: 80px; - height: 40px; - margin-bottom: 23px; - margin-left: 10px; + width: 80px; + height: 40px; + margin-bottom: 23px; + margin-left: 10px; } .btn-block { - width: 100%; + width: 100%; } .title-choice-type { - width: 174px; - height: 20px; - letter-spacing: -0.1px; - color: var(--navy-600); + width: 174px; + height: 20px; + letter-spacing: -0.1px; + color: var(--navy-600); } .choice-item { - display: inline-block; - width: 260px; - height: 158px; - border-radius: 4px; - border: solid 1px #dee2f2; - background-color: var(--white); - cursor: pointer; + display: inline-block; + width: 260px; + height: 158px; + border-radius: 4px; + border: solid 1px #dee2f2; + background-color: var(--white); + cursor: pointer; } .choice-item:hover { - border: solid 1px var(--purple-300); + border: solid 1px var(--purple-300); } .title-choice-item { - margin: 24px 24px 8px 24px; - width: 88px; - height: 24px; - font-size: 18px; - line-height: 1.33; - letter-spacing: -0.25px; - color: var(--navy-900); + margin: 24px 24px 8px 24px; + width: 88px; + height: 24px; + font-size: 18px; + line-height: 1.33; + letter-spacing: -0.25px; + color: var(--navy-900); } .desc-choice-item { - width: 212px; - height: 60px; - margin-left: 24px; - letter-spacing: -0.1px; - color: var(--navy-600); + width: 212px; + height: 60px; + margin-left: 24px; + letter-spacing: -0.1px; + color: var(--navy-600); } .title { - height: 32px; - font-size: 24px; - line-height: 1.33; - letter-spacing: -0.25px; - color: inherit; + height: 32px; + font-size: 24px; + line-height: 1.33; + letter-spacing: -0.25px; + color: inherit; } .input-title { - display: inline-block; - margin-top: 6px; - height: 12px; - font-size: 12px; - line-height: 1; - color: var(--navy-900); - margin-bottom: 6px; + display: inline-block; + margin-top: 6px; + height: 12px; + font-size: 12px; + line-height: 1; + color: var(--navy-900); + margin-bottom: 6px; } .input-title:first-of-type { - margin-top: 38px; + margin-top: 38px; } .desc { - letter-spacing: -0.1px; - color: var(--navy-600); + letter-spacing: -0.1px; + color: var(--navy-600); } .desc-light { - width: 100%; - height: 20px; - text-align: center; - letter-spacing: -0.1px; - color: var(--navy-600); - margin-bottom: 24px; + width: 100%; + height: 20px; + text-align: center; + letter-spacing: -0.1px; + color: var(--navy-600); + margin-bottom: 24px; } .smile-face { - margin-top: 32px; - margin-bottom: 16px; - width: 40px; - height: 40px; - font-family: AppleColorEmoji; - font-size: 40px; - line-height: 1; - color: var(--white); + margin-top: 32px; + margin-bottom: 16px; + width: 40px; + height: 40px; + font-family: AppleColorEmoji; + font-size: 40px; + line-height: 1; + color: var(--white); } .wrapper { - display: flex; - width: 100vw; - height: 100vh; - overflow: hidden; + display: flex; + width: 100vw; + height: 100vh; + overflow: hidden; } .container { - display: flex; - width: 100%; - height: 100%; + display: flex; + width: 100%; + height: 100%; } .backdrop { - -webkit-backdrop-filter: blur(2px); - backdrop-filter: blur(2px); + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); } .bg-white { - background-color: var(--white); - color: var(--navy-900); + background-color: var(--white); + color: var(--navy-900); } .bg-light { - background-color: var(--navy-50); - color: var(--navy-900); + background-color: var(--navy-50); + color: var(--navy-900); } .bg-dark { - background-color: var(--navy-900); - color: var(--white); + background-color: var(--navy-900); + color: var(--white); } .bg-white .desc { - color: var(--navy-600); + color: var(--navy-600); } .bg-light .desc { - color: var(--navy-600); + color: var(--navy-600); } .bg-dark .desc { - color: var(--white); + color: var(--white); } .hidden { - display: none; + display: none; } .invisible { - visibility: hidden; + visibility: hidden; } button label { - cursor: inherit; + cursor: inherit; } .ic-logo-horizontal { - display: block; - width: 180px; - height: 40px; - background: url("../img/ic-logo-horizontal.svg"); - margin-bottom: 24px; + display: block; + width: 180px; + height: 40px; + background: url("../img/ic-logo-horizontal.svg"); + margin-bottom: 24px; } .voice-sample-page { - height: 32px; - margin-bottom: 16px; - text-align: center; + height: 32px; + margin-bottom: 16px; + text-align: center; } .voice-sample-desc { - width: 308px; - height: 40px; - margin-bottom: 28px; - text-align: center; + width: 308px; + height: 40px; + margin-bottom: 28px; + text-align: center; } .ic-arrow-down-right-24 { - display: block; - width: 32px; - height: 32px; - object-fit: contain; + display: block; + width: 32px; + height: 32px; + object-fit: contain; } .widget-tooltip { - position: absolute; - right: 18px; - bottom: 112px; - width: 296px; - height: 108px; - border-radius: 4px; - box-shadow: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(33, 34, 66, 0.08), 0 8px 10px 1px rgba(33, 34, 66, 0.12); - border: solid 1px var(--navy-200); + position: absolute; + right: 18px; + bottom: 112px; + width: 296px; + height: 108px; + border-radius: 4px; + box-shadow: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(33, 34, 66, 0.08), 0 8px 10px 1px rgba(33, 34, 66, 0.12); + border: solid 1px var(--navy-200); } .img-tooltip-tail-down { - position: absolute; - right: 16px; - bottom: -8px; - width: 0; - height: 0; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-top: 8px solid white; + position: absolute; + right: 16px; + bottom: -8px; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-top: 8px solid white; } .widget { - position: absolute; - right: 16px; - bottom: 16px; + position: absolute; + right: 16px; + bottom: 16px; } ::-webkit-scrollbar { - width: 5px; /* 세로축 스크롤바 길이 */ + width: 5px; /* 세로축 스크롤바 길이 */ } ::-webkit-scrollbar-track { - background-color: transparent; + background-color: transparent; } ::-webkit-scrollbar-track-piece { - background-color: transparent; + background-color: transparent; } ::-webkit-scrollbar-thumb { - border-radius: 8px; - background-color: gray; + border-radius: 8px; + background-color: gray; } From 7c36634d99f0e3d956a544b09a07991e7c6ce47f Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Wed, 17 Jun 2020 15:41:13 +0900 Subject: [PATCH 40/47] [CALLS-534]widget Sample App Design Improvements Design QA apply 1. text antialiasing off 2. add shdow widget button --- css/main.css | 3 +++ lib/css/styles.js | 15 +++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/css/main.css b/css/main.css index 027367a..f42fcdd 100644 --- a/css/main.css +++ b/css/main.css @@ -23,6 +23,8 @@ body { font-style: normal; line-height: 1.43; letter-spacing: normal; + --webkit-font-smooth: none; + -moz-osx-font-smoothing: none; } .center { @@ -117,6 +119,7 @@ body { width: 88px; height: 24px; font-size: 18px; + font-weight: 500; line-height: 1.33; letter-spacing: -0.25px; color: var(--navy-900); diff --git a/lib/css/styles.js b/lib/css/styles.js index 1d89aa3..a45f402 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -379,6 +379,8 @@ const styles = { lineHeight: 'normal', letterSpacing: 'normal', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'none', + '-moz-osx-font-smoothing': 'none' }, fontNormal: { @@ -390,6 +392,8 @@ const styles = { lineHeight: '1.43', letterSpacing: 'normal', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'none', + '-moz-osx-font-smoothing': 'none' }, fontMidBig: { @@ -401,6 +405,8 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'none', + '-moz-osx-font-smoothing': 'none' }, font16: { @@ -412,6 +418,8 @@ const styles = { lineHeight: '1.25', letterSpacing: '-0.15px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'none', + '-moz-osx-font-smoothing': 'none' }, font20: { @@ -422,6 +430,8 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'none', + '-moz-osx-font-smoothing': 'none' }, font24: { @@ -433,6 +443,8 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'none', + '-moz-osx-font-smoothing': 'none' }, fontBig: { @@ -445,6 +457,8 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'none', + '-moz-osx-font-smoothing': 'none' }, fontHeavy: { @@ -1080,6 +1094,7 @@ const styles = { backgroundImage: `url(${widgetIcon})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', + boxShadow: '0 5px 8px -4px rgba(33, 34, 66, 0.04), 0 5px 22px 4px rgba(33, 34, 66, 0.08), 0 12px 17px 2px rgba(33, 34, 66, 0.12)', marginBottom: '32px' }, From e2410a144715f3d14094e45005c3b4a29d74b21c Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Wed, 17 Jun 2020 23:01:06 +0900 Subject: [PATCH 41/47] [CALLS-534]widget Sample App Design Improvements Design QA issue apply 1. default text color change 2. Tab bar "dial" -> "Dial" 3. change option height top 32px 4. settingsButton hover bug fixed 5. Call View Button position change in widget. 6. widget vidwo call radius apply 7. Dia view placeholder color change 8. application info popup text color change 9. GNB divider color change 10. Toast noti position change --- css/main.css | 26 ++++++++++++-- lib/components/Menu.js | 8 +++++ lib/components/TabToolBar.js | 4 +-- lib/css/styles.js | 69 +++++++++++++++++++++--------------- lib/views/AppInfoView.js | 6 ++-- lib/views/CallButtons.js | 8 ++++- lib/views/CallView.js | 13 ++++--- lib/views/LoginView.js | 2 +- 8 files changed, 93 insertions(+), 43 deletions(-) diff --git a/css/main.css b/css/main.css index f42fcdd..64d58cb 100644 --- a/css/main.css +++ b/css/main.css @@ -2,10 +2,12 @@ --navy-50: #f6f8fc; --navy-100: #dee2f2; --navy-200: #c9d0e6; + --navy-400: #8A92BA; --navy-600: #595e8a; --navy-900: #212242; --white: #ffffff; --purple-300: #825eeb; + --purple-400: #6440C4; --green-300: #1fcca1; --green-400: #00998c; --red-300: #f24d6b; @@ -13,6 +15,14 @@ --mute-gray: rgba(255, 255, 255, 0.2); } +input:-moz-read-only { /* For Firefox */ + color: var(--navy-600); +} + +input:read-only { + color: var(--navy-600); +} + body { margin: 0 auto; overflow: hidden; @@ -22,9 +32,8 @@ body { font-stretch: normal; font-style: normal; line-height: 1.43; + color: var(--navy-900); letter-spacing: normal; - --webkit-font-smooth: none; - -moz-osx-font-smoothing: none; } .center { @@ -307,3 +316,16 @@ button label { border-radius: 8px; background-color: gray; } + +::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + color: var(--navy-400); +} +::-moz-placeholder { /* Firefox 19+ */ + color: var(--navy-400); +} +:-ms-input-placeholder { /* IE 10+ */ + color: var(--navy-400); +} +:-moz-placeholder { /* Firefox 18- */ + color: var(--navy-400); +} diff --git a/lib/components/Menu.js b/lib/components/Menu.js index 347dafa..5a5deba 100644 --- a/lib/components/Menu.js +++ b/lib/components/Menu.js @@ -11,6 +11,14 @@ export default class Menu extends BaseElement { } build() { + this.element.addEventListener('mouseenter', function(){ + this.style.backgroundColor = '#6440c4'; + }); + + this.element.addEventListener('mouseout', function(){ + this.style.backgroundColor = ''; + }); + this.menuItems = createDiv({ className: `${classes['menuItems']} ${classes['hidden']}` }); this.items.forEach((item) => { diff --git a/lib/components/TabToolBar.js b/lib/components/TabToolBar.js index e3d0f74..d982f9e 100644 --- a/lib/components/TabToolBar.js +++ b/lib/components/TabToolBar.js @@ -15,7 +15,7 @@ export default class TabToolBar extends BaseElement { } const btnDial = createDiv({ id: 'btn_tab_dial', className: `${classes['btnTab']}` }); const icoTabDial = createDiv({id: 'ico_tab_dial', className: `${classes['tabIco']} ${classes['dialActive']}`}); - const btnDialCaption = createParagraph({id: 'btn_dial_caption', innerText: 'dial', className: `${classes['fontNormal']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabActive']}`}); + const btnDialCaption = createParagraph({id: 'btn_dial_caption', innerText: 'Dial', className: `${classes['fontSmall']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabActive']}`}); btnDial.appendChild(icoTabDial); btnDial.appendChild(btnDialCaption); @@ -37,7 +37,7 @@ export default class TabToolBar extends BaseElement { const btnCallLog = createDiv({id: 'btn_tab_calllog', className: `${classes['btnTab']}`}); const icoCallLog = createDiv({id: 'ico_tab_callog', className: `${classes['tabIco']} ${classes['callLogDeactive']}`}); - const btnCalllogCaption = createParagraph({id: 'btn_calllog_caption', innerText: 'History', className: `${classes['fontNormal']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabDeactive']}`}); + const btnCalllogCaption = createParagraph({id: 'btn_calllog_caption', innerText: 'History', className: `${classes['fontSmall']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabDeactive']}`}); btnCallLog.appendChild(icoCallLog); btnCallLog.appendChild(btnCalllogCaption); diff --git a/lib/css/styles.js b/lib/css/styles.js index a45f402..a690c72 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -182,8 +182,8 @@ const styles = { }, profileSmall: { - width: '32px', - height: '32px', + width: '40px', + height: '40px', borderRadius: '50%', marginLeft: '24px', marginRight: '16px', @@ -376,11 +376,10 @@ const styles = { fontWeight: 'normal', fontStretch: 'normal', fontStyle: 'normal', + color: colors.navy900, lineHeight: 'normal', letterSpacing: 'normal', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'none', - '-moz-osx-font-smoothing': 'none' }, fontNormal: { @@ -389,11 +388,10 @@ const styles = { fontWeight: 'normal', fontStretch: 'normal', fontStyle: 'normal', + color: colors.navy900, lineHeight: '1.43', letterSpacing: 'normal', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'none', - '-moz-osx-font-smoothing': 'none' }, fontMidBig: { @@ -402,11 +400,10 @@ const styles = { fontWeight: 'normal', fontStretch: 'normal', fontStyle: 'normal', + color: colors.navy900, lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'none', - '-moz-osx-font-smoothing': 'none' }, font16: { @@ -415,11 +412,10 @@ const styles = { fontWeight: 'normal', fontStretch: 'normal', fontStyle: 'normal', + color: colors.navy900, lineHeight: '1.25', letterSpacing: '-0.15px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'none', - '-moz-osx-font-smoothing': 'none' }, font20: { @@ -430,8 +426,6 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'none', - '-moz-osx-font-smoothing': 'none' }, font24: { @@ -440,11 +434,10 @@ const styles = { fontWeight: 'normal', fontStretch: 'normal', fontStyle: 'normal', + color: colors.navy900, lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'none', - '-moz-osx-font-smoothing': 'none' }, fontBig: { @@ -457,8 +450,6 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', - '-webkit-font-smoothing': 'none', - '-moz-osx-font-smoothing': 'none' }, fontHeavy: { @@ -469,6 +460,14 @@ const styles = { fontWeight: 600 }, + fontColorWhite: { + color: colors.white + }, + + fonrReadOnlyColor: { + color: colors.navy600 + }, + /*** tab ***/ tabToolBar: { position: 'relative', @@ -630,8 +629,8 @@ const styles = { remoteProfile: ` display: block; - width: 120px; - height: 120px; + width: 80px; + height: 80px; border-radius: 50%; object-fit: contain; margin-bottom: 24px; @@ -681,14 +680,19 @@ const styles = { display: block; `, + callButtons: { position: 'relative' }, + callButtonsWidget: { + position: 'absolute', + bottom: '40px' + }, + btnCircle: { - width: '56px', - height: '56px', - border: 'solid 1px var(--purple-300)', + width: '64px', + height: '64px', borderRadius: '50%', backgroundColor: colors.white, borderColor: 'transparent', @@ -706,9 +710,8 @@ const styles = { }, btnCall: { - marginLeft: '16px', - marginRight: '16px', - marginBottom: '8px', + marginLeft: '10px', + marginRight: '10px' }, btnVideoAccept: { @@ -775,6 +778,7 @@ const styles = { backgroundColor: '#e53157', backgroundImage: `url(${endIcon})`, backgroundRepeat: 'no-repeat', + backgroundSize: '32px', backgroundPosition: 'center', '&:hover' : { backgroundColor: '#a30e2d', @@ -830,6 +834,10 @@ const styles = { overflow: 'hidden' }, + callBackgroundWidget: { + borderRadius: '8px' + }, + callForeground: { position: 'relative' }, @@ -1067,6 +1075,7 @@ const styles = { borderRadius: '8px' }, '& $toast': { + position: 'relative', left: 'auto', width: '80%', margin: 'auto' @@ -1139,7 +1148,8 @@ const styles = { width: '200px', borderRadius: '4px', boxShadow: '0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(33, 34, 66, 0.08), 0 8px 10px 1px rgba(33, 34, 66, 0.12)', - backgroundColor: colors.white + backgroundColor: colors.white, + zIndex: '1' }, menuItem: { @@ -1150,6 +1160,7 @@ const styles = { paddingLeft: '16px', paddingRight: '16px', width: '100%', + height: '32px !important', textAlign: 'left', '&:hover': { backgroundColor: colors.navy50 @@ -1161,7 +1172,7 @@ const styles = { height: '20px', marginLeft: '8px', marginRight: '16px', - backgroundColor: colors.navy900 + backgroundColor: colors.purple400 }, headerButtons: { @@ -1179,9 +1190,9 @@ const styles = { backgroundImage: `url(${settingsIcon})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', - '&:hover': { - backgroundColor: colors.purple400 - }, + // '&:hover': { + // backgroundColor: colors.purple400 + // }, zIndex: 10, }, diff --git a/lib/views/AppInfoView.js b/lib/views/AppInfoView.js index c794024..7a8136f 100644 --- a/lib/views/AppInfoView.js +++ b/lib/views/AppInfoView.js @@ -60,9 +60,8 @@ export default class AppInfoView extends BaseElement { }); const applicationName = createLabel({ id: 'app_name', - readonly: 'readonly', innerText: 'Voice & Video', - className: `${classes['appInfoLabel']} ${classes['appName']} ${classes['fontNormal']}` + className: `${classes['appInfoLabel']} ${classes['appName']} ${classes['fontNormal']} ${classes['fonrReadOnlyColor']}` }); applicationInfoContainer.appendChild(applicationNameLabel); @@ -81,9 +80,8 @@ export default class AppInfoView extends BaseElement { const applicationID = createLabel({ id: 'app_id', - readonly: 'readonly', innerText: this.args.appId, - className: `${classes['appInfoLabel']} ${classes['appInfoIdLabel']} ${classes['fontNormal']}` + className: `${classes['appInfoLabel']} ${classes['appInfoIdLabel']} ${classes['fontNormal']} ${classes['fonrReadOnlyColor']}` }); const appInfoIdCopy = createDiv({ diff --git a/lib/views/CallButtons.js b/lib/views/CallButtons.js index e4fbf7e..3d1e719 100644 --- a/lib/views/CallButtons.js +++ b/lib/views/CallButtons.js @@ -19,7 +19,13 @@ export default class CallButtons extends BaseElement { } build() { - const element = createDiv({ className: `${classes['row']} ${classes['center']} ${classes['callButtons']}` }); + let element = null; + if (this.args.isWidget) { + element = createDiv({ className: `${classes['row']} ${classes['center']} ${classes['callButtonsWidget']}` }); + } else { + element = createDiv({ className: `${classes['row']} ${classes['center']} ${classes['callButtons']}` }); + } + this.element = element; if (this.call.isVideoCall) { diff --git a/lib/views/CallView.js b/lib/views/CallView.js index dabbcf5..74213c0 100644 --- a/lib/views/CallView.js +++ b/lib/views/CallView.js @@ -31,7 +31,7 @@ export default class CallView extends BaseElement { className: classes['remoteProfile'], onerror: (e) => e.target.style.visibility = 'hidden' }); - this.peerName = createLabel({ id: 'peer_name', innerText: (remoteUser.nickname ? remoteUser.nickname : remoteUser.userId), className: `${classes['peerName']} ${classes['fontBig']}` }); + this.peerName = createLabel({ id: 'peer_name', innerText: (remoteUser.nickname ? remoteUser.nickname : remoteUser.userId), className: `${classes['peerName']} ${classes['fontBig']} ${classes['fontDemi']}` }); let connectionText; if (this.call.isVideoCall) { @@ -41,13 +41,13 @@ export default class CallView extends BaseElement { } this.connectionInfo = createLabel({ id: 'conn_info_label', - className: `${classes['connectionInfo']} ${classes['fontNormal']}`, + className: `${classes['connectionInfo']} ${classes['fontNormal']} ${classes['fontColorWhite']}`, innerText: connectionText }); const peerStateDiv = createDiv({ id: 'peer_state', className: `${classes['column']} ${classes['peerStateDiv']} ${classes['invisible']}` }); const peerMuteIcon = createDiv({ id: 'peer_mute_icon', className: `${classes['peerMuteIcon']}` }); - const peerMuteLabel = createLabel({ id: 'peer_mute_label', className: `${classes['peerMuteLabel']} ${classes['fontSmall']}`, innerText: `${remoteUser.userId} audio muted this call` }); + const peerMuteLabel = createLabel({ id: 'peer_mute_label', className: `${classes['peerMuteLabel']} ${classes['fontSmall']} ${classes['fontColorWhite']}`, innerText: `${remoteUser.userId} audio muted this call` }); peerStateDiv.appendChild(peerMuteIcon); peerStateDiv.appendChild(peerMuteLabel); @@ -71,7 +71,12 @@ export default class CallView extends BaseElement { this.call.setLocalMediaView(this.localMediaView); this.call.setRemoteMediaView(this.remoteMediaView); - const background = createDiv({ className: classes['callBackground'] }); + let background = null; + if (this.args.isWidget) { + background = createDiv({ className: `${classes['callBackground']} ${classes['callBackgroundWidget']}` }); + } else { + background = createDiv({ className: classes['callBackground'] }); + } const foreground = createDiv({ className: `${classes['column']} ${classes['center']} ${classes['callForeground']}` }); background.appendChild(this.remoteMediaViewDiv); diff --git a/lib/views/LoginView.js b/lib/views/LoginView.js index 1bde781..8f1a6c2 100644 --- a/lib/views/LoginView.js +++ b/lib/views/LoginView.js @@ -49,7 +49,7 @@ export default class LoginView extends BaseElement { const inputAccessToken = createInput({ id: 'input_access_token', className: `${classes['field']} ${classes['fontNormal']}` }); const btnLogin = createButton({ id: 'btn_login', className: `${classes['btn']} ${classes['btnPrimary']} ${classes['btnMid']} ${classes['loginButton']} ${classes['fontNormal']}`, }); - const loginLabel = createLabel({ id: 'login_label', innerText: 'Sign in' }); + const loginLabel = createLabel({ id: 'login_label', className: `${classes['fontNormal']} ${classes['fontColorWhite']}`, innerText: 'Sign in' }); btnLogin.appendChild(loginLabel); btnLogin.onclick = () => { const appId = inputAppId.value; From 478a8172d1a1d28b372234c25e1f8f0596833a46 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Wed, 17 Jun 2020 23:02:18 +0900 Subject: [PATCH 42/47] Update CallView.js remote test code --- lib/views/CallView.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/views/CallView.js b/lib/views/CallView.js index 74213c0..504b503 100644 --- a/lib/views/CallView.js +++ b/lib/views/CallView.js @@ -24,7 +24,6 @@ export default class CallView extends BaseElement { const localUser = this.call.localUser; const remoteUser = this.call.remoteUser; - remoteUser.nickname = "1234567890123456789012345678901234567890"; this.peerProfile = createImg({ src: remoteUser.profileUrl, alt: 'Sendbird voice & video call opponent profile photo', From 50ec75ca40677add902381da1b3d1b859746acf3 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Thu, 18 Jun 2020 14:28:03 +0900 Subject: [PATCH 43/47] [CALLS-534]widget Sample App Design Improvements 1. set font-smoothing 2. change toast noti position to center in widget --- css/main.css | 3 +++ lib/css/styles.js | 29 +++++++++++++++++++---------- lib/views/DialView.js | 2 +- 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/css/main.css b/css/main.css index 64d58cb..6a31ba9 100644 --- a/css/main.css +++ b/css/main.css @@ -34,6 +34,9 @@ body { line-height: 1.43; color: var(--navy-900); letter-spacing: normal; + text-rendering: optimizeLegibility; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; } .center { diff --git a/lib/css/styles.js b/lib/css/styles.js index a690c72..fb0546d 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -380,6 +380,8 @@ const styles = { lineHeight: 'normal', letterSpacing: 'normal', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' }, fontNormal: { @@ -392,6 +394,8 @@ const styles = { lineHeight: '1.43', letterSpacing: 'normal', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' }, fontMidBig: { @@ -404,6 +408,8 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' }, font16: { @@ -416,6 +422,8 @@ const styles = { lineHeight: '1.25', letterSpacing: '-0.15px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' }, font20: { @@ -426,6 +434,8 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' }, font24: { @@ -438,6 +448,8 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' }, fontBig: { @@ -450,6 +462,8 @@ const styles = { lineHeight: '1.33', letterSpacing: '-0.25px', textRendering: 'optimizelegibility', + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale' }, fontHeavy: { @@ -874,7 +888,7 @@ const styles = { opacity: 0 }, to: { - bottom: '30px', + bottom: '24px', opacity: 1 } }, @@ -891,9 +905,10 @@ const styles = { toast: { visibility: 'hidden', + display: 'inline-flex', position: 'absolute', left: '32px', - bottom: '32px', + bottom: '24px', width: '33%', padding: '14px 16px', zIndex: '200', @@ -1075,10 +1090,8 @@ const styles = { borderRadius: '8px' }, '& $toast': { - position: 'relative', - left: 'auto', - width: '80%', - margin: 'auto' + left: 'calc((100% - 80% - 32px) / 2)', + width: '80%' } }, @@ -1091,7 +1104,6 @@ const styles = { boxShadow: '0 9px 15px -7px rgba(33, 34, 66, 0.04), 0 9px 46px 8px rgba(33, 34, 66, 0.08), 0 24px 38px 3px rgba(33, 34, 66, 0.12)', backgroundColor: colors.white, overflow: 'hidden', - display: 'block' }, widgetIcon: { @@ -1190,9 +1202,6 @@ const styles = { backgroundImage: `url(${settingsIcon})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', - // '&:hover': { - // backgroundColor: colors.purple400 - // }, zIndex: 10, }, diff --git a/lib/views/DialView.js b/lib/views/DialView.js index 80ff155..93b0bb3 100644 --- a/lib/views/DialView.js +++ b/lib/views/DialView.js @@ -30,7 +30,7 @@ export default class DialView extends BaseElement { const dialTitleDiv = createDiv({ id: 'title', className: `${classes['fontBig']} ${classes['fontDemi']} ${classes['dialTitle']}`, innerText: 'Make a call'}); const descDiv = createDiv({id: 'desc_div', innerText: 'Enter the user ID of the user you wish to call, then press one of the video or voice call buttons', - className: `${classes['fontNormal']} ${classes['fontHeavy']} ${classes['dialDesc']}` + className: `${classes['fontNormal']} ${classes['dialDesc']}` }); const peerId = createInput({ From b2cce8240edbccbb7a22e69ab58c0774c5af13b1 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Thu, 18 Jun 2020 15:03:58 +0900 Subject: [PATCH 44/47] [CALLS-534]widget Sample App Design Improvements 1. nickname color font property change. 2. sign-in button font property change --- lib/components/Header.js | 2 +- lib/css/styles.js | 5 +++-- lib/views/DialView.js | 2 +- lib/views/LoginView.js | 2 +- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/lib/components/Header.js b/lib/components/Header.js index 8da53bd..90cbc9a 100644 --- a/lib/components/Header.js +++ b/lib/components/Header.js @@ -48,7 +48,7 @@ export default class Header extends BaseElement { const headerInfo = createDiv({ id: 'header_info', className: `${classes['headerInfo']}` }); const userId = createDiv({ id: 'header_user_id', - className: `${classes['headerUserId']} ${classes['fontNormal']} ${classes['fontHeavy']}`, + className: `${classes['headerUserId']} ${classes['fontMidBig']} ${classes['fontDemi']}`, innerText: this.args.user.userId || '' }); const nickname = createDiv({ diff --git a/lib/css/styles.js b/lib/css/styles.js index fb0546d..a7ec016 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -61,6 +61,7 @@ const colors = { navy800: '#353761', navy900: '#212242', white: '#ffffff', + purple50: '#ededff', purple300: '#825eeb', purple400: '#6440c4', green300: '#1fcca1', @@ -1076,7 +1077,7 @@ const styles = { display: 'block' }, '& $headerNickname': { - display: 'block' + display: 'block', }, '& $formContainer': { boxSizing: 'border-box', @@ -1146,7 +1147,7 @@ const styles = { headerNickname: { display: 'none', - color: colors.navy200 + color: colors.purple50 }, menuItems: { diff --git a/lib/views/DialView.js b/lib/views/DialView.js index 93b0bb3..12a27d5 100644 --- a/lib/views/DialView.js +++ b/lib/views/DialView.js @@ -30,7 +30,7 @@ export default class DialView extends BaseElement { const dialTitleDiv = createDiv({ id: 'title', className: `${classes['fontBig']} ${classes['fontDemi']} ${classes['dialTitle']}`, innerText: 'Make a call'}); const descDiv = createDiv({id: 'desc_div', innerText: 'Enter the user ID of the user you wish to call, then press one of the video or voice call buttons', - className: `${classes['fontNormal']} ${classes['dialDesc']}` + className: `${classes['fontNormal']} ${classes['dialDesc']} ${classes['fontHeavy']}` }); const peerId = createInput({ diff --git a/lib/views/LoginView.js b/lib/views/LoginView.js index 8f1a6c2..32baeeb 100644 --- a/lib/views/LoginView.js +++ b/lib/views/LoginView.js @@ -49,7 +49,7 @@ export default class LoginView extends BaseElement { const inputAccessToken = createInput({ id: 'input_access_token', className: `${classes['field']} ${classes['fontNormal']}` }); const btnLogin = createButton({ id: 'btn_login', className: `${classes['btn']} ${classes['btnPrimary']} ${classes['btnMid']} ${classes['loginButton']} ${classes['fontNormal']}`, }); - const loginLabel = createLabel({ id: 'login_label', className: `${classes['fontNormal']} ${classes['fontColorWhite']}`, innerText: 'Sign in' }); + const loginLabel = createLabel({ id: 'login_label', className: `${classes['fontNormal']} ${classes['fontColorWhite']} ${classes['fontDemi']}`, innerText: 'Sign in' }); btnLogin.appendChild(loginLabel); btnLogin.onclick = () => { const appId = inputAppId.value; From 68b193ec441e442f68350a77dc859dee200be71f Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Fri, 19 Jun 2020 12:27:04 +0900 Subject: [PATCH 45/47] [CALLS-534]widget Sample App Design Improvements Fix typo --- lib/css/styles.js | 2 +- lib/views/AppInfoView.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/css/styles.js b/lib/css/styles.js index a7ec016..7de439c 100644 --- a/lib/css/styles.js +++ b/lib/css/styles.js @@ -479,7 +479,7 @@ const styles = { color: colors.white }, - fonrReadOnlyColor: { + fontReadOnlyColor: { color: colors.navy600 }, diff --git a/lib/views/AppInfoView.js b/lib/views/AppInfoView.js index 7a8136f..7e22a52 100644 --- a/lib/views/AppInfoView.js +++ b/lib/views/AppInfoView.js @@ -61,7 +61,7 @@ export default class AppInfoView extends BaseElement { const applicationName = createLabel({ id: 'app_name', innerText: 'Voice & Video', - className: `${classes['appInfoLabel']} ${classes['appName']} ${classes['fontNormal']} ${classes['fonrReadOnlyColor']}` + className: `${classes['appInfoLabel']} ${classes['appName']} ${classes['fontNormal']} ${classes['fontReadOnlyColor']}` }); applicationInfoContainer.appendChild(applicationNameLabel); @@ -81,7 +81,7 @@ export default class AppInfoView extends BaseElement { const applicationID = createLabel({ id: 'app_id', innerText: this.args.appId, - className: `${classes['appInfoLabel']} ${classes['appInfoIdLabel']} ${classes['fontNormal']} ${classes['fonrReadOnlyColor']}` + className: `${classes['appInfoLabel']} ${classes['appInfoIdLabel']} ${classes['fontNormal']} ${classes['fontReadOnlyColor']}` }); const appInfoIdCopy = createDiv({ From 49e923028bc18178df2f5b04da7bc19f1bf3cb85 Mon Sep 17 00:00:00 2001 From: danney-chun <63285271+danney-chun@users.noreply.github.com> Date: Fri, 19 Jun 2020 13:39:29 +0900 Subject: [PATCH 46/47] [CALLS-534]widget Sample App Design Improvements version change 1.0.1 -> 1.1.0 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 60bdf4c..2666a53 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "calls-quickstart", - "version": "1.0.1", + "version": "1.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index b3c7269..127f99d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "calls-quickstart", - "version": "1.0.1", + "version": "1.1.0", "description": "", "main": "app.js", "scripts": { From f241b57dbebbc2e1a01222c0f456cb252ff21b4d Mon Sep 17 00:00:00 2001 From: Junyoung Lim Date: Fri, 22 May 2020 17:47:20 +0900 Subject: [PATCH 47/47] Update SDK version to 1.1.3 --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2666a53..81c2241 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6121,9 +6121,9 @@ } }, "sendbird-calls": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/sendbird-calls/-/sendbird-calls-1.0.1.tgz", - "integrity": "sha512-f2EK+1dvaUnYrHYuyItpApi4RhQ3hEDnj2B3FuXlvF2K2BAVpr6F9DhaDs0Mqce8liiMEbx6+KLZ9zw1wNcxJA==" + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/sendbird-calls/-/sendbird-calls-1.1.3.tgz", + "integrity": "sha512-bYKg8eFCciQQM3Pj5auIsX51JK9xhyrzL7zZpKZMQTJneA981BhxG0scNmHr+5DovdcnZHqgUoxUkCrIxFwVjw==" }, "serialize-javascript": { "version": "2.1.2", diff --git a/package.json b/package.json index 127f99d..20ae896 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "express": "^4.17.1", "jss": "^10.0.3", "jss-preset-default": "^10.0.3", - "sendbird-calls": "^1.0.1", + "sendbird-calls": "^1.1.3", "uuid": "^3.3.3" } }