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

Commit 61d7724

Browse files
danney-chundanney-chun
committed
[CALLS-700]Call history design implementation
1. add call-log view in widget mode
1 parent b2a8f50 commit 61d7724

File tree

11 files changed

+300
-121
lines changed

11 files changed

+300
-121
lines changed

‎lib/assets/ic-layout-default.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎lib/assets/ic-logo-horizontal.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎lib/components/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default class App extends BaseElement {
4545
const pageClass = this.pages[_pageName];
4646
const view = new pageClass(opt);
4747
view.appendToBaseElement(this);
48-
48+
4949
if (this.onPageChange) this.onPageChange(_pageName);
5050
}
5151
}

‎lib/components/Header.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ export default class Header extends BaseElement {
2323
}
2424
}
2525
];
26+
27+
this.args = args;
28+
this.parent = parent;
2629
}
2730

2831
build() {
@@ -71,7 +74,7 @@ export default class Header extends BaseElement {
7174
className: `${classes['closeButton']}`
7275
});
7376
closeButton.onclick = () => {
74-
this.element.sendToParent('widgetclose');
77+
this.parent.sendToParent('widgetclose');
7578
};
7679
settingsButton.appendToHTML(headerButtons);
7780
headerButtons.appendChild(closeButton);
@@ -81,11 +84,13 @@ export default class Header extends BaseElement {
8184
className: classes['headerDivider']
8285
});
8386

84-
const headerLogo = createDiv({ id: 'header_logo', className: `${classes['headerLogo']}`});
85-
8687
this.element.appendChild(userDiv);
8788
this.element.appendChild(divider);
8889
this.element.appendChild(headerButtons);
89-
this.element.appendChild(headerLogo);
90+
91+
if( !this.args.isWidget ){
92+
const headerLogo = createDiv({ id: 'header_logo', className: `${classes['headerLogo']}`});
93+
this.element.appendChild(headerLogo);
94+
}
9095
}
9196
}

