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

Author: danney-chun

.gitignore

@@ -102,3 +102,4 @@ dist
 
 # TernJS port file
 .tern-port
+.DS_Store

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;
+  }

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: {

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: {
     },