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

Commit 6285990

Browse files
danney-chunDongjin JungCobb Junggit-babel
authored
patched sample 1.2.0 (#6)
* 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 * [CALLS-700]Call history design implementation 1. add call-log view in widget mode * [CALLS-700]Call history design implementation 1. add profile image loading error exception. * call duration time bug fixed 1. body tag css is modified 2. dial_view height value is modified. * [CALLS-700]Call history design implementation 1. intentation size change. 2. voice call bug fix in the call log * Update lib/views/CallLogView.js Co-authored-by: Dongjin Jung <cobb.jung@sendbird.com> * Update lib/utils/domUtil.js Co-authored-by: Dongjin Jung <cobb.jung@sendbird.com> * Update lib/views/CallLogView.js Co-authored-by: Dongjin Jung <cobb.jung@sendbird.com> * [CALLS-700]Call history design implementation review apply * Update gitignore Add Editor configuration files into gitignore. Editors : Webstorm, VSCode * Update logo images Altered previous logos with new one. * [CALLS-700]Call history design implementation apply review comment. * Add alt property into img tags * 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 * Update widget.html * template * calls-534 not complete issue * [CALLS-534]widget Sample App Design Improvements 1. fixed disign issue 2. add application information menu * [CALLS-534]widget Sample App Design Improvements small video view add border radius. * [CALLS-534]widget Sample App Design Improvements apply review. * [CALLS-534] widget Sample App Design Improvements apply review * [CALLS-534]widget Sample App Design Improvements remove place holder text * [CALLS-534]widget Sample App Design Improvements apply review * [CALLS-534]widget Sample App Design Improvements apply review * rollback_#1 rollback_#1 * Update index.html * [CALLS-534]widget Sample App Design Improvements rollback_again_#1 * [CALLS-534]widget Sample App Design Improvements change main.css indent * [CALLS-534]widget Sample App Design Improvements last commit version * Update main.css 1. remove desc-quick, choose-a-type 2. change css class name * Fix main.css indentation * [CALLS-534]widget Sample App Design Improvements "this.args = args" remove * [CALLS-534]widget Sample App Design Improvements add '--navy-600' color value. * [CALLS-534]widget Sample App Design Improvements apply review * [CALLS-534]widget Sample App Design Improvements update description in index.html * [CALLS-534]widget Sample App Design Improvements color code --> color variable in main.css * Update main.css * [CALLS-534]widget Sample App Design Improvements 1. remove antialiased attribute in text 2. add line break in case of display long nickname * Update main.css indent change 4 --> 2 * [CALLS-534]widget Sample App Design Improvements Design QA apply 1. text antialiasing off 2. add shdow widget button * [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 * Update CallView.js remote test code * [CALLS-534]widget Sample App Design Improvements 1. set font-smoothing 2. change toast noti position to center in widget * [CALLS-534]widget Sample App Design Improvements 1. nickname color font property change. 2. sign-in button font property change * [CALLS-534]widget Sample App Design Improvements Fix typo * [CALLS-534]widget Sample App Design Improvements version change 1.0.1 -> 1.1.0 * Update SDK version to 1.1.3 * Update design * Use short-handed operator Co-authored-by: Dongjin Jung <cobb.jung@sendbird.com> * Add playsinline in video tag * Fix minors * Avoid the reuse of the same name * Update UI by design QA * Change border of list item from top to bottom * Prevent word break in headerInfo * Fix CallLogView styles * Update SDK version to 1.2.4 * Fix CallLogView styles (2) Co-authored-by: Dongjin Jung <cobb.jung@sendbird.com> Co-authored-by: Cobb Jung <jungdj@kaist.ac.kr> Co-authored-by: Junyoung Lim <junyoung.lim@sendbird.com> Co-authored-by: Junyoung Lim <git-babel@users.noreply.github.com>
1 parent 473412f commit 6285990

File tree

9 files changed

+189
-84
lines changed

9 files changed

+189
-84
lines changed

‎lib/components/Header.js‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import SendBirdCall from "sendbird-calls";
22
import BaseElement from "./BaseElement";
3-
import { createDiv } from "../utils/domUtil";
3+
import { createDiv, replaceClassName } from "../utils/domUtil";
44
import Menu from "../components/Menu";
55
import { sheet, classes } from "../css/styles";
66

@@ -32,48 +32,66 @@ export default class Header extends BaseElement {
3232
}
3333

3434
build() {
35-
const userDiv = createDiv({
36-
id: 'header_user_div',
37-
className: `${classes['userDiv']} ${classes['center']}`
38-
});
35+
let userDiv = createDiv({ className: `${classes['userDiv']}` });
3936

4037
let profileImg;
4138
if (this.args.user && this.args.user.profileUrl) {
4239
sheet.update({ profileUrl: this.args.user.profileUrl });
43-
profileImg = createDiv({ id: 'header_profile_img', className: classes['profileSmall'] });
40+
profileImg = createDiv({ className: classes['profileSmall'] });
4441
} else {
45-
profileImg = createDiv({ id: 'header_avatar', className: `${classes['avatar']}` });
42+
profileImg = createDiv({ className: `${classes['avatar']}` });
4643
}
4744

48-
const headerInfo = createDiv({ id: 'header_info', className: `${classes['headerInfo']}` });
49-
const userId = createDiv({
50-
id: 'header_user_id',
51-
className: `${classes['headerUserId']} ${classes['fontMidBig']} ${classes['fontDemi']}`,
52-
innerText: this.args.user.userId || ''
53-
});
45+
const headerInfo = createDiv({ className: `${classes['headerInfo']}` });
5446
const nickname = createDiv({
55-
id: 'header_nickname',
56-
className: `${classes['headerNickname']} ${classes['fontSmall']}`,
57-
innerText: this.args.user.nickname || 'no nickname'
47+
className: (this.args.isWidget)
48+
? `${classes['headerNickname']} ${classes['fontMidBig']} ${classes['fontDemi']}`
49+
: `${classes['headerNickname']} ${classes['fontNormal']} ${classes['fontDemi']}`,
50+
innerText: this.args.user.nickname || '—'
51+
});
52+
const userId = createDiv({
53+
className: `${classes['headerUserId']} ${classes['fontSmall']}`,
54+
innerText: `User ID: ${this.args.user.userId || ''}`
5855
});
59-
headerInfo.appendChild(userId);
6056
headerInfo.appendChild(nickname);
57+
headerInfo.appendChild(userId);
6158

6259
userDiv.appendChild(profileImg);
6360
userDiv.appendChild(headerInfo);
6461

62+
let userDivMenu;
63+
if (!this.args.isWidget) {
64+
const userDetail = userDiv.cloneNode(true);
65+
replaceClassName(userDetail, classes['userDiv'], classes['userDetail']);
66+
67+
userDivMenu = new Menu({
68+
element: userDiv,
69+
items: [
70+
{
71+
element: userDetail,
72+
disabled: true,
73+
},
74+
{
75+
label: 'Sign out',
76+
callback: () => {
77+
SendBirdCall.deauthenticate();
78+
this.sendToParent('deauthenticate');
79+
}
80+
}
81+
],
82+
divider: createDiv({ className: classes['menuDivider']})
83+
})
84+
}
85+
6586
const headerButtons = createDiv({
66-
id: 'header_buttons',
6787
className: `${classes['headerButtons']} ${classes['row']} ${classes['center']}`
6888
});
6989
const settingsButton = new Menu({
70-
id: 'settings_button',
7190
element: createDiv({ className: `${classes['settingsButton']}` }),
7291
items: this.settingItems
7392
});
7493

7594
const closeButton = createDiv({
76-
id: 'close_button',
7795
className: `${classes['closeButton']}`
7896
});
7997
closeButton.onclick = () => {
@@ -83,15 +101,18 @@ export default class Header extends BaseElement {
83101
headerButtons.appendChild(closeButton);
84102

85103
const divider = createDiv({
86-
id: 'header_divider',
87104
className: classes['headerDivider']
88105
});
89106

90-
this.element.appendChild(userDiv);
107+
if (userDivMenu) {
108+
userDivMenu.appendToBaseElement(this);
109+
} else {
110+
this.element.appendChild(userDiv);
111+
}
91112
this.element.appendChild(divider);
92113
this.element.appendChild(headerButtons);
93114

94-
if(!this.args.isWidget){
115+
if (!this.args.isWidget) {
95116
const headerLogo = createDiv({ id: 'header_logo', className: `${classes['headerLogo']}`});
96117
this.element.appendChild(headerLogo);
97118
}

‎lib/components/Menu.js‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import BaseElement from "./BaseElement";
2-
import {createButton, createDiv, createLabel} from "../utils/domUtil";
2+
import { createButton, createDiv, createLabel } from "../utils/domUtil";
33
import { classes } from "../css/styles";
44

55
export default class Menu extends BaseElement {
6-
constructor({ id, className, parent, element, items } = {}) {
6+
constructor({ id, className, divider, parent, element, items } = {}) {
77
super({ id, className, parent, element });
88

99
this.items = items;
10+
this.divider = divider;
1011
this.opened = false;
1112
}
1213

@@ -19,23 +20,34 @@ export default class Menu extends BaseElement {
1920
this.style.backgroundColor = '';
2021
});
2122

22-
this.menuItems = createDiv({ className: `${classes['menuItems']} ${classes['hidden']}` });
23+
this.menuItemsDiv = createDiv({ className: `${classes['menuItemsDiv']} ${classes['hidden']}` });
2324

24-
this.items.forEach((item) => {
25-
const { label, callback } = item;
26-
const labelElem = createLabel({
25+
this.items.forEach((item, idx) => {
26+
const { label, element, disabled, callback } = item;
27+
const labelElem = element || createLabel({
2728
className: `${classes['fontNormal']} ${classes['fontHeavy']}`,
2829
innerText: label
2930
});
30-
const itemElem = createButton({ className: `${classes['btn']} ${classes['menuItem']}` });
31-
itemElem.onclick = () => {
32-
callback();
33-
};
31+
const itemElem = createButton({
32+
className: `${classes['btn']} ${disabled ? classes['disabledMenuItem'] : classes['menuItem']}`
33+
});
34+
35+
if (callback) {
36+
itemElem.onclick = () => {
37+
callback();
38+
};
39+
}
40+
3441
itemElem.appendChild(labelElem);
35-
this.menuItems.appendChild(itemElem);
42+
this.menuItemsDiv.appendChild(itemElem);
43+
44+
if (this.divider && idx < (this.items.length - 1)) {
45+
const divider = this.divider.cloneNode(true);
46+
this.menuItemsDiv.appendChild(divider);
47+
}
3648
});
3749

38-
this.element.appendChild(this.menuItems);
50+
this.element.appendChild(this.menuItemsDiv);
3951
this.element.onclick = (e) => {
4052
e.stopPropagation();
4153
if (this.opened) {
@@ -51,12 +63,12 @@ export default class Menu extends BaseElement {
5163
}
5264

5365
show() {
54-
this.menuItems.classList.remove(classes['hidden']);
66+
this.menuItemsDiv.classList.remove(classes['hidden']);
5567
this.opened = true;
5668
}
5769

5870
hide() {
59-
this.menuItems.classList.add(classes['hidden']);
71+
this.menuItemsDiv.classList.add(classes['hidden']);
6072
this.opened = false;
6173
}
62-
}
74+
}

0 commit comments

Comments
 (0)