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 <[email protected]>

* Update lib/utils/domUtil.js

Co-authored-by: Dongjin Jung <[email protected]>

* Update lib/views/CallLogView.js

Co-authored-by: Dongjin Jung <[email protected]>

* [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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: Cobb Jung <[email protected]>
Co-authored-by: Junyoung Lim <[email protected]>
Co-authored-by: Junyoung Lim <[email protected]>

lib/components/Header.js

@@ -1,6 +1,6 @@
 import SendBirdCall from "sendbird-calls";
 import BaseElement from "./BaseElement";
-import { createDiv } from "../utils/domUtil";
+import { createDiv, replaceClassName } from "../utils/domUtil";
 import Menu from "../components/Menu";
 import { sheet, classes } from "../css/styles";
 
@@ -32,48 +32,66 @@ export default class Header extends BaseElement {
   }
 
   build() {
-    const userDiv = createDiv({
-      id: 'header_user_div',
-      className: `${classes['userDiv']} ${classes['center']}`
-    });
+    let userDiv = createDiv({ className: `${classes['userDiv']}` });
 
     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'] });
+      profileImg = createDiv({ className: classes['profileSmall'] });
     } else {
-      profileImg = createDiv({ id: 'header_avatar', className: `${classes['avatar']}` });
+      profileImg = createDiv({ className: `${classes['avatar']}` });
     }
 
-    const headerInfo = createDiv({ id: 'header_info', className: `${classes['headerInfo']}` });
-    const userId = createDiv({
-      id: 'header_user_id',
-      className: `${classes['headerUserId']} ${classes['fontMidBig']} ${classes['fontDemi']}`,
-      innerText: this.args.user.userId || ''
-    });
+    const headerInfo = createDiv({ className: `${classes['headerInfo']}` });
     const nickname = createDiv({
-      id: 'header_nickname',
-      className: `${classes['headerNickname']} ${classes['fontSmall']}`,
-      innerText: this.args.user.nickname || 'no nickname'
+      className: (this.args.isWidget)
+        ? `${classes['headerNickname']} ${classes['fontMidBig']} ${classes['fontDemi']}`
+        : `${classes['headerNickname']} ${classes['fontNormal']} ${classes['fontDemi']}`,
+      innerText: this.args.user.nickname || '—'
+    });
+    const userId = createDiv({
+      className: `${classes['headerUserId']} ${classes['fontSmall']}`,
+      innerText: `User ID: ${this.args.user.userId || ''}`
     });
-    headerInfo.appendChild(userId);
     headerInfo.appendChild(nickname);
+    headerInfo.appendChild(userId);
 
     userDiv.appendChild(profileImg);
     userDiv.appendChild(headerInfo);
 
+    let userDivMenu;
+    if (!this.args.isWidget) {
+      const userDetail = userDiv.cloneNode(true);
+      replaceClassName(userDetail, classes['userDiv'], classes['userDetail']);
+
+      userDivMenu = new Menu({
+        element: userDiv,
+        items: [
+          {
+            element: userDetail,
+            disabled: true,
+          },
+          {
+            label: 'Sign out',
+            callback: () => {
+              SendBirdCall.deauthenticate();
+              this.sendToParent('deauthenticate');
+            }
+          }
+        ],
+        divider: createDiv({ className: classes['menuDivider']})
+      })
+    }
+
     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 = () => {
@@ -83,15 +101,18 @@ export default class Header extends BaseElement {
     headerButtons.appendChild(closeButton);
 
     const divider = createDiv({
-      id: 'header_divider',
       className: classes['headerDivider']
     });
 
-    this.element.appendChild(userDiv);
+    if (userDivMenu) {
+      userDivMenu.appendToBaseElement(this);
+    } else {
+      this.element.appendChild(userDiv);
+    }
     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);
     }

lib/components/Menu.js

@@ -1,12 +1,13 @@
 import BaseElement from "./BaseElement";
-import {createButton, createDiv, createLabel} from "../utils/domUtil";
+import { createButton, createDiv, createLabel } from "../utils/domUtil";
 import { classes } from "../css/styles";
 
 export default class Menu extends BaseElement {
-  constructor({ id, className, parent, element, items } = {}) {
+  constructor({ id, className, divider, parent, element, items } = {}) {
     super({ id, className, parent, element });
 
     this.items = items;
+    this.divider = divider;
     this.opened = false;
   }
 
@@ -19,23 +20,34 @@ export default class Menu extends BaseElement {
       this.style.backgroundColor = '';
     });
 
-    this.menuItems = createDiv({ className: `${classes['menuItems']} ${classes['hidden']}` });
+    this.menuItemsDiv = createDiv({ className: `${classes['menuItemsDiv']} ${classes['hidden']}` });
 
-    this.items.forEach((item) => {
-      const { label, callback } = item;
-      const labelElem = createLabel({
+    this.items.forEach((item, idx) => {
+      const { label, element, disabled, callback } = item;
+      const labelElem = element || createLabel({
         className: `${classes['fontNormal']} ${classes['fontHeavy']}`,
         innerText: label
       });
-      const itemElem = createButton({ className: `${classes['btn']} ${classes['menuItem']}` });
-      itemElem.onclick = () => {
-        callback();
-      };
+      const itemElem = createButton({
+        className: `${classes['btn']} ${disabled ? classes['disabledMenuItem'] : classes['menuItem']}`
+      });
+
+      if (callback) {
+        itemElem.onclick = () => {
+          callback();
+        };
+      }
+
       itemElem.appendChild(labelElem);
-      this.menuItems.appendChild(itemElem);
+      this.menuItemsDiv.appendChild(itemElem);
+
+      if (this.divider && idx < (this.items.length - 1)) {
+        const divider = this.divider.cloneNode(true);
+        this.menuItemsDiv.appendChild(divider);
+      }
     });
 
-    this.element.appendChild(this.menuItems);
+    this.element.appendChild(this.menuItemsDiv);
     this.element.onclick = (e) => {
       e.stopPropagation();
       if (this.opened) {
@@ -51,12 +63,12 @@ export default class Menu extends BaseElement {
   }
 
   show() {
-    this.menuItems.classList.remove(classes['hidden']);
+    this.menuItemsDiv.classList.remove(classes['hidden']);
     this.opened = true;
   }
 
   hide() {
-    this.menuItems.classList.add(classes['hidden']);
+    this.menuItemsDiv.classList.add(classes['hidden']);
     this.opened = false;
   }
-}
+}