‎lib/components/MainApp.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ export default class MainApp extends App {
181181
this.recvClose(value);
182182
break;
183183
case 'show_calllog':
184-
this.route('calllog_view', {});
184+
this.route('calllog_view', {args: this.args});
185185
break;
186186
case 'show_dial':
187187
this.route('dial_view', {});
@@ -220,8 +220,8 @@ export default class MainApp extends App {
220220
}
221221

222222
createHeaderNTab() {
223-
const HeaderItem = new Header({element: createDiv({ id: 'header', className: `${classes['widgetHeader']}`})});
224-
const tabToolBar = new TabToolBar({element: createDiv({id: 'tabtoolbar', className: `${classes['tabToolBar']}`})});
223+
const HeaderItem = new Header({parent: this, element: createDiv({ id: 'header', className: `${classes['widgetHeader']}`})});
224+
const tabToolBar = new TabToolBar({ parent: this, element: createDiv({id: 'tabtoolbar', className: `${classes['tabToolBar']}`}), args: this.args });
225225

226226
HeaderItem.appendToBaseElement(this);
227227
tabToolBar.appendToBaseElement(this);

‎lib/components/TabToolBar.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,18 @@ import { createDiv, createParagraph, replaceClassName, hasClassName } from "../u
33
import { classes } from "../css/styles";
44

55
export default class TabToolBar extends BaseElement {
6-
constructor({ id, className, parent, element } = {}) {
6+
constructor({ id, className, parent, element, args } = {}) {
77
super({ id, className, parent, element });
88
this.element = element;
9+
this.args = args;
910
}
1011

1112
build() {
12-
// dial tab
13-
const btnDial = createDiv({id: 'btn_tab_dial', className: `${classes['btnTab']}`});
13+
// dial tab
14+
if( this.args.isWidget ) {
15+
this.element.classList.add(classes['tabToolBarWidget']);
16+
}
17+
const btnDial = createDiv({ id: 'btn_tab_dial', className: `${classes['btnTab']}` });
1418
const icoTabDial = createDiv({id: 'ico_tab_dial', className: `${classes['tabIco']} ${classes['dialActive']}`});
1519
const btnDialCaption = createParagraph({id: 'btn_dial_caption', innerText: 'dial', className: `${classes['fontNormal']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabActive']}`});
1620

@@ -28,6 +32,10 @@ export default class TabToolBar extends BaseElement {
2832
}
2933
};
3034

35+
if( this.args.isWidget ) {
36+
btnDial.classList.add(classes['btnTabWidget']);
37+
}
38+
3139
const btnCallLog = createDiv({id: 'btn_tab_calllog', className: `${classes['btnTab']}`});
3240
const icoCallLog = createDiv({id: 'ico_tab_callog', className: `${classes['tabIco']} ${classes['callLogDeactive']}`});
3341
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 {
4755
}
4856
};
4957

58+
if( this.args.isWidget ) {
59+
btnCallLog.classList.add(classes['btnTabWidget']);
60+
}
61+
5062
this.element.appendChild(btnDial);
5163
this.element.appendChild(btnCallLog);
5264
}

‎lib/components/WidgetApp.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export default class WidgetApp extends BaseElement {
6363

6464
build() {
6565
if (!this.widgetIcon) this.widgetIcon = createDiv({ id: 'widget_icon', className: classes['widgetIcon'] });
66+
this.args.isWidget = true;
6667
this.mainApp = new MainApp({
6768
className: `${classes['widgetDiv']} ${classes['hidden']}`,
6869
pages: this.pages,

‎lib/css/styles.js‎

Lines changed: 124 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ import callhistoryIconActive from '../assets/ic-layout-default-active.svg';
3131
import headerLogo from '../assets/ic-logo-horizontal-inverse-01.svg';
3232
import thumbnailVideo from '../assets/ic-video-thumbnail-filled.svg';
3333
import thumbnailVoice from '../assets/ic-call-filled.svg';
34+
import callLogEmpty from '../assets/ic-layout-default.svg';
35+
import logoHorizon from '../assets/ic-logo-horizontal.svg';
3436

3537

3638

@@ -250,6 +252,8 @@ const styles = {
250252

251253
viewSettings: {
252254
position: 'absolute',
255+
left: '0px',
256+
top: '0px',
253257
width: '100%',
254258
height: '100%',
255259
zIndex: '100',
@@ -330,6 +334,19 @@ const styles = {
330334
'-moz-osx-font-smoothing': 'grayscale'
331335
},
332336

337+
font16: {
338+
fontFamily: 'Avenir Next',
339+
fontSize: '16px',
340+
fontWeight: 'normal',
341+
fontStretch: 'normal',
342+
fontStyle: 'normal',
343+
lineHeight: '1.25',
344+
letterSpacing: '-0.15px',
345+
textRendering: 'optimizelegibility',
346+
'-webkit-font-smoothing': 'antialiased',
347+
'-moz-osx-font-smoothing': 'grayscale'
348+
},
349+
333350
font20: {
334351
fontFamily: 'Avenir Next',
335352
fontSize: '20px',
@@ -342,6 +359,19 @@ const styles = {
342359
'-moz-osx-font-smoothing': 'grayscale'
343360
},
344361

362+
font24: {
363+
fontFamily: 'Avenir Next',
364+
fontSize: '24px',
365+
fontWeight: 'normal',
366+
fontStretch: 'normal',
367+
fontStyle: 'normal',
368+
lineHeight: '1.33',
369+
letterSpacing: '-0.25px',
370+
textRendering: 'optimizelegibility',
371+
'-webkit-font-smoothing': 'antialiased',
372+
'-moz-osx-font-smoothing': 'grayscale'
373+
},
374+
345375
fontBig: {
346376
fontFamily: 'Avenir Next',
347377
height: '32px',
@@ -373,16 +403,30 @@ const styles = {
373403
height: '55px',
374404
backgroundColor: colors.white,
375405
textAlign: 'center',
406+
borderTop: 'solid 1px #dee2f2',
376407
borderBottom: 'solid 1px #dee2f2'
377408
},
378409

410+
tabToolBarWidget: {
411+
position: 'absolute',
412+
display: 'inline-block',
413+
bottom: '0px',
414+
left: '0px',
415+
borderBottomLeftRadius: '8px',
416+
borderBottomRightRadius: '8px'
417+
},
418+
379419
btnTab: {
380420
display: 'inline-block',
381421
width: '100px',
382422
height: '55px',
383423
cursor: 'pointer'
384424
},
385425

426+
btnTabWidget: {
427+
width: '156px',
428+
},
429+
386430
tabIco: {
387431
width: '100%',
388432
height: '32px',
@@ -841,11 +885,14 @@ const styles = {
841885
}
842886
},
843887
'& $viewDial': {
888+
height: 'calc(100% - 136px)',
844889
'& $content': {
845-
marginTop: '144px'
890+
// marginTop: '144px'
891+
margin: 'auto'
846892
},
847893
'& $versionInfo': {
848-
display: 'flex'
894+
// display: 'flex'
895+
display: 'none'
849896
}
850897
},
851898
'& $widgetHeader': {
@@ -912,9 +959,7 @@ const styles = {
912959
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)',
913960
backgroundColor: colors.white,
914961
overflow: 'hidden',
915-
flexDirection: 'column',
916-
alignItems: 'center',
917-
justifyContent: 'center'
962+
display: 'block'
918963
},
919964

920965
widgetIcon: {
@@ -1063,14 +1108,61 @@ const styles = {
10631108
callLogListContainer: {
10641109
display: 'inline-block',
10651110
position: 'relative',
1066-
width: '382px',
10671111
height: 'calc(100% - 103px)',
1112+
height: '100%',
10681113
overflowY: 'auto',
10691114
listStyle: 'none',
10701115
margin: '0',
10711116
padding: '0',
10721117
},
10731118

1119+
callLogListDesc: {
1120+
display: 'inline-flex',
1121+
position: 'absolute',
1122+
width: 'calc(100% - 382px)',
1123+
height: 'calc(100% - 103px)',
1124+
margin: '0',
1125+
padding: '0',
1126+
right: '0px',
1127+
justifyContent: 'center',
1128+
alignItems: 'center',
1129+
flexDirection: 'column'
1130+
},
1131+
1132+
callLogDescLogo: {
1133+
display: 'block',
1134+
position: 'relative',
1135+
width: '100%',
1136+
height: '40px',
1137+
backgroundImage: `url(${logoHorizon})`,
1138+
backgroundPosition: 'center',
1139+
backgroundRepeat: 'no-repeat'
1140+
},
1141+
1142+
callLogDescTitle: {
1143+
position: 'relative',
1144+
width: '100%',
1145+
height: '32px',
1146+
textAlign: 'center',
1147+
marginTop: '24px',
1148+
color: colors.navy900
1149+
},
1150+
1151+
callLogDescLabel: {
1152+
position: 'relative',
1153+
width: '275px',
1154+
height: '40px',
1155+
textAlign: 'center',
1156+
marginTop: '16px',
1157+
color: colors.navy600
1158+
},
1159+
1160+
widgetCallLog: {
1161+
height: '100%',
1162+
width: '100%',
1163+
overflowX: 'hidden',
1164+
},
1165+
10741166
/* call Log item */
10751167
callLogItemWrap: {
10761168
display: 'flex',
@@ -1084,6 +1176,32 @@ const styles = {
10841176
paddingBottom: '5px',
10851177
},
10861178

1179+
callLogEmptyWrap: {
1180+
position: 'relative',
1181+
width: '312px',
1182+
height: '116px',
1183+
marginTop: '158px',
1184+
marginLeft: '32px',
1185+
},
1186+
1187+
icoCallLogEmpty: {
1188+
display: 'inline-block',
1189+
width: '100%',
1190+
height: '64px',
1191+
backgroundImage: `url(${callLogEmpty})`,
1192+
backgroundPosition: 'center',
1193+
backgroundRepeat: 'no-repeat'
1194+
},
1195+
1196+
labelCallLogEmpty: {
1197+
display: 'inline-block',
1198+
width: '100%',
1199+
height: '20px',
1200+
marginTop: '12px',
1201+
textAlign: 'center',
1202+
color: colors.navy600
1203+
},
1204+
10871205
callLogTypeDiv: {
10881206
display: 'inline-flex',
10891207
width: '44px',

0 commit comments

Comments
 (0)